Bundle Vouchers

Assign voucher/coupon codes to individual bundle cards. When the visitor switches bundles, the previous card's codes are removed and the new card's codes are applied — automatically, without additional configuration.

<!-- Via attribute (static card) -->
<div data-next-bundle-card
     data-next-bundle-id="premium"
     data-next-bundle-vouchers="SAVE10,FREESHIP"
     data-next-bundle-items='[{"packageId":10,"quantity":2}]'>
  Premium Bundle
</div>

// Via auto-render JSON definition
{
  "id": "premium",
  "vouchers": ["SAVE10", "FREESHIP"],
  "items": [{ "packageId": 10, "quantity": 2 }]
}

Vouchers declared this way are managed entirely by the bundle selector. Do not manage bundle vouchers separately using the coupon input element.

How Voucher Swaps Work

Voucher changes run before the cart write. When the selection changes from card A to card B:

1. Any voucher on A that is not on B is removed from checkout
2. Any voucher on B that is not already applied is added
3. Vouchers shared between A and B are left untouched
4. calculateTotals() is called to reflect the new coupon state in price displays

Bundle-managed vouchers are tracked across all bundle selectors on the page. When the voucher list changes, only the user-entered portion (codes not belonging to any bundle) is diffed — a bundle swap that adds or removes bundle vouchers will not trigger a redundant price re-fetch.

Vouchers in Upsell Context

Voucher recalculation works in upsell context (data-next-upsell-context) as well. When a coupon is applied — for example from an exit-intent popup — the bundle price is refetched with the updated voucher list.

Bundle-managed vouchers are always sent to the API first, followed by user-applied coupons. This ordering ensures that discount percentage stacking is calculated correctly: the bundle discount applies to the base price, and the user coupon applies on top.

Voucher Ordering

When a bundle card has its own vouchers via data-next-bundle-vouchers and the visitor also applies a coupon (through the coupon input or an exit-intent popup), both are sent to the price calculation API. The order matters for percentage-based discounts:

1. Bundle-managed vouchers are applied first (base discount)
2. User-entered coupons are applied on top (stacked discount)

This means a bundle voucher for 10% off and a user coupon for 5% off will apply the 10% first, then 5% on the reduced total — not the other way around.