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)

---

Examples

Multiple Methods

<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

<primer-payment-method type="PAYPAL" disabled></primer-payment-method>

Dynamic Rendering

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

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

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

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

primer-payment-method-container

Declarative filtering

SDK options reference

Payment method options

Available payment methods

Full list of supported payment methods