About accelerated checkouts

Accelerated checkouts enable developers to integrate pre-built payment UI components for Shop Pay and Apple Pay in mobile app storefronts. These components integrate seamlessly with Checkout Kit to deliver faster and convenient checkout experiences.

Anchor to How it worksHow it works

Accelerated checkouts are pre-built payment UI components that display Shop Pay and Apple Pay buttons directly on product and cart pages. When customers tap these buttons, they can complete purchases using stored payment information and preferences, bypassing many traditional checkout steps. These components work alongside your existing Checkout Kit implementation, providing customers with both quick payment options and the full checkout experience when needed.

This is the implementation process:

Configure your shop settings and payment integrations.
Add accelerated checkout button components to your product and cart pages.
Customize the button appearance to match your app's design.
Handle checkout lifecycle events for a seamless user experience.

Shop Pay works with minimal setup, while Apple Pay requires additional configuration including merchant certificates and device setup.

Example usage of Accelerated Checkout buttons

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

)

}

import { AcceleratedCheckoutButtons } from "@shopify/checkout-sheet-kit";

function ProductView() {

return (

<AcceleratedCheckoutButtons

variantID="gid://shopify/ProductVariant/123"

quantity={1}

)

}

iOS

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

React Native

import { AcceleratedCheckoutButtons } from "@shopify/checkout-sheet-kit";

function ProductView() {
  return (
    <AcceleratedCheckoutButtons
      variantID="gid://shopify/ProductVariant/123"
      quantity={1}
    />
  )
}

Anchor to Key featuresKey features

Multi-platform support: Available for Swift and React Native.
Native payment integration: Seamless Apple Pay integration using native iOS payment sheets.
Shop Pay support: One-click checkout with Shopify's accelerated payment solution.
Flexible placement: Display buttons on product pages, cart pages, or both.
Customizable appearance: Match your app's design with configurable styling options.
Lifecycle event handling: Monitor checkout progress and handle success, failure, and cancellation events.
Automatic fallback: The checkout sheet is presented if more information is required or a buyer encounters issues

Anchor to Visual appearance customizationVisual appearance customization

To match your mobile app, you can customize the:

Corner radius: The corner radius of the rendered wallet buttons can range from square to fully rounded.
Wallet selection: Display only the payment methods relevant to your customers - Shop Pay, Apple Pay, or both.
Apple Pay button variants: Choose from different button labels like "Buy with Apple Pay" or "Apple Pay".

Anchor to Lifecycle managementLifecycle management

Monitor and respond to the complete checkout experience with callback events:

Checkout completion: Receive detailed order information when checkout completes successfully.
Checkout cancellation: Handle when customers cancel the checkout process.
Error handling: Respond to checkout errors by opening the Checkout Sheet.
Link clicks: Intercept external links clicked within checkout (email, phone, web).
Web pixel events: Integrate with analytics by capturing standard and custom pixel events.

Anchor to When to use itWhen to use it

You can add accelerated checkouts to your mobile app storefront:

Product pages: Enable instant "buy now" functionality for single items.
Cart pages: Add accelerated checkout options directly to the cart.

Accelerated checkouts work alongside your existing checkout flow, providing customers with both quick payment options and the full checkout experience when needed.

Anchor to Getting startedGetting started

Accelerated checkouts are available for Swift and React Native. Choose your platform below to get started with implementation:

Swift Implementation Guide

Add accelerated checkout buttons to your Swift-based iOS app with SwiftUI or UIKit.

React Native Implementation Guide

Integrate accelerated checkouts into your React Native mobile app.

Anchor to RepositoriesRepositories

Explore the open-source implementations and sample apps:

Checkout Kit for Swift

Swift library with accelerated checkouts support and sample app demonstrating best practices.

Checkout Kit for React Native

React Native module with accelerated checkouts support and complete integration examples.

Anchor to Next stepsNext steps

Learn how to integrate Accelerated Checkouts using Swift or React Native.

Was this page helpful?