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

Highlighted
New Member
6 0 0

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

0 Likes
Highlighted
Shopify Partner
347 25 51

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

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
0 Likes
Highlighted
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.

0 Likes
Highlighted
Shopify Partner
347 25 51

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

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
0 Likes