> ## 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](/docs/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](/docs/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="/docs/sdk/primer-checkout-web/components/primer-payment-method-container">
    Declarative filtering
  </Card>

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

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


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