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.
<primer-show-other-payments> Collapsible container that toggles visibility of alternative payment methods when saved payment methods exist. Automatically collapses when vault has saved methods, expands when empty.
Quick Reference Parent <primer-checkout>Slots other-payments, show-other-payments-toggle-buttonEmits primer:show-other-payments-toggled
Examples Basic Usage < primer-checkout client-token = "your-token" > < primer-main slot = "main" > < div slot = "payments" > < primer-vault-manager ></ primer-vault-manager > < primer-show-other-payments > < div slot = "other-payments" > < primer-payment-method type = "PAYMENT_CARD" ></ primer-payment-method > < primer-payment-method type = "PAYPAL" ></ primer-payment-method > </ div > </ primer-show-other-payments > </ div > </ primer-main > </ primer-checkout >
< primer-show-other-payments > < button slot = "show-other-payments-toggle-button" type = "button" > View More Payment Options </ button > < div slot = "other-payments" > < primer-payment-method type = "PAYMENT_CARD" ></ primer-payment-method > </ div > </ primer-show-other-payments >
Button requirement: type="button" attribute.
checkout . addEventListener ( 'primer:show-other-payments-toggled' , ( event ) => { const button = document . querySelector ( '[slot="show-other-payments-toggle-button"]' ); button . textContent = event . detail . expanded ? 'Hide Payment Methods' : 'Show Payment Methods' ; });
Events Event When Payload primer:show-other-payments-toggledToggle clicked { expanded: boolean }
Slots Slot Description Requirements other-paymentsPayment methods container — show-other-payments-toggle-buttonCustom toggle button type="button"
Behavior Condition State Vault has saved methods Collapsed Vault is empty Expanded No vault Content shown directly (no toggle)
CSS Properties Layout Property Description Default --primer-space-mediumToggle button padding 12px--primer-space-smallGap between toggle and content 8px
Property Description --primer-color-text-primaryButton text color --primer-color-background-transparent-defaultDefault background (transparent) --primer-color-background-transparent-hoverHover background --primer-radius-mediumButton border radius
Animation Property Description Default --primer-animation-durationExpand/collapse transition 200ms--primer-animation-easingTransition easing cubic-bezier(0.44, 0, 0.4, 1)
States State Description Visual Change Collapsed Content hidden Toggle button visible, content area collapsed Expanded Content visible Toggle button visible, content area expanded No Toggle No vault present Content shown directly without toggle Animating Transitioning Smooth height animation between states
State Description Visual Change Default Ready for click Standard text appearance Hover Mouse over button Subtle background highlight Focus Keyboard focused Focus ring visible Active Button pressed Slightly darker background
Usage Guidelines
Use with <primer-vault-manager> in custom layouts
Provide custom toggle button for branded UI
Track expanded state for button label updates
Don’t
Don’t use without vault enabled (provides no benefit)
Don’t forget type="button" on custom toggle buttons
Content Guidelines Toggle button text Do Don’t ”Other payment methods" "Show more” (vague) “More ways to pay" "Toggle” (too technical)
State-aware labels Do Don’t Update label on expand: “Hide other methods” Keep same label in both states Use a chevron/arrow icon to indicate direction Use a generic icon that doesn’t convey expand/collapse
See also
primer-vault-manager Saved payment methods
primer-payment-method Individual methods
