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:

1. Customer enters information on checkout step 1
2. Customer proceeds to review page
3. Review fields automatically populate with stored data
4. If customer goes back and updates information
5. 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

Register the enhancer programmatically:

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

Related Documentation

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