Vault Manager Component

const checkout = document.querySelector('primer-checkout');
checkout.options = {
  vault: { enabled: true }
};

<primer-checkout client-token="your-token">
  <primer-main slot="main">
    <div slot="payments">
      <primer-vault-manager></primer-vault-manager>
      
      <primer-show-other-payments>
        <div slot="other-payments">
          <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
        </div>
      </primer-show-other-payments>
    </div>
  </primer-main>
</primer-checkout>

<primer-vault-manager>
  <button slot="submit-button" type="submit">Pay with Saved Card</button>
</primer-vault-manager>

document.getElementById('my-pay-button').addEventListener('click', () => {
  document.dispatchEvent(
    new CustomEvent('primer:vault-submit', {
      bubbles: true,
      composed: true
    })
  );
});

checkout.options = {
  vault: {
    enabled: true,       // Required
    headless: false,     // Hide default UI for custom implementation
    showEmptyState: true
  }
};

checkout.addEventListener('primer:vault:selection-change', (event) => {
  const { paymentMethodId } = event.detail;
  submitButton.disabled = !paymentMethodId;
});

checkout.options = {
  vault: {
    enabled: true,
    headless: true
  }
};

checkout.addEventListener('primer:ready', (event) => {
  const primer = event.detail;
  
  primer.onVaultedMethodsUpdate = async ({ vaultedPayments, cvvRecapture }) => {
    const methods = vaultedPayments.toArray();
    
    methods.forEach(method => {
      if (method.paymentInstrumentType === 'PAYMENT_CARD') {
        const { network, last4Digits } = method.paymentInstrumentData;
        // Render: Visa •••• 4242
      }
    });
    
    if (cvvRecapture) {
      const cvvInput = await primer.vault.createCvvInput({
        cardNetwork: methods[0].paymentInstrumentData.network,
        container: '#cvv-container'
      });
    }
  };
});