--- title: Set up accelerated checkouts for Swift description: Learn how to add accelerated checkout buttons on product and cart pages in your Swift mobile app. source_url: html: https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts md: https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts.md --- ExpandOn this page * [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#requirements) * [Step 1: Install the Accelerated checkouts package](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-1-install-the-accelerated-checkouts-package) * [Step 2: Configure shop settings and Apple Pay integration](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#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#step-3-add-accelerated-checkout-buttons-to-your-app) * [Step 4: Customize the buttons](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-4-customize-the-buttons) * [Step 5 (Recommended): Handle component states](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-5-recommended-handle-component-states) * [Step 6 (Optional): Handle checkout lifecycle events](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-6-optional-handle-checkout-lifecycle-events) * [Troubleshooting](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#troubleshooting) # Set up accelerated checkouts for Swift This guide walks you through implementing accelerated checkouts in your Swift 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 All code examples in this tutorial are available in the [`ShopifyAcceleratedCheckoutsApp` sample app](https://github.com/Shopify/checkout-sheet-kit-swift/tree/main/Samples/ShopifyAcceleratedCheckoutsApp). If you run into any issues, then check out the sample app for a complete example. *** ## Requirements * Your app is setup 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 Accelerated checkouts package Add the Accelerated checkouts package to your project using the following steps: ### Add package using Swift Package Manager To add the package using Swift Package Manager, follow these steps: 1. Add the dependency to your Package.swift: ## Package.swift ```swift dependencies: [ .package(url: "https://github.com/Shopify/checkout-sheet-kit-swift", from: "3.4.0") ] ``` 1. Add `ShopifyAcceleratedCheckouts` as a dependency to your target: ## Target ```swift .target( name: "YourApp", dependencies: ["ShopifyAcceleratedCheckouts"] ) ``` ### Add package in Xcode To add the package in Xcode, follow these steps: 1. In Xcode, select **File** > **Add Package Dependencies...**. 2. Enter the repository URL: `https://github.com/Shopify/checkout-sheet-kit-swift`. 3. Select the version you want to use. 4. Click **Add Package**. *** ## 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: ## Shop configuration ```swift import ShopifyAcceleratedCheckouts let configuration = ShopifyAcceleratedCheckouts.Configuration( storefrontDomain: "your-shop.myshopify.com", storefrontAccessToken: "your-storefront-access-token", // Provide customer details if known, otherwise pass `nil` customer: ShopifyAcceleratedCheckouts.Customer( email: "customer@example.com", phoneNumber: "0123456789", customerAccessToken: "optional-customer-access-token" ) ) ``` Note In cases where the customer is unknown, pass `nil` for the `customer` argument. You can update the customer information when details are available. ### Configure Apple Pay integration Configure Apple Pay with your merchant identifier, supported payment networks, and required contact fields: ## Apple Pay configuration ```swift let applePayConfig = ShopifyAcceleratedCheckouts.ApplePayConfiguration( merchantIdentifier: "merchant.com.yourcompany", contactFields: [.email, .phone] ) ``` #### 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 ```swift // Only allow shipping to US and Canada let applePayConfig = ShopifyAcceleratedCheckouts.ApplePayConfiguration( merchantIdentifier: "merchant.com.yourcompany", contactFields: [.email, .phone], supportedShippingCountries: ["US", "CA"] ) // Allow all countries (default behavior) let applePayConfig = ShopifyAcceleratedCheckouts.ApplePayConfiguration( merchantIdentifier: "merchant.com.yourcompany", contactFields: [.email, .phone], supportedShippingCountries: nil // or omit parameter entirely ) ``` ### Inject configurations using environment Both configurations must be injected into your SwiftUI view hierarchy using the `.environmentObject()` modifier: ## Inject configurations ```swift struct MyApp: App { let configuration = ShopifyAcceleratedCheckouts.Configuration( storefrontDomain: "your-shop.myshopify.com", storefrontAccessToken: "your-storefront-access-token", customer: ShopifyAcceleratedCheckouts.Customer( email: "customer@example.com", phoneNumber: "0123456789", customerAccessToken: "optional-customer-access-token" ) ) let applePayConfig = ShopifyAcceleratedCheckouts.ApplePayConfiguration( merchantIdentifier: "merchant.com.yourcompany", contactFields: [.email, .phone] ) var body: some Scene { WindowGroup { ContentView() .environmentObject(configuration) .environmentObject(applePayConfig) } } } ``` If your app is not using SwiftUI, we will cover adding the buttons to UIKit based apps in Step 3. #### Specify required contact fields (Optional) You can specify which contact fields are required during Apple Pay checkout: ## Required contact information ```swift // Require both email and phone contactFields: [.email, .phone] // Require only email contactFields: [.email] // Require only phone contactFields: [.phone] // No contact fields required (default) contactFields: [] ``` *** ## 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. If your app supports iOS 15 or below, you will need to wrap every callsite for `AcceleratedCheckoutButtons` within `#available(iOS 16.0, *)`. Depending on your use case, you may want to provide an `else` block to render a fallback. ```swift import ShopifyAcceleratedCheckouts struct CartView: View { var body: some View { if #available(iOS 16.0, *) { AcceleratedCheckoutButtons( variantID: variantID, quantity: quantity ) } else { // fallback option } } } ``` ### 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 ```swift import SwiftUI import ShopifyAcceleratedCheckouts struct CheckoutView: View { let cartID: String var body: some View { VStack { AcceleratedCheckoutButtons(cartID: cartID) } } } ``` ### 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 ```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 ) } } } ``` ### Apps using UIKit Apps using UIKit can still incrementally adopt SwiftUI buttons by using a `UIHostingController`. Here is an example of how you might implement the Cart-based buttons in a `UIViewController`: ## UIKit implementation ```swift import UIKit import SwiftUI class CartViewController: UIViewController { private var acceleratedCheckoutHostingController: UIHostingController? private var buttonStackView: UIStackView! override func viewDidLoad() { super.viewDidLoad() setupAcceleratedCheckoutButtons() } func setupAcceleratedCheckoutButtons() { // Create a button stack view // This can be used to hold both the accelerated checkout buttons as well as any other "checkout" buttons for your app buttonStackView = UIStackView() buttonStackView.translatesAutoresizingMaskIntoConstraints = false buttonStackView.axis = .vertical buttonStackView.spacing = 6 buttonStackView.alignment = .fill buttonStackView.distribution = .fill // Create accelerated checkout buttons, injecting the same configuration objects we created above let checkoutButtons = AcceleratedCheckoutButtons(cartID: cartId.rawValue) .environmentObject(acceleratedCheckoutsStorefrontConfig) .environmentObject(acceleratedCheckoutsApplePayConfig) // Create a hosting controller let acceleratedCheckoutsController = UIHostingController(rootView: AnyView(checkoutButtons)) // Add buttons to the stack addChild(acceleratedCheckoutsController) buttonStackView.insertArrangedSubview(acceleratedCheckoutsController.view, at: 0) acceleratedCheckoutsController.didMove(toParent: self) acceleratedCheckoutHostingController = acceleratedCheckoutsController } } ``` *** ## 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. Payment options display in the order you list them in the `wallets()` method. ## Customize wallet options ```swift // Default: Display all available buttons AcceleratedCheckoutButtons(cartID: cartID) // Display only Shop Pay AcceleratedCheckoutButtons(cartID: cartID) .wallets([.shoppay]) // Display only Apple Pay AcceleratedCheckoutButtons(cartID: cartID) .wallets([.applepay]) // Display both Shop Pay and Apple Pay, in the order you specify AcceleratedCheckoutButtons(cartID: cartID) .wallets([.shoppay, .applepay]) ``` ### Modify the Apple Pay button label The `applePayLabel` may 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 ```swift AcceleratedCheckoutButtons(cartID: cartID) .applePayLabel(.buy) ``` ### Customize button appearance You can customize the visual appearance of the accelerated checkout buttons to match other CTAs in your app using view modifiers. #### Corner radius Customize the corner radius of all checkout buttons with the `.cornerRadius()` modifier. The default radius is set to 8px. Here are some examples: ## Customize corner radius ```swift // Default radius (8px) - works well with most modern app designs AcceleratedCheckoutButtons(cartID: cartID) // Match rounded buttons (e.g., if your app uses pill-shaped CTAs) AcceleratedCheckoutButtons(cartID: cartID) .cornerRadius(16) // Match sharp, minimal designs AcceleratedCheckoutButtons(cartID: cartID) .cornerRadius(4) // Match square buttons AcceleratedCheckoutButtons(cartID: cartID) .cornerRadius(0) ``` *** ## Step 5 (Recommended): Handle component states The accelerated checkout buttons depends 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` modifier. > Warning Rendering `AcceleratedCheckoutButtons` inside the `.rendered` case of a `switch` will fail to render the component as `.loading` is the initial state, failing to start the network request. ## Component Lifecycle ```swift @State private var variantRenderState: RenderState = .loading var body: some View { if case let .loading = renderState { ProgressView() } if case let .error = renderState { ErrorState() } AcceleratedCheckoutButtons(cartID: cartID) .onRenderStateChange { state in renderState = state } } ``` *** ## 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 ```swift AcceleratedCheckoutButtons(cartID: cartID) .onComplete { event in // Navigate to success screen } .onFail { error in // Show error alert } .onCancel { // Reset state } .onWebPixelEvent { event in // Track analytics event } .onClickLink { url in // 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 ```swift .onComplete { event in cartManager.clearCart() // Cart is consumed and can't be reused } ``` *** ## Troubleshooting If you encounter issues with accelerated checkout buttons, try these common solutions: ### Enable debug logging The default log level in the library is `.error`. Enabling detailed logging for the `ShopifyAcceleratedCheckouts` and `ShopifyCheckoutSheetKit` modules is performed individually to provide trace level logging. ## Increase logging verbosity ```swift import ShopifyAcceleratedCheckouts func main() { ShopifyAcceleratedCheckouts.logLevel = .all ShopifyCheckoutSheetKit.configuration.logLevel = .all } ``` ### 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#requirements) * [Step 1: Install the Accelerated checkouts package](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-1-install-the-accelerated-checkouts-package) * [Step 2: Configure shop settings and Apple Pay integration](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#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#step-3-add-accelerated-checkout-buttons-to-your-app) * [Step 4: Customize the buttons](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-4-customize-the-buttons) * [Step 5 (Recommended): Handle component states](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-5-recommended-handle-component-states) * [Step 6 (Optional): Handle checkout lifecycle events](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#step-6-optional-handle-checkout-lifecycle-events) * [Troubleshooting](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts#troubleshooting)