Skip to main content

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.

Anchor to What you'll learnWhat 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

An active Apple developer account.

Apple Pay configured

Apple Pay set up on a supported device.

Apple Pay certificates

Apple Pay payment processing certificates created.

Access scope

The write_cart_wallet_payments access scope.

Checkout Kit installed

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

Project

View on GitHub

Anchor to Install the accelerated checkouts packageInstall the accelerated checkouts package

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

Package.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")
]
)
]
)

Anchor to Add the dependencyAdd 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.

Anchor to Configure your store and Apple PayConfigure your store and Apple Pay

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

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

Anchor to Create a configurationCreate 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 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

Anchor to Add accelerated checkout buttonsAdd 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

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

Anchor to Add buttons to cart and product pagesAdd 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.

Anchor to Customize the buttonsCustomize the buttons

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

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

Anchor to Choose wallets and styleChoose 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

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

Anchor to Set the Apple Pay button styleSet 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.

Anchor to Handle loading and error statesHandle 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

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

Anchor to Respond to render state changesRespond 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 }.

Anchor to Handle checkout eventsHandle checkout events

Respond to checkout completion, errors, and cancellation.

CheckoutWithEventsView.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.
}
}
}
}

Anchor to Register event handlersRegister 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.

Anchor to Tutorial complete!Tutorial complete!

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

Anchor to Next stepsNext steps

Sample app

Swift sample app with accelerated checkouts.

Apple Pay certificates

Create and manage payment processing certificates for Apple Pay.

Lifecycle events

Register callbacks for the start, update, complete, fail, and dismiss events.

Preload checkout

Fetch checkout in the background so it's ready when the buyer taps checkout.

Was this page helpful?