I'm currently redesigning a mobile checkout, and I've run into a problem when building the "payment details page."

Every checkout in the world needs one of these, and they all basically need to have the same fields:

  • Card Details
    • Card Number
    • Name on Card
    • Card Expiry Date
    • CVS Code
  • Billing Address
    • Address Street
    • Address Country
    • Address Postcode

Is there a convention for the order which these fields are presented. Do we normally ask for the billing address details first, or the card details first?

It sounds like a trivial question, but having built a couple of mockup wireframes it feels like it makes a lot of difference to the user-feel of the form.

One of the two approaches should signal more clearly to an experienced user that they are on a "payment" page. I just don't know which one.

Aside: I know the correct answer is to user-test both versions, but assume for the minute that I don't have time to user-test at this stage in the design process, and would like to save the later user-testing budget for more critical issues. So ideally I'd like to resolve this issue by using whatever the current convention is.

  • Will this be for digital products (i.e. downloads, etc.)? Or you will you be shipping tangible goods? If the latter, there will need to be shipping details as well.
    – jnmnrd
    Commented Jan 17, 2014 at 14:54
  • @JNMNRD It's for tangible goods, however the shipping details have already been entered on a previous page. Obviously there will be a control on this page to "use shipping details as delivery address." My question is about whether or not the {billing address section} goes before or after {card details section} by convention, in the section of your checkout devoted to just "payment" related data.
    – Racheet
    Commented Jan 17, 2014 at 15:21

1 Answer 1


Given that the user has already put in their shipping details, the best approach to this is to go with the Billing Address input next and the credit card details last.

The reason for this approach is you can by default, pre-populate the data the user has already put into the shipping detail fields over to the billing information to ease the process. This information usually has the same fields such as "Name", "Address", etc. As a fallback, also provide a way to edit the Billing address if needed at that stage.

The card input section should be last. The reason being is I look at it in terms of the overall context of where the user is and the situation they're likely in. After they fill out the shipping/billing information, they will likely scramble at this point to find their wallet and pull out their credit card which may require them to temporarily focus on doing that. I would rather have them do that at the end as opposed to between inputting their shipping and billing information.

As a best practice, also provide other means of payment such as Paypal, Google Wallet, etc., to avoid the "scramble to find wallet" situation.


Referring to the Baymard Institutes, "Usability benchmark of 100 e-commerce sites ranked by checkout usability performance". Listing below the top three ranked sites, all three require the Shipping/Billing inputs be put in first before payments and review which is put in at the end of the process.


(1)Crate & Barrel: http://baymard.com/checkout-usability/benchmark/top-100/45-crate-barrel

(2)Symantec: http://baymard.com/checkout-usability/benchmark/top-100/34-symantec

(3)Autozone: http://baymard.com/checkout-usability/benchmark/top-100/99-autozone


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.