The payment page and cart abandonment
The payment page is the screen where a shopper chooses a payment method, provides what that method requires, and places the order. It comes at the end of the online buying journey, after the cart has been built and shipping details entered. Payment is the most anxious moment in the journey, and reassurance determines whether the shopper follows through. Nine principles drawn from published usability research describe what happens there.
About 70% of carts are abandoned, according to the Baymard Institute’s 2024 average. The rate is calculated on carts created, not on all visits, so it covers shoppers who had already chosen a product and added it to their cart before giving up. Apart from just browsing, the top reason for abandonment identified by Baymard is extra costs that are too high (shipping, taxes, or fees), cited by 40% of US shoppers who abandon (2026 survey). The cause therefore lies upstream of the payment page, in how the total is displayed.
Where the data comes from
The conversion principles applied to payment draw on four types of source. The Baymard Institute publishes findings based on more than 130,000 hours of user testing, which provide the cart abandonment rate, the reasons shoppers give, and the form field count. The Nielsen Norman Group and the firm CXL publish usability research and A/B tests. The fourth type is academic research: the principles cite three studies by name, plus Hick’s law.
| Request | What it adds | Principles covered |
|---|---|---|
| Baymard Institute | More than 130,000 hours of user testing; abandonment rate, abandonment reasons, field counts | Price transparency, cognitive load, error handling |
| Nielsen Norman Group | Published interface usability research | Immediate reassurance, placement of reassurance |
| CXL | Published A/B tests | Von Restorff effect applied to the pay button |
| Academic research | Von Restorff (1933); Johnson & Goldstein (2003), “Do Defaults Save Lives?”; Kahneman; Hick’s law | Pull of the default option, cognitive load, von Restorff effect, peak-end rule |
| Provider data | Data published by Stripe and Adyen on mobile conversion | Order of payment methods |
Nine principles, nine page elements
Each of the nine principles is tied to one specific page element, the one where it can be seen at work. The order follows how the screen is read, from header to confirmation, not importance. Each element carries exactly one principle, so the table below also serves as an inventory of the nine zones annotated in the diagram. A principle tied to its element can be checked on a mockup, and the diagram shows this annotation by annotation.
| How it works | Page element | In short | Request |
|---|---|---|---|
| Immediate reassurance | Header | three seconds to build trust | Nielsen Norman Group: recognition comes before trust. |
| Price transparency | Order summary | 40% of shoppers who abandon cite extra costs | Baymard (2026 survey): 40% of US shoppers who abandon cite extra costs that are too high. |
| Order of payment methods | Wallet block | wallets before the form | Data published by Stripe and Adyen: 5 to 8 points of mobile conversion gained by putting wallets first. |
| The pull of the default | Preselected options | saved card, card brand, and country preselected | Johnson & Goldstein (2003), “Do Defaults Save Lives?”: the power of the default option. |
| Cognitive load | Form fields | Hick’s law: fewer choices, faster decisions | Baymard Institute: the average US checkout had 11.3 form fields in 2024, when most sites need only 8. |
| The von Restorff effect | Pay button | the button must be the highest-contrast element | Von Restorff (1933); CXL tests: a high-contrast button produces measurable click gains. |
| Placement of reassurance | Trust banner, below the button | guarantees below the button, never in the footer | Nielsen Norman Group: trust is built through contextual cues, not claims. |
| Error handling | Decline message | translate the decline code, keep what was entered | Baymard: error recovery is the weakest point of the checkouts observed. |
| The peak-end rule | Confirmation screen | a clear confirmation shapes how the payment is remembered | Kahneman: peak-end rule; a clear statement descriptor reduces disputes caused by confusion. |
Before data entry: header, order summary, wallets
Three principles concern what the shopper sees before typing anything. They cover the page header, the order summary, and the wallet block, the three zones the diagram places at the top of the screen. The first gives the page a three-second window.
Immediate reassurance, in the header
The header shows the store name, the current step, and a secure payment notice. A shopper who does not recognize where they are within the first few seconds will not enter a card number. Recognition comes before trust: it is recognition that allows the action, not the security promise written further down.
Price transparency, in the order summary
Apart from just browsing, the top reason for cart abandonment is extra costs, such as shipping, taxes, or service fees. Standard practice is to show the total including all taxes before the payment page, then repeat it next to the pay button. The amount that appears at the last second is the one that makes shoppers walk away.
Order of payment methods, in the wallet block
On mobile, showing Apple Pay, Google Pay, and PayPal before the card form captures shoppers in a hurry, who then have nothing to type, without penalizing the others. Display order alone is a conversion lever, regardless of which methods are offered.
The form: defaults, fields, button
Three principles concern the form itself. The first covers preselected options, starting with the brand on a co-badged card and the shipping method. The second covers the number of fields displayed, and the third the pay button. Together they describe what the page asks of the shopper, and what it shows at the moment of confirmation.
The pull of the default, in preselected options
More than 80% of users keep the preselected option. On a co-badged card in France, standard practice is to preselect CB; the country is inferred from the connection, and standard shipping is checked. A sensible default goes unnoticed. A default that serves the merchant at the shopper’s expense gets noticed and destroys trust.
Cognitive load, in the form fields
Cognitive load is the mental effort a page demands. Every extra field and every extra choice adds to it, and conversion drops as it rises. A payment form that follows this principle fits in a single column, asks only for what is strictly necessary, and prefills whatever it can infer, starting with the country. Hick’s law describes the mechanism: decision time increases with the number of options offered.
The von Restorff effect, on the pay button
The von Restorff effect describes how an item that stands out from its surroundings is more likely to be remembered. Applied to payment, it makes the pay button the only point of contrast on the page: one primary action, the exact amount written on it, and full width on mobile. Two buttons of equal weight cancel the effect.
Reassurance, errors, and confirmation
The last three principles concern what surrounds the pay button and what comes after it. The first covers where guarantees are placed, the second the message shown after a decline, and the third the confirmation screen. Two of them come into play after the issuer’s decision, whether a decline or an approval, when the shopper has already committed to paying.
Placement of reassurance, below the button
Padlock, card network logos, secure payment notice, return policy: where they appear matters more than whether they appear. Placed next to the card fields and the button, they act at the moment anxiety peaks. Relegated to the footer, they go unread.
Error handling, in the decline message
An unexplained payment decline ends the purchase. The recommended approach translates the code into plain language, like the example below, validates each field in real time, and keeps what the shopper entered after the failure. Error recovery remains the weakest aspect of payment pages.
“limit exceeded, contact your bank or pay in two installments”The peak-end rule, on the confirmation screen
The peak-end rule, formulated by Kahneman, holds that a memory is built on the most intense moment and on the final one. An immediate confirmation showing the amount, the debit date, and that the receipt has been sent ends the payment on a clear note. It paves the way for repeat purchases and heads off the “I don’t recognize this charge” dispute.
What color does
On a payment page, color matters first on the pay button, then on the wallet buttons, whose color each brand dictates. No color converts universally. What matters is contrast with the rest of the page and consistency with the brand, in line with the von Restorff effect. Cultural associations, on the other hand, are documented, and six of them are described below.
What to test, and what holds everywhere
An A/B test pits two versions of the same page against each other on equivalent groups of visitors and keeps the one with the better measured conversion. The principles above identify the elements such a test targets: the order of payment methods, the number of fields, the button color, or the wording of the decline message. They do not determine the outcome, which depends on the audience.
- price transparency;
- fewer form fields;
- wallets available up front;
- a single, high-contrast pay button;
- reassurance placed right next to the fields;
- and error handling that keeps what the shopper entered.
These six fundamentals overlap with six of the nine principles. The three left out are immediate reassurance, the pull of the default, and the peak-end rule. They apply, respectively, to the header, the preselected options, and the confirmation screen.