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

# Overview

> End-to-end guide for integrating Resurs Payment Methods into your checkout flow.

Resurs Payment Methods is a set of standard [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/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.

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

## Get started

<CardGroup cols={2}>
  <Card title="Setup" icon="server" href="/developer-guide/checkout/payment-methods/setup">
    Create a session and load the script.
  </Card>

  <Card title="Managed component" icon="layout-template" href="/developer-guide/checkout/payment-methods/managed">
    Drop-in component with built-in accordion and state management.
  </Card>

  <Card title="Full control" icon="sliders" href="/developer-guide/checkout/payment-methods/full-control">
    Build your own UI with full flexibility.
  </Card>

  <Card title="Events" icon="zap" href="/developer-guide/checkout/payment-methods/events">
    Handle payment method selection and deselection events.
  </Card>

  <Card title="Theming" icon="palette" href="/developer-guide/checkout/payment-methods/theming">
    Customize colors, fonts, and appearance.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/developer-guide/checkout/payment-methods/troubleshooting">
    Debug common issues.
  </Card>
</CardGroup>