Checkout Review

The Checkout Review enhancer automatically displays stored checkout data from previous steps, allowing customers to review their information before completing their order.

The enhancer reads from the checkout store and supports multiple format types, auto-updates when data changes, and works with any container element.

Key Features

Automatic data loading - Reads from checkout store automatically
Multiple format types - Text, address, name, phone, currency
Real-time updates - Auto-updates when checkout data changes
Fallback support - Custom text for empty fields
Flexible containers - Works with any HTML element

Basic Usage

Container Setup

Mark a container element with the checkout-review enhancer:

<div data-next-enhancer="checkout-review">
  <!-- Review fields go here -->
</div>

All checkout review fields within this container will be automatically populated with data from the checkout store.

Simple Text Fields

Display individual checkout fields:

<div data-next-enhancer="checkout-review">
  <!-- Email -->
  <div class="review-row">
    <span class="label">Contact:</span>
    <span data-next-checkout-review="email"></span>
  </div>

  <!-- Phone -->
  <div class="review-row">
    <span class="label">Phone:</span>
    <span data-next-checkout-review="phone" data-next-format="phone"></span>
  </div>
</div>

Formatted Fields

Use format types to display formatted data:

<div data-next-enhancer="checkout-review">
  <!-- Full name -->
  <div class="review-row">
    <span class="label">Name:</span>
    <span data-next-checkout-review="fname" data-next-format="name"></span>
  </div>

  <!-- Full address -->
  <div class="review-row">
    <span class="label">Ship to:</span>
    <address data-next-checkout-review="address1" data-next-format="address"></address>
  </div>
</div>

Attributes

Required Attributes

Attribute	Value	Description
`data-next-enhancer`	`"checkout-review"`	Marks container element as checkout review enhancer
`data-next-checkout-review`	Field name	Specifies which checkout field to display

Optional Attributes

Attribute	Values	Description
`data-next-format`	`text`, `address`, `name`, `phone`, `currency`	Format type for the field value
`data-next-fallback`	Any text	Text to display when field is empty

Available Fields

All fields from the checkout store's form data:

Field	Description	Example Value
`email`	Customer email	[email protected]
`fname`	First name	John
`lname`	Last name	Doe
`phone`	Phone number	5551234567
`address1`	Street address	1949 East Camelback Road
`address2`	Apartment, suite, etc.	Suite 100
`city`	City	Phoenix
`province`	State/Province	AZ
`postal`	ZIP/Postal code	85016
`country`	Country code	US

Format Types

text (Default)

Displays the raw field value as text:

<!-- Default format (text) -->
<span data-next-checkout-review="email"></span>
<!-- Output: [email protected] -->

<!-- Explicit text format -->
<span data-next-checkout-review="email" data-next-format="text"></span>
<!-- Output: [email protected] -->

Use for: Email, individual name fields, individual address components

address

Combines multiple address fields into a single formatted address:

<address data-next-checkout-review="address1" data-next-format="address"></address>
<!-- Output: 1949 East Camelback Road, Phoenix AZ 85016, United States -->

Includes:

address1 (required)
address2 (if provided)
city (required)
province (required)
postal (required)
country (required - converts code to full name)

Example output formats:

With address2: 123 Main St, Apt 4B, Springfield IL 62701, United States
Without address2: 123 Main St, Springfield IL 62701, United States

Notes:

Use address1 as the field name
Country codes automatically convert to full names (US → United States)
address2 only included if it has a value

name

Combines first and last name into a full name:

<span data-next-checkout-review="fname" data-next-format="name"></span>
<!-- Output: John Doe -->

Includes:

fname (first name)
lname (last name)

Notes:

Use fname as the field name
Automatically combines both names with a space

phone

Formats phone numbers into standard display format:

<span data-next-checkout-review="phone" data-next-format="phone"></span>
<!-- Output: (555) 123-4567 -->

Input: Raw digits (e.g., 5551234567) Output: Formatted phone number (e.g., (555) 123-4567)

currency

Formats numeric values as currency:

<span data-next-checkout-review="shippingMethod.price" data-next-format="currency"></span>
<!-- Output: $9.99 -->

Use for: Prices, shipping costs, or any monetary value

Nested Fields

Access nested checkout data using dot notation:

<!-- Nested address field -->
<span data-next-checkout-review="billingAddress.city"></span>

<!-- Nested shipping data with currency format -->
<span data-next-checkout-review="shippingMethod.price" data-next-format="currency"></span>
<!-- Output: $9.99 -->

Fallback Text

Provide default text for empty or undefined fields:

<span data-next-checkout-review="address2"
      data-next-fallback="No apartment number"></span>

When the field is empty:

Displays the fallback text
Adds next-review-empty CSS class for styling

Auto-Updates

The enhancer automatically subscribes to checkout store changes:

<div data-next-enhancer="checkout-review">
  <!-- These fields auto-update when customer changes data -->
  <span data-next-checkout-review="email"></span>
  <span data-next-checkout-review="fname" data-next-format="name"></span>
</div>

How it works:

Customer enters information on checkout step 1
Customer proceeds to review page
Review fields automatically populate with stored data
If customer goes back and updates information
Review fields automatically update when they return

