> For the complete documentation index, see [llms.txt](https://docs.hyperswitch.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hyperswitch.io/integration-guide/account-management/beta-embeddable-components.md).

# Embeddable Components

Embed pre-built white-labeled UI components into your application to integrate Hyperswitch payment orchestration seamlessly without redirecting users

#### Introduction

As a SaaS platform or marketplace, your value lies in your core product, not in rebuilding payment setting screens. Yet, to offer financial services to your users ("sub-merchants"), you often face a difficult choice:

1. Redirect them to an external dashboard (breaking the user experience).
2. Build it yourself, spending months on complex forms, credential validation, and security compliance.

Juspay Hyperswitch Embeds solves this. We provide a library of pre-built, fully white-labeled UI components that drop directly into your application. You get the full power of Hyperswitch's orchestration without ever sending your customers away.

#### How It Works: Architecture

We designed Embeds to be secure, isolated, and incredibly fast to integrate.

The integration follows a simple 3-step flow:

1. Server-Side (Secure Handshake): Your backend requests a short-lived embedded `token` from Hyperswitch using your API key and profile ID.
2. Client-Side (SDK Initialization): Your frontend initializes the Hyperswitch Embed SDK with a `fetchToken` function that retrieves this `token` from your backend.
3. Rendering: The SDK securely loads the component. All business logic (validation, API calls) is handled inside the secure container, isolated from your main application.

#### Available Components

| Component                         | Core name    | React component          |
| --------------------------------- | ------------ | ------------------------ |
| Connector configuration           | `connectors` | `ConnectorConfiguration` |
| Payments list and payment details | `payments`   | `Payments`               |
| Refunds list and refund details   | `refunds`    | `Refunds`                |

**The Connector Component**

**The Problem**: Allowing sub-merchants to bring their own payment processors (Stripe, Adyen, PayPal, etc.) requires building complex configuration forms for every single processor, handling API key validation, and maintaining those integrations forever.

**The Solution**: Embed the Connector Component. It provides a complete, self-serve interface for your users to select processors and enter credentials.

**Key Features:**

* White-Labeled: No Hyperswitch branding.
* Instant Validation: We validate credentials in real-time before saving.
* Zero Maintenance: When a processor changes their API requirements, we update the component. You don't change a line of code.

**The Payments Component**

**The Problem**: Sub-merchants need to look up payments, check their status and act on them. Building and maintaining a transactions view with filters, detail pages and post-payment operations is significant effort.

**The Solution**: Embed the Payments Component. It provides a payments list with search and filters, and a payment details view for each payment.

**Key Features:**

* Payments list with search and filters.
* Payment details view with the full payment timeline, attempts and associated refunds.
* **Refund**: Issue a full or partial refund on a succeeded or partially captured payment.
* **Capture**: Capture a payment that was authorized with manual capture (status `requires_capture`).
* **Void**: Cancel an authorized payment that has not been captured (status `requires_capture`).

**The Refunds Component**

**The Solution**: Embed the Refunds Component to give sub-merchants a refunds list with search and filters, and a refund details view for each refund.

{% hint style="info" %}
Actions such as Refund, Capture and Void are available only to users with permission to manage operations, and are disabled for payments that do not support them.
{% endhint %}

**Theme Customization**

Match the components to your brand by passing a theme through `initConfig` when you initialize the SDK. You can set the primary color, background color, and primary and secondary button styling. See the Integration Reference for details.

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.hyperswitch.io/integration-guide/account-management/beta-embeddable-components.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.