> 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/~/revisions/gkH4cp2rB1DvMiW6aktj/about-hyperswitch/payment-suite-1/orchestrator-model/hyperswitch-sdk-+-hyperswitch-vault-setup.md).

# Hyperswitch SDK + Hyperswitch Vault Setup

Best for merchants seeking a pre-built, optimized payment UI backed by the full Hyperswitch stack for secure data storage and routing.

In this approach, the Hyperswitch SDK is used on the frontend to capture card details. Card data is securely sent to the Hyperswitch backend and stored in Hyperswitch Vault. Payment orchestration, routing, and connector logic are handled entirely by the Hyperswitch backend.

The merchant uses the Hyperswitch Dashboard to configure connectors, routing rules, and orchestration logic. All payment requests are initiated using vault tokens, and raw card data never reaches merchant systems. Since card details are handled entirely by Hyperswitch, merchants are not required to be PCI DSS compliant for card data handling. 

#### **Understanding Payment and Vault flow**

#### **Vaulting  :** 

<figure><img src="https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2FjkGNFeIwdmooVXOpfSy9%2FHS_SDK%26Vaulting.svg?alt=media&amp;token=3548a710-3618-4a71-8ff7-cb26e3835b96" alt=""><figcaption></figcaption></figure>

**1. Create Payment (Server-Side)**\
The merchant server creates a payment by calling the Hyperswitch `payments/create` API with transaction details such as amount and currency. Hyperswitch responds with a `payment_id` and `client_secret`, which are required for client-side processing.

**2. Initialize SDK (Client-Side)**\
The merchant client initializes the Hyperswitch SDK using the `client_secret` and `publishable_key`. The SDK fetches eligible payment methods from Hyperswitch and renders a secure payment UI.

**3. Collect Card Details**\
The customer selects a card payment method and enters their card details directly within the SDK-managed interface, ensuring sensitive data never passes through merchant systems.

**4. Authorize and Store Card**\
The SDK submits a `payments/confirm` request to Hyperswitch. Hyperswitch authorizes the payment with the processor and securely stores the card in the Hyperswitch Vault, generating a reusable `payment_method_id`.

**5. Return Status**\
The final payment and vaulting status is returned to the SDK, which redirects the customer to the merchant’s configured `return_url`.

#### **Payment Using Stored Card :**&#x20;

<figure><img src="https://1943537505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkf7BGdsPkCw9nalhAIlE%2Fuploads%2FgN7kUhPCdlIg10BVn6UI%2FHS_SDK%26Stored.svg?alt=media&amp;token=64f6c30c-9196-42bf-969b-f6dae66d4592" alt=""><figcaption></figcaption></figure>

**1. Create Payment (Server-Side)**\
The merchant server initiates the payment by calling the `payments/create` API and receives a `client_secret` for client-side confirmation.

**2. Initialize SDK and Fetch Saved Cards**\
The merchant client initializes the Hyperswitch SDK. The SDK requests eligible payment methods from Hyperswitch, including any saved cards associated with the customer.

**3. Customer Selects a Saved Card**\
The SDK displays the saved cards in the payment UI. The customer selects a saved card without re-entering card details.

**4. Retrieve Card Data and Authorize**\
The SDK sends a `payments/confirm` request with the selected `payment_method_id`. Hyperswitch securely retrieves the card data from the Hyperswitch Vault and submits the authorization request to the processor via the Hyperswitch Connector.

**5. Return Status**\
The processor returns the authorization result to Hyperswitch, which forwards the final status to the SDK. The customer is redirected to the merchant’s `return_url` with the payment outcome.

* **Integration Documentation :**&#x20;
  * **Unified Checkout :**[ Integration guide](https://docs.hyperswitch.io/explore-hyperswitch/merchant-controls/integration-guide)
  * [Create Payment API](https://api-reference.hyperswitch.io/v1/payments/payments--create)
  * [ Unified Checkout: Saving Payment Methods](https://docs.hyperswitch.io/explore-hyperswitch/payment-orchestration/quickstart/tokenization-and-saved-cards/save-a-payment-method)


---

# 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/~/revisions/gkH4cp2rB1DvMiW6aktj/about-hyperswitch/payment-suite-1/orchestrator-model/hyperswitch-sdk-+-hyperswitch-vault-setup.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.