Skip to main content

Checkout Kit for React Native

Checkout Kit is an open-source NPM package that allows you to integrate Shopify's checkout in your mobile app. To get started, see our sample projects, or follow the steps below to integrate it into your own project.

Anchor to What you'll learnWhat you'll learn

  • Integrate Checkout Kit to your project
  • Present the checkout through a checkout URL or cart permalink

Anchor to RequirementsRequirements

  • React Native 0.70+
  • iOS 13+
  • Android SDK 23+ and Java 11+

Anchor to Step 1: Install the Shopify Checkout Kit package dependencyStep 1: Install the Shopify Checkout Kit package dependency

Install the package dependency

npm install @shopify/checkout-sheet-kit

Anchor to Step 2: Import the libraryStep 2: Import the library

After adding Checkout Kit as a dependency, you can import the library in your code:

Import the library

import {ShopifyCheckoutSheetProvider} from '@shopify/checkout-sheet-kit';

function AppWithContext() {
return (
<ShopifyCheckoutSheetProvider>
<App />
</ShopifyCheckoutSheetProvider>
);
}

Anchor to Step 3: Present the checkout through a checkout URL or cart permalinkStep 3: Present the checkout through a checkout URL or cart permalink

To present a checkout to the customer, your app must specify a checkout URL. To get this URL, you can use Storefront GraphQL API to build a cart and load its checkout URL. Or, you can provide a cart permalink.

checkoutUrl is a standard web checkout URL that can be opened in any browser.

To present the checkout in your mobile app, call present on ShopifyCheckoutSheetKit. Pass in the checkout URL, along with other runtime configuration settings, as shown in this code:

Present the checkout

import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';

function App() {
const shopifyCheckout = useShopifyCheckoutSheet();
const handleClick = () => {
// Present the checkout
shopifyCheckout.present(checkoutUrl);
}
}
Was this page helpful?