> ## Documentation Index
> Fetch the complete documentation index at: https://docs.resurs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Managed component

> Drop in <resurs-payment-method-selector> for built-in accordion and state management.

export const PaymentMethodSelector = ({sessionId = '5a94e1cf-c2d6-4f70-bc88-2db1d0ad1bc3', amount = '5000'}) => {
  const containerRef = useRef(null);
  useEffect(() => {
    if (containerRef.current && !containerRef.current.querySelector('resurs-payment-method-selector')) {
      const widget = document.createElement('resurs-payment-method-selector');
      widget.setAttribute('session-id', sessionId);
      widget.setAttribute('amount', amount);
      widget.setAttribute('customer-type', 'NATURAL');
      containerRef.current.appendChild(widget);
    }
    return () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, [sessionId, amount]);
  return <div ref={containerRef} />;
};

export const paymentSelectorMockData = [{
  "title": "Invoice",
  "subtitle": "Pay only after your item is delivered",
  "type": "RESURS_INVOICE",
  "customerTypes": ["NATURAL"],
  "internalData": "eyJtZXRob2RJZHMiOlsiZTA3ZDdkZDktYzZkMy00OTRkLWIxMzYtNTZmY2M1ODMxYWIwIl0sInR5cGUiOiJSRVNVUlNfSU5WT0lDRSIsImN1c3RvbWVyVHlwZXMiOlsiTkFUVVJBTCJdLCJtZXRob2RPcHRpb25zIjpbeyJtZXRob2RJZCI6ImUwN2Q3ZGQ5LWM2ZDMtNDk0ZC1iMTM2LTU2ZmNjNTgzMWFiMCIsInNlbGVjdGFibGUiOmZhbHNlLCJzZWxlY3RlZCI6ZmFsc2UsInByb3BlcnRpZXMiOnsiZGVzY3JpcHRpb24iOnsiZGVzY3JpcHRpb25UZXh0IjpbIk5vIGludm9pY2UgZmVlIiwiQXQgbGVhc3QgMSBtb250aCB0byBwYXkgYWZ0ZXIgZGVsaXZlcnkiXSwiZGVzY3JpcHRpb25Gb3JtYXQiOiJ2ZXJ0aWNhbC1saXN0In19LCJvdmVycmlkZXMiOnsibGlua3MiOlt7ImxhYmVsIjoiRnVsbCB0ZXJtcyBhbmQgY29uZGl0aW9ucyIsInR5cGUiOiJTRUtLSSIsInVybCI6IiMifV19fV0sInByb3BlcnRpZXMiOnsidGl0bGUiOiJJbnZvaWNlIiwic3VidGl0bGUiOiJQYXkgb25seSBhZnRlciB5b3VyIGl0ZW0gaXMgZGVsaXZlcmVkIn19"
}, {
  "title": "Pay at your own pace",
  "subtitle": "Pay interest-free from 456.00 kr per month",
  "type": "RESURS_PART_PAYMENT_SELECT_NOW",
  "customerTypes": ["NATURAL"],
  "internalData": "ewogICJtZXRob2RJZHMiOiBbCiAgICAiMDdkZmQ3YjQtNDJlOS00NzJhLWJhZGQtN2E4M2YzMjMyMGVmIiwKICAgICIyYWE0MzZmNC00NjcxLTQ1NDYtODliNS1jNWIxYmFmZWE3NGUiLAogICAgIjEzNzAwOTdkLWY1YWUtNDkzYi04ZDY0LTgzNTRlOWZhZWQ0MSIKICBdLAogICJ0eXBlIjogIlJFU1VSU19QQVJUX1BBWU1FTlRfU0VMRUNUX05PVyIsCiAgInNob3dDcmVkaXRXYXJuaW5nIjogdHJ1ZSwKICAiY3VzdG9tZXJUeXBlcyI6IFsKICAgICJOQVRVUkFMIgogIF0sCiAgIm1ldGhvZE9wdGlvbnMiOiBbCiAgICB7CiAgICAgICJtZXRob2RJZCI6ICIwN2RmZDdiNC00MmU5LTQ3MmEtYmFkZC03YTgzZjMyMzIwZWYiLAogICAgICAic2VsZWN0YWJsZSI6IHRydWUsCiAgICAgICJzZWxlY3RlZCI6IGZhbHNlLAogICAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAidGl0bGUiOiAiNiBNb250aHMgSW50ZXJlc3QgRnJlZSIsCiAgICAgICAgInN1YnRpdGxlIjogIjg3My4wMCBrciBwZXIgbW9udGgiLAogICAgICAgICJkZXNjcmlwdGlvbiI6IHsKICAgICAgICAgICJkZXNjcmlwdGlvblRleHQiOiBbCiAgICAgICAgICAgICJWYXJpYWJsZSBpbnRlcmVzdCByYXRlIDAuMDAlLiBFZmZlY3RpdmUgaW50ZXJlc3QgcmF0ZSAzNy40OSUuIFRvdGFsIGZlZXMgNTI5LjAwIGtyLiIsCiAgICAgICAgICAgICIqKlRvdGFsIHRvIHJlcGF5IDUsNTI5LjAwIGtyKioiCiAgICAgICAgICBdLAogICAgICAgICAgImRlc2NyaXB0aW9uRm9ybWF0IjogImlubGluZSIKICAgICAgICB9CiAgICAgIH0sCiAgICAgICJvdmVycmlkZXMiOiB7CiAgICAgICAgImxpbmtzIjogWwogICAgICAgICAgewogICAgICAgICAgICAibGFiZWwiOiAiRnVsbCB0ZXJtcyBhbmQgY29uZGl0aW9ucyIsCiAgICAgICAgICAgICJ0eXBlIjogIlBSSUNFX0lORk8iLAogICAgICAgICAgICAidXJsIjogIiMiCiAgICAgICAgICB9CiAgICAgICAgXQogICAgICB9LAogICAgICAiYmFzZUFjY291bnREZXNjcmlwdGlvbiI6ICJXaXRoIGVhY2ggcGF5bWVudCwgeW91IG11c3QgY29uZmlybSB5b3VyIGNob2ljZSBvZiBwYXltZW50IHBsYW4uIElmIHRoZSB0ZXJtcyBvZiB0aGUgc2VsZWN0ZWQgcGF5bWVudCBwbGFuIGFyZSBub3QgZm9sbG93ZWQsIHRoZSB0ZXJtcyBvZiB0aGUgbG9uZ2VzdCBwYXltZW50IHBsYW4gYWNjb3JkaW5nIHRvIHRoZSBhZ3JlZW1lbnQgd2lsbCBhcHBseS4gVmFyaWFibGUgaW50ZXJlc3QgcmF0ZSAxLjUgJS4gVG90YWwgZmVlcyAxNSwzNDgga3IuIEVmZmVjdGl2ZSBpbnRlcmVzdCByYXRlIDIuMyAlLiBNYXR1cml0eSBbMS8xMl0gaW5zdGFsbG1lbnQgMzQ4IGtyL21vbnRoLiBUb3RhbDogNTgsNzAwIGtyLiIKICAgIH0sCiAgICB7CiAgICAgICJtZXRob2RJZCI6ICIyYWE0MzZmNC00NjcxLTQ1NDYtODliNS1jNWIxYmFmZWE3NGUiLAogICAgICAic2VsZWN0YWJsZSI6IHRydWUsCiAgICAgICJzZWxlY3RlZCI6IGZhbHNlLAogICAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAidGl0bGUiOiAiMTAgTW9udGhzIEludGVyZXN0IEZyZWUgQ0FNUEFJR04iLAogICAgICAgICJzdWJ0aXRsZSI6ICI1NDkuMDAga3IgcGVyIG1vbnRoIiwKICAgICAgICAiZGVzY3JpcHRpb24iOiB7CiAgICAgICAgICAiZGVzY3JpcHRpb25UZXh0IjogWwogICAgICAgICAgICAiVmFyaWFibGUgaW50ZXJlc3QgcmF0ZSAwLjAwJS4gRWZmZWN0aXZlIGludGVyZXN0IHJhdGUgMjAuOTQlLiBUb3RhbCBmZWVzIDQ5MC4wMCBrci4iLAogICAgICAgICAgICAiKipUb3RhbCB0byByZXBheSA1LDQ5MC4wMCBrcioqIgogICAgICAgICAgXSwKICAgICAgICAgICJkZXNjcmlwdGlvbkZvcm1hdCI6ICJpbmxpbmUiCiAgICAgICAgfQogICAgICB9LAogICAgICAib3ZlcnJpZGVzIjogewogICAgICAgICJsaW5rcyI6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgImxhYmVsIjogIkZ1bGwgdGVybXMgYW5kIGNvbmRpdGlvbnMiLAogICAgICAgICAgICAidHlwZSI6ICJQUklDRV9JTkZPIiwKICAgICAgICAgICAgInVybCI6ICIjIgogICAgICAgICAgfQogICAgICAgIF0KICAgICAgfSwKICAgICAgImJhc2VBY2NvdW50RGVzY3JpcHRpb24iOiAiV2l0aCBlYWNoIHBheW1lbnQsIHlvdSBtdXN0IGNvbmZpcm0geW91ciBjaG9pY2Ugb2YgcGF5bWVudCBwbGFuLiBJZiB0aGUgdGVybXMgb2YgdGhlIHNlbGVjdGVkIHBheW1lbnQgcGxhbiBhcmUgbm90IGZvbGxvd2VkLCB0aGUgdGVybXMgb2YgdGhlIGxvbmdlc3QgcGF5bWVudCBwbGFuIGFjY29yZGluZyB0byB0aGUgYWdyZWVtZW50IHdpbGwgYXBwbHkuIFZhcmlhYmxlIGludGVyZXN0IHJhdGUgMS41ICUuIFRvdGFsIGZlZXMgMTUsMzQ4IGtyLiBFZmZlY3RpdmUgaW50ZXJlc3QgcmF0ZSAyLjMgJS4gTWF0dXJpdHkgWzEvMTJdIGluc3RhbGxtZW50IDM0OCBrci9tb250aC4gVG90YWw6IDU4LDcwMCBrci4iCiAgICB9LAogICAgewogICAgICAibWV0aG9kSWQiOiAiMTM3MDA5N2QtZjVhZS00OTNiLThkNjQtODM1NGU5ZmFlZDQxIiwKICAgICAgInNlbGVjdGFibGUiOiB0cnVlLAogICAgICAic2VsZWN0ZWQiOiB0cnVlLAogICAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAidGl0bGUiOiAiMTIgTW9udGhzIEludGVyZXN0IEZyZWUiLAogICAgICAgICJzdWJ0aXRsZSI6ICI0NTYuMDAga3IgcGVyIG1vbnRoIiwKICAgICAgICAiZGVzY3JpcHRpb24iOiB7CiAgICAgICAgICAiZGVzY3JpcHRpb25UZXh0IjogWwogICAgICAgICAgICAiVmFyaWFibGUgaW50ZXJlc3QgcmF0ZSAwLjAwJS4gRWZmZWN0aXZlIGludGVyZXN0IHJhdGUgMzQuNTklLiBUb3RhbCBmZWVzIDg2My4wMCBrci4iLAogICAgICAgICAgICAiKipUb3RhbCB0byByZXBheSA1LDg2My4wMCBrcioqIgogICAgICAgICAgXSwKICAgICAgICAgICJkZXNjcmlwdGlvbkZvcm1hdCI6ICJpbmxpbmUiCiAgICAgICAgfQogICAgICB9LAogICAgICAib3ZlcnJpZGVzIjogewogICAgICAgICJsaW5rcyI6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgImxhYmVsIjogIkZ1bGwgdGVybXMgYW5kIGNvbmRpdGlvbnMiLAogICAgICAgICAgICAidHlwZSI6ICJQUklDRV9JTkZPIiwKICAgICAgICAgICAgInVybCI6ICIjIgogICAgICAgICAgfQogICAgICAgIF0KICAgICAgfSwKICAgICAgImJhc2VBY2NvdW50RGVzY3JpcHRpb24iOiAiV2l0aCBlYWNoIHBheW1lbnQsIHlvdSBtdXN0IGNvbmZpcm0geW91ciBjaG9pY2Ugb2YgcGF5bWVudCBwbGFuLiBJZiB0aGUgdGVybXMgb2YgdGhlIHNlbGVjdGVkIHBheW1lbnQgcGxhbiBhcmUgbm90IGZvbGxvd2VkLCB0aGUgdGVybXMgb2YgdGhlIGxvbmdlc3QgcGF5bWVudCBwbGFuIGFjY29yZGluZyB0byB0aGUgYWdyZWVtZW50IHdpbGwgYXBwbHkuIFZhcmlhYmxlIGludGVyZXN0IHJhdGUgMS41ICUuIFRvdGFsIGZlZXMgMTUsMzQ4IGtyLiBFZmZlY3RpdmUgaW50ZXJlc3QgcmF0ZSAyLjMgJS4gTWF0dXJpdHkgWzEvMTJdIGluc3RhbGxtZW50IDM0OCBrci9tb250aC4gVG90YWw6IDU4LDcwMCBrci4iCiAgICB9CiAgXSwKICAicHJvcGVydGllcyI6IHsKICAgICJ0aXRsZSI6ICJQYXkgYXQgeW91ciBvd24gcGFjZSIsCiAgICAic3VidGl0bGUiOiAiUGF5IGludGVyZXN0LWZyZWUgZnJvbSA0NTYuMDAga3IgcGVyIG1vbnRoIgogIH0KfQ=="
}, {
  "title": "Resurs Card",
  "subtitle": "Pay with your Resurs card",
  "type": "RESURS_CARD",
  "customerTypes": ["NATURAL"],
  "internalData": "eyJtZXRob2RJZHMiOlsiYTNjMWY5MjAtOGI3NC00ZTVhLTlkMDItMWY2ZTgzYTQ3YjVjIl0sInR5cGUiOiJSRVNVUlNfQ0FSRCIsInNob3dDcmVkaXRXYXJuaW5nIjp0cnVlLCJjdXN0b21lclR5cGVzIjpbIk5BVFVSQUwiXSwibWV0aG9kT3B0aW9ucyI6W3sibWV0aG9kSWQiOiJhM2MxZjkyMC04Yjc0LTRlNWEtOWQwMi0xZjZlODNhNDdiNWMiLCJzZWxlY3RhYmxlIjpmYWxzZSwic2VsZWN0ZWQiOmZhbHNlLCJwcm9wZXJ0aWVzIjp7ImRlc2NyaXB0aW9uIjp7ImRlc2NyaXB0aW9uVGV4dCI6WyJQYXkgd2l0aCB5b3VyIFJlc3VycyBjYXJkIiwiVXNlIHlvdXIgZXhpc3RpbmcgY3JlZGl0Il0sImRlc2NyaXB0aW9uRm9ybWF0IjoidmVydGljYWwtbGlzdCJ9fSwib3ZlcnJpZGVzIjp7ImxpbmtzIjpbeyJsYWJlbCI6IkZ1bGwgdGVybXMgYW5kIGNvbmRpdGlvbnMiLCJ0eXBlIjoiU0VLS0kiLCJ1cmwiOiIjIn1dfX1dLCJwcm9wZXJ0aWVzIjp7InRpdGxlIjoiUmVzdXJzIENhcmQiLCJzdWJ0aXRsZSI6IlBheSB3aXRoIHlvdXIgUmVzdXJzIGNhcmQifX0="
}, {
  "title": "Revolving Credit",
  "subtitle": "Flexible payments with revolving credit",
  "type": "RESURS_REVOLVING_CREDIT",
  "customerTypes": ["NATURAL"],
  "internalData": "eyJtZXRob2RJZHMiOlsiZDRlMmExYjMtN2M4OS00ZjZkLWE1MjMtOWU4YjFjNGQ3ZjBhIl0sInR5cGUiOiJSRVNVUlNfUkVWT0xWSU5HX0NSRURJVCIsInNob3dDcmVkaXRXYXJuaW5nIjp0cnVlLCJjdXN0b21lclR5cGVzIjpbIk5BVFVSQUwiXSwibWV0aG9kT3B0aW9ucyI6W3sibWV0aG9kSWQiOiJkNGUyYTFiMy03Yzg5LTRmNmQtYTUyMy05ZThiMWM0ZDdmMGEiLCJzZWxlY3RhYmxlIjpmYWxzZSwic2VsZWN0ZWQiOmZhbHNlLCJwcm9wZXJ0aWVzIjp7ImRlc2NyaXB0aW9uIjp7ImRlc2NyaXB0aW9uVGV4dCI6WyJGbGV4aWJsZSBtb250aGx5IHBheW1lbnRzIiwiQ2hvb3NlIGhvdyBtdWNoIHRvIHBheSBlYWNoIG1vbnRoIl0sImRlc2NyaXB0aW9uRm9ybWF0IjoidmVydGljYWwtbGlzdCJ9fSwib3ZlcnJpZGVzIjp7ImxpbmtzIjpbeyJsYWJlbCI6IkZ1bGwgdGVybXMgYW5kIGNvbmRpdGlvbnMiLCJ0eXBlIjoiU0VLS0kiLCJ1cmwiOiIjIn1dfX1dLCJwcm9wZXJ0aWVzIjp7InRpdGxlIjoiUmV2b2x2aW5nIENyZWRpdCIsInN1YnRpdGxlIjoiRmxleGlibGUgcGF5bWVudHMgd2l0aCByZXZvbHZpbmcgY3JlZGl0In19"
}];

export const setupMockWidgets = () => {
  if (!document.getElementById('resurs-payment-widget-script')) {
    const script = document.createElement('script');
    script.id = 'resurs-payment-widget-script';
    script.src = 'https://static.checkout.int.resurs.cloud/payment/resurs-payment-elements-mock.js';
    script.type = 'module';
    script.crossOrigin = 'anonymous';
    document.head.appendChild(script);
  }
  if (!window.__resursPatchedFetch) {
    window.__resursPatchedFetch = window.fetch;
    window.fetch = function (url, options) {
      if (typeof url === 'string' && url.includes('payment-method-groups')) {
        return Promise.resolve({
          ok: true,
          json: () => Promise.resolve(paymentSelectorMockData)
        });
      }
      return window.__resursPatchedFetch.call(this, url, options);
    };
  }
};

{setupMockWidgets()}

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

## Interactive example

<PaymentMethodSelector />

## Attributes

| Attribute       | Type     | Required | Description                                                                            |
| --------------- | -------- | -------- | -------------------------------------------------------------------------------------- |
| `session-id`    | `string` | Yes      | Session ID from the [create session](/api-reference/sessions/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.

<Note>
  Currency is determined by the Resurs payment methods configured for the store relative to the session.
</Note>

## Updating

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

```js theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
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');
```

<Tip>
  Ready to handle user selections? See [Events](/developer-guide/checkout/payment-methods/events).
</Tip>