Getting started
Start here — every checkout page loads the SDK this way.
One script tag. The SDK reads your campaign, finds every data-next-* attribute on the page, and wires them to live cart state.
<!-- Load SDK --> <script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/campaign-cart@latest/dist/loader.js" type="module"></script> <!-- Campaign API key (public, domain-allowlisted) --> <meta name="next-api-key" content="YOUR_CAMPAIGN_API_KEY"> <meta name="next-page-type" content="checkout">
Bundle selectors
Use during checkout offer configuration.
Bundle cards wired to cart state. In swap mode, picking a bundle replaces the cart contents — one decision, one total.
<div data-next-bundle-selector data-next-selection-mode="swap"> <div data-next-bundle-card data-next-bundle-id="duo" data-next-bundle-items='[{"packageId":2,"quantity":2}]' data-next-selected="true">…</div> <div data-next-bundle-card data-next-bundle-id="triple" data-next-bundle-items='[{"packageId":2,"quantity":3}]'>…</div> </div>
Order bumps
Use when adding optional add-ons at checkout.
A checkbox that adds a line item without leaving checkout. The SDK recalculates totals; declining removes it cleanly.
<div data-next-package-toggle> <div data-next-toggle-card data-next-package-id="7" data-next-is-upsell="true" data-next-package-sync="1"> <input type="checkbox"> Add gift wrap — $3.99 </div> </div>
Upsells
Use after purchase, before the receipt page.
A post-purchase offer that charges against the original payment — accept adds to the order, decline moves on. No re-entry of card details.
<div data-next-upsell="offer" data-next-package-id="7"> <h3>Add an extra battery?</h3> <button data-next-upsell-action="add"> Yes, add to order </button> <button data-next-upsell-action="skip"> No thanks </button> </div>
Attributes
Use when displaying live cart or product values.
Any element can display live cart values with data-next-display. Values update — and flash — the moment state changes.
<span data-next-display="cart.quantity">1</span> <span data-next-display="cart.total">$35.98</span> <span data-next-display="package.name">2x Drone</span>