FROM CACHE - en_header

How to Navigate to the Checkout screen of shopify with Graphql from reactnative app using storefront

ChandaneshKC32
Tourist
10 0 2

Hi All,

Am using JS SDK to fetch all the products from Shopify and then to show them in my UI but the next goal is to create checkout and as I have gone through the blog: https://github.com/Shopify/storefront-api-examples (React-js buy example) they are navigating to the graphql screen of Shopify(Image attached below).

How to navigate from react-native application to this screen?

Will be glad If anyone helps me in this and thanks for taking the time to read this.

Checkout ScreenCheckout Screen

Replies 3 (3)
achieveapplabs
Shopify Partner
551 39 91

Hi @ChandaneshKC32 

 

Welcome to the community. Since you're using JS SDK you can call create method on checkout and access webUrl property on the returned object. Please read below I left some references and some example code:

 

https://shopify.github.io/js-buy-sdk/#creating-a-checkout

 

https://shopify.dev/docs/storefront-api/reference/object/checkout?api[version]=2020-04

 

// Create an empty checkout
client.checkout.create().then((checkout) => {
  // Do something with the checkout
  window.location.href = checkout.webUrl; 
});

Best,


Sam

We make Shopify apps. Looking for Shopify app development? Let's chat
dbroadhurst
New Member
1 0 0

How can I customize the checkout? I've looked through all the liquid templates but can't seem to find the right template.

achieveapplabs
Shopify Partner
551 39 91

that would be in templates/checkout-template.liquid which becomes accessible for Shopify Plus members.

We make Shopify apps. Looking for Shopify app development? Let's chat