---
title: Embed Checkout Kit
description: >-
  Embed Shopify checkout in your mobile app with Checkout Kit. Supports iOS,
  Android, and React Native.
source_url:
  html: 'https://shopify.dev/docs/storefronts/mobile-next/checkout-kit'
  md: 'https://shopify.dev/docs/storefronts/mobile-next/checkout-kit.md'
---

# Embed Checkout Kit

Checkout Kit is an open-source SDK for [Swift, Android, and React Native](https://github.com/Shopify/checkout-kit) that embeds Shopify checkout inside your mobile app. Pass a `checkoutUrl`, and buyers get Shopify checkout with your store's branding, payment methods, and extensions in an app-adapted layout. Shopify processes the payment, applies tax and regulatory rules, and creates the order.

***

## Quick start

Install the SDK, pass a `checkoutUrl`, and Checkout Kit presents your store's checkout in a native sheet over your app:

## Install and present checkout

##### Swift

```swift
// Add to Package.swift:
// .package(url: "https://github.com/Shopify/checkout-kit", from: "4.0.0")

import ShopifyCheckoutKit

ShopifyCheckout.present(checkout: checkoutUrl, from: self, delegate: self)
```

##### Kotlin

```kotlin
// Add to build.gradle.kts:
// implementation("com.shopify:checkout-kit:4.0.0")

import com.shopify.checkoutkit.checkout.ShopifyCheckout

ShopifyCheckout.present(checkoutUrl, activity) {
    onDismiss { /* buyer closed checkout */ }
    onFail { error -> /* checkout failed */ }
}
```

##### React Native

```javascript
// npm install @shopify/checkout-kit-react-native

import { useShopifyCheckout } from '@shopify/checkout-kit-react-native';

const shopifyCheckout = useShopifyCheckout();
shopifyCheckout.present(checkoutUrl, {
  onDismiss: () => { /* buyer closed checkout */ },
  onFail: ({error}) => { /* checkout failed */ },
});
```

For event handling, see [Monitor checkout lifecycle](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle). For branding options, see [Configure checkout branding](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration).

***

## How it works

Checkout Kit takes a `checkoutUrl` and presents checkout inside your app. A `checkoutUrl` comes from either a [`cartCreate` mutation](https://shopify.dev/docs/storefronts/mobile/build-mobile-storefront#get-a-checkout-url) or a [cart permalink](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks) that redirects to checkout.

1. Get a `checkoutUrl` and pass it to Checkout Kit.
2. Checkout Kit presents your store's checkout inside the app.
3. The buyer enters shipping and payment details.
4. Shopify processes the payment and creates the order.
5. Checkout Kit fires lifecycle events throughout: `start` when checkout is ready, `update` as checkout state changes, `complete` when checkout reports success, `fail` when checkout can't continue, and `dismiss` when the buyer closes it, with or without an order. Only `complete` signals success.

Checkout Kit supports iOS, Android, and React Native:

| Platform | SDK | Min version |
| - | - | - |
| iOS | [ShopifyCheckoutKit](https://github.com/Shopify/checkout-kit/tree/main/platforms/swift) | iOS 15.0, Swift 6 |
| Android | [com.shopify:checkout-kit](https://github.com/Shopify/checkout-kit/tree/main/platforms/android) | Android SDK 23, JDK 17 |
| React Native | [@shopify/checkout-kit-react-native](https://github.com/Shopify/checkout-kit/tree/main/platforms/react-native) | React Native 0.77 with the New Architecture |

***

## Checkout Kit features

After you've embedded Checkout Kit in your app, you can customize and optimize the checkout experience:

* **[Preload checkout](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading)**: Fetch checkout in the background to reduce loading time when the buyer is ready to pay.
* **[Monitor checkout lifecycle](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle)**: Respond when checkout completes, fails, or the buyer cancels. Use callbacks to update your UI and reset cart state.
* **[Authenticate checkouts](https://shopify.dev/docs/storefronts/mobile/checkout-kit/authenticate-checkouts)**: Sign buyers in to prefill checkout with saved addresses and payment methods.
* **[Privacy compliance](https://shopify.dev/docs/storefronts/mobile/checkout-kit/privacy-compliance)**: Pass General Data Protection Regulation (GDPR), California Consumer Privacy Act (CCPA), and App Tracking Transparency (ATT) consent to Shopify so the right tracking rules apply during checkout.

***

## Store customizations in checkout

Checkout Kit renders your store's checkout in an app-adapted layout:

* **[Branding](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration)**: Match your store's colors, logos, and fonts. Pick the `.app(.automatic())` appearance for light and dark mode support, or `.storefront` to pull your store's custom branding from the Shopify admin.
* **[UI extensions](https://shopify.dev/docs/api/checkout-ui-extensions/latest)**: Add custom fields, banners, and logic with checkout UI extensions.
* **[Shopify Functions](https://shopify.dev/docs/apps/build/functions)**: Run discounts, payment customizations, and delivery rules at checkout.
* **[Payment methods](https://shopify.dev/docs/apps/build/payments)**: Accept all configured payment providers, including Shop Pay and Apple Pay.

**ShopifyPlus:**

Checkout UI extensions and checkout branding require [Shopify Plus](https://help.shopify.com/en/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan).

![Three mobile screens showing a Shopify checkout with store branding, Shop Pay, and order confirmation.](https://shopify.dev/assets/assets/images/custom-storefronts/checkout-sheet-kit/csk-branding-options-0G3j9Uza.png)

***

## Next steps

[Preload checkout\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading)

[Reduce loading time by fetching checkout before the buyer is ready to pay.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading)

[Monitor checkout lifecycle\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle)

[Respond to the start, update, complete, fail, and dismiss events in your app.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle)

[Accelerated checkouts\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview)

[Add Shop Pay and Apple Pay buttons for one-tap purchases on product and cart pages.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview)

[Upgrade from Checkout Sheet Kit\
\
](https://shopify.dev/docs/storefronts/mobile-next/checkout-kit/upgrade-to-v4)

[Move an existing Checkout Sheet Kit v3 integration to Checkout Kit v4.](https://shopify.dev/docs/storefronts/mobile-next/checkout-kit/upgrade-to-v4)

***