Hosted Payment Page allows customers to save up to 4 cards and later use it for faster checkout experience.

This functionality needs to be enabled on the account.

🚧

Please contact Technical Operations or Client Relationship Teams to enable functionality.


User flow

Initial COF transaction

When customer redirected to the payment page they will see a regular form for card details. Under the field for cardholder name is checkbox, which will save card if selected.


When customer selected checkbox, enters card details and proceed with payment, the card details will be saved on payabl side and in notification message merchant will receive new parameter called related_token_ids.

Response example

errorcode=0&errormessage=&orderid=Payabl-Test&related_token_ids=215501920&transactionid=215501920&type=capture&security=09cd7fb2f70c0c75951c5814c521b75ea3d46932

In related_token_ids will be value of saved card, which later merchant needs to send to payabl when open hosted payment page second time for the same customer.

Second COF transaction

When the customer tries to initiate transaction with saved card, in request to Hosted Payment Page, merchants requires to send related_token_ids with value previously provided from payabl. side.

Only when parameter is present in request, all saved card will be displayed to customer on Hosted Payment Page.


Multiple saved cards

The customer can save up to 4 cards for faster checkout process. In related_token_ids will be values of all 4 saved cards.

Callback example

orderid=Payabl-Test×tamp=1721051713&transactionid=105913876&errormessage=&type=capture&errorcode=0&related_token_ids=105913870,105913872,105913876,105913654&security=ff9f00281d593467ee8b0bff4814903549c126140d9ef04ff1178a3c9f5df563&3dstatus=VERIFIED

The customer will not be able to save 5th card but they can select option "Pay with another card" to use new card for payment but it will not be saved.

Deleted card

The customer can delete a card on the Hosted Payment Page (HPP). The HPP allows users to delete one or multiple cards. When a card is deleted and the customer completes the payment using new cards, payabl. will send a callback to update the tokens.