Press enter to see results or esc to cancel.

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

Payment experience starts at the checkout page of the e-commerce website and proceeds with the 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 the user side.

1-) User interface and experience:

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

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.

Payment Screen

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

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

b-) Valid Date of Card: Month and year values on the 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-) Installment Options: Checkout solutions (may) show applicable installment options regarding the card number that the buyer installment in the form. So users are not supposed to select an installment option inside of an installment table that consists of all bank names and installment options.

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 in 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 a 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 a 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 Process

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 (maybe) 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 an e-commerce site.


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

Proactive Monitoring and Fallback Management

Proactive monitoring lets merchants 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 the 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, the bank will return “error code 51” within its response. Buyers who see this exact error message on the 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 the same error message in the same bank. These error codes and messages may cause confusion on merchants. Therefore, optimizing these error messages is a crucial necessity in e-commerce.

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


Leave a Comment