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.

## How it works

You can build functionality in your app that enables merchants to provide the following experiences:

- [Client-side validation](#client-side-validation) using a checkout UI extension
- [Server-side validation](#server-side-validation) using a validation function

### Client-side validation




> Shopify Plus:
> [Checkout UI extensions](/docs/api/checkout-ui-extensions) that render on the information and shipping and payment steps in checkout are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan.




You can use a [checkout UI extension](/docs/api/checkout-ui-extensions) 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.

### Server-side validation

You can use [Shopify Functions](/docs/apps/build/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](/docs/storefronts/headless/building-with-the-storefront-api/cart/manage), and at [checkout](/docs/apps/build/checkout).

## Getting started

Follow these tutorials to get started with building validations in checkout.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/checkout/cart-checkout-validation/create-client-side-validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create client-side validation
    </h3>
    <p class="resource-card__description">Use a checkout UI extension to validate fields at checkout and block customer progress.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/storefront"
     data-alt-src="/assets/resource-cards/storefront-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create server-side validation
    </h3>
    <p class="resource-card__description">Use Shopify Functions to block progress on a checkout when the cart line quantities exceed a limit.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/checkout/cart-checkout-validation/create-admin-ui-validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/function"
     data-alt-src="/assets/resource-cards/function-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create the admin UI
    </h3>
    <p class="resource-card__description">Use Shopify Functions to limit a cart&#39;s item quantity during checkout according to the merchant&#39;s preferences.</p>
  </a>
</div>

</div>


## Developer tools and resources

Explore the following developer tools and resources to get familiar with building validations in checkout.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/apis/extensiontargets" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/build"
     data-alt-src="/assets/resource-cards/build-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout UI extensions API reference
    </h3>
    <p class="resource-card__description">Consult the API reference for checkout UI targets and their respective types.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/admin-extensions/latest/components/forms/functionsettings" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      FunctionSettings component reference
    </h3>
    <p class="resource-card__description">Learn about the component that you can use to build a UI extension for your validation function.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Components for checkout UI extensions
    </h3>
    <p class="resource-card__description">See the full list of components that are available in checkout UI extensions.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/configuration" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/gear"
     data-alt-src="/assets/resource-cards/gear-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout extension configuration
    </h3>
    <p class="resource-card__description">Learn about the properties that you can configure in your checkout UI extension.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/api/functions/reference/cart-checkout-validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/graphql"
     data-alt-src="/assets/resource-cards/graphql-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Cart and Checkout Validation Function API reference
    </h3>
    <p class="resource-card__description">Consult the GraphQL reference for the Cart and Checkout Validation Function API.</p>
  </a>
</div>

<div>
  <a class="resource-card" href="/docs/apps/build/functions/programming-languages" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/javascript"
     data-alt-src="/assets/resource-cards/javascript-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Language support
    </h3>
    <p class="resource-card__description">Learn about the language support and tooling that are available in Shopify Functions.</p>
  </a>
</div>

</div>