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.
All code examples are available in the accelerated checkouts sample app.
All code examples are available in the accelerated checkouts 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
An active Apple developer account.
Apple Pay set up on a supported device.
Apple Pay payment processing certificates created.
The write_cart_wallet_payments access scope.
Checkout Kit installed in your app, targeting iOS 16 or higher.
Project
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.
Anchor to Add the dependencyAdd 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.
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.
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 configurations into your view hierarchy with .environmentObject().
If the buyer is signed in, then pass their email, phone number, and Customer Account API access token to prefill checkout.
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.
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.
Place Shop Pay and Apple Pay buttons on your cart and product pages so buyers can pay without opening checkout.
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.
Control which wallets appear, their order, and the button corner radius.
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.
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 for the full list of styles.
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.
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.
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.
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.
Anchor to Handle checkout eventsHandle checkout events
Respond to checkout completion, errors, and cancellation.
Anchor to Register event handlersRegister event handlers
Chain .onComplete, .onFail, and .onCancel modifiers to the buttons. Clear your local cart state in onComplete because cart IDs expire after checkout.
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.
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
Accelerated checkouts sample app for Swift.
Apple Pay certificates
Create and manage payment processing certificates for Apple Pay.
Lifecycle events
Register callbacks for checkout completion, cancellation, and web pixel events.
Preload checkout
Fetch checkout in the background so it's ready when the buyer taps checkout.