# 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](/documentation/api/reference/openapi#operation/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:


```javascript 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](#requirements). 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:


```javascript 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.