Getting started with client-side validation in checkout

You want to add a validation at checkout that blocks customers from progressing in the checkout when 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 buyerJourney intercept and block_progress capabilities, you'll block the customer from progressing in checkout and show a validation error. 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.