Billing Form: Credit Card details first or last?

Question

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?

---

Images:

Above:

Below:

Answer 1

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?

Answer 2

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.

Answer 3

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.

Answer 4

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.