Designing payment gateway

If you are selling something, it is very important to guide customers through a payment process as smooth as possible.

Most of my career I was working with monetisation products and in most cases it included payment gateways, payment processors, etc. Today I want to share my experience and give some tips and guidance on how to create a payment gateway that improves customer satisfaction and increases your sales volume.

Why is it important to have a greatly designed payment gateway?

Simply because it is the most important moment of your entire sales process. It is the moment when customer is giving you his money and he wants to be sure that bargain process will be as smooth as possible.

What can you do to improve your app/website payment gateway?

1. Errors handling

The most important part is if something goes wrong, your customer needs to know why exactly and how to solve it.

Nothing can be more devastating to payment customer experience than this:

• Extend your error library to cover all the potential outcomes.
  A customer need to know why his card is declined! Because there are insufficient funds, or because he is trying to pay with the wrong card?

Bank card could be declined because of several reasons:
3d security, insufficient funds, blocked by the bank, wrong information, a card is in the black list, payment limit, etc.

• Give a proper description to an every error.
  If there is a problem because customer’s bank allows to buy things without 3d security only under 50 euros — customer should know that.
• Propose actions.
  Link each error to a potential solution. It could be a button that will lead your customer to the support chat, or FAQ, or to the payment settings.

Notes: Most of the banks force to enter 3d security password when buying goods for the price above 50 or 100 euros.
For you as a business it means that you need to display/redirect/show a pop 3d security window when user is buying something from you that requires 3ds. Otherwise the payment will fail.

2. Only essential information

Nowadays most of the information required to complete online purchase could be taken from user profile, geolocation, cellular network, browser history, etc.

The point here is that you can use technology to decrease the effort customer will put into filling all required information. Customer will spend less time and will make fewer errors, therefore there is a bigger chance that he will complete payment process.

All you really need to ask your customer is:

• Card number
• Card's holder name (you can fetch customer’s name from the profile, but I would recommend asking the name anyway because customer’s legal name might be written differently)
• Expiration date
• CVV

3. Card number

I’ve noticed that a lot of the services are displaying bank card number cohesively, without any spaces:

Like this: 4567890656781457

Why is it bad?

User has a low chance to notice a mistake when he is typing his bank card number. That is happening because our brain cannot process this amount of numbers written together. More effective is to separate blocks of 4 digits with a space.

Like this: 4567 8906 5678 1457

You can try it yourself and see how fast you will count digits in the first example and in the second.

4. Progress indicator

Sometimes because of the slow internet connection, it could take a little more time to complete the payment. That’s why it is very important to show the progress of the process. You can simply add loading spinner to make it clear whether something is happening.

If nothing indicates that your app or website is processing the payment, user might think that something is broken and that his precious money will be lost.

5. Success state

Your customer needs to know that everything went fine and his payment went fine. That’s why it is very important to show that payment was completed and it is successful. A big thumb or pop-up with a simple “ok” is fine. But you could also go with such fancy animations.

P.S.

It is also fine to say “Thank you for the purchase” as a courtesy.

6. Show the customer that he’s got his item

When payment is completed, it is very important to show your customer that his order was placed or his digital good was actually bought.

How?

Just redirect customer to a section, where he will see that something what he’s just bought is in his jurisdiction (profile, or my orders tab).

P.S

There is a plenty of payment processors. Stripe, Braintree, Square, etc.

Which to choose? It basically depends on:

1. Type of your business (marketplace, shop, etc.)
2. How you want to collect your commission
3. How you want to store your payments
4. What amount of payment processor commission you’d like to pay
5. Is your country supported by the payment processor or not

To implement payment processor I would go for Mango Pay.

Why?

• Small payment processor commission.
• Great customer support.
• Flexible API.