Payment Methods

Resurs Payment Methods is a set of standard Web Components for integrating Resurs payment methods into your checkout flow. It renders your available payment methods and emits JavaScript events when the user selects or deselects them.

Create a session

Before rendering the components, your backend must create a session. This returns a session ID and the script URL for the components.

Base URLs

Environment	Base URL
Production	`https://api.checkout.prod.resurs.cloud/payment/public/v1`
Mock	`https://api.checkout.int.resurs.cloud/mock/payment/public/v1`

Steps

Obtain a JWT access token

Request a JWT from the Merchant API.POST /oauth2/token (See Merchant API documentation for details.)

Fetch stores

In the next step you will need the store id. See Merchant API for information about fetching your store configurations.

Create a session

Use the JWT as a bearer token to create a session. The session represents a checkout session and should not be reused between users.

POST {baseUrl}/stores/{storeId}/sessions
Authorization: Bearer <accessToken>
Content-Type: application/json

You can pass a campaign keyword in the request body to filter payment methods for a specific campaign (e.g. a promotional offer on a product). When set, only payment methods matching that campaign are returned. When omitted, only non-campaign payment methods are returned.

Campaigns must be configured by Resurs for your payment methods before you can use them. Contact Resurs to set up campaigns.

Request body example with campaign:

{
  "campaign": "SUMMER_SALE"
}

Response:

{
  "id": "5a94e1cf-c2d6-4f70-bc88-2db1d0ad1bc3",
  "expiresAt": "2026-06-04T10:30:00Z",
  "embed": {
    "src": "https://static.checkout.int.resurs.cloud/payment/resurs-payment-elements.js?burst-cache=1709744400000"
  }
}

Pass the session ID and script URL to your frontend

Your frontend needs two values from the response:

id: The session ID, used as the session-id attribute on the component
embed.src: The script URL to load the components

The response also contains expiresAt that states the validity of the session ID. If the session expires, you must create a new session. For normal usage, the session will be long enough so won’t need to refresh.

expiresAt: Session expiration timestamp in ISO 8601 format. After this time, the session will no longer be valid for API requests.

Always use embed.src from the session response to load the script. Don’t hardcode the URL.

Load the script

Use the embed.src value from the session response:

<script
  type="module"
  crossorigin="anonymous"
  src="${embed.src}"
></script>

Choose your approach

There are two levels of integration:

Managed: a single drop-in component that fetches payment methods, renders an accordion, and manages selection state for you. Minimal code needed.
Full Control: a pure content renderer. You fetch data, build the UI layout, and manage state yourself. Maximum flexibility.

Concern	Managed	Full Control
Integration effort	Low	High
Flexibility	Low	High
Component	`<resurs-payment-method-selector>`	`<resurs-payment-method-group>`
Data fetching	Automatic	You fetch via JS API or REST
Accordion UI	Built-in	You handle
Selection state	Automatic	You handle
Styling the header	Resurs default	Full control
Re-fetch on amount change	Automatic	You handle

Managed: <resurs-payment-method-selector>

Drop in a single tag. The component fetches payment methods, renders an accordion, and manages selection state automatically.

Interactive example

Attributes

Attribute	Type	Required	Description
`session-id`	`string`	Yes	Session ID from the create session endpoint.
`amount`	`string`	Yes	Total purchase amount in minor units (e.g., `"5000"` = 50.00 kr).
`customer-type`	`string`	No	`NATURAL` (consumers) or `LEGAL` (businesses). Defaults to `NATURAL`.

Behavior

Fetches and re-fetches payment methods automatically when attributes change.
Shows a loading spinner during fetch, an error message on failure.

Currency is determined by the Resurs payment methods configured for the store relative to the session.

Updating

Update the component by setting new attribute values directly on the element. The component re-fetches automatically when attributes change.

const selector = document.querySelector('resurs-payment-method-selector');

// Update amount (e.g. cart total changed)
selector.setAttribute('amount', '7500');

// Update session
selector.setAttribute('session-id', 'new-session-id');

Ready to handle user selections? Skip to the Events section.

Full control: <resurs-payment-method-group>

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.

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',
});

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

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

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
    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;
});

Props

Prop	Type	Required	Description
`data`	`string`	Yes	The `internalData` value from the payment method group response.
`active`	`boolean`	No	Whether this group is currently selected/visible. 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; it never mutates its own props. When the user interacts with the component (e.g. picks an installment option), it fires a resursPaymentMethodSelected event. You must pass the id from that event back to the component via the selected-id prop so the UI re-renders with the correct selection.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.

type

string

Payment method type, from typein 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>

Events

`resursPaymentMethodSelected`

Fires when a payment method is selected. The detail property contains:

{
  id: string  // Unique identifier, pass this to the Merchant API when creating a payment
}

JavaScript example:

