🩳 Abercrombie’s subtle but clever Secure Payment header helps ease shoppers’ anxiety around submitting financial information

👗 Lulu’s applies a shaded field behind the credit card input form to visually separate it from other elements

🤔 Note the shading multiple sections doesn’t have the same effect

👕 JCPenney displays its Norton seal proximal to the credit card input field — a long standing best practices (vs. placing it out of the user’s eye path

👕 JCPenney displays its Norton seal proximal to the credit card input field — a long standing best practices (vs. placing it out of the user’s eye path

👠 Just Fab’s Secure Payment has a pop of color and helpful microcopy, but may be overlooked by users. They could A/B test this against alternate placement, mocked up (below):

👖 Aritzia’s security lock and microcopy may be just as effective as a gawdy trust badge. Test it!

👀 Columbia places a creative icon with detailed copy to attract attention near the Continue to Review Order button

👎 Presenting an open credit card form first pushes alternative payment options below the mobile fold

🧘🏽 Lululemon presents alternative payments above the open credit card form. Bonus points for adding sub-copy to differentiate the pay later options from PayPal, which also has a pay later option not offered from this site

🩳 Abercrombie presents one row of colorful icons for its payment options. This saves vertical space and grabs attention

👟 Foot Locker uses radio buttons with Credit selected by default. This enables mobile users to preview payment methods quickly, but may confuse customers who have not scrolled deep enough to see the exposed form (in a single-page checkout flow)

🧘🏿‍♂️ Lululemon explains the payment schedules for AfterPay and Klarna. This also makes it more clear that the PayPal option is not the split-payment version of PayPal

👚 Colored shading draws more attention to the all-important copy-address-to-Billing checkbox than black-and-white (that fades into the form)

Compare this to the typical white/black checkbox styling that can be easily glossed over:

💥 Follow the same formatting as physical credit cards and place the Card Number first, and ask Name on Card last

👖 Urban Outfitters shows the required format inside its expiration date field

Contrast this with a form that places form labels inline — there’s no room for additional hinted context

👠 Saks Fifth Avenue’s CVV tooltip shows both Visa and AMEX locations with explainer copy

❓Guess takes the guesswork out of CVV. It’s larger illustrations are easier to interpret than Saks, above, and clearly calls out the AMEX condition

👖 Abercrombie’s large illustrations are clear, with simpler microcopy — but the low contrast design may be less effective than the above examples

👗 Ashley Stewart’s inline icon saves users a click/hover over a tooltip marker. The downside is AMEX users’ code is on the front

🏂 Patagonia combines the same CVV icon with some microcopy for clarity. Make sure these align on the same row in desktop and mobile forms to maintain context

🧢 It’s harder to determine if the icon relates to the Expiration Year or Security Code fields, at a glance

👠 DSW knows there’s value in capturing users’ first party data. Guest checkouts display one final step before submitting payment - earn free shipping and a $5 reward

🐶 Only a handful of sites accept crypto but if you want to, check out Coinbase plug in

😐 The gift certificate/gift card Apply button is styled exactly the same as Save & Review Order. Most customers will not be tripped by this, but it’s not best practice

😬 This example again! So many UX sins in one form. Can you spot the PayPal tab? I’ll give you a minute…

☠️ Avoid “unifields” that merge input fields in one row, with no visual distinction between them. The tooltip won’t save you!

☠️ There’s no reason for splitting Month and Year into 2 drop downs and slowing users down! What’s more - there’s no label indicating these refer to the Expiration Date (though many users will understand)

😬 This minimalistic design breaks conventions, making it confusing to users. Paired with the additional horizontal lines, it’s easy to conclude that PayPal and Afterpay are the only options

Compared to the good CVV examples above, this tooltip styling is hard to process - light on dark, tiny text + lengthy sentences = 😬

🤨 There’s no need to impose such a step on your valued customers! All forms can auto-detect card types by their first few digits

☠️ You got them this far, why risk prompting them to abandon checkout to hunt for coupons on affiliate sites that never referred them in the first place?

☠️ Capturing the email address early in checkout allows you to send cart recovery emails. While this isn’t terrible for users, it’s a missed opportunity