Validate fields at checkout
Previously, you created a checkout UI extension that renders some text in the checkout flow. Now you want to add a validation at checkout that blocks customers from progressing in the checkout if they input invalid data.
In this tutorial, you'll use the Checkout::Contact::RenderAfter extension point and checkout UI components to collect input, and validate it. Using the block_progress capability, you'll block the customer from progressing in checkout. You'll also adjust your extension UI to handle cases where the merchant doesn't allow the extension to block the checkout progress.
This tutorial is for validating the customer's age, but you can use it as the basis for building other use cases for field validation, such as address or tax code validation.
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 the extension point and capabilities
- Render a
TextFieldand set the props that you'll need to implement validation - Use the
buyerJourneyintercept to perform validation and block progress - Check if you have the ability to block checkout progress
Requirements
Anchor link to section titled "Requirements"- You've completed the getting started guide.
Sample code
Anchor link to section titled "Sample code"Using the Checkout::Contact::RenderAfter extension point, the sample code imports the TextField and Banner components to build the UI. It uses the buyerJourney intercept to validate the input, block checkout progress, and set validation errors.
It detects whether the extension has the block_progress capability. If it doesn't, then it updates the label and required props for the TextField accordingly.
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.
You'll also need to update your extension's configuration file with the information in the code example.
The rest of the tutorial walks through this sample code step-by-step.
Step 1: Set up the extension point and capability
Anchor link to section titled "Step 1: Set up the extension point and capability"The Checkout::Contact::RenderAfter extension point renders the extension after the contact section on the information step of the checkout. The block_progress capability enables the extension to block checkout progress if the merchant allows it when configuring the extension within the checkout editor.
Set the entry point for the extension in
index:Set the extension point and
block_progresscapability in the shopify.ui.extension.toml file:
Step 2: Render the extension components
Anchor link to section titled "Step 2: Render the extension components"In this step, you'll render a text field to gather the customer's age. The TextField component is used to add a required field. You'll use the Banner component to render an error message when the customer inputs an invalid age, and use the buyerJourney intercept to block checkout progress.
Checking for the ability to block checkout progress
Anchor link to section titled "Checking for the ability to block checkout progress"Adding the block_progress capability to your shopify.ui.extension.toml file doesn't guarantee that the extension can block checkout progress. The merchant can allow or disallow this capability in the checkout editor. We recommend adjusting the extension accordingly to handle cases where merchants don't grant the extension this capability.
The following code snippet from where you rendered the extension components detects if the merchant has granted the ability to block checkout progress. If you're collecting optional input, then you should update the label and whether the field is required: