> 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/payment-experience/pay-then-vault/alternate-payment-method-widgets/hyperwidget-integration-guide.md).

# Hyperwidget Integration Guide

Once the merchant signs up onto the unified dashboard, they'll get their API keys and can enable the APMs <> PSP combinations that they would like to provide on their checkout.

Juspay Hyperswitch provides a code transformer that allows the merchant to leverage their existing integration (with PSP or middle layer) and make a call to Hyperswitch server with minimal changes. Hyperwidget acts as a Unified wrapper on top of all major APMs and simplifies up-scaling or down-scaling of these APMs across one or multiple PSPs.

The unified dashboard offers the merchants ability to enable or disable APMs via any PSP. The dashboard also offers capabilities like - Analytics, Operations, Refunds, Chargebacks, and Reconciliation.

<figure><img src="/files/43IDaCZUFNSBN6nDj2rX" alt=""><figcaption></figcaption></figure>

#### Supported APM features

| Payment Method | Region  | Type         | Supported flow          | Shipping Address availability | Billing address availability |
| -------------- | ------- | ------------ | ----------------------- | ----------------------------- | ---------------------------- |
| Paypal         | US + EU | Wallet       | SDK flow, Redirect flow | Yes\*                         | Yes                          |
| Apple Pay      | US + EU | Wallet       | SDK flow                | Yes\*                         | Yes                          |
| Google Pay     | US + EU | Wallet       | SDK flow                | Yes\*                         | Yes                          |
| Paze           | US + EU | Wallet       | SDK flow                | No                            | Yes                          |
| Samsung Pay    | US + EU | Wallet       | SDK flow                | No                            | No                           |
| Ali Pay        | US + EU | Wallet       | Redirect flow           | Yes                           | Yes                          |
| WeChat Pay     | US + EU | Wallet       | Redirect flow           | Yes                           | Yes                          |
| Affirm         | US + EU | BNPL         | Redirect flow           | Yes                           | Yes                          |
| Klarna         | US + EU | BNPL         | SDK flow, Redirect flow | Yes\*                         | Yes                          |
| Afterpay       | US + EU | BNPL         | Redirect flow           | Yes                           | Yes                          |
| iDEAL          | EU      | Bank-to-bank | Redirect flow           | Yes                           | Yes                          |
| SEPA           | EU      | Bank-to-bank | Redirect flow           | Yes                           | Yes                          |

\*only in the SDK flow

#### Steps to integrate Hyperwidgets

To start collecting payments via the APM of your choice, follow these simple steps:

* [Install the Hyperwidgets SDK following these steps.](https://docs.hyperswitch.io/hyperswitch-cloud/integration-guide/web/node-and-react)
  * As we have a single SDK to manage all APMs, thus the integration steps are similar to the ones for integrating Unified Checkout.
* [For customizations on the Checkout Page follow this guide.](https://docs.hyperswitch.io/explore-hyperswitch/merchant-controls/integration-guide/web)


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hyperswitch.io/integration-guide/payment-experience/pay-then-vault/alternate-payment-method-widgets/hyperwidget-integration-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
