Getting started with server-side validation in cart and checkout
You can use cart and checkout validations to ensure that purchases meet certain criteria before checking out, or completing an order. In this tutorial, you’ll use Shopify Functions to enforce an order maximum for buyers with insufficient order history, preventing them from proceeding through checkout.
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:
- Generate starter code for Shopify Functions.
- Use GraphQL to define the input of your function.
- Deploy functions to the Shopify platform.
- Review logs for your function.
Requirements
Anchor link to section titled "Requirements"- You've created a Partner account.
- You've created a development store with the checkout extensibility preview enabled.
You've created an app that uses Shopify CLI 3.0 or higher. If you previously installed Shopify CLI, then make sure you're using the latest version.
If you plan to create a UI for your extension, then start with the Remix app template.
You've installed Node.js 16 or higher.
You've installed your app on the development store with the checkout extensibility preview enabled.
Rust-specific requirements
Anchor link to section titled "Rust-specific requirements"The following requirements are specific to Rust-based development with Shopify Functions.
You've installed Rust.
On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.
You've installed cargo-wasi:
Step 1: Create the cart and checkout validation function
Anchor link to section titled "Step 1: Create the cart and checkout validation function"To create your cart and checkout validation function, you can use Shopify CLI to generate a starter function, specify the inputs for your function using an input query, and implement your function logic using Javascript or Rust.
Navigate to your app directory:
Run one of the following commands to create a new cart and checkout validation extension:
Choose the language that you want to use. For this tutorial, you should select either JavaScript or Rust.
Navigate to
extensions/cart-checkout-validation
:Replace the contents of
input.graphql
file with the following code.input.graphql
defines the input for the function. You need the customer's order count and current cart subtotal.If you're using JavaScript, then run the following command to regenerate types based on your input query:
Replace the
src/index.js
orsrc/main.rs
file with the following code.This function logic checks for order subtotals greater than a set value and errors when a new customer is detected. You can adjust the subtotal limit or new customer detection logic as needed.
Step 2: Preview the function on a development store
Anchor link to section titled "Step 2: Preview the function on a development store"To test your function, you need to make it available to your development store.
If you're developing a function in a language other than JavaScript, TypeScript, or Rust, ensure you have configured
build.watch
in your function settings.Navigate back to your app root:
Use the Shopify CLI
dev
command to start app preview:You can keep the this preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.
Follow the CLI prompts to preview your app, and install it on your development store.
Step 3: Activate the cart and checkout validation
Anchor link to section titled "Step 3: Activate the cart and checkout validation"- From the Shopify admin, go to Settings > Checkout.
In the Checkout Rules section of the page click Add rule.
A dialog opens and shows the
cart-checkout-validation
function that you just deployed.To add a validation, select the function, and click Add rule.
Next to the installed validation, click ..., and click **Activate* to activate the function.
Optional: Control how checkout behaves when encountering runtime exceptions by clicking Edit rule and selecting or deselecting Allow all customers to submit checkout.
Step 4: Test the cart and checkout validation
Anchor link to section titled "Step 4: Test the cart and checkout validation"- From your online store, without logging in, create a cart with more then $1,000 in merchandise.
- Proceed to Checkout and verify that a warning message displays.
- Verify that checkout progress is blocked. Clicking the Continue to shipping button shouldn't redirect the user.
- Using a Storefront API cart mutation, confirm that the mutation's
userErrors
field contains the function's error message, and that executing the mutation was unsuccessful. - To debug your function, or view its output, you can review its logs in your Partner Dashboard.
- Log in to your Partner Dashboard and navigate to Apps > {your app} > Extensions > cart-checkout-validation.
- Click on any function run to view its input, output, and any logs written to
STDERR
.
- Learn more about how Shopify Functions work and the benefits of using Shopify Functions.
- Consult the API references for Shopify Functions.
- Learn how to use variables in your input query.