Add Payment Method

Form for adding a new payment method (credit card or bank account).

---

Usage

const addPayment = client.components.addPaymentMethod({
  containerId: 'add-payment',
  customerId: 'cus_xxx',
  defaultType: 'CARD',
  onSuccess: (paymentMethod) => {
    console.log('Added:', paymentMethod.id);
  },
  onCancel: () => {
    console.log('Cancelled');
  },
});

---

Configuration

AddPaymentMethodConfig

Property	Type	Required	Description
containerId	string	Yes	ID of the container element
customerId	string	Yes	Customer ID to add payment method for
defaultType	'CARD' | 'ACH'	No	Default tab to show
currency	'usd' | 'cad'	No	Currency context
theme	ThemeConfig	No	Custom theme configuration
onSuccess	(pm: PaymentMethod) => void	No	Called when payment method is created
onCancel	() => void	No	Called when "Cancel" is clicked
onError	(error: Error) => void	No	Called on errors

---

Card Form

The card form uses Evervault for PCI-compliant card collection. Your application never touches raw card data.

Fields collected:

• Card number

• Expiration date (MM/YY)

• Cardholder name

• Billing address (street, city, state, postal code, country)

---

Bank Account Form (ACH)

The ACH form uses Plaid for secure bank account linking.

Process:

1. User clicks "Connect Bank Account"

2. Plaid Link opens in a modal

3. User selects their bank and authenticates

4. Account details are securely captured

---

Example

<div id="add-payment"></div>

<script type="module">
  import { AlternativeClient } from '@getalternative/partner-sdk';

  const client = new AlternativeClient({
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret',
  });

  const form = client.components.addPaymentMethod({
    containerId: 'add-payment',
    customerId: 'cus_abc123',
    defaultType: 'CARD',
    onSuccess: (paymentMethod) => {
      // Payment method added successfully
      console.log('New payment method:', paymentMethod);

      // Navigate back to selection
      window.location.href = '/payment-methods';
    },
    onCancel: () => {
      window.history.back();
    },
    onError: (error) => {
      console.error('Failed to add payment method:', error);
    },
  });
</script>

---

Security

PCI Compliance

Card data is collected directly by Evervault and never touches your servers. This keeps your application out of PCI scope.

Bank Security

Bank credentials are handled entirely by Plaid. Your application only receives a secure token for the linked account.