# Component: Saved Payment Methods

## Overview

The **Saved Payment Methods** component allows customers to view, manage, and delete their saved payment methods within a self service Finance Portal. This reduces reliance on sales or support staff and helps businesses avoid lost revenue by allowing multiple methods to be stored and a fallback method used if the default fails.

This component belongs to the **Self service / Manage my account** section.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/shop-components-self-service-saved-payment-methods--default&full=1&shortcuts=false&singleStory=true&embed=true>" %}

## Features

* **View:** Customers can see a list of all saved payment methods (card, ACH, BACS, SEPA, PayPal, Apple Pay, Google Pay).
* **Default Method:**
  * Default payment method is always shown first.
  * Users can set another method as default.
  * Attempts to delete a default method are blocked until another default is selected.
* **Expiry Handling:**
  * If expiry > 3 months away → “Expires \[date]”
  * If expiry ≤ 3 months → “Expires soon \[date]”
  * If expired → “Expired \[date]”
* **Add New Method:** Button redirects users to an add payment method screen (link configurable).
* **Delete Method:**
  * Warning shown if user tries to delete a default method.
  * Confirmation modal for non default deletions.
  * Customisable confirmation, confirm, and cancel texts.
* **Empty State:** Configurable message when no payment methods are stored.

## Props

| Prop                                    | Type   | Default                                                                                                 | Behaviour                              |
| --------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| Add payment method label                | String | Add payment method                                                                                      | Text on button to redirect to add page |
| Add payment method URL                  | String | /add-payment-method                                                                                     | Redirect link                          |
| Default payment method label            | String | Default                                                                                                 | Text when card is default              |
| Set default button label                | String | Set as default                                                                                          | Button to set as default               |
| Expiry date label                       | String | Expires expiryDate                                                                                      | Text when expiry is far in future      |
| Expires soon label                      | String | Expires expiryDate                                                                                      | Text when ≤ 3 months away              |
| Expired label                           | String | Expired expiryDate                                                                                      | Text when card is expired              |
| No payment method warning               | String | You currently have no saved payment methods. Add a new payment method to continue access uninterrupted. | Empty state message                    |
| Warning if user tries to delete default | String | You cannot remove this payment method since it is your default...                                       | Warning if delete attempted on default |
| Confirmation text for delete            | String | Delete saved payment method ending in last4?                                                            | Modal confirmation                     |
| Confirm delete button                   | String | Yes                                                                                                     | Confirm delete label                   |
| Cancel delete button                    | String | No                                                                                                      | Cancel delete label                    |

## Functional Notes

* Fully responsive (desktop and mobile).
* Integrates with Zuora and Stripe for default payment method synchronisation. With Stripe, adding a new method opens a self-service form embedding the Stripe Payment Element and syncs the method to the customer's Stripe account.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/components/component-library/self-service-components/component-saved-payment-methods.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.