Preload checkout

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

Anchor to RequirementsRequirements

• Checkout Kit installed in your app.
• A valid checkoutUrl from Build a mobile storefront or a cart permalink.

Anchor to Enable preloadingEnable 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:

ShopifyCheckoutSheetKit.preload(checkout: checkoutURL)

ShopifyCheckoutSheetKit.preload(checkoutUrl, context)

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

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

Anchor to Manage preloaded checkoutsManage 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.

Anchor to Disable preloadingDisable 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():

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

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

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

const configuration = { preloading: false };

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

Anchor to Next stepsNext steps

Monitor checkout lifecycle

Handle what happens after a preloaded checkout completes, fails, or is canceled.

Configure checkout branding

Customize the checkout color scheme and title to match your app.

Accelerated checkouts

Add Shop Pay and Apple Pay buttons for one-tap purchases on product and cart pages.