--- 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.md#requirements) * [Step 1: Install the package](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native.md#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.md#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.md#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.md#step-4-customize-the-buttons) * [Step 5 (Recommended): Handle component states](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native.md#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.md#step-6-optional-handle-checkout-lifecycle-events) * [Troubleshooting](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native.md#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.md#requirements) * [Step 1: Install the package](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native.md#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.md#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.md#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.md#step-4-customize-the-buttons) * [Step 5 (Recommended): Handle component states](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native.md#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.md#step-6-optional-handle-checkout-lifecycle-events) * [Troubleshooting](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native.md#troubleshooting)