> ## 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="/sdk/primer-checkout-web/components/primer-vault-manager">
    Saved payment methods
  </Card>

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