Next Commerce
Checkout

Prospect Cart

A prospect cart captures the visitor's email (and name) before they complete the order, so an abandoned checkout can be recovered later. It is created automatically by the checkout form once enough contact detail is valid — no address or payment is required.


How It Activates

The prospect cart runs inside the main checkout form — you do not add a separate attribute for it. As long as the page has a data-next-checkout form, the prospect cart is initialized with it.

It watches the contact fields (email, first name, last name) and, when they are valid, creates a prospect cart through the API containing the email, name, cart items, and attribution (UTM, referrer, device). Address data is intentionally not included.

The prospect cart stores its state in sessionStorage under next_prospect_cart and expires after 30 minutes by default.


Configuration

Tune behavior with attributes on the checkout <form>:

AttributePurposeDefault
data-auto-createSet to false to disable automatic creationenabled
data-trigger-onWhen to create: emailEntry, phoneEntry, emailAndPhone, formStart, manualemailEntry
data-email-fieldOverride the email input's name to watchemail
data-phone-fieldOverride the phone input's name to watchphone
data-min-phone-digitsMinimum digits to accept a phone when intl-tel-input is unavailable
data-prospect-configA JSON config object applied before the individual attributes
<form data-next-checkout
      data-trigger-on="emailAndPhone"
      data-min-phone-digits="10">
  ...
</form>

The trigger decides which contact fields are required: emailEntry/formStart/manual need a valid email, phoneEntry needs a valid phone, and emailAndPhone needs both.


Lifecycle Events

The prospect cart dispatches DOM CustomEvents on document:

EventWhen
next:prospect-cart-createdA prospect cart was created — detail includes the cart and prospect cart
next:prospect-cart-abandonedThe visitor abandoned without ordering
next:prospect-cart-convertedThe visitor completed the order
document.addEventListener('next:prospect-cart-created', (e) => {
  console.log('Prospect captured', e.detail.prospectCart);
});

Next Steps

On this page