Background Info:

I am designing a new credit card form for my company and I am happy with the result. In the design I had the credit card details first because users can choose between CC and Paypal (If they choose paypal it takes them off the page and does not use any info they put in, so if this is last they would lose all that effort.) However, in the final review they decided to put the credit card details last and felt that was very important and mentioned that less than 3% use paypal.

So my question is: Which order of credit card detail and billing information produces the higher form completion rate?


Above: Above

Below: Below

  • I don't have evidence to share so I'm just going to comment with an opinion that the first version (CC details above) has a better feel for me. Sep 23, 2011 at 17:47

4 Answers 4


The reason so many e-commerce flows put credit card info last step is because it's a type of gradual engagement. By putting the "easy" stuff first (name, email address, etc... the stuff the user doesn't have to think about), you ease the user into the checkout flow. Because they're already committed to to the process, abandonment is far less likely when the user hits the "harder" step of actually paying (providing credit card details).

There's also something to be said for following convention in this case. The average user's mental model of a default checkout process will likely put the payment info as the last step... by matching this model, you give the user one less thing to think about.

Of course, your mileage may vary, which is why this is something that merits a proper A/B test... which design causes higher conversion and which cases greater abandonment?

  • 1
    Thanks, I think this answers why they want to, but I am more interested as to if there are any studies or data about this.
    – jonshariat
    Sep 23, 2011 at 18:16
  • @jonshariat I haven't seen any specific studies on this particular topic. One thing to keep in mind with PayPal, though, is that you could just add a "Checkout with PayPal" button after the summary box, which would handle the 3% of users who want to use PayPal, and then do what's best for the rest of your users independently from that case. Sep 23, 2011 at 18:21
  • Also, isn't the CC info higher value and keep them around to fill in the mundane stuff? Because I imagine a user is here because they feel they need to buy, they clicked one of our "buy now" buttons. If we capture their CC info right off that bat, thats a huge time investment and the rest is easy.
    – jonshariat
    Sep 23, 2011 at 18:33

I agree w/ Todd above. This is just opinion, but it seems to me that in this case the address info is supplemental to the credit card info, and deserves second positioning. Might be different where billing/shipping both to be involved.


It might depend on what processing you are doing with the credit card info. In many cases, the verification of the credit card requires address information for verification. If you are doing this using ajax, it makes sense to ask for the address information first.

In many traditional applications, the address information is asked for on an earier page, and so needs to be before the credit card information for that latter to be verified when it is submitted.

There is a sense that the information you enter actually all leads to the verification of the credit card, and so that should be the last process. @Daniels comment on gradual engagement is also very relevant, because the ultimate engagement is the entering of the credit card information. Once this is in, you need to finish as quickly as possible.

And the longer you have after the critical card infomration is entered, the higher chance that someone will rethink, and quit.


As I see it you are looking to accomplish two goals (1) Optimize form completions for your 97% usecase- credit card holders and (2) Ensure Paypal users do not waste time completing form details which are not necessary.

For (1), I agree with others that gradual engagement prepares the users to share credit card information.

For (2), Paypal users should not have to fill in any information, if you are not going to use any of the information that is filled out- this would likely frustrate them. Instead consider providing a hyperlink to paypal at the top, just above the address details (bifurcate the flow). So, replace the radio button for Paypal with a hyperlink.

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.