New APIs and components for Checkout UI extensions

API

New Checkout UI Extensions APIs

With this new API release, checkout UI extensions can access the storefront API without needing to be a sales channel. They can also read and edit discount codes and gift cards, and generate a signed token to be verified on an app server. Extensions can also verify that they are rendering in the checkout editor.

• Buyer journey and order hooks - Extensions can use the buyer journey API to render different extensions on the order status page based on the intended step in the customer journey (e.g. on checkout completion, or order fulfillment). For more details about extensions on the order status page, see here
• Storefront Direct Access API - Extensions can query the storefront API of a shop to get additional information like product tags, product recommendations, or currency conversions. Shopify handles authentication, so the extension only needs to pass in the query. This API is available to all apps and does not require the app to be a sales channel.
• Rendered in editor API - Extensions can now detect when they are being rendered inside the checkout editor. Extensions that only conditionally render to buyers should always use this to render content for merchants configuring the extension.
• Discount Code API - Extensions can now read discount allocations and discount codes in checkout, and add or remove the discount code(s).
• Gift Card API - Extensions can now read the gift card code applied to a checkout along with the amount. They can also add or remove gift card codes.
• Session Token API - Shopify provides a token signed with the app’s secret to the extension. This token can be passed via external call to an app server, and the app can trust that the contents of the token were created by Shopify

New UI Components

With the following new components, checkout UI extensions can progressively disclose information that buyers can opt in to. Using the overlay activation pattern on interactive components, extensions can show buyers information on customer trust like terms and conditions, trust badges, or warranties. Additional conditional styles offer more props to build performant UI.

• Pressable - Extensions can now use this generic interactive component without the styling that comes with a button or link.
• Component Overlays - Extensions have access to a set of accessible UI component overlays that provide additional information on interaction from Button, Link or Pressable components.
• Conditional style additions to Button, GridItem and Image
• Text has access to a visibility prop that allows visually-hidden content
• GridItem has added styling props on background, BlockSize and InlineSize