Skip to main content

Set up accelerated checkouts

Accelerated checkouts are pre-built payment UI components that integrate with Checkout 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 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: [
// Use the latest release candidate version
.package(url: "https://github.com/Shopify/checkout-sheet-kit-swift", "3.4.0-rc.3"..<"3.4.0")
]
Release candidate only

Accelerated Checkouts is currently in beta testing and only available as a release candidate version. Refer to the Checkout Kit for Swift releases for the latest version and announcements of the stable release.

  1. Add ShopifyAcceleratedCheckouts as a dependency to your target:

Target

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

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 will 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",
// Provide customer details if known, otherwise pass `nil`
customer: ShopifyAcceleratedCheckouts.Customer(email: "customer@example.com", phoneNumber: "0123456789")
)
Note

In cases where the customer is unknown, pass nil for the customer argument. You can update the customer information when details are available.

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

Anchor to Inject configurations using environmentInject configurations using environment

Both configurations must be injected into your SwiftUI view hierarchy using the .environmentObject() 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()
.environmentObject(configuration)
.environmentObject(applePayConfig)
}
}
}

If your app is not using SwiftUI, we will cover adding the buttons to UIKit based apps in Step 3.

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.

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.

import ShopifyAcceleratedCheckouts

struct CartView: View {
var body: some View {
if #available(iOS 16.0, *) {
AcceleratedCheckoutButtons(
variantID: variantID,
quantity: quantity
)
} else {
// fallback option
}
}
}

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

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

import UIKit
import SwiftUI

class CartViewController: UIViewController {
private var acceleratedCheckoutHostingController: UIHostingController<AnyView>?
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
}
}

Anchor to Step 4: Customize the buttonsStep 4: Customize the buttons

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 Modify the Apple Pay button labelModify the Apple Pay button label

The applePayLabel may be used to modify the label in accordance to the PayWithApplePayLabel. Defaults to .plain.

Modify Apple Pay label

AcceleratedCheckoutButtons(cartID: cartID)
.applePayLabel(.buy)

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.

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)

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 6 (Optional): Handle checkout lifecycle eventsStep 6 (Optional): Handle checkout lifecycle events

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

Event handling

AcceleratedCheckoutButtons(cartID: cartID)
.onComplete { event in
// Navigate to success screen
}
.onFail { error in
// 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
}

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

Anchor to Enable debug loggingEnable 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

import ShopifyAcceleratedCheckouts

func main() {
ShopifyAcceleratedCheckouts.logLevel = .all
ShopifyCheckoutSheetKit.configuration.logLevel = .all
}

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?