---
title: Checkout Kit for React Native
description: Learn how to integrate Checkout Kit using React Native
source_url:
  html: https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native
  md: https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native.md
---

ExpandOn this page

* [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#what-youll-learn)
* [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#requirements)
* [Step 1: Install the Shopify Checkout Kit package dependency](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#step-1-install-the-shopify-checkout-kit-package-dependency)
* [Step 2: Import the library](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#step-2-import-the-library)
* [Step 3: Present the checkout through a checkout URL or cart permalink](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#step-3-present-the-checkout-through-a-checkout-url-or-cart-permalink)

# Checkout Kit for React Native

Checkout Kit is an open-source [NPM package](https://github.com/Shopify/checkout-sheet-kit-react-native/blob/main) that allows you to integrate Shopify's checkout in your mobile app. To get started, see our [sample projects](https://github.com/Shopify/checkout-sheet-kit-react-native/tree/main/sample), or follow the steps below to integrate it into your own project.

***

## What you'll learn

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

***

## Requirements

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

***

## Step 1: Install the Shopify Checkout Kit package dependency

## Install the package dependency

```javascript
npm install @shopify/checkout-sheet-kit
```

***

## Step 2: Import the library

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

## Import the library

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


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

***

## Step 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](https://shopify.dev/docs/api/storefront) to build a cart and load its [checkout URL](https://shopify.dev/docs/api/storefront/2023-10/objects/Cart#field-cart-checkouturl). Or, you can provide a [cart permalink](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks).

`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

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


function App() {
  const shopifyCheckout = useShopifyCheckoutSheet();
  const handleClick = () => {
    // Present the checkout
    shopifyCheckout.present(checkoutUrl);
  }
}
```

***

* [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#what-youll-learn)
* [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#requirements)
* [Step 1: Install the Shopify Checkout Kit package dependency](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#step-1-install-the-shopify-checkout-kit-package-dependency)
* [Step 2: Import the library](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#step-2-import-the-library)
* [Step 3: Present the checkout through a checkout URL or cart permalink](https://shopify.dev/docs/storefronts/mobile/checkout-kit/react-native#step-3-present-the-checkout-through-a-checkout-url-or-cart-permalink)