Skip to main content
247 votes

Splitting credit card number fields into four different inputs

I would generally always opt for the simplest solution. In this case, one single field for the user to type into. With split fields, such as the 4-box one you propose it adds in an extra cognitive ...
JonW's user avatar
  • 37.4k
145 votes

Splitting credit card number fields into four different inputs

This answer and this answer cover some of the points nicely but for some reason nobody is discussing auto-fill support. Don't use 4 separate fields. First, it's annoying, a lot of those reasons are ...
Jason C's user avatar
  • 2,684
66 votes

Splitting credit card number fields into four different inputs

As someone who happens to use virtual credit cards, I'm strongly in favour of a single field. Every time I want to pay, there is a new card number generated for me by the banking app, and it's very ...
Dmitry Grigoryev's user avatar
50 votes

Should we auto-select a new default payment method when the current default expired?

Don't select a new default card for the user. Usually it's nice for the system to help the user recover from a problem through strong new default, but your instincts are valid in this case. Even if ...
Izquierdo's user avatar
  • 12.7k
26 votes
Accepted

How to increase users' perception of security on a payment screen?

Google and UC Berkeley tested different solutions to understand users perception of HTTPS in the browser. While this is not specifically geared to a payment page, their paper contains some strong ...
Wes's user avatar
  • 426
22 votes

Splitting credit card number fields into four different inputs

The simplest, if not necessarily the absolute best, solution is a single credit-card field that lets a user input any string of digits and spaces. It should be trivial for the server-side logic to ...
nigel222's user avatar
  • 665
18 votes
Accepted

Should we auto-select a new default payment method when the current default expired?

...user should have full control over what card they want to use for a transaction... Rather than make that decision for users, give them the ability to make that decision beforehand... Replace ...
bloodyKnuckles's user avatar
16 votes

How to increase users' perception of security on a payment screen?

Baymard has done a number of studies on the subject of perceived webpage security, summarized in this article. Some key points: Throughout all of our testing of checkout processes, we’ve ...
kcazllerraf's user avatar
14 votes

Credit card field placeholder text

Placeholders gone terribly wrong tl;dr When a placeholder doesn't clarify anything, it shouldn't be there. This is a great example of the negative impact of placeholder text pointed out by NN/g ...
plainclothes's user avatar
  • 21.3k
11 votes
Accepted

How long should "1 month" be?

Stick to conventions and consistency This is really simple: if user is charged on day 5 of the month, he should be charged on day 5 next month. Most users plan in anticipation and they know that ...
Devin's user avatar
  • 38k
9 votes
Accepted

Should unavailable options be grayed out or invisible to users?

Users need to trust your application. If you remove unavailable options, they will have a difficult time understanding the rules that dictate completion of their goals. Here's a helpful article on ...
Mike M's user avatar
  • 24.7k
8 votes

Splitting credit card number fields into four different inputs

Luke Wroblewski, a UX expert with great insights on building efficient forms, answered this question: use a single numeric input field (here’s a video of how this works). As you can see in the video ...
David Regev's user avatar
  • 1,194
6 votes
Accepted

What is the best approach to use after user has made a payment?

Show them the order status page, thank them for their purchase and send them the receipt or purchase order via email. Whether you want to make this an entire page or pop up is up to your design. You ...
adamsoh's user avatar
  • 1,787
6 votes
Accepted

What is the most user friendly way to ask a user to enter European banking data?

Swift/BIC codes follow this convention: AAAA BB CC DDD AAAA Bank code A-Z 4 letter code. It usually looks like a shortened version of that bank's name. BB Country code A-Z 2 letter code. It says ...
roetnig's user avatar
  • 460
6 votes

Credit card field placeholder text

I simply can't believe they did this. First of all, it shows a definite bias. Cards starting with 4 belong to VISA, so I can imagine all other CC card companies complaining. Another thing: 4 groups ...
Devin's user avatar
  • 38k
5 votes

Splitting credit card number fields into four different inputs

Please follow the advice of others and do not attempt to reinvent the wheel. Not unless you have read and understood the ISO standard ISO/IEC 7812 that governs Payment card numbers, which, by the way, ...
Paul Smith's user avatar
5 votes
Accepted

How to inform user of changes in the shopping cart?

To protect user from such situation you will need two session records: CART_ITEMS - Items that are currently in the cart. CHECKOUT_ITEMS - Items the user is about to pay for. Before you send the ...
Ivan Venediktov's user avatar
5 votes

How do you communicate to a user that their money will not be available because of a technical limitation?

I feel like you're going about this the wrong way, you should ask the creator of the button, prior to any implementation, the questions if it fundamentally relies on them being in the right country ...
DarrylGodden's user avatar
  • 6,326
5 votes
Accepted

Why not embed payment pages in the same page?

I've worked on this problem in the past; musefan's comment is exactly why you see hosted order pages. Many payment systems offer APIs that can be embedded seamlessly into a site, but then your ...
Izquierdo's user avatar
  • 12.7k
4 votes

Splitting credit card number fields into four different inputs

I think Card.js is my favorite user experience when it comes to adding cards. Not only it lets you type in very quickly (single fields etc.), they also show you where those fields are on your ...
Mariusz Ciesla's user avatar
4 votes

How long should "1 month" be?

You don't need to over think this. Unless there are regulatory constraints it can be whatever you want it to be and your users will take it as corporate policy. (By the way is there existing corporate ...
Mayo's user avatar
  • 6,641
4 votes

Should we ask for name on card even though it's not required for credit card payments?

As said by anthonyryan1, it is required for American Express. So either you ask for/require this information only for American Express (which would mean you would either have to ask the user for the ...
CherryDT's user avatar
  • 141
4 votes

Unknown account balance state after startup

Technically, if service is down or unavailable chances are the app would be down as well. Unless there are other valid use case for the app to be up and functional. Anyway, you can simply state the ...
jonT's user avatar
  • 317
4 votes

Empty price placeholder design

I would avoid using N/A, as that signifies that field is "not applicable". All three of those fields are applicable. A simple placeholder would be: € 0,0 For every field needed.
Alan's user avatar
  • 3,858
4 votes
Accepted

Payment methods on the product page or checkout?

People are used to small price adjustments happening during the checkout process rather than everything being shown on the product detail page. For example, service fees, taxes, shipping fees, and ...
Chloe's user avatar
  • 553
3 votes

Should we ask for name on card even though it's not required for credit card payments?

No, we do not need cardholder name on credit card online payments. Only old dated payment gateways require it. Actually big issuers like Visa, MasterCard or AMEX - American Express do not require ...
Karpiu's user avatar
  • 486
3 votes

What types of payment should I include?

Don't offer transfer unless you want to create additional work/cost for you. Having access to a credit/debit card is generally accepted as a minimum barrier to make purchases on line. You usually ...
dennislees's user avatar
  • 11.6k
3 votes
Accepted

In which order the payment method and total amount should present?

As I'm designing for e-commerce for many years, through some tests I found out that the price is the most important thing in the checkout process, whilst everything close to purchase button attracts ...
Omid's user avatar
  • 796
3 votes
Accepted

Identity and abuse in software build around anonymity

Those verification methods are common and could be viable, but the underlying app may have conceptual problems. There's a lot to unpack here, so bear with me. For starters, it sounds like users ...
Nathan Rabe's user avatar
  • 8,888
3 votes

Best way to let the user modify the subscription (change number of mobile devices)

I would be more explicit with the 11/31 calculation. I would also separate the numbers from the explanation in the calculation to make it more easily readable.
Nash's user avatar
  • 2,451

Only top scored, non community-wiki answers of a minimum length are eligible