Upsell offer tiers

After the order is paid: one or two earbuds cases at their offer price, "Yes, add it" to add the picked one to the order, and "No thanks" to go on without it.

CODE
<div data-next-selector="cases">
  <button data-next-option="one" data-next-items="3">1 case · <span data-next-query="total"></span></button>
  <button data-next-option="two" data-next-items="3x2" data-next-selected>
    2 cases · <span data-next-query="price"></span> each
  </button>
</div>
<button data-next-action="acceptUpsell" data-next-selector-id="cases" data-next-go="receipt.html">
  Yes, add it to my order
</button>
<button data-next-action="skipUpsell" data-next-selector-id="cases" data-next-go="receipt.html">No thanks</button>

The page is opened with ?ref_id=<order>, so the selector is a post-purchase offer, priced for that order. acceptUpsell adds the picked option to the same order with no new payment; data-next-go then opens the next page with the same ref_id, so offers chain until the receipt. An offer is added once per order and page: a second accept moves on without charging again.

StyleWhen
[data-next-option][data-next-selected]the picked tier
[data-next-option][data-next-loading]the tiers are being priced
[data-next-action][data-next-loading]the offer is being added
[data-next-action][data-next-invalid]it could not be added; errors.order is unsupported, failed or busy

Events: upsell.viewed, then upsell.accepted with order.updated, upsell.skipped, or payment.failed for a decline.

See also: Upsell Page, Order and upsell, Action list.