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

# Setup

> Create a session and load the Payment Methods script.

Before rendering the components, your backend must create a session and your frontend must load the script.

## Create a session

Your backend must [create a session](/api-reference/sessions/create-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

<Steps>
  <Step title="Obtain a JWT access token">
    Request a JWT from the Merchant API.

    [POST /oauth2/token](https://merchant-api.resurs.com/docs/oauth2) *(See Merchant API documentation for details.)*
  </Step>

  <Step title="Fetch stores">
    In the next step you will need the store id. See [Merchant API](https://merchant-api.resurs.com/docs/v2/merchant_stores_v2#/Store%20information/getStores) for information about fetching your store configurations.
  </Step>

  <Step title="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.

    ```http theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
    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.

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

    A request body is always required. When you don't need campaign filtering, pass an empty JSON object:

    ```json theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
    {}
    ```

    **Request body example with campaign:**

    ```json theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
    {
      "campaign": "SUMMER_SALE"
    }
    ```

    **Response:**

    ```json theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
    {
      "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"
      }
    }
    ```
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Warning>
  Always use `embed.src` from the session response to load the script. Don't hardcode the URL.
</Warning>

## Load the script

Use the `embed.src` value from the session response:

```html theme={"theme":{"light":"catppuccin-latte","dark":"one-dark-pro"}}
<script
  type="module"
  crossorigin="anonymous"
  src="${embed.src}"
></script>
```