Promo Code Step
A working code field that applies live, adds the discount line, reprices the pay button, and states plainly what codes exclude.
A working code field that applies live, adds the discount line, reprices the pay button, and states plainly what codes exclude.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Promo Code Step is step 3 of 3 in the checkout, a working Input plus Apply Button from ui/input and ui/button that takes a code, drops a discount line into the totals, and reprices both the total and the pay button live. Once a code applies, the field swaps for a Tag row naming the code with a Remove link that reverts every number. The copy stays honest about where real codes live, in the newsletter and on socials, never saved for insiders, and what they exclude, one code per order on full price items with sale prices already at their floor.
The applied code is a single string state, null until Apply fires, and the totals array conditionally splices the discount line based on it. The pay button always shows the price after the code, and the footer keeps stacking and expiry news here rather than on the receipt.
Reach for this block as the discount stage of checkout, after totals are known and before payment. Wire the field to your real code validation so an expired or non stacking code says so in place, not after the charge.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the single field that reprices totals and the button together. Other code configurations:
Tip: keeping the pay button in sync with the discount means the buyer never learns the real number one screen too late.