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

# Payment Method Component

> Renders payment method UI based on type and configuration.

## \<primer-payment-method>

Renders the appropriate payment interface for a specified type. Only displays if the method is configured in your Dashboard and available for this checkout.

## Quick Reference

|                |                                                            |
| -------------- | ---------------------------------------------------------- |
| **Parent**     | `<primer-checkout>`                                        |
| **Properties** | `type`, `disabled`                                         |
| **Emits**      | None — subscribes to parent events (see [Events](#events)) |

***

## Examples

### Multiple Methods

```html theme={"dark"}
<primer-checkout client-token="your-token">
  <primer-main slot="main">
    <div slot="payments">
      <primer-payment-method type="PAYMENT_CARD"></primer-payment-method>
      <primer-payment-method type="PAYPAL"></primer-payment-method>
      <primer-payment-method type="GOOGLE_PAY"></primer-payment-method>
    </div>
  </primer-main>
</primer-checkout>
```

### Disabled

```html theme={"dark"}
<primer-payment-method type="PAYPAL" disabled></primer-payment-method>
```

### Dynamic Rendering

```javascript theme={"dark"}
checkout.addEventListener('primer:methods-update', (event) => {
  const methods = event.detail.toArray();
  const container = document.getElementById('payment-methods');
  
  methods.forEach(method => {
    const el = document.createElement('primer-payment-method');
    el.setAttribute('type', method.type);
    container.appendChild(el);
  });
});
```

### Disable During Processing

```javascript theme={"dark"}
checkout.addEventListener('primer:state-change', (event) => {
  document.querySelectorAll('primer-payment-method').forEach(pm => {
    event.detail.isProcessing 
      ? pm.setAttribute('disabled', '') 
      : pm.removeAttribute('disabled');
  });
});
```

***

## Properties

| Property   | Attribute  | Type      | Default | Description               |
| ---------- | ---------- | --------- | ------- | ------------------------- |
| `type`     | `type`     | `string`  | —       | Payment method identifier |
| `disabled` | `disabled` | `boolean` | `false` | Disables interaction      |

***

## Events

`<primer-payment-method>` does not emit its own events. Payment outcomes are reported by the parent `<primer-checkout>` component.

### Relevant Parent Events

| Event                    | Emitted by          | How it affects this component                                                                |
| ------------------------ | ------------------- | -------------------------------------------------------------------------------------------- |
| `primer:methods-update`  | `<primer-checkout>` | Determines whether this method renders — only methods in the collection are displayed        |
| `primer:state-change`    | `<primer-checkout>` | Provides `isProcessing` to disable the method during payment                                 |
| `primer:payment-success` | `<primer-checkout>` | Indicates payment completed — includes `paymentMethodType` to identify which method was used |
| `primer:payment-failure` | `<primer-checkout>` | Indicates payment failed — includes `paymentMethodType`                                      |

### Checking availability before rendering

```javascript theme={"dark"}
const checkout = document.querySelector('primer-checkout');

checkout.addEventListener('primer:methods-update', (event) => {
  const methods = event.detail.toArray();
  const available = methods.map(m => m.type);

  // Only render methods that are available for this checkout
  available.forEach(type => {
    const el = document.createElement('primer-payment-method');
    el.setAttribute('type', type);
    document.getElementById('methods').appendChild(el);
  });
});
```

***

## Common Types

| Type           | Description       |
| -------------- | ----------------- |
| `PAYMENT_CARD` | Card form         |
| `APPLE_PAY`    | Apple Pay button  |
| `GOOGLE_PAY`   | Google Pay button |
| `PAYPAL`       | PayPal button     |
| `KLARNA`       | Klarna            |
| `ADYEN_KLARNA` | Klarna via Adyen  |
| `ADYEN_BLIK`   | BLIK (Poland)     |

See [Available Payment Methods](/connections/payment-methods/available-payment-methods) for full list.

***

## Rendering Behavior

Renders only when **all** conditions are met:

1. `type` attribute is set
2. Method is enabled in Primer Dashboard
3. Method is returned by server for this checkout

If unavailable, renders nothing (no error).

***

## Configuration

Configure via SDK options on `<primer-checkout>`:

```javascript theme={"dark"}
checkout.options = {
  card: {
    cardholderName: { required: true }
  },
  googlePay: {
    buttonTheme: 'dark',
    buttonType: 'buy'
  }
};
```

***

## CSS Properties

CSS properties vary by payment method type. Each renders different internal components.

### Card Form (PAYMENT\_CARD)

Uses [Input Styling Tokens](/sdk/primer-checkout-web/styling-variables#input-styling-tokens) for input fields.

### Native Payment Buttons (APPLE\_PAY, GOOGLE\_PAY, PAYPAL)

| Property                | Description              | Default |
| ----------------------- | ------------------------ | ------- |
| `--primer-space-small`  | Gap between buttons      | `8px`   |
| `--primer-space-medium` | Button container padding | `12px`  |

> **Note:** Apple Pay, Google Pay, and PayPal buttons use their native styling which cannot be customized via CSS properties. Button appearance is controlled through SDK options.

### Alternative Payment Methods (KLARNA, ADYEN\_BLIK, etc.)

| Property                                     | Description          | Default                |
| -------------------------------------------- | -------------------- | ---------------------- |
| `--primer-space-small`                       | Internal spacing     | `8px`                  |
| `--primer-space-medium`                      | Container padding    | `12px`                 |
| `--primer-radius-small`                      | Border radius        | `4px`                  |
| `--primer-color-border-outlined-default`     | Container border     | rgba(33, 33, 33, 0.14) |
| `--primer-color-background-outlined-default` | Container background | white                  |
| `--primer-color-text-primary`                | Primary text color   | #212121                |
| `--primer-color-text-secondary`              | Secondary text color | rgba(33, 33, 33, 0.62) |
| `--primer-animation-duration`                | Transition duration  | `200ms`                |

***

## States

| State          | Description              | Visual Change                    |
| -------------- | ------------------------ | -------------------------------- |
| **Hidden**     | Method unavailable       | Not rendered                     |
| **Loading**    | Initializing method      | Loading indicator                |
| **Ready**      | Ready for interaction    | Standard appearance              |
| **Processing** | Payment in progress      | Loading state, disabled          |
| **Disabled**   | `disabled` attribute set | Muted appearance, no interaction |

### Type-Specific States

**Card Form (PAYMENT\_CARD):**

* Inherits states from `<primer-card-form>`

**Native Buttons (APPLE\_PAY, GOOGLE\_PAY, PAYPAL):**

* Loading, Ready, Processing states managed by native SDKs

**Alternative Methods (KLARNA, BLIK, etc.):**

* May show additional states like category selection or code entry

***

## Usage Guidelines

### Do

* Use `primer:methods-update` to discover available methods
* Disable all methods during processing
* Configure payment options on `<primer-checkout>`

### Don't

* Don't use alongside `<primer-card-form>` for `PAYMENT_CARD` (causes duplicate)
* Don't assume a method is available — check `primer:methods-update`

***

## Content Guidelines

### Section headings

| Do                      | Don't                                |
| ----------------------- | ------------------------------------ |
| "Pay with card"         | "PAYMENT\_CARD" (internal type name) |
| "Other payment methods" | "APMs" (jargon)                      |
| Use sentence case       | Use title case or all caps           |

### Unavailable method messaging

| Do                                | Don't                                        |
| --------------------------------- | -------------------------------------------- |
| Render nothing (default behavior) | "This payment method is unavailable"         |
| Show only available methods       | Show disabled/grayed-out unavailable methods |

***

## See also

<CardGroup cols={2}>
  <Card title="primer-payment-method-container" icon="cube" href="/sdk/primer-checkout-web/components/primer-payment-method-container">
    Declarative filtering
  </Card>

  <Card title="SDK options reference" icon="gear" href="/sdk/primer-checkout-web/sdk-options-reference">
    Payment method options
  </Card>

  <Card title="Available payment methods" icon="wallet" href="/connections/payment-methods/available-payment-methods">
    Full list of supported payment methods
  </Card>
</CardGroup>