React Native Custom Checkout

Retired Boards Appdev Custom Storefronts

Topic summary

React Native app uses Storefront API and opens checkoutUrl in a WebView for checkout. WebView causes problematic navigation (e.g., Continue Shopping, header logo to homepage, cart icon, and Thank You page links like Subscription Management to Account). Google Pay is not working in WebView per Shopify’s checkout-sheet-kit-react-native issue #56.

Key questions:

  • Can a different checkout profile be used for headless (app) checkout than the one on the Storefront (e.g., select a draft profile by ID)? Goal: disable express checkout (Google Pay) in the app while keeping it on the Storefront, and tailor checkout for native-specific needs.
  • Recommended approach to handle/contain links inside checkout so users don’t navigate out of the WebView? Current workaround hides elements via injectedJavaScript and uses onNavigationStateChange to detect leaving /checkout and then closes the WebView; seeking a more robust, elegant solution with better UX control.

Status: No answers yet; guidance requested on alternate checkout profile selection and best practices for managing navigation and payment options in WebView-based checkout.

Summarized with AI on January 4. AI used: gpt-5.
1

I am currently creating a React Native app using an existing Storefront to access via the Storefront API. From there I am leveraging the checkoutUrl on the created cart object to pass into a Webview to provide the checkout experience (i believe this is the preferred way to use the Shopify Checkout?). The issue I am having is that there are multiple things that are handled poorly when in a webview (links that navigate outside of checkout such as “Continue Shopping”, Header logo to return to homepage, Cart Icon to return to the cart, as well as similar links on the Thank You page such as Subscription Management that links to the Account) or just not supported (Google Pay doesnt seem to work in a webview as noted in your Checkout SDK repo: https://github.com/Shopify/checkout-sheet-kit-react-native/issues/56).

My questions are:

  1. Is there a way to use a different checkout profile for my headless checkout than what is published to the Storefront - possibly specify it by id if its saved as draft? I was thinking that maybe it would be possible to remove express checkout (Google Pay) for the app but keep it on for the Storefront? Also would allow us to adjust checkout for any other native specific use cases

  2. Is there a suggested solution for handling all of these links within checkout so that the customer doesn’t get into unusable situations where they have navigated away from checkout within the Webview. I have a “solution” where I use injectedJavaScript to hide areas (such as the header and continue shopping buttons) as well as onNavigationStateChange to detect if they have left the /checkout route, and close the webview if they have - but I was just hoping there was a more elegant solution that would allow us greater control of the UX.

Thank you,

1 Like