📘

Important

The Web SDK allows customers to save up to four credit cards to reuse for faster checkout experience. This functionality first must be enabled on a merchant account. Reach out our Technical Operations or Client Relationship Teams to enable Save Card.

---

User Flow

Initial Transaction

When a customer sees the payment form of the Web SDK UI, there will be regular fill-in fields for cardholder details such as cardholder's initials and card data. On the bottom of the card payment form there is a check box 'Save card details for faster checkout'. By checking this check box, the current card will be saved for the Customer for future payments.

With a Save Card checkbox selected on the SDK payment form, card details entered, and successful proceed with payment, payabl. will save the card and send a notification message to the merchant with a parameter related_token_ids.

Response Example

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

The parameter related_token_ids contains the value of the saved card, which merchant will use for the same returned customer.

Second Transaction

When the customer attempts to pay with a saved card via Web SDK, on the merchant payment web page, the merchant is required to send related_token_ids with the value, provided earlier by payabl.

Customers will see all their saved cards on the SDK payment UI only if this parameter is included in the request.

Multiple Saved Cards

A customer can save up to four cards for future payments and faster checkouts. The parameter related_token_ids stores all four 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

Customers are unable to save their fifth card. However, they have the option to "Pay with another card" which allows them to use a new card for the payment, but this card will not be stored.

Delete Card

On the Web SDK UI, customers have the option to remove a card. The SDK supports deletion of either a single or multiple cards at once. After a card is removed and the customer finalizes their payment with a new card, payabl. will send a callback to refresh the tokens.