> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Method Container

> Automatically renders and filters payment methods using a declarative approach.

## \<primer-payment-method-container>

Automatically renders available payment methods with built-in filtering. Eliminates manual event handling and state management.

<Info>
  This component is useful when building custom layouts. It simplifies the creation of custom payment method layouts by automatically rendering available payment methods with built-in filtering capabilities. It eliminates the need for verbose event listeners and manual state management.
</Info>

## Quick Reference

|                   |                                  |
| ----------------- | -------------------------------- |
| **Parent**        | `<primer-checkout>`              |
| **Properties**    | `include`, `exclude`, `disabled` |
| **CSS Variables** | `--primer-space-small`           |

***

## Examples

### All Methods

```html theme={"dark"}
<primer-payment-method-container></primer-payment-method-container>
```

### Include Specific Methods

```html theme={"dark"}
<primer-payment-method-container include="APPLE_PAY,GOOGLE_PAY">
</primer-payment-method-container>
```

### Exclude Methods

```html theme={"dark"}
<primer-payment-method-container exclude="PAYMENT_CARD,KLARNA">
</primer-payment-method-container>
```

### Sectioned Layout

```html theme={"dark"}
<div slot="payments">
  <!-- Quick pay -->
  <h3>Express Checkout</h3>
  <primer-payment-method-container include="APPLE_PAY,GOOGLE_PAY">
  </primer-payment-method-container>
  
  <!-- Card form -->
  <h3>Pay with Card</h3>
  <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
  
  <!-- Other methods -->
  <h3>More Options</h3>
  <primer-payment-method-container exclude="PAYMENT_CARD,APPLE_PAY,GOOGLE_PAY">
  </primer-payment-method-container>
</div>
```

### Disabled

```html theme={"dark"}
<primer-payment-method-container disabled></primer-payment-method-container>
```

***

## Properties

| Property   | Attribute  | Type      | Default | Description                      |
| ---------- | ---------- | --------- | ------- | -------------------------------- |
| `include`  | `include`  | `string`  | —       | Comma-separated types to include |
| `exclude`  | `exclude`  | `string`  | —       | Comma-separated types to exclude |
| `disabled` | `disabled` | `boolean` | `false` | Disables all methods             |

***

## Events

`<primer-payment-method-container>` does not emit its own events. It subscribes to parent events internally to render and filter methods automatically.

### Relevant Parent Events

| Event                   | Emitted by          | How the container uses it                                                                                                  |
| ----------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `primer:methods-update` | `<primer-checkout>` | Triggers rendering — the container filters the methods collection against `include`/`exclude` and renders matching methods |

### When you need to react to rendered methods

The container handles rendering automatically. If you need to know which methods rendered, listen on the parent:

```javascript theme={"dark"}
const checkout = document.querySelector('primer-checkout');

checkout.addEventListener('primer:methods-update', (event) => {
  const methods = event.detail.toArray();
  console.log('Available methods:', methods.map(m => m.type));
});
```

***

## Filter Logic

1. If `include` is set, only those types render
2. If `exclude` is set, those types are filtered out
3. Both can be combined: `include` applies first, then `exclude`
4. Renders nothing if no methods remain

**Values are case-sensitive** (e.g., `PAYMENT_CARD` not `payment_card`).

***

## CSS Properties

| Property               | Description         | Default |
| ---------------------- | ------------------- | ------- |
| `--primer-space-small` | Gap between methods | `8px`   |

***

## States

| State         | Description              | Visual Change               |
| ------------- | ------------------------ | --------------------------- |
| **Loading**   | Payment methods loading  | May show loading indicators |
| **Empty**     | No methods match filters | Nothing rendered            |
| **Populated** | Methods available        | Payment methods displayed   |
| **Disabled**  | `disabled` attribute set | All child methods disabled  |

> **Note:** This component delegates visual states to its child `<primer-payment-method>` components.

***

## Usage Guidelines

### Do

* Use for automatic method rendering without manual event handling
* Create sectioned layouts with multiple containers
* Combine `include` and `exclude` for complex filtering

### Don't

* Don't include `PAYMENT_CARD` if using a custom `<primer-card-form>` (causes duplicate)
* Don't forget: values are case-sensitive

***

## Content Guidelines

### Section headings

| Do                      | Don't                      |
| ----------------------- | -------------------------- |
| "Pay with card"         | "Card payments"            |
| "Other payment methods" | "APMs"                     |
| Use sentence case       | Use title case or all caps |

***

## See also

<CardGroup cols={2}>
  <Card title="primer-payment-method" icon="cube" href="/sdk/primer-checkout-web/components/primer-payment-method">
    Individual method component
  </Card>

  <Card title="Layout customization" icon="table-layout" href="/checkout/primer-checkout/build-your-ui/layout-customization">
    Layout patterns
  </Card>
</CardGroup>