Get a list of VaultedPaymentMethod for the customerId attached to the client session. Build your own UI to display, manage and perform payments with them.

The list of vaulted payment methods is not affected by the checkout builder's conditions. For example, if you configured the checkout builder to not show Paypal with the current client session, but Paypal was vaulted previously, fetchVaultedPaymentMethods will still return it.

The mentioned issue will be addressed and resolved in an upcoming release, improving the overall functionality of the Vault Manager.
1
async fetchVaultedPaymentMethods(): Promise<VaultedPaymentMethod[]>
typescript
copy

Returns

The fetchVaultedPaymentMethods method fetches the vaulted payment methods for the customerId attached to the client session and returns a Promise of VaultedPaymentMethod[].

In case of successful operation, this method will return:

PrimerVaultedPaymentMethod
id
string

A temporary identifier for the vaulted payment method. You should use this id with deleteVaultedPaymentMethod, validate and startPaymentFlow.

ℹ️ This id changes with each call to fetchVaultedPaymentMethods.

An identifier for the vaulted payment method that doesn't change across calls to fetchVaultedPaymentMethods.

The type of the payment instrument associated to the vaulted payment method.

A unique string identifier for the payment method.

Data associated to the payment instrument. You can use this information to display the vaulted payment method in your UI.

Properties
network
string?
The human readable representation of card network (e.g., Visa, Mastercard).
The name of the cardholder.
The first 6 digits of the card number.
The last 4 digits of the card number.
The last 4 digits of the account number.
The expiration month of the card, in 2-digit format.
The expiration year of the card, in 4-digit format.
externalPayerInfo
IExternalPayerInfo?
Additional Paypal data.
Properties
email
string
The payer's email address.
The payer's unique ID.
firstName
string?
The payer's given name.
lastName
string
The payer's given surname.
sessionData
IKlarnaSessionData?
A unique string identifier for the payment method. (e.g. `PAYPAL`, `GOOGLE_PAY`)
binData
IBinData?
Additional BIN data.
Properties
network
string?
The card network (e.g., VISA, MASTERCARD, AMEX).
bankName
string?
The name of the bank.

Example

The VaultManager needs to be configured before fetchVaultedPaymentMethods can be called. Refer to the following example for configuring the VaultManager.

123456789
async function handleFetchPaymentMethods() {    try {        //Ensure the Vault Manager has been configured        const availablePaymentMethods = await vaultManager.fetchVaultedPaymentMethods();        console.log('Payment methods fetched successfully');    } catch (error) {        console.error('Error fetching payment methods:', error);    }}
typescript
copy