Full control

Build your own accordion, tabs, or any layout. This component is a pure content renderer; no fetching, no global listeners, and no expand/collapse behavior. You render the title, subtitle, logos, and surrounding UI. The component handles the content area, including regulatory compliance and formatting.

Because you render the subtitle yourself, the component can’t read its size; it’s a sibling in your DOM, and CSS can’t inherit sideways. To make the expanded content match your subtitle, set font-size on the group to the same value: resurs-payment-method-group { font-size: 14px; }. See Font size.

Fetch payment method groups

Frontend (JS API)
Backend (REST API)

const groups = await resurs.getPaymentMethodGroups({
  sessionId: '5a94e1cf-c2d6-4f70-bc88-2db1d0ad1bc3',
  amount: '5000',
  customerType: 'NATURAL',
  flattened: true,
});

GET {baseUrl}/sessions/{sessionId}/payment-method-groups?amount=5000&customerType=NATURAL&flattened=true HTTP/1.1

You don’t need to pass the JWT token, the request is authorized through the sessionId.

The flattened parameter is optional. When true, every payment method is returned as its own group with a single entry in methodIds. When false or omitted, related payment methods may be grouped together (e.g. part-payment options bundled into one group). Response shape:

[{
  id: string,             // Unique identifier for the group
  methodIds: string[],    // Identifiers for all payment methods in the group
  title: string,          // Display title (e.g. "Invoice")
  subtitle: string,       // Display subtitle
  type: string,           // e.g. "RESURS_INVOICE"
  customerTypes: string[],// e.g. ["NATURAL"]
  internalData: string    // Opaque data, pass directly to the component
}]

internalData is opaque. Don’t parse, modify, or inspect it. Pass it directly to the component as-is.

Interactive example

Render the components

let selectedId = null;
const container = document.querySelector('#payment-methods');

groups.forEach(group => {
  const header = document.createElement('button');
  header.textContent = group.title;
  container.appendChild(header);

  const el = document.createElement('resurs-payment-method-group');
  el.data = group.internalData;
  container.appendChild(el);

  header.addEventListener('click', () => {
    // Deactivate all: each one collapses beneath its own header,
    // it is not hidden
    container.querySelectorAll('resurs-payment-method-group').forEach(w => {
      w.active = false;
      w.selectedId = null;
    });
    // Activate clicked
    el.active = true;
  });
});

// Handle the controlled round-trip: store the id and pass it back
container.addEventListener('resursPaymentMethodSelected', (e) => {
  selectedId = e.detail.id;
  const active = container.querySelector('resurs-payment-method-group[active]');
  if (active) active.selectedId = selectedId;
});

container.addEventListener('resursPaymentMethodDeselected', () => {
  selectedId = null;
});

Every group stays in the DOM regardless of active: toggling it only switches between the expanded and collapsed views under the header you built.

Props

Prop	Type	Required	Description
`data`	`string`	Yes	The `internalData` value from the payment method group response.
`active`	`boolean`	No	Whether this group is expanded. When `false`, the group renders in a collapsed state, displaying payment method copy. This may include legally required content, such as representative examples. Defaults to `false`.
`selected-id`	`string`	No	The `id` from the most recent `resursPaymentMethodSelected` event. Pass this back to complete the controlled round-trip.

Controlled component pattern

This component is fully controlled and never mutates its own props. When the user interacts with the component (for example, by selecting an installment option), it fires a resursPaymentMethodSelected event. To update the UI, pass the id from that event back to the component via the selected-id prop. When active is false, the group renders a collapsed view instead of being hidden. This view displays payment method copy, which may include legally required content such as representative examples. If a payment method has no collapsed copy, nothing is rendered and no space is reserved. Changing active to true expands the group and fires the initial resursPaymentMethodSelected event described below.

Never hide, unmount, or display: none an inactive group. Its collapsed view shows legally required copy that must stay visible. Build accordions or tabs by toggling active only; every group must remain rendered.

When active becomes true, the component fires an initial resursPaymentMethodSelected event with the default selection. Always handle this event. The id is what you pass to the Merchant API when creating a payment.

Payment method icon

<resurs-payment-method-icon> renders the brand icon for a given payment method. Pass a payment method type via the type attribute and the component displays the corresponding logo.

string

Payment method type, from type in the payment methods group response. If an unsupported type is passed, a warning is logged to the console and no icon is rendered.

Resurs payment methods

Name	Icon	Type
Invoice		`RESURS_INVOICE`
Part payment (select later)		`RESURS_PART_PAYMENT_SELECT_LATER`
Part payment (select now)		`RESURS_PART_PAYMENT_SELECT_NOW`
Resurs Card		`RESURS_CARD`
Revolving Credit		`RESURS_REVOLVING_CREDIT`
New Revolving Credit		`RESURS_NEW_REVOLVING_CREDIT`
Generic		`GENERIC`
Zero		`ZERO`

Third-party payment methods

Name	Icon	Type
Swish		`SWISH`
Trustly		`TRUSTLY`
Vipps		`VIPPS`
MobilePay		`MOBILEPAY`
Visa / Mastercard (CARD)		`CARD`
Visa / Mastercard (D2I)		`D2I`
Visa / Mastercard (NETS)		`NETS`

Example

<resurs-payment-method-icon type="SWISH"></resurs-payment-method-icon>

Styling

The <resurs-payment-method-icon> component renders SVG logos and can be styled with standard CSS. The SVG scales proportionally, so setting one dimension (e.g. height) and leaving the other as auto keeps the aspect ratio.

Custom sizing via inline style

<resurs-payment-method-icon
  type="INVOICE"
  style="height: 10px; width: auto;"
></resurs-payment-method-icon>

Custom sizing via CSS

resurs-payment-method-icon {
  height: 10px;
  width: auto;
}

You can also wrap the icon in a container and style the surrounding layout:

Badge-style

.icon-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background-color: #f0fdf4;
}

<div class="icon-badge">
  <resurs-payment-method-icon type="INVOICE"></resurs-payment-method-icon>
</div>

Getting Started

Checkout

Price Info

Fetch payment method groups

Interactive example

Render the components

Props

Controlled component pattern

Payment method icon

Resurs payment methods

Third-party payment methods

Example

Styling

​Fetch payment method groups

​Interactive example

​Render the components

​Props

​Controlled component pattern

​Payment method icon

​Resurs payment methods

​Third-party payment methods

​Example

​Styling

Fetch payment method groups

Interactive example

Render the components

Props

Controlled component pattern

Payment method icon

Resurs payment methods

Third-party payment methods

Example

Styling