Upsells
Post-purchase upsells let you offer additional products to a customer after their initial order has been placed. The customer accepts with a single click — no payment re-collection — and the order is updated server-side using the stored payment method.
How It Works
- The customer completes checkout. The order is created with a unique
ref_id. - They land on an upsell page with
?ref_id=ORD-1234in the URL. The SDK loads the order intoorderStore. - The page shows one or more offers. If the order has
supports_post_purchase_upsells: true, the accept button is enabled. - The customer clicks accept. The SDK posts an
addUpsellline to the order API and navigates to the next page.
Two Patterns
The SDK provides two enhancers for upsells. Pick whichever matches your design:
| Pattern | Activation attribute | When to use |
|---|---|---|
| Accept-upsell button | data-next-action="accept-upsell" | Lightweight. A single button on the page; the offer card is plain HTML. Pair with a PackageSelectorEnhancer if you need variant choice. |
| Upsell offer container | data-next-upsell="offer" | Container-driven. The offer card itself owns the add/skip buttons, options, and quantity controls. Best when the card is a self-contained widget. |
Both patterns can run on the same page and target the same order.
Get Started
Add your first upsell page in a few lines of HTML.
Accept Button
The data-next-action="accept-upsell" pattern — lightweight, button-only.
Offer Container
The data-next-upsell="offer" container with built-in add/skip buttons.
Selectors
Let the customer pick a variant or quantity option before accepting.
Quantity
Increase/decrease buttons and quantity toggle cards inside an offer.
Page Flow
Multi-step funnels, meta-tag wiring, redirect URLs, and back-navigation guards.
Reference
All upsell attributes, CSS classes, and emitted events.