Skip to main content
Display the number of saved payment methods or list saved cards for returning customers.

​
Recipe: Show saved methods count

document.addEventListener('primer:vault:methods-update', (event) => {
  const { vaultedPayments } = event.detail;
  const count = vaultedPayments.size();

  document.getElementById('saved-methods-badge').textContent =
    count > 0 ? `${count} saved` : '';
});

​
Recipe: List saved cards

document.addEventListener('primer:vault:methods-update', (event) => {
  const methods = event.detail.vaultedPayments.toArray();
  const container = document.getElementById('saved-cards');

  container.innerHTML = methods
    .filter((m) => m.paymentMethodType === 'PAYMENT_CARD')
    .map((m) => `
      <div class="saved-card">
        ${m.paymentInstrumentData.network} •••• ${m.paymentInstrumentData.last4Digits}
      </div>
    `)
    .join('');
});

​
How it works

  1. Listen for the primer:vault:methods-update DOM event
  2. Access vaultedPayments from the event detail
  3. Use .size() to get the count or .toArray() to iterate over methods
  4. Each method contains paymentMethodType and paymentInstrumentData with card details

​
Variations

​
Show all saved methods with icons

document.addEventListener('primer:vault:methods-update', (event) => {
  const methods = event.detail.vaultedPayments.toArray();
  const container = document.getElementById('saved-methods');

  container.innerHTML = methods
    .map((method) => {
      if (method.paymentMethodType === 'PAYMENT_CARD') {
        const { network, last4Digits } = method.paymentInstrumentData;
        return `
          <div class="saved-method">
            <img src="/icons/${network.toLowerCase()}.svg" alt="${network}">
            <span>•••• ${last4Digits}</span>
          </div>
        `;
      }
      return `
        <div class="saved-method">
          <img src="/icons/${method.paymentMethodType.toLowerCase()}.svg" alt="${method.paymentMethodType}">
          <span>${method.paymentMethodType}</span>
        </div>
      `;
    })
    .join('');
});

​
Show expiry dates

document.addEventListener('primer:vault:methods-update', (event) => {
  const methods = event.detail.vaultedPayments.toArray();

  methods
    .filter((m) => m.paymentMethodType === 'PAYMENT_CARD')
    .forEach((method) => {
      const { network, last4Digits, expirationMonth, expirationYear } =
        method.paymentInstrumentData;

      console.log(
        `${network} •••• ${last4Digits} - Expires ${expirationMonth}/${expirationYear}`,
      );
    });
});

​
Conditional UI based on saved methods

document.addEventListener('primer:vault:methods-update', (event) => {
  const { vaultedPayments } = event.detail;
  const hasSavedMethods = vaultedPayments.size() > 0;

  document.getElementById('saved-methods-section').style.display = hasSavedMethods
    ? 'block'
    : 'none';

  document.getElementById('new-payment-section').querySelector('h3').textContent =
    hasSavedMethods ? 'Or pay with a new method' : 'Payment method';
});

​
See also