window.addEventListener("resursPaymentMethodSelected", (event) => {
  const { id } = event.detail;
  // Use id with Resurs' Merchant API
});

TypeScript example:

interface PaymentMethodSelectedDetail {
  id: string;
}

window.addEventListener(
  "resursPaymentMethodSelected",
  ((event: CustomEvent<PaymentMethodSelectedDetail>) => {
    const { id } = event.detail;
    // Use id with Resurs' Merchant API
  }) as EventListener
);

`resursPaymentMethodDeselected`

Fires when a payment method is deselected. The detail property contains { id } for a specific deselection, or null when all methods are deselected.

window.addEventListener("resursPaymentMethodDeselected", (event) => {
  if (event.detail) {
    const { id } = event.detail;
    // Specific method deselected
  } else {
    // All methods deselected
  }
});

Theming

CSS custom properties

:root {
  /** The main accent color  */
  --resurs-checkout-accent-color: light-dark(#8ca101, #a7c080);

  /** Text color */
  --resurs-checkout-text-color: light-dark(#272e33, #d2c5a9);

  /** Background color of the component */
  --resurs-checkout-background: light-dark(#fff, #212529);

  /** Border Radius, a value between 0-30px or equivalent unit of your choice */
  --resurs-checkout-border-radius: 8px;

  /** Secondary vars */
  /** Header and subtitle color; defaults to primary foreground */
  --resurs-checkout-header-color: light-dark(#272e33, #d2c5a9);

  /** Hyperlink color; defaults to primary foreground */
  --resurs-checkout-link-color: light-dark(#272e33, #d2c5a9);

  /** Radiobutton color; defaults to primary color */
  --resurs-checkout-checkbox-color: light-dark(#8ca101, #a7c080);

  /**Radiobutton dot color; defaults to primary color */
  --resurs-checkout-checkbox-checkmark: light-dark(#8ca101, #a7c080);
}

Accessibility

The components include ARIA labels and keyboard navigation.
Use semantic HTML around the components.
Ensure sufficient color contrast if customizing styles.

JavaScript API reference

The script exposes window.resurs with utility functions for programmatic control.

`resurs.dispatchSelected(id)`

Programmatically select a payment method. Fires the global resursPaymentMethodSelected event.

resurs.dispatchSelected('some-payment-method-id');

`resurs.dispatchDeselected()`

Programmatically deselect all payment methods. Fires the global resursPaymentMethodDeselected event.

resurs.dispatchDeselected();

Troubleshooting

Component not rendering?

Verify component attributes:

session-id must be a valid session ID from the API.
amount must be set.
customer-type must be NATURAL or LEGAL.

Check script loading:

Use embed.src from the session response. Do not hardcode the URL.
The script must have type="module".

Session or API errors

“Unauthorized” or 401 errors:

Session is invalid or expired. Create a new session.

“Invalid session” errors:

Verify the session ID is the id value from the session response.
Ensure the session hasn’t expired.

Payment method types

The following payment method types are supported:

RESURS_INVOICE
RESURS_PART_PAYMENT_SELECT_LATER
RESURS_PART_PAYMENT_SELECT_NOW
RESURS_CARD
RESURS_REVOLVING_CREDIT
RESURS_NEW_REVOLVING_CREDIT

Available payment methods depend on your store configuration, customer type, and the specified amount. Only applicable methods are displayed.

API reference

For the full API specification, see the Payment Methods API Reference.

Getting Started

Checkout

Create a session

Base URLs

Steps

Load the script

Choose your approach

Interactive example

Attributes

Behavior

Updating

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

Events

`resursPaymentMethodSelected`

`resursPaymentMethodDeselected`

Theming

CSS custom properties

Accessibility

JavaScript API reference

`resurs.dispatchSelected(id)`

`resurs.dispatchDeselected()`

Troubleshooting

Component not rendering?

Session or API errors

Payment method types

API reference

Getting Started

Checkout

​Create a session

​Base URLs

​Steps

​Load the script

​Choose your approach

​Interactive example

​Attributes

​Behavior

​Updating

​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

​Events

​resursPaymentMethodSelected

​resursPaymentMethodDeselected

​Theming

​CSS custom properties

​Accessibility

​JavaScript API reference

​resurs.dispatchSelected(id)

​resurs.dispatchDeselected()

​Troubleshooting

​Component not rendering?

​Session or API errors

​Payment method types

​API reference

Create a session

Base URLs

Steps

Load the script

Choose your approach

Interactive example

Attributes

Behavior

Updating

Fetch payment method groups

Interactive example

Render the components

Props

Controlled component pattern

Payment method icon

Events

`resursPaymentMethodSelected`

`resursPaymentMethodDeselected`

Theming

CSS custom properties

Accessibility

JavaScript API reference

`resurs.dispatchSelected(id)`

`resurs.dispatchDeselected()`

Troubleshooting

Component not rendering?

Session or API errors

Payment method types

API reference