Payment Checkout

Payment checkout


Online payment processing is an essential feature for every application that involves accepting payments from users. There is no doubt that the first thing that matters here is the security. As for the flow of the checkout it may seem that nothing special can be invented here. However, wouldn’t it be nice to make the checkout process more streamlined by refining the checkout usability? This is what we were thinking about when we worked on the following feature.

Payment checkout flow

Here is the checkout flow that makes payment by credit card more clear and intuitive. The keyboard for entering the card expiration date is divided into two separate parts - one for months and another one for years. Card flip shows where CVV can be found.

  • Payment checkout - card number
  • Payment checkout - expiration date
  • Payment checkout - CVV
  • Payment checkout - completion

We have also created a prototype of this checkout flow using FramerJS. You can check how it works here.

Bottom line

The checkout process should be designed carefully, so that nothing prevents the user from completing the purchase. Every detail matters here.