Best way to integrate Shopify checkout into a custom React (TypeScript) app?

Shopify App Store
1

I’m building a custom React (TypeScript) web app where I control the full user onboarding flow (multiple steps before purchase).

What I want to achieve:

  • Keep the entire product selection and cart experience inside my React app

  • Then redirect users to Shopify for the final checkout/payment

I’ve already managed to:

  • Create products in Shopify

  • Generate cart URLs using variant IDs (e.g. /cart/variant:qty)

  • Redirect users successfully to Shopify checkout

However, I’m unsure about the best long-term approach.

Specifically:

  1. Is using cart URLs the recommended approach, or should I be using the Storefront API instead?

  2. If Storefront API is preferred, where exactly do I generate the Storefront API public access token in the new Shopify Dev Dashboard flow?

  3. Is it possible (or recommended) to embed any part of Shopify (cart/checkout) inside my React app, or should checkout always remain hosted by Shopify?

  4. What’s the cleanest way to validate a successful checkout and sync it back to my backend? (webhooks vs redirect handling)

Context:

  • I don’t need a full Shopify storefront UI

  • I only need Shopify for products + checkout

  • Everything else is handled in my custom app

Any guidance or best practices would be hugely appreciated

1 Like
2

is it possible to generate the Storefront API public access token in the new Shopify Dev Dashboard flow? I have the basic subscription version.

Can someone help, please?

3

I’ve got it working now using the links for the products seperately/combined/in the cart individually/combined in the cart - where i just redirect the user to the URLs.

What i’m needing now, is a way to redirect from the shopify site after payment has been made and back to our internal react app, but i dont see that option in the dashboard unless i get the plus subscription - is that correct?

does anyone here know?

4

Hey @Jess,

For your Storefront API access token, the cleanest way to get that is through the Headless channel. Install it from the App Store, click Create storefront, and it generates your public and private access tokens right there. This works on all plans, no Plus required.

For the cart side of things, since what you are building is headless the Storefront API Cart is the recommended approach. You manage the cart state in your React app and then use the checkoutUrl field returned on the Cart object to redirect users to the checkout when they’re ready to pay. The full guide on managing carts is here.

For the post-purchase redirect question, here’s a breakdown of all the customization options available for the thank-you and order status pages depending on your plan: Thank you & order status customization options.