<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, disabledCSS 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 includeincludestring— Comma-separated types to include excludeexcludestring— Comma-separated types to exclude disableddisabledbooleanfalseDisables 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-smallGap 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 setAll 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
See also
primer-payment-method Individual method component
Layout customization Layout patterns
