Skip to main content

​
<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>
Slotsother-payments, show-other-payments-toggle-button
Emitsprimer: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>

​
Custom Toggle Button

<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.

​
Dynamic Button Label

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

EventWhenPayload
primer:show-other-payments-toggledToggle clicked{ expanded: boolean }

​
Slots

SlotDescriptionRequirements
other-paymentsPayment methods container—
show-other-payments-toggle-buttonCustom toggle buttontype="button"

​
Behavior

ConditionState
Vault has saved methodsCollapsed
Vault is emptyExpanded
No vaultContent shown directly (no toggle)

​
CSS Properties

​
Layout

PropertyDescriptionDefault
--primer-space-mediumToggle button padding12px
--primer-space-smallGap between toggle and content8px

​
Toggle Button

PropertyDescription
--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

PropertyDescriptionDefault
--primer-animation-durationExpand/collapse transition200ms
--primer-animation-easingTransition easingcubic-bezier(0.44, 0, 0.4, 1)

​
States

StateDescriptionVisual Change
CollapsedContent hiddenToggle button visible, content area collapsed
ExpandedContent visibleToggle button visible, content area expanded
No ToggleNo vault presentContent shown directly without toggle
AnimatingTransitioningSmooth height animation between states

​
Toggle Button States

StateDescriptionVisual Change
DefaultReady for clickStandard text appearance
HoverMouse over buttonSubtle background highlight
FocusKeyboard focusedFocus ring visible
ActiveButton pressedSlightly darker background

​
Usage Guidelines

​
Do

  • 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

DoDon’t
”Other payment methods""Show more” (vague)
“More ways to pay""Toggle” (too technical)

​
State-aware labels

DoDon’t
Update label on expand: “Hide other methods”Keep same label in both states
Use a chevron/arrow icon to indicate directionUse a generic icon that doesn’t convey expand/collapse