💸

Billing / payment step

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

🛍️

Note that these examples refer to non-Shopify sites that have more flexibility over their checkout UI, except for those highlighted in orange. A dedicated Shopify section is coming soon!

💡 Ideas and tips

Increase perceived security

‣

Use “Secure Payment” as the step heading

‣

Add a shaded box to the payment form

‣

Use the Norton trust seal (seriously)

‣

🦄 Place security assurance with credit card input fields

‣

Test a home-grown trust seal

Improve usability

‣

Show express and alternative payment options first, above the credit card form

‣

🦄 Use microcopy to annotate BNPL details

‣

Add color to your “Shipping address > Billing” checkbox

‣

Match credit card fields to credit card sequence

‣

Use flexible data input for credit card, telephone and postal code fields

‣

Use an input mask for credit card and telephone info

‣

Tailor your input masks for localized context

‣

Auto-format credit card spaces

‣

Use MM/YY hint text for Expiration Date

‣

Show customers where to find the CVV code (tooltip with illustration)

‣

🦄 Put a CVV icon directly in the form (instead of a tooltip)

‣

🦄 Consider incentivizing account sign up in last step

Alternate payments

‣

Pay with crypto

🫣 Cautions

‣

Don’t let call to action buttons compete with each other

‣

Don’t hide your PayPal option behind a tab

‣

Don’t use a “unifield”

‣

Don’t split the Expiration Date into 2 fields

‣

Don’t use a ghost field 👻

‣

Don’t use wordy microcopy in your CVV tooltip without illustration

‣

Don’t include a “Choose credit card type” step

‣

Don’t show the coupon box ☠️ DEAD LAST IN CHECKOUT

‣

Don’t ask for email address ☠️ DEAD LAST IN CHECKOUT

Back to Checkout ideas

👉 Follow on LinkedIn for daily ideas 💡