---
title: Preload checkouts for instant loading
description: >-
  Deliver an instant checkout with advanced preloading for a seamless customer
  experience.
source_url:
  html: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading'
  md: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md'
---

ExpandOn this page

* [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#what-youll-learn)
* [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#requirements)
* [Step 1: Preload checkout](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#step-1-preload-checkout)
* [Step 2: Manage the lifecycle of preloaded checkouts](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#step-2-manage-the-lifecycle-of-preloaded-checkouts)
* [How to disable preloading](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#how-to-disable-preloading)

# Preload checkouts for instant loading

Loading a checkout session can result in wait time for customers, depending on their network quality and available bandwidth. To help you deliver an instant checkout and a seamless customer experience, the Checkout Kit provides a preloading feature that allows developers to signal that the checkout session should be loaded in the background in advance.

***

## What you'll learn

In this tutorial, you'll learn how to do the following tasks:

* Preload checkout when using Checkout Kit
* Manage the lifecycle of preloaded checkouts
* How to disable preloading

***

## Requirements

* You have an app using Checkout Kit

***

## Step 1: Preload checkout

To preload a checkout, call `preload()` with a valid checkout URL.

## Preload checkout

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

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

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


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

##### iOS

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

##### Android

```
ShopifyCheckoutSheetKit.preload(checkoutUrl)
```

##### React Native

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

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

Note

Note: Calling `preload(checkoutUrl)` is a hint, not a guarantee. Depending on various conditions such as periods of high amounts of traffic, the library may delay or ignore calls to preload. In cases where preloading does not complete before `present(checkoutUrl)` is called, customers may need to wait for the checkout session to load.

***

## Step 2: Manage the lifecycle of preloaded checkouts

Preloading renders a checkout in a background webview, which is brought to the foreground when `ShopifyCheckoutSheetKit.present()` is called. The content of a preloaded checkout reflects the state of the cart when `preload()` was called. If the cart is mutated after `preload()` is called, you should keep checkouts up-to-date.

You can do this through either of these options:

* Calling `preload()` again which will update preloaded contents
* Calling `ShopifyCheckoutSheetKit.invalidate()` to manually invalidate the cache

Tip

Calling `preload()` each time a customer adds an item to the cart triggers background network requests and increases CPU and memory usage. Frequent preloading can also place additional demand on Shopify systems, potentially resulting in rejected requests and requiring customers to load checkout from scratch.

Instead, preload checkout only when there is a strong indication that the customer will soon proceed to checkout. For example, a good opportunity to preload is when the customer navigates to the cart.

### Invalidate the cache

If a preloaded checkout is no longer valid, you can manually clear the preload cache through the `ShopifyCheckoutSheetKit.invalidate()` helper function. If no checkout is preloaded, this function will be a no-op.

Note

Note: A preloaded checkout is not automatically invalidated when the checkout sheet is closed. Preloaded checkouts are retained if a customer exits the sheet and should be kept up to date.

***

## How to disable preloading

To disable preloading, set enabled to `false`. This allows you to selectively toggle preloading behavior dynamically as needed, such as when data saver functionality is enabled by the customer. When preloading is disabled, all calls to `preload()` are ignored.

## Disable preloading

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

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

```jsx
const configuration = {preloading: false}
<ShopifyCheckoutSheetProvider
   configuration={configuration}>
  <App />
</ShopifyCheckoutSheetProvider>
```

##### iOS

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

##### Android

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

##### React Native

```
const configuration = {preloading: false}
<ShopifyCheckoutSheetProvider
   configuration={configuration}>
  <App />
</ShopifyCheckoutSheetProvider>
```

***

* [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#what-youll-learn)
* [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#requirements)
* [Step 1: Preload checkout](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#step-1-preload-checkout)
* [Step 2: Manage the lifecycle of preloaded checkouts](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#step-2-manage-the-lifecycle-of-preloaded-checkouts)
* [How to disable preloading](https://shopify.dev/docs/storefronts/mobile/checkout-kit/preloading.md#how-to-disable-preloading)