Get Started

Build a complete review section with three formatted fields: name, address, and phone.

Mark the Container

The enhancer activates when an ancestor element has data-next-enhancer="checkout-review". Place all review fields inside it.

<section data-next-enhancer="checkout-review">
  <!-- review fields here -->
</section>

Add Review Fields

Each review field needs data-next-checkout-review="<fieldName>". The field name matches the form field's name in checkoutStore.

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

  <div class="row">
    <strong>Email</strong>
    <span data-next-checkout-review="email"></span>
  </div>

  <div class="row">
    <strong>Name</strong>
    <span data-next-checkout-review="fname" data-next-format="name"></span>
  </div>

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

  <div class="row">
    <strong>Ship to</strong>
    <address data-next-checkout-review="address1" data-next-format="address"></address>
  </div>
</section>

Format Types

Add data-next-format to format the value:

Format	What it does
(none)	Plain text — the raw stored value
`name`	Combines `fname` + `lname` into a full name
`address`	Combines `address1`, `address2`, `city`, `province`, `postal`, and `country` into a single address line. The country code is converted to the full country name
`phone`	Formats raw digits as `(555) 123-4567`
`currency`	Formats numeric values as currency

For name use fname as the field. For address use address1. The enhancer assembles the rest of the fields automatically.

Fallback for Empty Fields

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

When the field is empty, the fallback text is rendered and the element gets the next-review-empty CSS class so you can style empty states differently.

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

Auto-Update

Review fields subscribe to checkoutStore. If the customer navigates back, edits a field, and returns, the review page updates without a refresh.

The review fields must be inside an element with data-next-enhancer="checkout-review". If you forget the container, the fields render their fallback text (or empty) and never update.

Next Steps

Full attribute table: Reference → Attributes