# 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.
## Storing Customer Payment Methods
Before you can show saved cards to your customers, you need to ensure that the customer's payment methods are being stored during the checkout process. This is controlled by the `allowStorage` configuration flag in the `customerPaymentMethods` object when initializing the cardForm component. Here's an example of how to configure the embedded SDK:
```javascript Enable Customer Payment Method Storage Example
const cardForm = createCardForm(controller, {
customerPaymentMethods: {
allowStorage: {
enabled: true
}
}
});
```
By setting `allowStorage.enabled` to `true`, you enable the functionality for customers to save their card details for future use. When a customer completes a payment and opts to save their card, the card details will be securely stored and associated with the customer's profile in the Ryft system.
## Showing Customer Payment Methods
### Preliminary Steps
In order to show the saved cards to your customers during checkout, there are some preliminary steps that are needed to ensure that the saved cards are properly associated with the customer and available for display in the embedded SDK. These steps include:
1. Creating a Payment Session with the `customerDetails.id` field specified to associate the payment with a specific customer;
2. Retrieving the list of saved cards for the customer using the [customerGetPaymentMethods](/documentation/api/reference/openapi#operation/customerGetPaymentMethods) and ensuring that the full response is available to be passed to the embedded SDK.
### SDK Configuration
Once the preliminary steps are completed, you can configure the embedded SDK to show the saved cards to your customers. This can be done by passing the full response from the `customerGetPaymentMethods` endpoint to the `customerPaymentMethods.details` field in the card form component.
It is also recommended to set the `validationMode` to `"onBlur"` in order to optimize the user experience when selecting saved cards, as this will only trigger validation when the customer has finished interacting with the form fields, rather than on every change.
Additionally, you can listen for the `paymentMethodChange` event emitted by the card form component to enable the PAY button when a saved card is selected by the customer.
Here's an example of how to configure the embedded SDK to show saved cards:
```javascript Show Saved Cards SDK Configuration Example
// Initialise the cardForm component
const cardForm = createCardForm(controller, {
customerPaymentMethods: {
// `customerCardDetails` should be the full response from
// the customerGetPaymentMethods endpoint
details: customerCardDetails,
},
// Optimize validation to only trigger when the customer
// has finished interacting with the form fields
validationMode: "onBlur"
});
// Listen to validation changes to enable/disable the PAY button
// when the customer is interacting with the form fields
cardForm.on("validationChange", (event) => {
payButton.disabled = !event.isValid;
});
// Listen to payment method changes to enable the PAY button
// when a saved card is selected
cardForm.on("paymentMethodChange", (event) => {
payButton.disabled = false;
});
```
### Complete Example
Below is a complete example of how to show saved cards to your customers using the embedded SDK:
```html Show Saved Cards Example
Ryft Card Form
```
Provided that the embedded SDK is correctly configured, the saved cards associated with the customer will be displayed in the checkout page, allowing the customer to select a saved card for payment or enter new card details if they prefer.
Once the customer selects a saved card and submits the payment, the embedded SDK will handle the payment processing, and you can listen for the result to provide appropriate feedback to the customer based on whether the payment was successful or if there were any errors.