> 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/web.md).

# Web

Integrate Juspay Hyperswitch unified checkout with your web app for a seamless payment experience

## Start integrating

Choose the integration path that matches your web application.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>React with REST API</strong></td><td>Integrate Unified Checkout into a React application.</td><td><a href="/integration-guide/payment-experience/pay-then-vault/web/react-with-rest-api-integration.md">React with REST API Integration</a></td></tr><tr><td><strong>HTML with REST API</strong></td><td>Add Unified Checkout directly to an HTML application.</td><td><a href="/integration-guide/payment-experience/pay-then-vault/web/html-with-rest-api-integration.md">HTML with REST API Integration</a></td></tr><tr><td><strong>JavaScript with REST API</strong></td><td>Build a Unified Checkout integration using JavaScript.</td><td><a href="/integration-guide/payment-experience/pay-then-vault/web/js-with-rest-api-integration.md">JS with REST API Integration</a></td></tr></tbody></table>

## Global Checkout Experience

Juspay Hyperswitch Unified Checkout is an inclusive, consistent and blended payment experience optimized for the best conversion rates.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>Inclusive</strong></td><td>A variety of global payment methods including cards, buy now pay later and digital wallets are supported by the Unified Checkout, with adaptation to local preferences and ability to local language customization.</td><td><a href="https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-56de32c2d6b74c50ed3c6e9ff2cb9072fc1b8258%2FPayment%20flow%20(5)%20(1).png?alt=media">https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-56de32c2d6b74c50ed3c6e9ff2cb9072fc1b8258%2FPayment%20flow%20(5)%20(1).png?alt=media</a></td></tr><tr><td><strong>Consistent</strong></td><td>With a diverse set of payment methods supported, the Unified Checkout provides a singular consistent payment experience across platforms (web, android and ios) powered by smart payment forms, minimal redirections and intelligent retries.</td><td><a href="https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-56de32c2d6b74c50ed3c6e9ff2cb9072fc1b8258%2FPayment%20flow%20(5)%20(1).png?alt=media">https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-56de32c2d6b74c50ed3c6e9ff2cb9072fc1b8258%2FPayment%20flow%20(5)%20(1).png?alt=media</a></td></tr><tr><td><strong>Blended</strong></td><td>The Unified Checkout includes 40+ styling APIs, which could be tweaked to make the payment experience blend with your product. Your users will get a fully native and embedded payment experience within your app or website</td><td><a href="https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-44ba44c0fd399f5ee92196f3ad9801f42f4839a9%2FSME.png?alt=media">https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-44ba44c0fd399f5ee92196f3ad9801f42f4839a9%2FSME.png?alt=media</a></td></tr></tbody></table>

## Modify and Experiment

While the Unified Checkout is pre-optimized for maximum conversions, Hyperswitch does not restrict you to stick to a one-size-fits-all approach. Using Hyperswitch SDK APIs, you get complete control over modifying the payment experience by,

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>Prioritizing payment methods</strong><br>You can make an impact on the payment mix or conversion rates by prioritizing/ promoting specific payment methods for your customers.</td><td></td><td></td><td></td><td><a href="https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-9af3456e1a03d2b6dfbff7074c1dfd4e6d4e751d%2FMarketplaces.png?alt=media">https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-9af3456e1a03d2b6dfbff7074c1dfd4e6d4e751d%2FMarketplaces.png?alt=media</a></td></tr><tr><td><p><strong>Switching themes and layouts of checkout page</strong></p><p>The Unified Checkout comes with a wide range of pre-designed themes and layouts which you can choose from.</p></td><td></td><td></td><td></td><td><a href="https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-3cee92e8370ddc5ae9558b26e2f937bdf8c735a2%2FReconciliation.png?alt=media">https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2Fgit-blob-3cee92e8370ddc5ae9558b26e2f937bdf8c735a2%2FReconciliation.png?alt=media</a></td></tr></tbody></table>

## Optimize

You can further optimize Unified Checkout web SDK by preloading all the resources that are needed by the iframe. By the time iframe is to be mounted (checkout button), everything that is required can be fetched from their server and stored in the disk cache.

{% columns %}
{% column width="50%" %}
`<Elements/>` wrapper has to be used in the top-level of the merchants app, say web app has two pages eg: homepage and checkout page, the wrapper must be added in the homepage itself.
{% endcolumn %}

{% column width="50%" %}
`<Elements/>` has the required props to load our Hyperloader (script) which will

1. Preload all the resources that are required by the SDK ie. files, svgs, icons, css, fonts etc.
2. Prefetch the two main API calls and is ready with response
   {% endcolumn %}
   {% endcolumns %}

{% hint style="success" %}
**This will significantly decrease the SDK load time from \~10-15s (in slow 3G network) to just \~1-5ms.**
{% endhint %}

## Continue exploring

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Customize checkout</strong></td><td>Adapt the payment experience to your product and brand.</td><td><a href="/integration-guide/payment-experience/pay-then-vault/web/customization.md">Customization</a></td></tr><tr><td><strong>Review error codes</strong></td><td>Understand integration errors and how to handle them.</td><td><a href="/integration-guide/payment-experience/pay-then-vault/web/error-codes.md">Error Codes</a></td></tr></tbody></table>


---

# 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/payment-experience/pay-then-vault/web.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.