--- title: About accelerated checkouts description: >- Learn how to enable faster mobile checkout experiences with pre-built payment UI components for Shop Pay and Apple Pay. source_url: html: >- https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview md: >- https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md --- ExpandOn this page * [How it works](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#how-it-works) * [Key features](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#key-features) * [Visual appearance customization](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#visual-appearance-customization) * [Lifecycle management](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#lifecycle-management) * [When to use it](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#when-to-use-it) * [Getting started](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#getting-started) * [Repositories](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#repositories) * [Next steps](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#next-steps) # About accelerated checkouts Accelerated checkouts enable developers to integrate pre-built payment UI components for Shop Pay and Apple Pay in mobile app storefronts. These components integrate seamlessly with Checkout Kit to deliver faster and convenient checkout experiences. *** ## How it works Accelerated checkouts are pre-built payment UI components that display Shop Pay and Apple Pay buttons directly on product and cart pages. When customers tap these buttons, they can complete purchases using stored payment information and preferences, bypassing many traditional checkout steps. These components work alongside your existing Checkout Kit implementation, providing customers with both quick payment options and the full checkout experience when needed. This is the implementation process: * Configure your shop settings and payment integrations. * Add accelerated checkout button components to your product and cart pages. * Customize the button appearance to match your app's design. * Handle checkout lifecycle events for a seamless user experience. Shop Pay works with minimal setup, while Apple Pay requires [additional configuration](docs/storefronts/mobile/create-apple-payment-processing-certificates) including merchant certificates and device setup. ## Example usage of Accelerated Checkout buttons ```swift import SwiftUI import ShopifyAcceleratedCheckouts struct ProductView: View { let variantID: String @State private var quantity = 1 var body: some View { VStack { AcceleratedCheckoutButtons( variantID: variantID, quantity: quantity ) } } } ``` ```javascript import { AcceleratedCheckoutButtons } from "@shopify/checkout-sheet-kit"; function ProductView() { return ( ) } ``` ##### iOS ``` import SwiftUI import ShopifyAcceleratedCheckouts struct ProductView: View { let variantID: String @State private var quantity = 1 var body: some View { VStack { AcceleratedCheckoutButtons( variantID: variantID, quantity: quantity ) } } } ``` ##### React Native ``` import { AcceleratedCheckoutButtons } from "@shopify/checkout-sheet-kit"; function ProductView() { return ( ) } ``` *** ## Key features * **Multi-platform support**: Available for [Swift](docs/storefronts/mobile/checkout-kit/accelerated-checkouts) and [React Native](docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native). * **Native payment integration**: Seamless Apple Pay integration using native iOS payment sheets. * **Shop Pay support**: One-click checkout with Shopify's accelerated payment solution. * **Flexible placement**: Display buttons on product pages, cart pages, or both. * **Customizable appearance**: Match your app's design with configurable styling options. * **Lifecycle event handling**: Monitor checkout progress and handle success, failure, and cancellation events. * **Automatic fallback**: The checkout sheet is presented if more information is required or a buyer encounters issues *** ## Visual appearance customization To match your mobile app, you can customize the: * **Corner radius**: The corner radius of the rendered wallet buttons can range from square to fully rounded. * **Wallet selection**: Display only the payment methods relevant to your customers - Shop Pay, Apple Pay, or both. * **Apple Pay button variants**: Choose from different button labels like "Buy with Apple Pay" or "Apple Pay". *** ## Lifecycle management Monitor and respond to the complete checkout experience with callback events: * **Checkout completion**: Receive detailed order information when checkout completes successfully. * **Checkout cancellation**: Handle when customers cancel the checkout process. * **Error handling**: Respond to checkout errors by opening the Checkout Sheet. * **Link clicks**: Intercept external links clicked within checkout (email, phone, web). * **Web pixel events**: Integrate with analytics by capturing standard and custom pixel events. *** ## When to use it You can add accelerated checkouts to your mobile app storefront: * **Product pages**: Enable instant "buy now" functionality for single items. * **Cart pages**: Add accelerated checkout options directly to the cart. Accelerated checkouts work alongside your existing checkout flow, providing customers with both quick payment options and the full checkout experience when needed. *** ## Getting started Accelerated checkouts are available for Swift and React Native. Choose your platform below to get started with implementation: [![](https://shopify.dev/images/icons/48/app.png)![](https://shopify.dev/images/icons/48/app-dark.png)](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts) [Swift Implementation Guide](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts) [Add accelerated checkout buttons to your Swift-based iOS app with SwiftUI or UIKit.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts) [![](https://shopify.dev/images/icons/48/apps.png)![](https://shopify.dev/images/icons/48/apps-dark.png)](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native) [React Native Implementation Guide](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native) [Integrate accelerated checkouts into your React Native mobile app.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native) *** ## Repositories Explore the open-source implementations and sample apps: [![](https://shopify.dev/images/icons/48/github.png)![](https://shopify.dev/images/icons/48/github-dark.png)](https://github.com/Shopify/checkout-sheet-kit-swift) [Checkout Kit for Swift](https://github.com/Shopify/checkout-sheet-kit-swift) [Swift library with accelerated checkouts support and sample app demonstrating best practices.](https://github.com/Shopify/checkout-sheet-kit-swift) [![](https://shopify.dev/images/icons/48/github.png)![](https://shopify.dev/images/icons/48/github-dark.png)](https://github.com/Shopify/checkout-sheet-kit-react-native) [Checkout Kit for React Native](https://github.com/Shopify/checkout-sheet-kit-react-native) [React Native module with accelerated checkouts support and complete integration examples.](https://github.com/Shopify/checkout-sheet-kit-react-native) *** ## Next steps * Learn how to integrate Accelerated Checkouts using [Swift](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts) or [React Native](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-react-native). *** * [How it works](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#how-it-works) * [Key features](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#key-features) * [Visual appearance customization](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#visual-appearance-customization) * [Lifecycle management](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#lifecycle-management) * [When to use it](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#when-to-use-it) * [Getting started](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#getting-started) * [Repositories](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#repositories) * [Next steps](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview.md#next-steps)