Payment Method Select

Displays the customer's saved payment methods and allows selection or adding new ones.

---

Usage

const paymentSelect = client.components.paymentMethodSelect({
  containerId: 'payment-methods',
  customerId: 'cus_xxx',
  onSelect: (paymentMethod) => {
    console.log('Selected:', paymentMethod.id);
  },
  onAddNew: (type) => {
    console.log('Add new payment method:', type);
  },
});

---

Configuration

PaymentMethodSelectConfig

Property	Type	Required	Description
containerId	string	Yes	ID of the container element
customerId	string	Yes	Customer ID to fetch payment methods for
selectedPaymentMethodId	string	No	Pre-select a payment method
theme	ThemeConfig	No	Custom theme configuration
onSelect	(pm: PaymentMethod) => void	No	Called when a payment method is selected
onAddNew	(type: PaymentMethodType) => void	No	Called when "Add New" is clicked
onBack	() => void	No	Called when "Back" is clicked
onError	(error: Error) => void	No	Called on errors

---

Payment Method Types

The component supports these payment method types:

Type	Description
CARD	Credit or debit card
ACH	Bank account (ACH transfer)

---

PaymentMethod Object

The onSelect callback receives a PaymentMethod object:

interface PaymentMethod {
  id: string;
  type: 'CARD' | 'ACH';
  customer_id: string;
  is_default: boolean;
  card?: {
    brand: string;
    last_four: string;
    exp_month: number;
    exp_year: number;
  };
  ach?: {
    bank_name: string;
    last_four: string;
    account_type: 'checking' | 'savings';
  };
}

---

Example

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

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

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

  const select = client.components.paymentMethodSelect({
    containerId: 'payment-methods',
    customerId: 'cus_abc123',
    onSelect: (pm) => {
      // Proceed to confirmation with selected method
      proceedToConfirmation(pm.id);
    },
    onAddNew: (type) => {
      // Show add payment method form
      showAddPaymentMethodForm(type);
    },
  });
</script>

---

Display

The component shows:

• List of saved payment methods with icons

• Card brand and last 4 digits for cards

• Bank name and last 4 digits for ACH

• Radio buttons for selection

• "Add Credit Card" and "Add Bank Account" buttons

• "Continue to Payment" button when a method is selected