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.

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

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

primer-payment-method

Individual method component

Layout customization

Layout patterns