Skip to main content

​
Composing with Standalone Modular Components

You can compose your own payment widgets with the modular components of the Resurs Payment Widget.

​
Interactive Example

​
<resurs-payment-method>

Display a single payment method with full control over styling and content. 
<resurs-payment-method
  type="RESURS_INVOICE"
  token="your-session-token"
  amount="5000"
  customerType="Customer Type"
  defaultStyling
  showHeader
  showSubtitle
  hideSeCreditWarning
>
</resurs-payment-method>

​
Attributes

AttributeTypeRequiredDescription
typestringYes*Payment method type (see Payment Method Types).
paymentMethodIdsstring | string[]Yes*Payment method IDs (single value or a comma-separated array).
amountstringYesTotal purchase amount.
tokenstringYesSession token from the Widget API (/session endpoint). Example: rpmw_3jZ8k9Xy7Vb2N5mQ1rT6W.
defaultStylingbooleanNoApply Resurs’ default styling.
showHeaderbooleanNoDisplay payment method title and icon.
showSubtitlebooleanNoDisplay payment method subtitle.
hideSeCreditWarningbooleanNoSweden only: Hide the Swedish government credit warning.**
customerTypestringNoCustomer type: NATURAL or B2C (consumers), or LEGAL or B2B (businesses).
* You need to provide either Type or Payment Method IDs.
When customizing your checkout layout with modular components, ensure that all required consumer information—such as credit warnings and payment terms—remains visible.
** Only set hideSeCreditWarning if you are already displaying the credit warning from the Swedish Consumer Agency (Konsumentverket) elsewhere in your checkout. Learn moreThis setting only applies to Swedish merchants. If you sell to customers outside of Sweden, no action is needed.

​
Anatomy of a Payment Method Widget

Payment Method Diagram * The seCreditWarning applies only to merchants in Sweden.

​
Selection Behavior

The standalone component, <resurs-payment-method>, will not emit a selection event.Standalone components with type=RESURS_PART_PAYMENT_SELECT_NOW will emit an event on click of any option, but not before.When using the stand alone component, you should take care to keep track of which payment method ID is currently selected.

​
Examples

With default styling: 
<resurs-payment-method
  type="RESURS_REVOLVING_CREDIT"
  token="your-session-token"
  amount="5000"
  defaultStyling
  showHeader
  showSubtitle
>
</resurs-payment-method>
Custom styling but with subtitle in the body: 
<resurs-payment-method
  type="RESURS_CARD"
  token="your-session-token"
  amount="5000"
  showSubtitle
>
</resurs-payment-method>
Showing only the body of the payment method: 
<resurs-payment-method
  type="RESURS_CARD"
  token="your-session-token"
  amount="5000"
>
</resurs-payment-method>
Part payment with installment selection: 
<resurs-payment-method
  type="RESURS_PART_PAYMENT_SELECT_NOW"
  token="your-session-token"
  amount="5000"
  defaultStyling
  showHeader
  showSubtitle
>
</resurs-payment-method>

​
Utility Components

These components render individual elements of a payment method.
These components must be used together with <resurs-payment-method>.

​
<resurs-payment-method-title>

Displays the payment method title. 
<resurs-payment-method-title
  type="RESURS_INVOICE"
  useHTag
></resurs-payment-method-title>

​
Attributes

AttributeTypeRequiredDescription
typestringYes*Payment method type.
paymentMethodIdsstring | string[]Yes*Payment method IDs (single value or a comma-separated array).
useHTagbooleanNoUse <h3> instead of <span>.
* You need to provide either Type or Payment Method IDs.

​
<resurs-payment-method-icon>

Displays the payment method icon. 
<resurs-payment-method-icon type="RESURS_CARD"></resurs-payment-method-icon>

​
Attributes

AttributeTypeRequiredDescription
typestringYes*Payment method type

​
<resurs-payment-method-subtitle>

Displays the payment method subtitle with dynamic amount-based content. 
<resurs-payment-method-subtitle
  type="RESURS_PART_PAYMENT_SELECT_NOW"
  amount="5000"
  useHTag
></resurs-payment-method-subtitle>

​
Attributes

AttributeTypeRequiredDescription
typestringYes*Payment method type
paymentMethodIdsstring | string[]Yes*Payment method IDs (single value or a comma-separated array).
amountstringNo**Required for dynamic subtitle updates
useHTagbooleanNoUse <h4> instead of <span>. Default: false
* You need to provide either Type or Payment Method IDs.

​
Example: Custom Layout

<div class="custom-payment-entry">
  <div class="payment-header">
    <resurs-payment-method-icon
      type="RESURS_INVOICE"
    ></resurs-payment-method-icon>
    <resurs-payment-method-title
      type="RESURS_INVOICE"
      useHTag
    ></resurs-payment-method-title>
    <resurs-payment-method-subtitle
      type="RESURS_INVOICE"
    ></resurs-payment-method-subtitle>
  </div>
  <resurs-payment-method
    type="RESURS_INVOICE"
    amount="5000"
  ></resurs-payment-method>
</div>