Skip to main content

Checkout Sheet Kit

Checkout Sheet Kit enables mobile app developers to provide the world’s best-converting checkout experience with only a few lines of code. It provides a fully-featured checkout that preserves all store customizations and supports idiomatic app defaults, such as light and dark mode. This delivers the best mobile app experience that is crucial for driving conversion, being compliant, and creating loyal customers.

CSK Purchase Flow
Info

We're in the process of renaming "Checkout Sheet Kit" to "Checkout Kit." While marketing materials may already reflect this change, the developer docs and open source repos will be updated in an upcoming version.

Anchor to How it worksHow it works

The Checkout Sheet Kit is easy to implement and maintain with support for Swift, Kotlin, and React Native. The entry point to a native checkout is a cart permalink or a familiar checkout URL from the Cart API. The kit creates a bridge to web checkout, registers callbacks to monitor lifecycle events, preloads for an instant checkout, renders in an optimized sheet, and supports authenticated handoffs. The checkout itself preserves all store customizations and business logic, including checkout UI extensions, Shopify Functions, branding, and more. There is no need to build and maintain a separate checkout system, no trade-offs necessary. It is fully compatible for all merchants.

In order to present the checkout:

How to present the checkout

import UIKit
import ShopifyCheckoutSheetKit

class MyViewController: UIViewController {
func presentCheckout() {
let checkoutURL: URL = // obtained from buyer’s cart (Storefront API) or cart permalink
ShopifyCheckoutSheetKit.present(checkout: checkoutURL, from: self, delegate: self)
}
}
import com.shopify.checkoutsheetkit.ShopifyCheckoutSheetKit

fun presentCheckout() {
val checkoutUrl = cart.checkoutUrl
ShopifyCheckoutSheetKit.present(checkoutUrl, context, checkoutEventProcessor)
}
import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';

function App() {
const shopifyCheckout = useShopifyCheckoutSheet();
const handleClick = () => {
// Present the checkout
shopifyCheckout.present(checkoutUrl);
}
}

Anchor to When to use itWhen to use it

There are two ways that Checkout Sheets can be used, depending on the environment and need.

  • For all merchant-branded mobile apps, including those with customized checkouts, use Checkout Sheet Kit. It also works for many search and discovery apps that facilitate purchases from merchants across the internet without being the merchant of record.
  • For advanced use cases, select global partners can request to use Shopify’s Checkout Sheet Protocol, which is the underlying technology that powers Checkout Sheet Kit. The protocol unlocks custom checkout themes, feature configurations, and other bespoke capabilities, making it easier to meet certain data and branding specifications.

Anchor to Key FeaturesKey Features

  • Full-featured checkout: Checkout Sheet Kit preserves all store customizations and business logic, including checkout UI extensions, Shopify Functions, branding, and more.
  • Preload checkout: Developers can deliver an instant checkout with advanced preloading for a seamless customer experience. Preloading is enabled by default and is as simple as calling preload() with a valid checkout URL.
  • Monitor the lifecycle of a checkout session: With Checkout Sheet Kit, app developers can register callbacks for key checkout lifecycle events such as failed or completed checkout events to monitor and log the status of a checkout session, in addition to integrating with pixel events to understand customer behavior.
  • Authenticate checkouts and prefill buyer preferences: Checkout experiences with known buyers reduce friction and increase conversion. Depending on the status of the customer (logged-in or guest), the app developer can authenticate the customer to checkout or prefill the buyer identity and delivery and payment preferences.
  • Branding options: Checkout Sheet Kit supports a buyer’s iOS or Android device settings. It dynamically adjusts to the device in use, can be hard-coded to light or dark mode, or can match the merchant's store branding.
  • Accelerated checkouts: Enable customers to complete purchases faster including accelerated checkout buttons on storefront product and cart pages.
CSK Branding Options

Anchor to Case StudiesCase Studies

Anchor to Checkout Sheet Kit - StikkyCheckout Sheet Kit - Stikky

Learn how Stikky, a mobile app developer for Shopify merchants, leveraged Checkout Sheet Kit and saw a 15% boost in conversion while reducing checkout-related logic by 75%.

Anchor to Checkout Sheet Protocol - TikTokCheckout Sheet Protocol - TikTok

Learn how TikTok integrated Checkout Sheet Protocol to create friction-free buying experiences, making it easier for TikTok users to discover, shop, and check out directly in the app.

Anchor to RepositoriesRepositories

Checkout Sheet Kit is available for Swift, Android, and React Native.

Checkout Sheet Kit for Swift

A Swift library for presenting the Shopify checkout experience.

Checkout Sheet Kit for Android

An Android library for presenting the Shopify checkout experience.

Checkout Sheet Kit for React Native

A React Native module for presenting the Shopify checkout experience.

Note

The checkout experience is powered using embedded Shopify web checkout. The library implements a native bridge and protocol that abstracts all of the embedding logic behind simple-to-use native APIs with additional capabilities to pre-fill buyer identity, optimize how the checkout is loaded, how it is presented, and more. Check out our blog to learn how Checkout Sheet Kit is built.

Anchor to Next stepsNext steps

Was this page helpful?