About cart and checkout validation
Validation is the process of checking data against specified requirements. This guide introduces client-side validations, and server-side validations, and describes the available resources that you can use to build them in Shopify checkout.
Anchor to How it worksHow it works
You can build functionality in your app that enables merchants to provide the following experiences:
- Client-side validation using a checkout UI extension
- Server-side validation using a validation function
Anchor to Client-side validationClient-side validation
Checkout UI extensions that render on the information and shipping and payment steps in checkout are available only to stores on a Shopify Plus plan.
You can use a checkout UI extension to perform client-side validation at checkout.
By validating checkout information in the browser, merchants can prevent customers from proceeding in the checkout when they haven't met certain conditions. For example, you can prevent customers from shipping to a PO box, or block customers under the age of 18 from making a purchase.
A benefit of client-side validation is that it provides immediate feedback, eliminating the need for a server round-trip. As a result, customers can correct issues sooner, leading to a more efficient and streamlined user experience.
However, it's important to note that client-side validation can be bypassed. Therefore, any validation that can affect your business should be enforced through a validation function on the server-side, such as verifying that the customer isn't attempting to exceed purchase limits or ensuring that loyalty program points are properly redeemed.
Anchor to Server-side validationServer-side validation
You can use Shopify Functions to implement validation on the server-side.
By validating cart and checkout information on the server, merchants can ensure that purchases meet certain criteria before a customer can check out or complete an order. For example, you can enforce an order maximum for customers with insufficient order history, and prevent them from proceeding through checkout.
Using Shopify Functions for server-side validation is the recommended approach to ensure that a merchant's business logic is enforced. Server-side validation is available for online store carts, carts built for custom storefronts, and at checkout.
Anchor to Getting startedGetting started
Follow these tutorials to get started with building validations in checkout.
Use a checkout UI extension to validate fields at checkout and block customer progress.
Use Shopify Functions to block progress on a checkout when the cart line quantities exceed a limit.
Use Shopify Functions to limit a cart's item quantity during checkout according to the merchant's preferences.
Anchor to Developer tools and resourcesDeveloper tools and resources
Explore the following developer tools and resources to get familiar with building validations in checkout.
Consult the API reference for checkout UI targets and their respective types.
Learn about the component that you can use to build a UI extension for your validation function.
See the full list of components that are available in checkout UI extensions.
Learn about the properties that you can configure in your checkout UI extension.
Consult the GraphQL reference for the Cart and Checkout Validation Function API.
Learn about the language support and tooling that are available in Shopify Functions.