Here are a few insights and thoughts behind the changes in this page that is the intersection between consumer, merchant and payment service provider.
Design principles
I won’t go into details about the old design. Suffice it to say that though it has served us well for quite some time, it has become slightly out of date.
With the new design we wanted to continue the virtue of simplicity - and taking it even further. For example the information about the payment is grouped differently (rather than just listed):
- Order details like id and optionally deadline are shown in a readable manner: “Order number X expires in Y”.
- Information about the amount is integrated into the submit button with fee information presented as a note just below.
This integration of information into the page elements makes for a more natural and coherent flow and leaves focus on the places where we want the consumer to take action.
The color scheme is also kept recognizable, simple and un-intrusive which also contributes to the keeping of focus.
The User Experience
Apparently these mobile devices are a thing :-) Thus a substantial amount of effort has gone into making this design as mobile friendly as possible. This includes…
- a responsive design that unfolds nicely on devices in all sizes - landscape and horizontal modes alike.
- bringing out number keyboards and not standard keyboard when applicable.
- using touch-friendlier buttons etc.
Another paradigmatic change is that all available payment methods are accessible from all views. This mean no going back in browser history to select another payment method. Also, we render the credit card form by default if that payment method is available for the merchant.
Additional user experience enhancing changes are:
- Input masking - eg. card number is rendered in the form field as it is printed on the card (0000 0000 0000 0000).
- Activation of “stored cards” features in browsers Safari and Chrome.
- Un-intrusive input validation.
New features
If all of the above didn’t make your head explode, we actually got a few new features as well. I’ll leave you with some links for you to dive into at your convenience.
- The possibility to insert a logo in the payment window.
- The possibility to enable “Force 3-D” checkbox in credit card form which lets the consumer force a payment through 3-D Secure.
- The possibility to enable “Card holder name” field in credit card form.
That’s if for now! We hope you like it - if you don’t, you can always make your own branding. As always, feel free to direct any question at our support team.
