Showing Saved Credit Cards

After saving a customer's credit card for future use, you can display the saved card on the customer's next visit to the payment page. The customer will need to select the saved card, as identified by its brand and the last 4 digits, but won't have to re-enter the full card details. The customer will only need to enter the CVV and, when applicable, the number of installments.

Here's an example of a payment page that suggests a saved credit card:

A payment page that suggests a saved credit card

To display one or more saved credit cards, use the paymentMethods array in the uiCustomData object. Inside the array, you can specify a saved credit card by creating an object with "type": "token" and two more properties representing the saved token and card expiration month. For example, here's how you would include two saved credit cards to show in the payment page:

<paymentPageData>
    <ppsJSONConfig>
    {
         "uiCustomData": {
             "paymentMethods": [
                 {"type":"token", 
                      "token":"1066083457795999", 
                      "cardExpiration":"0130"},
                 {"type":"token", 
                      "token":"1069993457795000", 
                      "cardExpiration":"0127"}
             ]  
         }
    }
    </ppsJSONConfig>
</paymentPageData>

If you only pass one saved credit card, and your payment page is used in a 3-D Secure terminal where CVV entry is not required, then you can use the autoSubmit parameter. This results in immediate payment processing as soon as the customer selects the saved card:

<paymentPageData>
    <ppsJSONConfig>
    {
       "uiCustomData": {
           "paymentMethods": [
                {"type":"token", 
                    "token":"1066083457795999", 
                    "cardExpiration":"0130",
                    "autoSubmit":true
                }
           ]  
       }
    }
    </ppsJSONConfig>
</paymentPageData>