# Add Payment Method

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

***

## Usage

```typescript
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

```html
<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.

{% hint style="info" %}
**Bank Security**

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.alternativepayments.io/web-sdk/components/add-payment-method.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.