Press enter to see results or esc to cancel.

E-Commerce Payments: UI, UX, and Request Journey

Close Up Of A Man Shopping Online Using Laptop With Credit Card

As an e-commerce enablement technology company, we deeply value all other great services surrounding the e-commerce landscape. E-commerce payment technologies is one of those important areas of technology, and in today’s guest blog post on Prisync Blog, we welcome Emre Talay of to talk about how e-commerce payment technologies can be more than a necessity and may act as a conversion booster when optimised.

Payment experience starts at the checkout page of e-commerce website and proceed with request response cycle with banks. Meanwhile, the status of payment which can be successful or failed payment, is received and the payment experience will finish from user side.

1-) User interface and experience:

  • Checkout Page,
  • Alternative Payment Methods,
  • BIN Check Service,
  • One Click Payment,
  • Instalment

2-) Payment request / response cycle with banks:

  • Error Message Optimization,
  • Proactive Monitoring and Fallback Management

Checkout Page

Checkout form shown below has been designed, based on proven user experiences.


a-) Card Number: Card number must comply with Luhn Algorithm.

In case of any mistype on card number, inform buyer about mistake and make user correct the card number before buyer confirms the payment.

b-) Valid Date of Card: Month and year values on real plastic card shown as numeric. That means user experience built on numeric values. That is why it is better to display it as numeric on checkout page instead of text.

c-) CVC: For Mastercard and VISA valid value has 3 digits and for Amex valid value has 4 digits.

d-) Instalment Options: Checkout solutions (may) show applicable instalment options regarding the card number that the buyer enter in the form. So users are not supposed to select an instalment option inside of an instalment table that consists of all bank names and instalment options.

Online card payment

Alternative Payment Methods

Users may prefer different payment alternatives to confirm their payment. These may also be some local alternatives only committed to process payments within a country or region.

%5 of all online transactions occur through alternative payment methods.

BIN Check

BIN (bank identifier number) value of a credit card lets us know quite a lot of details about the card itself, as seen on the example shown below:

BIN : 520097

Card Association = MasterCard

Bank Name = Garanti Bank

Card Family (Loyalty) = Bonus

Card Type = Credit Card

According to these outputs following actions can be taken:

a-) Transactions can be routed to virtual POS of the bank of the credit card bank if the merchant supports that. This provides cost advantage in regards to bank commissions.

b-) Separation of debit cards, credit cards or pre-paid cards can be carried out successfully. 3D Secure is requisite for payments with debit cards. As the buyer enters a credit card number, the merchant can be able to send payment request as 3D Secure. Therefore the merchant does not expect the buyer to choose 3D Secure option for payments with debit card.

c-) Instalment options can be displayed on the checkout page in relevance to the card family.


One Click Payment – Card Storage

Entering 16 digits is not a convenient process from the user side on the checkout page, especially when mobile experiences are in consideration.

Checkout solutions (may be) able to store card details of users, so users do not have to re-enter their card information every time they purchase something online. They can complete their payment by one-click. This reduces the cart abandonment rates and increases conversion rates in e-commerce site.


It may vary from market to market, but on average, %25 of all purchases are being done with instalments. Therefore offering instalments is a key factor for buyer decision.

Proactive Monitoring and Fallback Management

Proactive monitoring lets merchants to be able to track all their transactions.

1-) Merchants may have insights on their buyer’s financial choices such as issuer bank distribution. It provides bargaining power against banks.

2-) In case of any POS down situation, transactions can switch to another POS, therefore merchants will not lose any orders.

Error Messages Optimization

Banks may accept or reject payment requests. If a transaction is rejected, banks return an error code and error message within a response that shows the reason. It will be better to show buyer the exact reason why the payment request has not been accepted by the bank.

E.g. if the card limit is not enough for the payment, bank will return “error code 51” within its response. Buyers who see this exact error message on checkout page will not try again with the same card.

Same error code may refer to different error messages in different banks. Also, different error codes may refer to same error message in the same bank. These error codes and messages may cause confusion on merchants. Therefore, optimising these error messages is a crucial necessity in e-commerce.

Road to a successful payment is surely a hard and a fulfilling one, and requires attention at many different levels.


Leave a Comment