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

# Show Other Payments Component

> Collapsible container for alternative payment methods when vault is present.

## \<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-button` |
| **Emits** | `primer:show-other-payments-toggled` |

***

## Examples

### Basic Usage

```html theme={"dark"}
<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

```html theme={"dark"}
<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

```javascript theme={"dark"}
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-toggled` | Toggle clicked | `{ expanded: boolean }` |

***

## Slots

| Slot | Description | Requirements |
| - | - | - |
| `other-payments` | Payment methods container | — |
| `show-other-payments-toggle-button` | Custom 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-medium` | Toggle button padding | `12px` |
| `--primer-space-small` | Gap between toggle and content | `8px` |

### Toggle Button

| Property | Description |
| - | - |
| `--primer-color-text-primary` | Button text color |
| `--primer-color-background-transparent-default` | Default background (transparent) |
| `--primer-color-background-transparent-hover` | Hover background |
| `--primer-radius-medium` | Button border radius |

### Animation

| Property | Description | Default |
| - | - | - |
| `--primer-animation-duration` | Expand/collapse transition | `200ms` |
| `--primer-animation-easing` | Transition 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 |

### Toggle Button 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

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

| 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

<CardGroup cols={2}>
  <Card title="primer-vault-manager" icon="bookmark" href="/docs/sdk/primer-checkout-web/components/primer-vault-manager">
    Saved payment methods
  </Card>

  <Card title="primer-payment-method" icon="cube" href="/docs/sdk/primer-checkout-web/components/primer-payment-method">
    Individual methods
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.