Promo Code Step

About this block

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.

When to use

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

• Order summary sidebar

After

• Payment form
• Order tracking

What you can display

One strong use is the single field that reprices totals and the button together. Other code configurations:

• Auto applied code. A campaign code arrives already applied, shown in the Tag row with the option to remove.
• Stacked rejection. A second code entered while one is live explains why it will not stack in place.
• Store credit field. The same pattern crediting a gift card or refund balance against the subtotal.

Tip: keeping the pay button in sync with the discount means the buyer never learns the real number one screen too late.