Life-size checkout pages. Explained element by element.

The complete checkout page, annotated, plus six recreated flows and a comparison of integration methods. Each element shows what it does, what it costs in attention, and what happens behind the scenes.

Integration methodFlowPayer’s country

The provider’s component slots into the merchant’s page and handles the order of payment methods, wallets and authentication on its own. The merchant chooses the colors, not the layout.

🔒 boutique-demo.fr/paiement

Demo store🔒 Secure checkout

CartDeliveryPayment

Wired headphonessold and shipped by the store38,08 €

Subtotal38,08 €

Standard delivery, 2 to 3 days3,50 €

VAT 20%8,32 €

Total due49,90 €

No fees will be added at the next step.

Express checkout

or pay another way

Saved card

•••• 4242expires 04/29preselected

New payment method

Use another card

Almapay in installments

Brand detected from the first six digits and preselected by the merchant, because it lowers the merchant’s fees. Regulation (EU) 2015/751 on interchange fees gives the cardholder the final say: a preference can be displayed, never imposed.

Card form collapsed by the default choicefour fields skipped

Back to cart

🔒 Encrypted data↩️ 30-day returns💬 Customer service available

Payment declinedThe card’s spending limit has been reached. The issuing bank can raise it, or the purchase can be paid in installments.issuer code 51 · your details are kept, nothing to re-enter

✓ Payment approved49,90 €charged on Aug. 23receipt sent by email

Descriptor that will appear on the bank statement: DEMO BOUTIQUE PARIS

Card, manual entry

The baseline flow that every other one is measured against. The payer enters their card number, the merchant requests authorization, and the issuer responds.

The von Restorff effect

the button should be the highest-contrast element

The von Restorff effect describes how people remember an item that stands out from its surroundings. Applied to checkout, it makes the pay button the one point of contrast on the page: a single primary action, the exact amount printed on it, full width on mobile. Two buttons of equal weight cancel the effect.

📚 Von Restorff (1933); CXL tests: a high-contrast button yields measurable gains in clicks.

Payment methods listed · France

CardCartes Bancaires (CB)American ExpressMastercardUnionPay (中国银联)Visa (Visa U.S.A. / Visa Inc.)Visa Electron

WalletLydia / SumeriaAircashApple PayGoogle Wallet (formerly Google Pay and Android Pay)PayPalRevolutSamsung PayWero

Instant paymentsSTET Instant Payment CSMMyBankRT1SEPA · SCT, SCT Inst, SDDSEPA Instant Credit Transfer (SCT Inst)SEPA Instant Credit Transfer (SCT Inst) and Regulation (EU) 2024/886TARGET Instant Payment Settlement (TIPS)

Buy now, pay lateralmaAlmaFLOAFLOA PayOneyOney 3x/4xKlarnaKlarna

StablecoinEUR CoinVertible (EURCV) and USD CoinVertible (USDCV)EURCV (EUR CoinVertible)