Checkout app extensions

Checkout app extensions make it easy for developers to extend their app code into checkout, and customize many aspects of the checkout experience. There are two types of checkout app extensions available: UI extensions and Scripts.

These app extensions make customizations easy to distribute, fast for merchants to install, and upgrade-safe, enabling merchants to continue getting platform benefits as Shopify releases new features.

Features

Today, using checkout app extensions, you can do the following:

  • Add new personalized content such as messages or interactive offers to the post-purchase page.
  • Personalize the set of checkout options, such as shipping methods or payment methods.

Soon, you'll also be able to do the following:

  • Add new UI to checkout, such as custom content, messages or interactive elements.
  • Capture additional information from the buyer in checkout.
  • Validate information input by buyers.
  • Create custom discounts.

UI extensions

UI extensions allow you to add new user interface (UI) and functionality to checkout, and are built into apps using extension points, APIs, and UI components provided by Shopify.

Checkout UI extensions code is hosted on Shopify’s CDN for fast delivery. Your extension code is run securely inside of a Web Worker sandbox in the browser.

UI extensions are designed to provide enough flexibility to support a wide variety of customization use cases, while maintaining guardrails to ensure the trust and performance checkout has always been known for.

Post-purchase UI extension point

The first UI extension point to be released to developers is the post-purchase extension, available in public beta. These extensions allow developers and Plus merchants to surface an offer (such as an upsell) or show content to a buyer on a post-purchase page. This page is shown to the buyer right after they have completed their checkout and confirmed an order, but before they arrive at the thank you page.

Other checkout UI extensions

As development continues on checkout extensions, Shopify will release additional UI extension points for checkout, additional APIs, and new checkout components to expand the set of supported use cases.

Scripts

Scripts let you add custom server-side logic to checkout, and securely change the behavior of payment methods, shipping rates, and checkout line items. You can use scripts to do the following:

  • Hide shipping rates for B2B customers
  • Add handling times to shipping rates
  • Prioritize preferred payment methods
  • Hide manual payment methods for non-eligible customers

How scripts work

You create a script and deploy it to a custom app. Merchants then install the app on their store so that the script runs when a customer interacts with Shopify checkout.

A diagram showing the relationship between a script, an app, and a Shopify store

The following diagram shows the lifecycle of a script:

A diagram showing the workflow

  • App developers create scripts using Shopify CLI, test and configure scripts, and deploy scripts to a custom app. App developers monitor scripts by reviewing run times and errors in their Partner Dashboard.
  • Merchants install custom apps on their store, enable the script on their store, and confirm that the script is working as expected.
  • Customers interact with Shopify checkout which allows Shopify to find and execute the script.

Benefits

Benefits of Shopify Scripts include the following:

  • Co-located scripts run in Shopify: Scripts are co-located and run directly in Shopify, so they scale with Shopify checkout.
  • Better performance: Complex scripts can run in less than 10 ms. Shopify Scripts is built on WebAssembly architecture to speed up the development process, improve reliability, and make your scripts run faster.
  • Declarative rather than procedural APIs: Scripts APIs are declarative APIs, whereas the previous Shopify Editor scripts were procedural. This means that you tell the Shopify Scripts APIs what you want to do, and Shopify figures out how best to do it. For example, rather than letting you modify the checkout or the cart directly, Shopify exposes a list of well-defined, supported features that you can interact with and that will work predictably. Scripts APIs are also strongly typed, so more errors appear at compile time rather than at run time.

Next steps

On this page