Saved Card

You can offer customers the option to save their credit card details for future purchases. This allows returning customers to complete repeat transactions quickly and securely, without re-entering their card information each time provided they previously consented to save the card.

This is different from recurring payments, where the merchant re-charges a known credit card at predetermined intervals without the customer's approval for each charge.

Here's what using a previously saved card looks like to the customer:

A saved card in the payment page UI

When the customer selects a saved card, Hyp automatically populates the card number, expiry month, and expiry year fields. Depending on the terminal settings defined by the credit card company, the customer may or may not be required to enter their CVV. In the example below, the CVV field is required:

Pre-populated card data fields

Prerequisites and terminal configuration

All terminals support saving credit cards by default. However, you can only suggest a credit card to the customer if it was saved previously.

See Suggesting to save credit card data for guidance on displaying the Save Credit Card Detail checkbox on the payment page and saving the resulting credit card token if the customer selects the checkbox.

Payment page integration

The basic integration follows the flow outlined in Integrating Hyp's Payment Page and Accepting Payment, with one exception. When you request a payment page, the XML payload in the int_in parameter should contain an additional element, paymentPageData. It hosts several nested XML elements and JSON objects that eventually wrap the paymentMethods JSON array. It's this array that defines the saved cards you want the payment page to suggest. In the following example, the array contains only one saved card, but you can add many.

<ashrait>
  <request>
    <version>2000</version>
    <language>{language}</language>
    <command>doDeal</command>
    <doDeal>
      <terminalNumber>{terminalNumber}</terminalNumber>
      ...
      <errorUrl>{errorUrl}</errorUrl>
      <paymentPageData>
        <ppsJSONConfig>{
            "uiCustomData": {
                    "paymentMethods": [
                        {"type": "token", "token": "1092880571131111", "cardExpiration": "0526"}
                    ]
                }
            }
        </ppsJSONConfig>
      </paymentPageData>
    </doDeal>
  </request>
</ashrait>

Every object in the paymentMethods array should have three properties:

1. type set to token, which differentiates a saved card from other payment methods such as Apple Pay or bit.

2. token set to the card token that Hyp returned as the cardToken query parameter after the customer chose to save the card.

3. cardExpiration set to the card expiration month and year that Hyp returned as the cardExp query parameter after the customer chose to save the card.

For more information on showing and processing saved cards, see Showing Saved Credit Cards.

Apart from including paymentMethods, all other integration steps are exactly the same as shown in Integrating Hyp's Payment Page and Accepting Payment.