Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
---
icon: hand-holding-circle-dollar
description: Implement flexible card payment flows to securely vault credentials and execute transactions via server-to-server APIs
---

# Payment Method (Card)

Hyperswitch provides flexible payment processing with multiple flow patterns to accommodate different business needs. The system supports one-time payments, saved payment methods, and recurring billing through a comprehensive API design.
Juspay Hyperswitch provides flexible payment processing with multiple flow patterns to accommodate different business needs. The system supports one-time payments, saved payment methods, and recurring billing through a comprehensive API design.

{% hint style="info" %}

### Integration Path

#### Server-to-Server (S2S) Payments (Tokenize followed by Payment)
Expand All @@ -26,8 +28,6 @@ The Payment Method flow leverages the full suite of Hyperswitch [Payment](https:

#### **The Two-Step Integration Pattern**



1. **Credential Capture & Vaulting**

The business initiates the flow by capturing payment details (such as cards, wallets, or bank accounts) using either the Payment Method SDK or the `/payment-methods` API. This process securely vaults the payment instrument and generates a unique `payment_method_id`.
Expand All @@ -39,6 +39,7 @@ Once the `payment_method_id` is generated, it serves as a reusable token. The bu
The `payment_method_id` serves as a unique identifier mapped to a specific combination of a Customer ID and a unique Payment Instrument (e.g., a specific credit card, digital wallet, or bank account).

* Logic: A single customer can have multiple payment methods, each assigned a distinct ID. However, the same payment instrument used by the same customer will always resolve to the same `payment_method_id`.

* Scope: This uniqueness applies across all payment types, including cards, wallets, and bank details.

| **Customer ID** | **Payment Instrument** | **Payment Method ID** |
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
hidden: true
icon: money-bills-simple
description: Implement secure payment credential tokenization and vaulting to streamline checkout flows and enable recurring transactions without sensitive data handling
---

# Copy of Payments
Expand All @@ -10,21 +11,22 @@ The Payment Method SDK provides APIs to securely capture and tokenize payment cr
#### **Key Features**

* **Full Token Management** – Create, retrieve, update, and delete payment tokens directly from your server.

* **PSP and Network Tokenization** – Generate both PSP tokens and network tokens through a single API.

* **Secure Storage** – Store tokens safely in Hyperswitch’s Vault.

* **Reduced Frontend Complexity** – Shift tokenization processes to the backend, minimizing frontend dependencies.

#### Understanding Payment and Vault Flow



<figure><img src="../../../.gitbook/assets/Payment Method SDK (1).svg" alt=""><figcaption></figcaption></figure>

#### **Vaulting :**

**1. Create Customer (Server-Side)**

Your server begins by calling the Hyperswitch [`/v2/customers`](https://api-reference.hyperswitch.io/v1/customers/customers--create) API to register the customer. Hyperswitch creates a profile and returns a unique `customer_id` that will be associated with the payment method.
Your server begins by calling the Juspay Hyperswitch [`/v2/customers`](https://api-reference.hyperswitch.io/v1/customers/customers--create) API to register the customer. Hyperswitch creates a profile and returns a unique `customer_id` that will be associated with the payment method.

**2. Collect Card Details**

Expand Down Expand Up @@ -52,13 +54,18 @@ All Vault API (V2) requests require authentication using specific API keys gener
To generate your Vault API keys, follow these steps:

1. **Access Dashboard:** Log into the Hyperswitch Dashboard.

2. **Navigate to Vault:** In the left-hand navigation menu, select Vault.

3. **Generate Key:** Navigate to the API Keys section and click the Create New API Key button.

4. **Secure Storage:** Copy the generated key and store it securely. You must use this key to authenticate all Vault API (V2) calls.
{% endhint %}

**Integration Documentation -**&#x20;

* [S2S Vault Tokenization](https://docs.hyperswitch.io/~/revisions/TGn71uwTlQJmyyiYgHpt/explore-hyperswitch/payments-modules/vault/server-to-server-vault-tokenization)

* [Create Payment API](https://api-reference.hyperswitch.io/v1/payments/payments--create)

* [Payment Create and Confirm API](https://api-reference.hyperswitch.io/v2/payments/payments--create-and-confirm-intent)
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
description: Hyperswitch is designed to facilitate the management of saved payment methods
description: Enable customers to securely save and manage payment methods through Hyperswitch's PCI-compliant vault service without merchant compliance burden
icon: bars-progress
---

# Payment Methods Management

The Hyperswitch Payment Methods Management SDK provides a secure solution for merchants to handle and store payment information without the burden of PCI DSS compliance requirements. By leveraging Hyperswitch's Vault service, merchants can securely store customer payment methods (credit cards, digital wallets, etc.) while minimizing their exposure to sensitive payment data.

### **Key Features of Payment Method Management in Hyperswitch**
### **Key Features of Payment Method Management in Juspay Hyperswitch**

Hyperswitch simplifies the complexities of payment method management, so you can offer a seamless, secure experience to your customers with minimal effort.

Expand Down Expand Up @@ -42,8 +42,11 @@ First, you'll need to set up your server to create payment method sessions, whic
To generate your Vault API keys, follow these steps:

1. **Access Dashboard:** Log into the Hyperswitch Dashboard.

2. **Navigate to Vault:** In the left-hand navigation menu, select Vault.

3. **Generate Key:** Navigate to the API Keys section and click the Create New API Key button.

4. **Secure Storage:** Copy the generated key and store it securely. You must use this key to authenticate all Vault API (V2) calls.

**Note:** We are currently working on unifying authentication across our platforms. Soon, you will be able to use a single API key for both Payments and Vault APIs.
Expand All @@ -53,6 +56,7 @@ To generate your Vault API keys, follow these steps:
Add an endpoint on your server that creates [payment methods sessions](https://api-reference.hyperswitch.io/v2/payment-method-session/payment-method-session--create-v1). This endpoint will return the necessary session information to your client application.

```javascript

// Create-Payment-Methods-Session
const app = express()

Expand Down Expand Up @@ -92,6 +96,7 @@ app.post("/create-payment-method-session", async (req, res) => {
});
}
});

```

> **Note**: Replace `YOUR_PROFILE_ID` and `YOUR_API_KEY` with your actual credentials from the Hyperswitch dashboard.
Expand All @@ -105,11 +110,13 @@ Once your server endpoint is set up, you'll need to integrate the Vault/Payment
Add one empty placeholder `div` to your page for the Payment Methods Management widget that you'll mount.

```html

<form id="payment-methods-management-form">
<div id="payment-methods-management-elements">
<!--HyperLoader injects the Payment Methods Management SDK-->
</div>
</form>

```

**2.2 Fetch the Payment Method Session and Mount the Payment Methods Management Element**
Expand All @@ -119,6 +126,7 @@ Make a request to the endpoint on your server to create a new payment method ses
> Note: Make sure to never share your API key with your client application as this could potentially compromise your payment flow.

```js

// Fetches a payment method session and mounts the payment methods management element
async function initialize() {
// Step 1: Create payment method session
Expand Down Expand Up @@ -168,6 +176,7 @@ async function initialize() {

// Call initialize when page loads or when user clicks a button
initialize();

```

**2.3 Complete tokenization and handle errors**
Expand All @@ -177,6 +186,7 @@ Call `confirmTokenization()`, passing the mounted Payment Methods Management wid
If there are any immediate errors (for example, invalid request parameters), Hyper returns an error object. Show this error message to your customer so they can try again.

```js

async function handleSubmit(e) {
setMessage("");
e.preventDefault();
Expand Down Expand Up @@ -226,6 +236,7 @@ async function handleSubmit(e) {
setIsLoading(false);
}
}

```

Now that you have integrated the Hyperswitch Payment Methods Management on your app, you can customize it to blend with the rest of your website.<br>
18 changes: 18 additions & 0 deletions about-hyperswitch/payment-suite-1/payment-method-card/payments.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
icon: money-bills-simple
description: Configure payment processing flows for guest and customer checkouts to enable secure card transactions through the Hyperswitch SDK
---

# Payments
Expand All @@ -9,7 +10,9 @@ The Payment Method SDK and `/payment-methods` API work in tandem with the `/paym
### Guest Checkout Flow (S2S)

1. Collect card details and tokenise with HS [Create PM API](https://api-reference.hyperswitch.io/v2/payment-methods/payment-method--create-v1) to get a [PM ID](https://api-reference.hyperswitch.io/v2/payment-methods/payment-method--create-v1#response-id) (payment\_methd\_id)

2. Use the PM ID to authorize the [payment request](https://api-reference.hyperswitch.io/v1/payments/payments--confirm) during order confirmation

3. For extended sessions, where token expires before order completion, create a new PM ID with the same card details using the Create PM API

{% hint style="info" %}
Expand All @@ -21,8 +24,11 @@ For guest checkout flow the PM ID is NOT unique to Customer + Payment method com
### Customer Checkout Flow - First Time Payment (S2S)

1. Create a customer with HS using the [Create Customer API](https://api-reference.hyperswitch.io/v2/customers/customers--create-v1)

2. Use the customer\_id to tokenise the collected card details using Create PM API

3. Use the PM ID to authorize the [payment request](https://api-reference.hyperswitch.io/v1/payments/payments--confirm) during order confirmation

4. For extended sessions, where token expires before order completion update the PM with CVV using the [Update PM API](https://api-reference.hyperswitch.io/v2/payment-methods/payment-method--update-v1) and use this PM ID to complete the payment

{% hint style="info" %}
Expand All @@ -34,18 +40,27 @@ For logged-in user checkout flow the PM ID is unique to Customer + Payment metho
### Customer Checkout Flow - Repeat Purchase (S2S)

1. Fetch the stored cards for the customer using [List Saved PMs API ](https://api-reference.hyperswitch.io/v2/payment-methods/payment-method--list-customer-saved-payment-methods-v1)which returns the masked card details with corresponding PM ID&#x20;

2. Update the PM ID of the user selected card along with CVV value collected from the user using the [Update PM API](https://api-reference.hyperswitch.io/v2/payment-methods/payment-method--update-v1)&#x20;

3. Use the PM ID to authorize the [payment request](https://api-reference.hyperswitch.io/v1/payments/payments--confirm) during order confirmation

4. For extended sessions, where token expires before order completion update the PM again with the collected CVV and use this PM ID to complete the payment

### Payment Method SDK Checkout - Guest, New Customer and Repeat Customer Flows

1. Create a PM session using the [Session Create API ](https://api-reference.hyperswitch.io/v2/payment-method-session/payment-method-session--create-v1)to get a [client secret](https://api-reference.hyperswitch.io/v2/payment-method-session/payment-method-session--create-v1#response-client-secret)

2. For guest user, pass "storage\_type" as "volatile" and skip sending the Customer ID

3. Initialize and mount the [Vault SDK](https://docs.hyperswitch.io/explore-hyperswitch/payments-modules/vault/vault-sdk-integration-1#id-2.2-fetch-the-payment-method-session-and-mount-the-payment-methods-management-element) using the client secret and session\_id&#x20;

4. The SDK now takes care of the following flows based on user action:

5. Post which the SDK submits the card details via the [PM Confirm API](https://api-reference.hyperswitch.io/v1/payments/payments--confirm) and returns back a [PM Token](https://api-reference.hyperswitch.io/v1/payments/payments--confirm#response-payment-token-one-of-0) (short-lived) in the response

6. Pass this PM token to Merchant Server and exchange for a PM ID from the server using the [PM token exchange API](https://api-reference.hyperswitch.io/v2/payment-methods/payment-method--payment-method-token-to-payment-method-id-v1)

7. Use this PM ID to authorize the [payment request](https://api-reference.hyperswitch.io/v1/payments/payments--confirm)

{% hint style="info" %}
Expand All @@ -55,8 +70,11 @@ Note - When using the HS SDK, the response always contains a temp token and you
### HS SDK Checkout for repeat customer - no CVV flow

1. Create a PM session using the [Session Create API ](https://api-reference.hyperswitch.io/v2/payment-method-session/payment-method-session--create-v1)to get a [client secret](https://api-reference.hyperswitch.io/v2/payment-method-session/payment-method-session--create-v1#response-client-secret)

2. Initialize and mount the [Vault SDK](https://docs.hyperswitch.io/explore-hyperswitch/payments-modules/vault/vault-sdk-integration-1#id-2.2-fetch-the-payment-method-session-and-mount-the-payment-methods-management-element) using the client secret and session\_id

3. The SDK lists the previously saved cards for customers to select&#x20;

4. If the card has been vaulted previously with an MIT setup for it, CVV is not collected for it and the SDK returns back a [PM Token](https://api-reference.hyperswitch.io/v1/payments/payments--confirm#response-payment-token-one-of-0) (short-lived) in the responseNote - The PM ID in case of guest checkout is volatile in nature and has a default expiry of 1-hour which can be extended by Merchant at a session level

{% hint style="info" %}
Expand Down
18 changes: 16 additions & 2 deletions about-hyperswitch/payment-suite-1/payment-method-card/proxy.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: Vault your card and use proxy end point for payment processing
description: Use vaulted card tokens with proxy endpoints to process secure payments through PSPs without handling raw card data
icon: almost-equal-to
---

Expand All @@ -10,8 +10,11 @@ The Proxy Payments Service allows merchants to tokenize cards via Hyperswitch Va
Key Highlights:

* No PSP re-integration needed – Keep your existing PSP connections.

* PCI DSS scope reduction – Raw card data stays within Vault.

* Data security – Detokenization happens only during the request lifecycle.

* Centralized token management – One vault, many PSPs.

### Vault and proxy - Vaulting and payments flow
Expand All @@ -20,9 +23,10 @@ Key Highlights:

#### **1. Create Payment Method Session (Server-Side)**&#x20;

The merchant server initiates the flow by calling the Hyperswitch [`Create-payment-method-session`](https://api-reference.hyperswitch.io/v2/payment-method-session/payment-method-session--create#payment-method-session-create) API with the `customer_id`. Hyperswitch responds with a `session_id` and `client_secret`, which are required to authenticate the client-side session.
The merchant server initiates the flow by calling the Juspay Hyperswitch [`Create-payment-method-session`](https://api-reference.hyperswitch.io/v2/payment-method-session/payment-method-session--create#payment-method-session-create) API with the `customer_id`. Hyperswitch responds with a `session_id` and `client_secret`, which are required to authenticate the client-side session.

```bash

curl --request POST \
--url https://sandbox.hyperswitch.io/v1/payment-method-sessions \
--header 'Authorization: <api-key>' \
Expand All @@ -33,13 +37,15 @@ curl --request POST \
"customer_id": "12345_cus_abcdefghijklmnopqrstuvwxyz"
}
'

```

#### **2. Initialize SDK (Client-Side)**&#x20;

The merchant client loads the `HyperLoader.js` script and initializes `window.Hyper` using the Publishable Key. Using the `session_id` and `client_secret`, the SDK creates a Payment Method Management (PMM) group and mounts the specific widget instance to the UI.

```js

// Fetches a payment method session and mounts the payment methods management element
async function initialize() {
// Step 1: Create payment method session
Expand Down Expand Up @@ -89,6 +95,7 @@ async function initialize() {

// Call initialize when page loads or when user clicks a button
initialize();

```

#### **3. Collect and Vault Card (Client-Side)**&#x20;
Expand All @@ -106,9 +113,13 @@ The merchant server initiates the payment by sending a request to the [Hyperswit
**New user payments flow**

1. Create Payment Method Session (Server-Side) The merchant server initiates the flow by calling the Hyperswitch&#x20;

2. [Initialize SDK (Client-Side) ](../../../explore-hyperswitch/payment-experience/payment-method/)The merchant client loads the `HyperLoader.js` script and initializes `window.Hyper` using the Publishable Key. Using the `session_id` and `client_secret`, the SDK creates a Payment Method Management (PMM) group and mounts the specific widget instance to the UI.

3. Collect and Vault Card (Client-Side) The customer enters their card details directly into the SDK-managed widget. Upon confirmation, the SDK calls the /`Confirm a payment method session` API. Hyperswitch securely receives the data, stores it in the Vault (retaining the CVV temporarily for the transaction TTL), and returns a success response with the `session_id` to the client.

4. Retrieve Payment Method ID (Server-Side) The merchant server calls the "List Payment Methods" API using the `session_id`. Hyperswitch returns a list of payment methods associated with the customer, from which the merchant server selects the appropriate `PM_ID` (Payment Method ID) to use for the transaction.

5. Execute Proxy Payment (Server-Side) The merchant server initiates the payment by sending a request to the&#x20;

**Proxy Payment Request**
Expand All @@ -119,6 +130,7 @@ Include the following details:
1. URL: Proxy endpoint (https://sandbox.hyperswitch.io/proxy)
2. API Key: Your API key for the merchant\_id under which the vault service was created on Hyperswitch dashboard
3. Profile\_id: Your profile\_id for the merchant\_id under which the vault service was created on Hyperswitch dashboard

2. Include the following details in the body:
1. `request_body`: Include the request body of the PSP payment request
2. `destination_url`, `method`, `headers`: Pass your PSP url as destination url, PSP endpoint method and headers under the respective fields
Expand Down Expand Up @@ -175,6 +187,7 @@ Include the following details:
#### Sample Response

```bash

{
"response": {
"id": "pay_7f6x6vki25futmy54uot5c3ama",
Expand Down Expand Up @@ -251,4 +264,5 @@ Include the following details:
"cko-request-id": "61354917-3541-44fc-8ec7-98dd385aa0b4"
}
}

```
Loading