Skip to content
Process Payments/
/
Showing Saved Cards
Last updated

Showing Saved Cards

Overview

The embedded SDK allows you to show previously saved cards to your customers, enabling them to select a saved card for payment during the checkout process. This feature enhances the user experience by providing a quick and convenient way for returning customers to complete their purchases.

Requirements

In order to show saved cards to your customers using the embedded SDK, you first need to ensure that:

  1. There is at least one saved card associated with the customer. This requires that you have previously created a Payment Session with the customer present and that the payment was successfully processed, thereby securely storing the customer's payment details for future use.
  2. You have created the Payment Session by specifying the customerDetails.id field in the request body. This is essential as it associates the Payment Session with a specific customer. Please note that the customerEmail field alone is not sufficient.
  3. You have available the list of saved cards for the customer, which can be retrieved using the customerGetPaymentMethods endpoint. The full response obtained from this endpoint can then be used to display the saved cards in the embedded SDK.

Configuring the Embedded SDK

Storing Customer Payment Methods

By default, the embedded SDK automatically stores the customer's payment methods when a payment is successfully processed. This is done to facilitate future transactions and provide a seamless checkout experience for returning customers.

However, if you want to enable your customers to decide whether to save their payment methods during the checkout process, you can use the customerPaymentMethods.allowStorage configuration flag when initializing the embedded SDK. This option allows you to control whether the customer is given the choice to save their payment method for future use:

  • When set to true, the customer will be presented with an option to save their payment method.
  • If set to false, the payment method will not be saved, and the customer will not see any option to do so.
  • If the customerPaymentMethods object is omitted, the checkbox will not be shown, but the payment method will still be saved by default.

Here's an example of how to configure the embedded SDK:

Enable Customer Payment Method Storage Example
Ryft.init({
    publicKey,
    clientSecret,
    customerPaymentMethods: {
        allowStorage: true,
    },
});

Showing Customer Payment Methods

To configure the embedded SDK to show saved cards at checkout, you need to initialize the SDK with the appropriate configuration options. These include:

  • The clientSecret obtained from the Payment Session;
  • The customerPaymentMethods.rawJson option, which should be set to the full response obtained from the customerGetPaymentMethods endpoint as a raw JSON object, as indicated in point 3 above. Please note that, to simplify the definition of the customerPaymentMethods.rawJson property, you can use the JSON.stringify() method to convert the customerPaymentMethods object into a JSON string;
  • The accountId option if you are processing the payment on behalf of a Sub-Account.

Below is an example of how to configure the embedded SDK to show saved cards:

Show Saved Cards Example
const publicKey = "pk_XXXXXXXXXXXXXXXX"; // Your public API key
const clientSecret = "ps_XXXXXXXXXXXXXXXX"; // Returned when creating a Payment Session
const accountId = "ac_XXXXXXXXXXXXXXXX"; // The unique identifier for the Sub-Account, if applicable
const customerPaymentMethods = {
    "items": [
        {
            "id": "pmt_XXXXXXXXXXXXXXXX", // Payment Method ID
            "type": "Card",
            "card": {
                "scheme": "Visa",
                "last4": "XXXX",
                "expiryMonth": "10",
                "expiryYear": "2026",
            },
            "customerId": "cus_XXXXXXXXXXXXXXXX", // Customer ID
            "createdTimestamp": 1747234748,
        },
        {
            "id": "pmt_XXXXXXXXXXXXXXXX", // Payment Method ID
            "type": "Card",
            "card": {
                "scheme": "Visa",
                "last4": "XXXX",
                "expiryMonth": "10",
                "expiryYear": "2026",
            },
            "customerId": "cus_XXXXXXXXXXXXXXXX",
            "createdTimestamp": 1747234653,
        },
    ]
};

Ryft.init({
    publicKey,
    clientSecret,
    customerPaymentMethods: {
        rawJson: JSON.stringify(customerPaymentMethods), // The full raw response from customerGetPaymentMethods endpoint
    },
});

Provided that the embedded SDK is correctly configured, the embedded payment form will be rendered, displaying the saved cards associated with the customer. The customer can then select a saved card to complete their payment and submit the payment.

Previous page
Next page