Flow
A reward for a user to earn a discount on their purchase, promo codes are a pre-requisite in any e-commerce website. To avoid a confused customer, make sure they understand what is happening with their code - whether it works, expired or isn't applicable.
Steps
Reset
Show promo code input field
The cart or checkout are pages expected to have a promo code field. It should be in a place that can be seen when scanning towards the button to continue.
Promo code applied successfully
The change can be reflected using your success state colors (likely green) to indicate the code was applied.
In the example is two different options, divided by how much information you want to show. For both, hiding the input field altogether makes it clear only one code can be entered.
Reflect promo code impact
This can be shown with the promo code entry as a total amount, or be represented on In item-to-item basis.
It's important to also show or at least repeat the discount near the total at checkout.
Promo code error
The promo code may not be applicable, or entered incorrectly.
Remove promo code
In some cases, a user might not like the discount offered and prefer the original sale price of an item. Or, they found a better promo code to use.
