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.

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 for default payment method synchronisation.