---
title: Set up accelerated checkouts
description: >-
  Add Shop Pay and Apple Pay buttons to your iOS or React Native app for one-tap
  checkout on product and cart pages.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/mobile-next/checkout-kit/accelerated-checkouts?extension=swift
  md: >-
    https://shopify.dev/docs/storefronts/mobile-next/checkout-kit/accelerated-checkouts.md?extension=swift
---

# Set up accelerated checkouts

Add Shop Pay and Apple Pay buttons to your app so buyers can pay directly from product and cart pages. You'll install the accelerated checkouts package, configure Apple Pay, and handle checkout events.

Use the **Platform** dropdown under **Project** to switch between Swift and React Native. The steps, code, and requirements update for each platform.

**Tip:**

All code examples are available in the [Swift sample app](https://github.com/Shopify/checkout-kit/tree/main/platforms/swift/Samples/CheckoutKitSwiftDemo).

## What you'll learn

In this tutorial, you'll:

* Install the accelerated checkouts package.
* Configure your store connection and Apple Pay merchant identifier.
* Add Shop Pay and Apple Pay buttons to cart and product pages.
* Customize which wallets appear and how buttons look.
* Handle loading, error, and checkout completion states.

## Requirements

[Apple developer account](https://developer.apple.com/programs/enroll/)

An active Apple developer account.

[Apple Pay configured](https://developer.apple.com/documentation/passkit/setting-up-apple-pay)

[Apple Pay](https://developer.apple.com/documentation/passkit/setting-up-apple-pay) set up on a [supported device](https://support.apple.com/102896).

[Apple Pay certificates](https://shopify.dev/docs/storefronts/mobile/create-apple-payment-processing-certificates)

Apple Pay payment processing certificates created.

[Access scope](https://www.appsheet.com/start/1ff317b6-2da1-4f39-b041-c01cfada6098)

The `write_cart_wallet_payments` access scope.

[Checkout Kit installed](https://shopify.dev/docs/storefronts/mobile/checkout-kit)

Checkout Kit installed in your app, targeting iOS 16 or higher.

## Project

[View on GitHub](https://github.com/Shopify/checkout-kit/tree/main/platforms/swift/Samples/CheckoutKitSwiftDemo)

## Install the accelerated checkouts package

Accelerated checkouts ship as part of the Checkout Kit Swift package. Add it through Swift Package Manager.

## Package.swift

```swift
// swift-tools-version: 6.0
import PackageDescription


let package = Package(
    name: "MobileStorefront",
    platforms: [
        .iOS(.v16)
    ],
    dependencies: [
        .package(url: "https://github.com/Shopify/checkout-kit", from: "4.0.0")
    ],
    targets: [
        .executableTarget(
            name: "MobileStorefront",
            dependencies: [
                .product(name: "ShopifyCheckoutKit", package: "checkout-kit"),
                .product(name: "ShopifyAcceleratedCheckouts", package: "checkout-kit")
            ]
        )
    ]
)
```

### Add the dependency

Add the `ShopifyCheckoutKit` package from `https://github.com/Shopify/checkout-kit` to your `Package.swift` and include the `ShopifyAcceleratedCheckouts` product as a target dependency.

Optionally, you can add the package through Xcode by going to **File** > **Add Package Dependencies** and entering `https://github.com/Shopify/checkout-kit`.

***

## Configure your store and Apple Pay

Connect the accelerated checkout buttons to your store and configure Apple Pay with your merchant identifier.

## MyApp.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


let configuration = ShopifyAcceleratedCheckouts.Configuration(
    storefrontDomain: "{shop}.myshopify.com",
    storefrontAccessToken: "your-storefront-access-token",
    customer: ShopifyAcceleratedCheckouts.Customer(
        email: "customer@example.com",
        phoneNumber: "0123456789"
    )
)


let applePayConfiguration = ShopifyAcceleratedCheckouts.ApplePayConfiguration(
    merchantIdentifier: "merchant.com.yourcompany",
    contactFields: [.email, .phone]
)


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(\.shopifyAcceleratedCheckoutsConfiguration, configuration)
                .environment(\.shopifyApplePayConfiguration, applePayConfiguration)
        }
    }
}
```

### Create a configuration

Create a configuration object with your store domain and Storefront API access token. Create a separate Apple Pay configuration with your merchant identifier and required contact fields. Pass both into your view hierarchy with `.environment(\.shopifyAcceleratedCheckoutsConfiguration, ...)` and `.environment(\.shopifyApplePayConfiguration, ...)`.

If the buyer is signed in, then pass their email, phone number, and [Customer Account API](https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/getting-started) access token to prefill checkout.

***

**Tip:**

If the buyer is unknown, then pass `nil` for the `customer` argument. You can update the customer information when details are available. If Apple Pay closes automatically, then verify that your merchant ID is registered in the Apple Developer Portal and added to your Xcode project under **Signing & Capabilities** > **Apple Pay** > **Merchant IDs**.

[Apple Pay certificates](https://shopify.dev/docs/storefronts/mobile/create-apple-payment-processing-certificates)

## Add accelerated checkout buttons

Place Shop Pay and Apple Pay buttons on your cart and product pages so buyers can pay without opening checkout.

## CheckoutButtons.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CartView: View {
    let cartID: String


    var body: some View {
        VStack {
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
        }
    }
}


struct ProductView: View {
    let variantID: String


    var body: some View {
        VStack {
            // The kit doesn't create the cart. Create or reuse one when the buyer taps a wallet button.
            ShopifyAcceleratedCheckoutButtons(variantID: variantID) { request in
                let cart = try await storefrontClient.createCart(variantID: variantID, quantity: 1)
                return .cart(cart.id)
            }
        }
    }
}
```

### Add buttons to cart and product pages

Use the `ShopifyAcceleratedCheckoutButtons` SwiftUI view. Pass `cartID` on the cart page to check out all cart items. On a product page, pass `variantID` and a `getCart` closure that creates or returns the cart for that variant when the buyer taps a wallet button; the kit no longer creates the cart for you.

## Customize the buttons

Control which wallets appear, their order, and the button corner radius.

## CustomizedCheckoutView\.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CustomizedCheckoutView: View {
    let cartID: String


    var body: some View {
        VStack {
            // Show only Shop Pay
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .wallets([.shopPay])


            // Show only Apple Pay
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .wallets([.applePay])


            // Show both in a specific order
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .wallets([.shopPay, .applePay])


            // Custom corner radius
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .cornerRadius(16)


            // Pin the Apple Pay button to the white-outline style
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .applePayButtonStyle(.whiteOutline)
        }
    }
}
```

### Choose wallets and style

By default, both Shop Pay and Apple Pay buttons appear. You can show only one wallet, change the order, or adjust the corner radius to match your app's design.

Chain `.wallets()` to specify which payment methods appear and their order. Use `.cornerRadius()` to match the buttons to your app's design. For example, `.wallets([.shopPay, .applePay])` shows Shop Pay first, then Apple Pay.

## CustomizedCheckoutView\.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CustomizedCheckoutView: View {
    let cartID: String


    var body: some View {
        VStack {
            // Show only Shop Pay
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .wallets([.shopPay])


            // Show only Apple Pay
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .wallets([.applePay])


            // Show both in a specific order
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .wallets([.shopPay, .applePay])


            // Custom corner radius
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .cornerRadius(16)


            // Pin the Apple Pay button to the white-outline style
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .applePayButtonStyle(.whiteOutline)
        }
    }
}
```

### Set the Apple Pay button style

By default, the Apple Pay button follows the device's color scheme. Pin a specific style if your app doesn't support dark mode or you want a consistent look across appearances.

Chain `.applePayButtonStyle()` with a `PKPaymentButtonStyle` to pin the button to `.whiteOutline`, `.white`, or `.black`; `.automatic` follows the device appearance. Use `.applePayButtonType()` to change the label.

## Handle loading and error states

The buttons fetch store data from the Storefront API on first render. Handle loading and error states to match your app's design.

## AcceleratedCheckoutView\.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct AcceleratedCheckoutView: View {
    let cartID: String
    @State private var renderState: RenderState = .loading


    var body: some View {
        if case .loading = renderState {
            ProgressView()
        }


        if case .error = renderState {
            Text("Couldn't load checkout. Please try again.")
        }


        ShopifyAcceleratedCheckoutButtons(cartID: cartID)
            .onRenderStateChange { state in
                renderState = state
            }
    }
}
```

### Respond to render state changes

Track the `RenderState` using `@State` and show a loading indicator or error view while the buttons initialize. Use `.onRenderStateChange` to update the state.

***

**Caution:**

Don't render the accelerated checkout buttons conditionally inside the `.rendered` case. Components start in the `.loading` state, so the network request won't start if the component isn't mounted.

To debug render issues, set `ShopifyAcceleratedCheckouts.logLevel = .debug` and `ShopifyCheckout.configure { $0.logLevel = .debug }`.

## Handle checkout events

Respond to checkout completion, errors, and cancellation.

## CheckoutWithEventsView\.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CheckoutWithEventsView: View {
    let cartID: String


    var body: some View {
        VStack {
            ShopifyAcceleratedCheckoutButtons(cartID: cartID)
                .onComplete { event in
                    // Clear your cart and navigate to a confirmation screen.
                }
                .onFail { error in
                    // Surface the error to the buyer.
                }
                .onDismiss {
                    // Checkout closed, whatever the outcome.
                }
        }
    }
}
```

### Register event handlers

Chain `.onComplete`, `.onFail`, and `.onDismiss` modifiers to the buttons. Clear your local cart state in `onComplete` because cart IDs expire after checkout.

***

**Note:**

When Apple Pay encounters an error, Checkout Kit presents checkout as a fallback before calling `onFail`. Buyers can complete their purchase with other payment methods.

## Tutorial complete!

Your app now has Shop Pay and Apple Pay buttons for accelerated checkouts.

### Next steps

[Sample app\
\
](https://github.com/Shopify/checkout-kit/tree/main/platforms/swift/Samples/CheckoutKitSwiftDemo)

[Swift sample app with accelerated checkouts.](https://github.com/Shopify/checkout-kit/tree/main/platforms/swift/Samples/CheckoutKitSwiftDemo)

[Apple Pay certificates\
\
](https://shopify.dev/docs/storefronts/mobile/create-apple-payment-processing-certificates)

[Create and manage payment processing certificates for Apple Pay.](https://shopify.dev/docs/storefronts/mobile/create-apple-payment-processing-certificates)

[Lifecycle events\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle)

[Register callbacks for the start, update, complete, fail, and dismiss events.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle)

[Preload checkout\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading)

[Fetch checkout in the background so it's ready when the buyer taps checkout.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading)