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
  • Key Features of Payment Method Management in Hyperswitch
  • 1. Setup the server
  • 2. Build Payment Management Page on the client

Was this helpful?

  1. Explore Hyperswitch
  2. Checkout Experience

Payment Methods Management

Hyperswitch is designed to facilitate the management of saved payment methods

Last updated 7 months ago

Was this helpful?

This section guides you through the Hyperswitch Payment Methods Management, and how to integrate it.

Key Features of Payment Method Management in Hyperswitch

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

  1. Payment Method Creation: Easily allow your customers to save new payment methods during checkout, providing a convenient option for future transactions.

  2. Storing Payment Methods: Hyperswitch securely stores customer payment details, enabling repeat purchases without requiring them to re-enter their information each time.

  3. Retrieving Payment Methods: Customers can quickly access their saved payment methods, streamlining their checkout process and enhancing their overall experience.

  4. Deleting/Deactivating Payment Methods: Keep payment options up to date by allowing customers to manage outdated or inactive methods, ensuring a clean and efficient payment experience.

As of now, Hyperswitch only supports management of the payment methods saved during checkout, We will soon roll out the feature enabling you to add a payment method for a non-purchase journey.

1. Setup the server

1.1 Create an ephemeral key

Add an endpoint on your server that creates an Ephemeral Key. An ephemeral key is a temporary, short-lived key used to securely manage sensitive operations, such as updating or deleting payment methods, without exposing full access credentials. It has a limited validity period and restricted capabilities, ensuring that it can only be used for specific tasks and not for initiating payments. This enhances security by minimizing the risk of unauthorized access and reducing the exposure of sensitive data. Return the secret obtained in the response to setup Payment Methods Management on client.

// Create an Ephemeral Key
const app = express();

app.post("/create-ephemeral-key", async (req, res) => {
  try {
    const response = await fetch(`https://sandbox.hyperswitch.io/ephemeral_keys`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json", "api-key": "YOUR_API_KEY" },
        body: JSON.stringify(req.body),
      });
    const ephemeralKey = await response.json()
    // Send publishable key and PaymentIntent details to client
    res.send({
      ephemeralKey: ephemeralKey.secret,
    });
  } catch (err) {
    return res.status(400).send({
      error: {
        message: err.message,
      },
    });
  }
});

2. Build Payment Management Page on the client

2.1 Install the hyper-js and react-hyper-js libraries

Install the packages and import it into your code

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

2.2 Add hyper to your React app

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

2.3 Load hyper-js

const hyperPromise = loadHyper("YOUR_PUBLISHABLE_KEY");

2.4 Fetch the Payment

Make a request to the endpoint on your server to create a new Ephemeral Key. The ephemeralKey returned by your endpoint is used to fetch all the customer saved payment methods.

useEffect(() => {
  // Create PaymentIntent as soon as the page loads
  fetch("/create-ephemeral-key", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({customer_id: "hyperswitch_sdk_demo_id"}),
  })
    .then((res) => res.json())
    .then((data) => setEphemeralKey(data.ephemeralKey));
}, []);

2.5 Initialise HyperManagementElements

<div className="App">
  {ephemeralKey && (
    <HyperManagementElements options={options} hyper={hyperPromise}>
      <PaymentMethodsManagementForm />
    </HyperManagementElements>
  )}
</div>

2.6 Add the Payment Methods Management Element

Add the PaymentMethodsManagementElement to your Payment Management Form. This embeds an iframe with a dynamic form that displays saved payment methods, allowing your customer to see all their saved payment methods and delete them.

<PaymentMethodsManagementElement id="payment-methods-management-element" />

2.1 Define the Payment Methods Management Form

Add one empty placeholder div to your checkout form for each Widget that you’ll mount.

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

2.1 Fetch the Ephemeral Key and mount the Payment Methods Management Element

Make a request to the endpoint on your server to create a new Ephemeral Key. The ephemeralKey returned by your endpoint is used to fetch all the customer saved payment methods.

Important: Make sure to never share your API key with your client application as this could potentially compromise your payment flow

Following this, create a paymentMethodsManagement and mount it to the placeholder div in your payment form. This embeds an iframe with a dynamic form that displays saved payment methods, allowing your customer to see all their saved payment methods and delete them.

// Fetches an ephemeral key and captures the secret
async function initialize() {
  const response = await fetch("/create-ephemeral-key", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({customer_id: "hyperswitch_sdk_demo_id"}),
  });
  const { ephemeralKey } = await response.json();
  
  // Initialise Hyperloader.js
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://beta.hyperswitch.io/v1/HyperLoader.js";
 
  let hyper; 
  script.onload = () => {
      hyper = window.Hyper("YOUR_PUBLISHABLE_KEY")
      const appearance = {
          theme: "midnight",
      };
      const paymentMethodsManagementElements = hyper.paymentMethodsManagementElements({ appearance, ephemeralKey });
      const paymentMethodsManagement = paymentMethodsManagementElements.create("paymentMethodsManagement");
      paymentMethodsManagement.mount("#payment-methods-management-element");
  };
  document.body.appendChild(script);
}

Congratulations! Now that you have integrated the Hyperswitch Payment Methods Management on your app, you can customize the it to blend with the rest of your website.

Get your API key from .

Call loadHyper with your publishable API keys to configure the library. To get an publishable Key please find it .

Pass the promise from loadHyper to the HyperManagementElements component. This allows the child components to access the Hyper service via the HyperManagementElements parent component. Additionally, pass the ephemeralKey in to the HyperManagementElements component.

Hyperswitch dashboard
here
options
image displaying the payment method management UI.