---
title: Set up accelerated checkouts for React Native
description: Learn how to add accelerated checkout buttons on product and cart pages in your React Native mobile app.
source_url:
html: https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native
md: https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native.md
---
ExpandOn this page
* [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#requirements)
* [Step 1: Install the package](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-1-install-the-package)
* [Step 2: Configure shop settings and Apple Pay integration](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-2-configure-shop-settings-and-apple-pay-integration)
* [Step 3: Add accelerated checkout buttons to your app](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-3-add-accelerated-checkout-buttons-to-your-app)
* [Step 4: Customize the buttons](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-4-customize-the-buttons)
* [Step 5 (Recommended): Handle component states](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-5-recommended-handle-component-states)
* [Step 6 (Optional): Handle checkout lifecycle events](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-6-optional-handle-checkout-lifecycle-events)
* [Troubleshooting](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#troubleshooting)
# Set up accelerated checkouts for React Native
This guide walks you through implementing accelerated checkouts in your React Native app. For an overview of accelerated checkouts and their benefits, see [About accelerated checkouts](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview).
Tip
For a complete example, all code samples in this tutorial are available in the [React Native sample app](https://github.com/Shopify/checkout-sheet-kit-react-native/tree/main/sample/ios).
***
## Requirements
* Your app is set up to run on iOS 16 and above.
* Your app has the `write_cart_wallet_payments` access scope, which you can [request from us directly](https://www.appsheet.com/start/1ff317b6-2da1-4f39-b041-c01cfada6098).
* You've completed the tutorial on [creating Apple Pay payment processing certificates](https://shopify.dev/docs/storefronts/mobile/create-apple-payment-processing-certificates).
* Your device is set up for Apple Pay. You'll need to [set up Apple Pay](https://developer.apple.com/documentation/passkit/setting-up-apple-pay), create an [Apple developer account](http://developer.apple.com/programs/enroll/), and test Apple Pay on a [supported device](https://support.apple.com/en-gb/102896).
***
## Step 1: Install the package
Add the `@shopify/checkout-sheet-kit` package to your project:
## Install package
```bash
npm install @shopify/checkout-sheet-kit@next
```
***
## Step 2: Configure shop settings and Apple Pay integration
Before you can use accelerated checkout buttons in your app, you will need to configure your shop settings and Apple Pay integration.
### Configure shop settings
Set up the connection between the accelerated checkout buttons and your Shopify store by creating a `Configuration` object. If you're already using the `ShopifyCheckoutSheetProvider` for Checkout Sheet Kit, then you can extend your current configuration to include an `acceleratedCheckouts` object.
## Shop configuration
```tsx
import { Configuration, ShopifyCheckoutSheetProvider, ApplePayContactField } from "@shopify/checkout-sheet-kit";
const checkoutKitConfiguration: Configuration = {
acceleratedCheckouts: {
storefrontDomain: "your-shop.myshopify.com",
storefrontAccessToken: "your-storefront-access-token",
// Provide customer details if known, otherwise pass `undefined`
customer: {
email: "customer@example.com",
phoneNumber: "0123456789",
accessToken: "your-customer-access-token",
},
wallets: {
applePay: {
merchantIdentifier: "merchant.com.yourcompany",
contactFields: [ApplePayContactField.email, ApplePayContactField.phone],
},
},
},
}
function App() {
return (
)
}
```
Note
In cases where the customer is unknown, pass `undefined` for the `customer` argument. You can update the customer information when details are available.
#### Specify required contact fields (Optional)
You can specify which contact fields are required during Apple Pay checkout:
## Required contact information
```tsx
// Require both email and phone
contactFields: [ApplePayContactField.email, ApplePayContactField.phone]
// Require only email
contactFields: [ApplePayContactField.email]
// Require only phone
contactFields: [ApplePayContactField.phone]
// No contact fields required (default)
contactFields: []
```
#### Restrict shipping countries (Optional)
You can restrict Apple Pay shipping addresses to specific countries using ISO 3166-1 alpha-2 country codes.
Important
The `supportedShippingCountries` parameter should only be used to specify supported shipping countries for Apple Pay when they differ from your store's other payment methods. If Apple Pay supports the same shipping countries as your store's general shipping configuration, this parameter is not needed—customers will automatically be directed to the Checkout Sheet to resolve any errors. Only use this parameter when Apple Pay has specific technical limitations that prevent shipping to certain countries that your store otherwise supports.
## Restrict shipping countries
```tsx
// Only allow shipping to US and Canada
wallets: {
applePay: {
merchantIdentifier: "merchant.com.yourcompany",
contactFields: [],
supportedShippingCountries: ["US", "CA"],
},
},
// Allow all countries (default behavior)
wallets: {
applePay: {
merchantIdentifier: "merchant.com.yourcompany",
contactFields: [],
// Omit supportedShippingCountries
},
},
```
***
## Step 3: Add accelerated checkout buttons to your app
Now that your configuration is complete, you can add accelerated checkout buttons to your cart and product pages.
### Implement accelerated checkout buttons on cart page
You can display the accelerated checkout buttons on the cart page by passing the cart ID to the component:
## Cart page implementation
```tsx
import { AcceleratedCheckoutButtons } from "@shopify/checkout-sheet-kit";
function CartView() {
return (
)
}
```
### Implement accelerated checkout buttons on product pages
You can display the accelerated checkout buttons on product pages by passing the product variant ID and quantity to the component. This creates a new checkout session with only the specified item.
## Product page implementation
```tsx
import { AcceleratedCheckoutButtons } from "@shopify/checkout-sheet-kit";
function ProductView() {
return (
)
}
```
***
## Step 4: Customize the buttons
### Customize wallet options
Configure which payment options are displayed. By default, both available payment buttons (Shop Pay and Apple Pay) are rendered. Render order is determined by the order you list them in the `wallets` prop.
## Customize wallet options
```tsx
// Default: Display all available buttons
// Display only Shop Pay
// Display only Apple Pay
// Display both Shop Pay and Apple Pay, in the order you specify
```
### Modify the Apple Pay button label
The `applePayLabel` might be used to modify the label in accordance to the [PayWithApplePayLabel](https://developer.apple.com/documentation/passkit/paywithapplepaybuttonlabel). Defaults to `.plain`.
## Modify Apple Pay label
```tsx
```
### Customize button appearance
You can customize the visual appearance of the accelerated checkout buttons to match other CTAs in your app using props.
#### Corner radius
Customize the corner radius of all checkout buttons with the `cornerRadius` prop. The default radius is set to 8px. Here are some examples:
## Customize corner radius
```tsx
// Default radius (8px) - works well with most modern app designs
// Match rounded buttons (e.g., if your app uses pill-shaped CTAs)
// Match sharp, minimal designs
// Match square buttons
```
***
## Step 5 (Recommended): Handle component states
The accelerated checkout buttons depend on the [shop](https://shopify.dev/docs/api/storefront/latest/objects/Shop) object from the Storefront API. This request is initiated by the first `AcceleratedCheckoutButtons` rendered, the response is stored in shared memory amongst other instances of the buttons for the duration of the app session.
Accelerated checkouts delegates to you for loading and error states that best match the style of your application. To facilitate this you may listen to the `onRenderStateChange` event callback.
## Component Lifecycle
```tsx
import { useState } from "react";
import { RenderState } from "@shopify/checkout-sheet-kit";
function CheckoutButtons() {
const [renderState, setRenderState] = useState(RenderState.loading);
function onRenderStateChange(state: RenderState) {
setRenderState(state);
}
if (renderState === RenderState.loading) {
return ;
}
if (renderState === RenderState.error) {
return ;
}
return (
);
}
```
***
## Step 6 (Optional): Handle checkout lifecycle events
You can respond to checkout [lifecycle events](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle) using the provided event handlers:
## Event handling
```tsx
{
// Navigate to order details screen `event.orderDetails.id`
}}
onFail={(error) => {
// Show error alert
}}
onCancel={() => {
// Reset state
}}
onWebPixelEvent={(event) => {
// Track analytics event
}}
onClickLink={(url) => {
// Handle external links
}}
/>
```
Note
When Apple Pay encounters an error, the SDK automatically falls back to the full checkout sheet before triggering the `onFail()` handler. This built-in recovery mechanism ensures that customers can complete their purchase using alternative payment methods.
### Clear cart state after checkout
Cart IDs expire after accelerated checkout completes. To prevent subsequent failures after a successful checkout, you must clear your local cart state in the `onComplete` handler. For example:
## Clear cart state after checkout
```tsx
{
// Clear cart state
}}
/>
```
***
## Troubleshooting
If you encounter issues with accelerated checkout buttons, try these common solutions:
### Apple Pay sheet closes automatically
If the Apple Pay sheet closes automatically, without user interaction, then the issue might be with your merchant ID configuration.
1. Verify your merchant ID is registered in the Apple Developer Portal.
2. Confirm the merchant ID is added to your Xcode project under **Signing & Capabilities** > **Apple Pay** > **Merchant IDs**.
***
* [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#requirements)
* [Step 1: Install the package](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-1-install-the-package)
* [Step 2: Configure shop settings and Apple Pay integration](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-2-configure-shop-settings-and-apple-pay-integration)
* [Step 3: Add accelerated checkout buttons to your app](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-3-add-accelerated-checkout-buttons-to-your-app)
* [Step 4: Customize the buttons](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-4-customize-the-buttons)
* [Step 5 (Recommended): Handle component states](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-5-recommended-handle-component-states)
* [Step 6 (Optional): Handle checkout lifecycle events](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#step-6-optional-handle-checkout-lifecycle-events)
* [Troubleshooting](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native#troubleshooting)