LogoLogo
Explore with DeepWikiJoin Slack CommunityContact Us
  • About Hyperswitch
    • Introduction
    • Payments Suite
    • Payments Modules
      • Cost Observability
      • Revenue Recovery
      • Vault
        • Server to Server Vault tokenization
        • Vault SDK Integration
      • Intelligent Routing
      • Reconciliation
        • Getting Started with Recon
      • Alternate Payment Method Widgets
        • Hyperwidget Integration Guide
    • Roadmap - Q2 2025
      • Previous Roadmap - Q1 2025
      • Previous Roadmap - Q4 2024
      • Previous Roadmap - Q3 2024
      • Previous Roadmap - Q2 2024
      • Previous roadmap - Q1 2024
      • Previous roadmap - Q4 2023
  • Use-Cases
    • For SaaS Businesses
    • For B2B SaaS Businesses
    • For E-Commerce Businesses
    • For Marketplace/Platforms
  • Explore Hyperswitch
    • Payment Orchestration
      • Accept Payments
        • Connectors
          • Activate Connector on Hyperswitch
          • Try a Payment
          • Available Connectors
            • ACI
            • Adyen
            • Airwallex
            • Authorizedotnet
            • Bambora
            • Bank of America
            • Billwerk
            • Bluesnap
            • Braintree
            • Checkout
            • Coinbase
            • Cybersource
              • Apple Pay
              • Google Pay
            • dLocal
            • Fiserv
            • GlobalPayments
            • GoCardless
            • Klarna
            • Mollie
            • MultiSafepay
            • Nuvei
            • OpenNode
            • Paypal
            • PayU
            • Prophetpay
            • Rapyd
            • Shift4
            • Stripe
            • TrustPay
            • Volt
            • Worldline
            • Worldpay
            • Zen
            • Netcetera
              • Authenticating Payments via Netcetera Through HyperSwitch SDK
        • Setup Payment Methods
          • Cards
          • Wallets
            • Apple Pay
              • Web Domain
              • iOS Application
            • Google Pay
            • PayPal
          • Pay Later
          • Banks
            • Bank Debits
            • Bank Redirects
            • Bank Transfers
            • Open Banking
          • Crypto
          • Test Credentials
        • Payment Links
          • Configurations
          • Create Payment Links
          • Secure Payment Links
          • Setup Custom Domain
        • Save a Payment Method
        • Manual Capture
        • Incremental Authorization
        • Tokenization & Card Vault
          • Network Tokenisation
        • Supported Payment Workflows
        • Co-badged Cards
        • Webhooks
      • Process Payouts
        • Getting Started with Payouts
        • Using Saved Payment Methods
        • Smart Router for Payouts
        • Smart Retries in Payout
        • Payout Links
      • Smart Routing
        • Rule Based Routing
        • Volume Based Routing
        • Default Fallback Routing
      • Smart Retries
        • 3DS Step-up Retries
      • 3DS / Strong Customer Authentication
        • Setting up 3DS Decision Manager
        • Native 3DS Authentication
        • External Authentication for 3DS
      • Fraud & Risk Management
        • Activating FRM in Hyperswitch
        • Fraud Blocklist
      • Subscriptions
        • PG Agnostic Card Forwarding
        • Zero Amount Authorization
      • Split Payments
        • Stripe Split Payments
        • Adyen Split Payments
        • Xendit Split Payments
    • Checkout Experience
      • Customizable and Native Integrations
        • Web
          • Node And React
          • Customization
          • Error Codes
          • Node and HTML
          • Vanilla JS and REST API Integration
        • Android
          • Kotlin with Node Backend
          • Customization
          • Features
        • iOS
          • Swift with Node Backend
          • Customization
          • Features
        • React Native
          • React Native with Node Backend
          • Card Widget
          • Customization
        • Flutter
          • Flutter with Node Backend
          • Customization
        • Headless SDK
        • Server Setup
      • Click To Pay
        • Visa Click to Pay: V1 to V2 Migration
      • Payment Methods Management
    • Payment Operations
      • Managing Accounts and Profiles
        • ⚙️Control Centre Account setup
        • Hyperswitch Account Structure
      • Manage Your Team
      • Analytics & operations
        • Exporting payments data
      • Disputes / Chargebacks
      • Surcharge
        • Surcharge Setup guide
      • Multi-Tenancy
      • Data migration
        • Import data to Hyperswitch
        • Export data from Hyperswitch
    • Security and Compliance
      • PCI Compliance
      • Data Security
      • GDPR compliance
      • Identity and Access Management
    • E-commerce Platform Plugins by Hyperswitch
      • 🔌WooCommerce Plugin
        • Setup
        • Roadmap
        • Compatibility
        • FAQs
      • Saleor App
        • Setup
      • Automatic Tax calculation for Express Checkout wallets
  • Hyperswitch open source
    • Overview
      • Run Hyperswitch Locally Using Docker
        • Run Additional Services
      • Development Environment Setup
        • Backend
          • Configure and Run the Application
          • Try out APIs
        • SDK (Frontend)
        • Control Center
    • Deploy on AWS
      • Deploy on AWS using CloudFormation
      • Component-wise Deployment
        • Deploy app server
        • Deploy Control Center
        • Deploy web client
          • Production ready deployment
          • Integrate web client on your web app
          • Playground deployment for prototyping (optional)
        • Deploy Card Vault
          • Production ready deployment on AWS
          • Cloud setup guide
    • Deploy on Kubernetes
      • Deploy on GCP Using Helm Charts
      • Deploy on Azure Using Helm Charts
    • Exploration Guide
    • Account setup
      • Using Hyperswitch Control Center
      • Test a payment
      • Using postman
    • Troubleshooting
  • Testing Payments
  • Check list for Production
    • Going live
      • For SaaS Setup
      • For On-Prem Setup
        • Monitoring
        • PCI compliance
          • Get started
          • Completing the SAQ
        • Data Security
        • Updates
  • Learn more
    • API Reference
    • Connectors Supported
    • SDK Reference
      • React
      • JS
      • Custom Events
    • Hyperswitch architecture
      • Router
      • Storage
      • A Payments Switch with virtually zero overhead
    • Payment flows
    • Blog
  • Community Guidelines
