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 Sheet Kit provides a preloading feature that allows developers to signal that the checkout session should be loaded in the background in advance.
Anchor to What you'll learnWhat you'll learn
In this tutorial, you'll learn how to do the following tasks:
- Preload checkout when using Checkout Sheet Kit
- Manage the lifecycle of preloaded checkouts
- How to disable preloading
Anchor to RequirementsRequirements
- You have an app using Checkout Sheet Kit
Anchor to Step 1: Preload checkoutStep 1: Preload checkout
To preload a checkout, call preload() with a valid checkout URL.
Preload checkout
ShopifyCheckoutSheetKit.preload(checkout: checkoutURL)ShopifyCheckoutSheetKit.preload(checkoutUrl)// using hooks
const shopifyCheckout = useShopifyCheckoutSheet();
shopifyCheckout.preload(checkoutUrl);
// using a class instance
const shopifyCheckout = new ShopifyCheckoutSheet();
shopifyCheckout.preload(checkoutUrl);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.
Anchor to Step 2: Manage the lifecycle of preloaded checkoutsStep 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
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.
Anchor to Invalidate the cacheInvalidate 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: 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.
Anchor to How to disable preloadingHow 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
ShopifyCheckoutSheetKit.configure {
$0.preloading.enabled = false // defaults to true
}ShopifyCheckoutSheetKit.configure {
it.preloading = Preloading(enabled = false) // defaults to true
}const configuration = {preloading: false}
<ShopifyCheckoutSheetProvider
configuration={configuration}>
<App />
</ShopifyCheckoutSheetProvider>