---
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/checkout-kit/accelerated-checkouts?extension=swift
  md: >-
    https://shopify.dev/docs/storefronts/mobile/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 [accelerated checkouts sample app](https://github.com/Shopify/checkout-sheet-kit-swift/tree/main/Samples/ShopifyAcceleratedCheckoutsApp).

## 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/example-mobile--storefront--swift)

## Install the accelerated checkouts package

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

### Add the dependency

Add the `checkout-sheet-kit-swift` package to your `Package.swift` and include `ShopifyAcceleratedCheckouts` 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-sheet-kit-swift`.

***

## /AcceleratedCheckoutInstall.swift

```swift
// Package.swift
import PackageDescription


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

## Configure your store and Apple Pay

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

### 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 configurations into your view hierarchy with `.environmentObject()`.

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)

## /AcceleratedCheckoutConfig.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",
        customerAccessToken: "optional-customer-access-token"
    )
)


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


struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(configuration)
                .environmentObject(applePayConfig)
        }
    }
}
```

## Add accelerated checkout buttons

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

### Add buttons to cart and product pages

Use the `AcceleratedCheckoutButtons` SwiftUI view. Pass `cartID` on the cart page to check out all cart items, or pass `variantID` and `quantity` on a product page for a single-item checkout.

## /AcceleratedCheckoutButtons.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CheckoutView: View {
    let cartID: String


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


struct ProductView: View {
    let variantID: String
    @State private var quantity = 1


    var body: some View {
        VStack {
            AcceleratedCheckoutButtons(
                variantID: variantID,
                quantity: quantity
            )
        }
    }
}
```

## Customize the buttons

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

### 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.

## /AcceleratedCheckoutCustomize.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CustomizedCheckoutView: View {
    let cartID: String


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


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


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


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


            // Pin the Apple Pay button to the white-outline style
            AcceleratedCheckoutButtons(cartID: cartID)
                .applePayStyle(.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 `.applePayStyle()` to pin the button to `.whiteOutline`, `.light`, or `.dark`. See [Customize the Apple Pay button style](https://github.com/Shopify/checkout-sheet-kit-swift/#customize-the-apple-pay-button-style) for the full list of styles.

## /AcceleratedCheckoutCustomize.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CustomizedCheckoutView: View {
    let cartID: String


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


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


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


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


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

## 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.

### 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 `AcceleratedCheckoutButtons` 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 = .all` and `ShopifyCheckoutSheetKit.configuration.logLevel = .all`.

## /AcceleratedCheckoutStates.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.")
        }


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

## Handle checkout events

Respond to checkout completion, errors, and cancellation.

### Register event handlers

Chain `.onComplete`, `.onFail`, and `.onCancel` 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.

## /AcceleratedCheckoutEvents.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CheckoutWithEventsView: View {
    let cartID: String


    var body: some View {
        VStack {
            AcceleratedCheckoutButtons(cartID: cartID)
                .onComplete { event in
                    // Clear your cart and navigate to a confirmation screen.
                }
                .onFail { error in
                    // Surface the error to the buyer.
                }
                .onCancel {
                    // Reset any pending UI state.
                }
        }
    }
}
```

## /AcceleratedCheckoutInstall.swift

```swift
// Package.swift
import PackageDescription


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

## /AcceleratedCheckoutConfig.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",
        customerAccessToken: "optional-customer-access-token"
    )
)


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


struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(configuration)
                .environmentObject(applePayConfig)
        }
    }
}
```

## /AcceleratedCheckoutButtons.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CheckoutView: View {
    let cartID: String


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


struct ProductView: View {
    let variantID: String
    @State private var quantity = 1


    var body: some View {
        VStack {
            AcceleratedCheckoutButtons(
                variantID: variantID,
                quantity: quantity
            )
        }
    }
}
```

## /AcceleratedCheckoutCustomize.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CustomizedCheckoutView: View {
    let cartID: String


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


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


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


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


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

## /AcceleratedCheckoutStates.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.")
        }


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

## /AcceleratedCheckoutEvents.swift

```swift
import SwiftUI
import ShopifyAcceleratedCheckouts


struct CheckoutWithEventsView: View {
    let cartID: String


    var body: some View {
        VStack {
            AcceleratedCheckoutButtons(cartID: cartID)
                .onComplete { event in
                    // Clear your cart and navigate to a confirmation screen.
                }
                .onFail { error in
                    // Surface the error to the buyer.
                }
                .onCancel {
                    // Reset any pending UI state.
                }
        }
    }
}
```

## Tutorial complete!

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

### Next steps

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

[Accelerated checkouts sample app for Swift.](https://github.com/Shopify/checkout-sheet-kit-swift/tree/main/Samples/ShopifyAcceleratedCheckoutsApp)

[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 checkout completion, cancellation, and web pixel 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)