Powered by GitBook

Compliance

  • Vulnerability Disclosure
  • PCI DSS 4.0
  • ISO 27001:2022

Community

  • Slack
  • Discord
  • GitHub Discussion
On this page
  • Secure Tokenization using Hyperswitch's PCI Compliant Vault SDK
  • Key Benefits
  • Vault SDK Integration Walkthrough
  • 1. Server-Side Setup
  • 2. Client-Side Integration (React)

Was this helpful?

  1. About Hyperswitch
  2. Payments Modules
  3. Vault

Vault SDK Integration

Learn how to tokenize cards at Hyperswitch Vault Service using our Vault SDK

Secure Tokenization using Hyperswitch's PCI Compliant Vault SDK

The Hyperswitch Vault 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 Benefits

  • Simplified PCI Compliance: Reduce your PCI scope by outsourcing the storage of sensitive payment data to Hyperswitch's secure vault

  • Enhanced Customer Experience: Allow customers to save and reuse payment methods for faster checkout experiences

  • Reduced Cart Abandonment: Enable one-click payments for returning customers

  • Secure Token System: Access saved payment methods via secure tokens without handling raw card data

  • Customizable UI: Integrate a pre-built, customizable payment method management interface into your application

Vault SDK Integration Walkthrough

This document provides step-by-step instructions for integrating the Hyperswitch Vault SDK into your application.

1. Server-Side Setup

First, you'll need to set up your server to create payment method sessions, which establish secure connections between your frontend and the Hyperswitch Vault.

Obtaining Your API Keys

Creating a Payment Methods Session Endpoint

Add an endpoint on your server that creates payment methods sessions. This endpoint will return the necessary session information to your client application:

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

app.post(`/create-payment-methods-session`, async (req, res) => {
  try {
    const response = await fetch(
      `https://sandbox.hyperswitch.io/v2/payment-methods-session`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-profile-id": "YOUR_PROFILE_ID",
          Authorization: "api-key=YOUR_API_KEY",
        },
        body: JSON.stringify(req.body),
      }
    );
    
    const data = await response.json();
    
    res.send({
      pmSessionId: data.id,
      pmClientSecret: data.client_secret,
    });
  } catch (err) {
    return res.status(400).send({
      error: {
        message: err.message,
      },
    });
  }
});

Note: Replace YOUR_PROFILE_ID and YOUR_API_KEY with your actual credentials from the Hyperswitch dashboard.

2. Client-Side Integration (React)

Once your server endpoint is set up, you'll need to integrate the Vault SDK into your client application. The following steps outline the process for a React application.

2.1 Install Required Libraries

Install the Hyperswitch JavaScript and React libraries:

$ npm install @juspay-tech/hyper-js
$ npm install @juspay-tech/react-hyper-js

2.2 Add Hyperswitch to Your React App

Import the necessary components and hooks:

import React, { useState, useEffect } from "react";
import { loadHyper } from "@juspay-tech/hyper-js";
import { VaultSDK } from "@juspay-tech/react-hyper-js";

2.3 Initialize the Hyperswitch Library

Configure the library with your publishable API key and profile ID:

const hyperPromise = loadHyper({
  publishableKey: "YOUR_PUBLISHABLE_KEY",
  profileId: "YOUR_PROFILE_ID",
});

Security Note: Your publishable key is safe to expose in client-side code, but never include your secret API key in the frontend.

2.4 Fetch Session Details

Make a request to your server endpoint to create a new payment methods session:

const [pmClientSecret, setPmClientSecret] = useState(null);
const [pmSessionId, setPmSessionId] = useState(null);

useEffect(() => {
  fetch("/create-payment-methods-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({customer_id: "customer_id"}),
  })
  .then((res) => res.json())
  .then((data) => {
    setPmClientSecret(data.pmClientSecret);
    setPmSessionId(data.pmSessionId);
  });
}, []);

Important: Replace "customer_id" with your actual customer identifier to associate saved payment methods with specific customers.

2.5 Initialize the VaultSDK Component

Pass the promise from loadHyper to the VaultSDK component along with the session details:

const options = {
  pmSessionId: pmSessionId,
  pmClientSecret: pmClientSecret,
};

return (
  <div className="App">
    {pmSessionId && pmClientSecret && (
      <VaultSDK options={options} hyper={hyperPromise}>
        <VaultElementsForm />
      </VaultSDK>
    )}
  </div>
);

2.6 Add the Vault Elements

Create a VaultElementsForm component that includes the VaultElement:

const VaultElementsForm = () => {
  return (
    <div>
      <h2>Your Saved Payment Methods</h2>
      <VaultElement id="vault-element" />
    </div>
  );
};

The VaultElement embeds an iframe with a dynamic form that displays saved payment methods, allowing your customers to view, manage, and save new payment methods securely.

Last updated 1 month ago

Was this helpful?

Get your API key from the under Developers -> API Keys section. You'll need both your API key and profile ID for server and client integration.

Hyperswitch dashboard