Skip to main content

Set up accelerated checkouts

Accelerated checkouts are pre-built payment UI components that integrate with Checkout Sheet Kit for mobile apps. They display Shop Pay and Apple Pay buttons directly on product and cart pages, enabling customers to complete purchases faster with fewer checkout steps. While Shop Pay works with minimal configuration, Apple Pay requires additional setup steps as outlined in the requirements section below.

Tip

All code examples in this tutorial are available in the ShopifyAcceleratedCheckoutsApp sample app. If you run into any issues, then check out the sample app for a complete example.

Anchor to RequirementsRequirements

Anchor to Step 1: Install the Accelerated checkouts packageStep 1: Install the Accelerated checkouts package

Add the Accelerated checkouts package to your project using the following steps:

Anchor to Add package using Swift Package ManagerAdd 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

    dependencies: [
    .package(url: "https://github.com/Shopify/checkout-sheet-kit-swift", exact: "3.4.0-rc.1")
    ]

  2. Add ShopifyAcceleratedCheckouts as a dependency to your target:

    Target

    .target(
    name: "YourApp",
    dependencies: ["ShopifyAcceleratedCheckouts"]
    )
Note

Accelerated Checkouts is currently only available within the release candidate version 3.4.0-rc.1.

Anchor to Add package in XcodeAdd 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.

Anchor to Step 2: Configure shop settings and Apple Pay integrationStep 2: Configure shop settings and Apple Pay integration

Before you can use accelerated checkout buttons in your app, you need to configure your shop settings and Apple Pay integration.

Anchor to Configure shop settingsConfigure shop settings

Set up the connection between the accelerated checkout buttons and your Shopify store by creating a configuration object:

Shop configuration

import ShopifyAcceleratedCheckouts

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

Anchor to Configure Apple Pay integrationConfigure Apple Pay integration

Configure Apple Pay with your merchant identifier, supported payment networks, and required contact fields:

Apple Pay configuration

let applePayConfig = ShopifyAcceleratedCheckouts.ApplePayConfiguration(
merchantIdentifier: "merchant.com.yourcompany",
contactFields: [.email, .phone] // Optional: specify required contact information
)

Anchor to Inject configurations using environmentInject configurations using environment

Both configurations must be injected into your SwiftUI view hierarchy using the .environment() modifier:

Inject configurations

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")
)

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

var body: some Scene {
WindowGroup {
ContentView()
.environment(configuration)
.environment(applePayConfig)
}
}
}

Anchor to Specify required contact fields (Optional)Specify required contact fields (Optional)

You can specify which contact fields are required during Apple Pay checkout:

Required contact information

// Require both email and phone
contactFields: [.email, .phone]

// Require only email
contactFields: [.email]

// Require only phone
contactFields: [.phone]

// No contact fields required (default)
contactFields: []

Anchor to Step 3: Add accelerated checkout buttons to your appStep 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.

Anchor to Implement accelerated checkout buttons on cart pageImplement 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

import SwiftUI
import ShopifyAcceleratedCheckouts

struct CheckoutView: View {
let cartID: String

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

Anchor to Implement accelerated checkout buttons on product pagesImplement 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

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
)
}
}
}

Anchor to Customize wallet optionsCustomize 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

// 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])

Anchor to Customize button appearanceCustomize button appearance

Accelerated checkout buttons are trust signals that can significantly impact conversion. The buttons should feel like a natural part of your app.

You can customize the visual appearance of the accelerated checkout buttons to match other CTAs in your app using view modifiers.

Anchor to Corner radiusCorner 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

// 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)

Anchor to Step 4 (Recommended): Handle component statesStep 4 (Recommended): Handle component states

The accelerated checkout buttons depends on the 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

@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
}
}

Anchor to Step 5 (Optional): Handle checkout lifecycle eventsStep 5 (Optional): Handle checkout lifecycle events

You can respond to checkout lifecycle events using the provided event handlers:

Event handling

AcceleratedCheckoutButtons(cartID: cartID)
.onComplete {
// Navigate to success screen
}
.onFail {
// Show error alert
}
.onCancel {
// Reset state
}
.onShouldRecoverFromError { error in
// Return true to attempt recovery, false to fail
}
.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.

Anchor to Clear cart state after checkoutClear 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

.onComplete { event in
cartManager.clearCart() // Cart is consumed and can't be reused
}

Anchor to TroubleshootingTroubleshooting

If you encounter issues with accelerated checkout buttons, try these common solutions:

Anchor to Apple Pay sheet closes automaticallyApple 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.
Was this page helpful?