Adding custom banners to checkout
Previously, you created a checkout extension that renders some text in the checkout flow. Now you want to render the text as a banner.
In this tutorial, you'll use the Checkout::Dynamic::Render extension point and checkout UI components to build the banner. You'll use configuration fields, so that merchants can configure the banner's title, text, and status level. You'll also provide support for static extension points. Merchants can use the checkout editor to render the extension in one of the supported locations in checkout.
TODO: A gif/visual of merchants setting the content for it within the checkout editor. It will start with an image or gif of what's being built, to orient Partners to what they can expect to end up with at the end of the tutorial.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
Set up a banner to display to customers
Set up configuration fields that enable merchants to control the banner content
Support multiple extension points that enable merchants to choose where to render the banner
Requirements
Anchor link to section titled "Requirements"- You've completed the getting started guide.
Sample Code
Anchor link to section titled "Sample Code"The sample code imports the Banner component to build the UI. The code uses configuration fields to provide the content that's rendered in the Banner component. The code supports multiple extension points, including Checkout::Dynamic::Render and Checkout::DeliveryAddress::RenderBefore.
You can copy and paste the following code into your index file and add a few example values to get the extension to render in the browser. The rest of the tutorial walks through this sample code step-by-step.
Step 1: Set up the extension points
Anchor link to section titled "Step 1: Set up the extension points"Setting up the the extension points enables merchants to select which extension point they want to use and where it renders in checkout. You can place dynamic and static extension points in any location that's supported for the extension point type.
Set up the following extension points:
Checkout::Dynamic::Render: A dynamic extension point that merchants can place in any supported location.Checkout::DeliveryAddress::RenderBefore: A static extension point that, in this example, renders above the shipping address form.
Set the extension points in the
extension.config.yml.
Step 2: Set up configuration fields
Anchor link to section titled "Step 2: Set up configuration fields"Now that you've set up extension points, you can set configuration fields in the extension.config.yml so that merchants can configure the banner. Configuration fields display in the checkout editor.
In this example, you'll set the following configuration fields:
title: The title of the banner.description: The text in the body of the banner.status: The status of the banner, which sets the banner's color and icon. You can setstatusto one ofinfo,success,warning, orcritical.
TODO: Show how the fields are set up within
extension.config.yml
Step 3: Render the components
Anchor link to section titled "Step 3: Render the components"In this step, you'll use the Banner component to render the banner with the content from the configuration fields that you set up.
Learn more about the extension point APIs and UI components library for building checkout extensions.
Learn about localizing checkout for international merchants and customers.
Learn the UX guidelines for adding custom banners to checkout.