2022 Developer Survey is open! Take survey.

Hot answers tagged

248 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 ...
user avatar
  • 36.9k
144 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 ...
user avatar
  • 2,612
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 ...
user avatar
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 ...
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 ...
user avatar
  • 655
21 votes

Credits or Money?

Users will not have as much understanding of what a credit represents as opposed to actual local currency (Dollar in this instance). Even if 1 credit = 1 dollar that is still a mental calculation the ...
user avatar
  • 36.9k
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 ...
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 ...
user avatar
  • 21.1k
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 ...
user avatar
  • 32.2k
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 ...
user avatar
  • 22.8k
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 ...
user avatar
  • 1,155
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 ...
user avatar
  • 1,767
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 ...
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 ...
user avatar
  • 32.2k
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, ...
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 ...
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 ...
user avatar
  • 6,176
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 ...
user avatar
  • 141
4 votes

Progressive Disclosure on Credit Card Form

Hiding the submit button is not part of progressive disclosure. The only case where a submit button is not available upfront is probably within a Staged disclosure where there are a number of ...
user avatar
  • 6,976
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 ...
user avatar
  • 6,621
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 ...
user avatar
  • 307
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 ...
user avatar
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.
user avatar
  • 3,858
4 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 ...
user avatar
  • 8,077
3 votes
Accepted

Online software that only has an option to pay by phone

My concern is that using this same payment system seems out of place in a web app. I think it would be expected that a user could start/stop/modify their subscription on their own without ever having ...
user avatar
  • 10.3k
3 votes

Single-Field Credit Card Payment. Experience or Published Data?

This isn't the answer you are looking for, but if you don't have time to test, don't try something out of the ordinary. I personally think that solution looks great, it's clean and clear, and the ...
user avatar
  • 1,144
3 votes
Accepted

Progressive Disclosure on Credit Card Form

In most cases this is not a good idea. It comes down to UX goals: The main goal of a credit card form is usually to get the user to complete a purchase. Error correction and validation is only ...
user avatar
  • 40.3k
3 votes

Gratuity (tips) interface for Mobile Point of Sale (mPOS)

Tipping varies wildly between countries, and even between industries. I would suggest two alternatives: If possible, have the operator cofigure the menu according to his particular indusry's customs....
user avatar
  • 486
3 votes
Accepted

eCommerce Payment Process

You should ask yourself (or better: the user) why they're hitting the back button. They could be either confused and may not be sure that the transaction went through or they don't know what to do ...
user avatar
  • 3,887
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 ...
user avatar
  • 486

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