Fleet Invoice Payments
It is not simple
Paying for something online with a credit card is simple, right? Yes, because we’ve been doing it since the early days of the Internet. But yet, we all have had online payment issues recently. So no, it is not simple because no two credit card forms are alike.
Paying for something online with a credit card is simple, right? Yes, because we’ve been doing it since the early days of the Internet. But yet, we all have had online payment issues recently. So no, it is not simple because no two credit card forms are alike.
Designing a simple payment UI
But getting from A to Z can be a tricky journey, riddled with questions the user has to answer. And obviously, nobody wants an instruction manual.
But getting from A to Z can be a tricky journey, riddled with questions the user has to answer. And obviously, nobody wants an instruction manual.
Name on card
There is multiple ways to label the input field for the card holder‘s name...
There is multiple ways to label the input field for the card holder‘s name...
- First name and last name fields
- Card Holder’s name
- Name (as it appears on your card)
- Full name on card
- Name on card
I felt that “Name on card” was the shortest and clearest way to ask for this input. This asks the user to simple type what’s displayed on the card and does not need the user to think about it.
Expiration Date
Most credit cards display their expiry dates in the format MM/YY, so it would be best to keep that format for entry.
When designing the expiry date input, I wanted to keep the user in typing mode to speed their input. No one wants to pick the exiration date from a select menu. The user simply has to type in the numbers as they appear on the credit card. This also prevents the user from having to think of the actual month (e.g. 08 is August), so cognitive load is minimized.
Because this input requires a particular format for the date, we included placeholder text inside the input. Note that the placeholder text includes a “/”, but this is not required to be typed by the user. We limit the input value to numbers only, so if a user does type a forward slash, it is not registered. After the month is entered, the slash is automatically appended.
Most credit cards display their expiry dates in the format MM/YY, so it would be best to keep that format for entry.
When designing the expiry date input, I wanted to keep the user in typing mode to speed their input. No one wants to pick the exiration date from a select menu. The user simply has to type in the numbers as they appear on the credit card. This also prevents the user from having to think of the actual month (e.g. 08 is August), so cognitive load is minimized.
Because this input requires a particular format for the date, we included placeholder text inside the input. Note that the placeholder text includes a “/”, but this is not required to be typed by the user. We limit the input value to numbers only, so if a user does type a forward slash, it is not registered. After the month is entered, the slash is automatically appended.
Ability to pay multiple invoices
User can select the invoices they wish to pay and then proceed to select a payment method from their saved payment methods. Here they can drill down into charge details.
User can select the invoices they wish to pay and then proceed to select a payment method from their saved payment methods. Here they can drill down into charge details.
Manage Payment Methods
- User is able to save mutiple payment methods when paying an invoice
- User is able to delete a saved payment method
- User is able to update a saved payment method with restrictions around security
- User is able to set a default payment method for quick payments
- User is able to add a new payment method