---
title: Preload checkout
description: Load checkout in the background so it's ready before the buyer needs it.
source_url:
  html: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading'
  md: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md'
---

# Preload checkout

Preloading fetches checkout in the background. When the buyer taps **Checkout**, checkout is already loaded and opens with no delay.

Without preload

With preload

***

## Requirements

* [Checkout Kit](https://shopify.dev/docs/storefronts/mobile/checkout-kit) installed in your app.
* A valid `checkoutUrl` from [Build a mobile storefront](https://shopify.dev/docs/storefronts/mobile/build-mobile-storefront) or a [cart permalink](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks).

***

## Enable preloading

When the buyer navigates to the cart, call `preload()` to start fetching checkout in the background. By the time they tap **Checkout**, the page is ready:

## Preload checkout

##### Swift

```swift
ShopifyCheckoutSheetKit.preload(checkout: checkoutURL)
```

##### Kotlin

```kotlin
ShopifyCheckoutSheetKit.preload(checkoutUrl, context)
```

##### React Native

```javascript
// using hooks
const shopifyCheckout = useShopifyCheckoutSheet();
shopifyCheckout.preload(checkoutUrl);

// using a class instance
const shopifyCheckout = new ShopifyCheckoutSheet();
shopifyCheckout.preload(checkoutUrl);
```

**Caution:**

Avoid calling `preload()` on every add-to-cart action. Frequent preloading triggers background network requests, increases memory usage, and might trigger Storefront API rate limits.

***

## Manage preloaded checkouts

Preloading renders checkout in a background WebView. The preloaded checkout reflects the cart at the time you call `preload()`. When you call `ShopifyCheckoutSheetKit.present()`, the checkout moves to the foreground.

If the cart changes after preloading, call `preload()` again to refresh, or call `ShopifyCheckoutSheetKit.invalidate()` to clear the cache. Closing checkout doesn't automatically invalidate preloaded content, so update it when the buyer modifies their cart.

Checkout Kit might delay or skip preloading during high traffic. If preloading doesn't complete before you call `present(checkoutUrl)`, then buyers see a loading state.

***

## Disable preloading

To disable preloading, set `enabled` to `false`. You might disable it when a buyer enables data saver mode. When disabled, Checkout Kit ignores all calls to `preload()`:

## Disable preloading

##### Swift

```swift
ShopifyCheckoutSheetKit.configure {
    $0.preloading.enabled = false // defaults to true
}
```

##### Kotlin

```kotlin
ShopifyCheckoutSheetKit.configure {
    it.preloading = Preloading(enabled = false) // defaults to true
}
```

##### React Native

```jsx
import { ShopifyCheckoutSheetProvider } from '@shopify/checkout-sheet-kit';

const configuration = { preloading: false };

<ShopifyCheckoutSheetProvider configuration={configuration}>
  <App />
</ShopifyCheckoutSheetProvider>
```

***

## Next steps

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

[Handle what happens after a preloaded checkout completes, fails, or is canceled.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/monitor-checkout-lifecycle)

[Configure checkout branding\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration)

[Customize the checkout color scheme and title to match your app.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration)

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

***