Checkout

The Checkout turns a plain HTML <form> into a working order page. Add data-next-checkout to a <form>, tag each input with a field attribute, and the SDK collects the data, validates it, tokenizes the card (swaps the card number for a secure token so it never touches your server), creates the order, and redirects to your confirmation page.

New to Campaigns? Set up the SDK, an API key, and a cart first at Campaigns → Getting Started. This section assumes those are already in place — see Get Started → Prerequisites.

How It Works

A single <form data-next-checkout> becomes the checkout — one enhancer (a class the SDK attaches to an element with a data-next-* attribute) drives the whole flow
Inputs are matched by data-next-checkout-field attributes, not by their name — so your HTML structure is up to you
On submit, the SDK validates every field, tokenizes the card with Spreedly, and posts the order to the API
On success it clears the cart, then redirects to the order confirmation (or upsell) page

Express buttons (PayPal, Apple Pay, Google Pay), address autocomplete, and prospect-cart email capture all attach to the same form.

Get Started

Build a working checkout form with contact, address, and card fields in a few lines of HTML.

The Form

Field attributes, validation, country/state handling, and separate billing address.

Payment

Credit card fields via Spreedly, payment method selection, and tokenization.

Express Checkout

Auto-rendered PayPal, Apple Pay, and Google Pay buttons gated by device support.

Address Autocomplete

Google Maps or NextCommerce address suggestions that fill the address fields.

Review Step

Show previously entered checkout data on a multi-step review page.

Prospect Cart

Capture the visitor's email before they finish — for abandoned-cart recovery.

Order Flow

What happens on submit: validation, tokenization, order creation, redirect, and state reset.

Reference

Complete tables for attributes, field names, events, and CSS classes.