> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# fetchVaultedPaymentMethods

Get a list of `VaultedPaymentMethod` for the `customerId` attached to the [client session](/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session#body-customer-id).
Build your own UI to display, manage and perform payments with them.

<Warning>
  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.

  <b>
    {" "}

    The mentioned issue will be addressed and resolved in an upcoming release, improving
    the overall functionality of the Vault Manager.{" "}
  </b>
</Warning>

```typescript TYPESCRIPT theme={"dark"}
    async fetchVaultedPaymentMethods(): Promise<VaultedPaymentMethod[]>
```

## Returns

The `fetchVaultedPaymentMethods` method fetches the vaulted payment methods for the `customerId` attached to the [client session](/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session#body-customer-id)
and returns a Promise of `VaultedPaymentMethod[]`.

In case of successful operation, this method will return:

{" "}

<Expandable title="Returns" defaultOpen>
  <ResponseField name="VaultedPaymentMethod[]">
    <Expandable title="PrimerVaultedPaymentMethod">
      <ResponseField name="id" type="string">
        A *temporary* identifier for the vaulted payment method. You should use this id with [deleteVaultedPaymentMethod](/docs/sdk/react-native/v2.x.x/primer-headless-checkout/vault-manager/deleteVaultedPaymentMethod),
        [validate](/docs/sdk/react-native/v2.x.x/primer-headless-checkout/vault-manager/validate) and [startPaymentFlow](/docs/sdk/react-native/v2.x.x/primer-headless-checkout/vault-manager/startPaymentFlow).

        ℹ️ This id changes with each call to [fetchVaultedPaymentMethods](/docs/sdk/react-native/v2.x.x/primer-headless-checkout/vault-manager/fetchVaultedPaymentMethods).
      </ResponseField>

      <ResponseField name="analyticsId" type="string">
        An identifier for the vaulted payment method that doesn't change across calls to [fetchVaultedPaymentMethods](/docs/sdk/react-native/v2.x.x/primer-headless-checkout/vault-manager/fetchVaultedPaymentMethods).
      </ResponseField>

      <ResponseField name="paymentInstrumentType" type="string">
        The type of the payment instrument associated to the vaulted payment method.
      </ResponseField>

      <ResponseField name="paymentMethodType" type="string">
        A unique string identifier for the payment method.
      </ResponseField>

      <ResponseField name="paymentInstrumentData" type="object">
        Data associated to the payment instrument. You can use this information to display the vaulted payment method in your UI.

        <Expandable title="Properties">
          <ResponseField name="network" type="string?">
            The human readable representation of card network (e.g., Visa, Mastercard).
          </ResponseField>

          <ResponseField name="cardholderName" type="string?">
            The name of the cardholder.
          </ResponseField>

          <ResponseField name="first6Digits" type="number?">
            The first 6 digits of the card number.
          </ResponseField>

          <ResponseField name="last4Digits" type="number?">
            The last 4 digits of the card number.
          </ResponseField>

          <ResponseField name="accountNumberLast4Digits" type="number?">
            The last 4 digits of the account number.
          </ResponseField>

          <ResponseField name="expirationMonth" type="number?">
            The expiration month of the card, in 2-digit format.
          </ResponseField>

          <ResponseField name="expirationYear" type="number?">
            The expiration year of the card, in 4-digit format.
          </ResponseField>

          <ResponseField name="externalPayerInfo" type="IExternalPayerInfo?">
            Additional PayPal data.

            <Expandable title="Properties" defaultOpen>
              <ResponseField name="email" type="string">
                The payer's email address.
              </ResponseField>

              <ResponseField name="externalPayerId" type="string?">
                The payer's unique ID.
              </ResponseField>

              <ResponseField name="firstName" type="string?">
                The payer's given name.
              </ResponseField>

              <ResponseField name="lastName" type="string">
                The payer's given surname.
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="klarnaCustomerToken" type="string?" />

          <ResponseField name="sessionData" type="IKlarnaSessionData?" />

          <ResponseField name="paymentMethodType" type="string?">
            A unique string identifier for the payment method. (e.g. `PAYPAL`, `GOOGLE_PAY`)
          </ResponseField>

          <ResponseField name="binData" type="IBinData?">
            Additional BIN data.

            <Expandable title="Properties" defaultOpen>
              <ResponseField name="network" type="string?">
                The card network (e.g., VISA, MASTERCARD, AMEX).
              </ResponseField>
            </Expandable>
          </ResponseField>

          <ResponseField name="bankName" type="string?">
            The name of the bank.
          </ResponseField>
        </Expandable>
      </ResponseField>

      <ResponseField name="threeDSecureAuthentication" type="object" />
    </Expandable>
  </ResponseField>
</Expandable>

## Example

The `VaultManager` needs to be configured before `fetchVaultedPaymentMethods` can be called.
Refer to the following example for [configuring](/docs/sdk/react-native/v2.x.x/primer-headless-checkout/vault-manager/configure) the `VaultManager`.

```typescript TYPESCRIPT theme={"dark"}
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);
  }
}
```