> ## 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="/docs/sdk/primer-checkout-web/components/primer-payment-method">
    Individual method component
  </Card>

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.