No manual refresh or JavaScript required.

CSS Classes

next-review-empty

Applied to elements when field is empty or using fallback text:

.next-review-empty {
  color: #999;
  font-style: italic;
}

Use this class to visually distinguish empty states from actual customer data.

Complete Example

Shopify-style checkout review section:

<section aria-label="Review"
         class="checkout-review"
         data-next-enhancer="checkout-review">
  <h2>Review your information</h2>

  <div class="review-table">
    <!-- Contact -->
    <div class="review-row">
      <div class="review-cell">
        <div class="review-label">Contact</div>
        <div class="review-value" data-next-checkout-review="email"></div>
      </div>
      <div class="review-cell">
        <a href="information.html" class="review-change">Change</a>
      </div>
    </div>

    <!-- Shipping Address -->
    <div class="review-row">
      <div class="review-cell">
        <div class="review-label">Ship to</div>
        <address class="review-value"
                 data-next-checkout-review="address1"
                 data-next-format="address"></address>
      </div>
      <div class="review-cell">
        <a href="information.html" class="review-change">Change</a>
      </div>
    </div>

    <!-- Phone -->
    <div class="review-row">
      <div class="review-cell">
        <div class="review-label">Phone</div>
        <div class="review-value"
             data-next-checkout-review="phone"
             data-next-format="phone"></div>
      </div>
      <div class="review-cell">
        <a href="information.html" class="review-change">Change</a>
      </div>
    </div>
  </div>
</section>

Example Styling

.checkout-review {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.review-table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.review-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-label {
  font-weight: 600;
  color: #333;
}

.review-value {
  color: #666;
}

.review-change {
  color: #0066cc;
  text-decoration: none;
  font-size: 0.9em;
}

.review-change:hover {
  text-decoration: underline;
}

/* Empty state styling */
.next-review-empty {
  color: #999;
  font-style: italic;
}

Advanced Usage

Manual Registration

const reviewContainer = document.querySelector('.checkout-review');
const enhancer = await sdk.enhancers.register('checkout-review', reviewContainer);

Mixed Format Types

Combine different format types in one review section:

<div data-next-enhancer="checkout-review">
  <!-- Text format -->
  <div>Email: <span data-next-checkout-review="email"></span></div>

  <!-- Name format -->
  <div>Name: <span data-next-checkout-review="fname" data-next-format="name"></span></div>

  <!-- Phone format -->
  <div>Phone: <span data-next-checkout-review="phone" data-next-format="phone"></span></div>

  <!-- Address format -->
  <div>Address: <address data-next-checkout-review="address1" data-next-format="address"></address></div>
</div>

Conditional Display with Fallbacks

<div data-next-enhancer="checkout-review">
  <!-- Required field with fallback -->
  <div class="review-field">
    <span class="label">Email:</span>
    <span data-next-checkout-review="email"
          data-next-fallback="Email not provided"></span>
  </div>

  <!-- Optional field with fallback -->
  <div class="review-field">
    <span class="label">Apartment:</span>
    <span data-next-checkout-review="address2"
          data-next-fallback="—"></span>
  </div>
</div>

Format Types Reference

Format	Field Used	Combines	Output Example
`text`	Any field	Single field	[email protected]
`address`	`address1`	address1, address2, city, province, postal, country	123 Main St, Suite 1, Phoenix AZ 85016, United States
`name`	`fname`	fname + lname	John Doe
`phone`	`phone`	Single field (formatted)	(555) 123-4567
`currency`	Any numeric	Single field (formatted)	$9.99

Common Patterns

Customer Information Summary

<div data-next-enhancer="checkout-review" class="customer-summary">
  <h3>Customer Information</h3>
  <dl>
    <dt>Name:</dt>
    <dd data-next-checkout-review="fname" data-next-format="name">-</dd>

    <dt>Email:</dt>
    <dd data-next-checkout-review="email">-</dd>

    <dt>Phone:</dt>
    <dd data-next-checkout-review="phone" data-next-format="phone">-</dd>
  </dl>
</div>

Address Review

<div data-next-enhancer="checkout-review" class="address-review">
  <h3>Shipping Address</h3>
  <address data-next-checkout-review="address1"
           data-next-format="address"
           data-next-fallback="No shipping address provided"></address>
</div>

Multi-Section Review

<div data-next-enhancer="checkout-review">
  <!-- Contact Section -->
  <section class="review-section">
    <h3>Contact Information</h3>
    <div data-next-checkout-review="email"></div>
    <div data-next-checkout-review="phone" data-next-format="phone"></div>
  </section>

  <!-- Shipping Section -->
  <section class="review-section">
    <h3>Shipping Address</h3>
    <address data-next-checkout-review="address1" data-next-format="address"></address>
  </section>
</div>

Important Notes

The enhancer must be placed inside a container with data-next-enhancer="checkout-review"
All review fields within the container will be automatically populated
The enhancer subscribes to checkout store updates for real-time changes
Country codes are automatically converted to full country names (US → United States)
Fallback text triggers the next-review-empty CSS class for styling

Action Attributes - Checkout form actions
Display Attributes - Display dynamic data
State Attributes - Conditional display logic

On this page