<primer-payment-method-container>
Automatically renders available payment methods with built-in filtering. Eliminates manual event handling and state management.
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.
Quick Reference
| |
|---|
| Parent | <primer-checkout> |
| Properties | include, exclude, disabled |
| CSS Variables | --primer-space-small |
Examples
All Methods
<primer-payment-method-container></primer-payment-method-container>
Include Specific Methods
<primer-payment-method-container include="APPLE_PAY,GOOGLE_PAY">
</primer-payment-method-container>
Exclude Methods
<primer-payment-method-container exclude="PAYMENT_CARD,KLARNA">
</primer-payment-method-container>
Sectioned Layout
<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
<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:
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
- If
include is set, only those types render
- If
exclude is set, those types are filtered out
- Both can be combined:
include applies first, then exclude
- 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
- 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 |
