LogoLogo
Explore with DeepWikiJoin Slack CommunityContact Us
  • About Hyperswitch
    • Exploration Guide
    • Overview
    • Payments Suite
    • Payments Modules
      • Cost Observability
      • Revenue Recovery
      • Vault
        • Server to Server Vault tokenization
        • Vault SDK Integration
        • Hyperswitch Vault: Pass Through Proxy Payments
      • Intelligent Routing
        • Auth Rate Based Routing
        • Self-Deployment Guide
      • 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
    • 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
  • Demo App
  • 1. Setup the server
  • 2. Build checkout page on the client
  • 3. Complete the checkout on the client
  • 4. Elements Events
  • 5. Additional Callback Handling for Wallets Payment Process
  • Next step:

Was this helpful?

  1. Explore Hyperswitch
  2. Checkout Experience
  3. Customizable and Native Integrations
  4. Web

Node And React

Last updated 2 months ago

Was this helpful?

Before following these steps, please configure your payment methods here. Use this guide to integrate hyperswitch SDK to your React app. You can also use this demo app as a reference with your Hyperswitch credentials to test the setup.

1. Setup the server

Follow the section.

2. Build checkout 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

Use hyper-js to ensure that you stay PCI compliant by sending payment details directly to Hyperswitch server.

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

2.3 Load hyper-js

const hyperPromise = loadHyper("YOUR_PUBLISHABLE_KEY",{
    customBackendUrl: "YOUR_BACKEND_URL",
    //You can configure this as an endpoint for all the api calls such as session, payments, confirm call.
});

2.4 Fetch the Payment and Initialise hyperElements

Immediately make a request to the endpoint on your server to create a new Payment as soon as your checkout page loads. The clientSecret returned by your endpoint is used to complete the payment.

useEffect(() => {
  // Create PaymentIntent as soon as the page loads
  fetch("/create-payment", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items: [{ id: "xl-tshirt" }], country: "US" }),
  })
    .then((res) => res.json())
    .then((data) => setClientSecret(data.clientSecret));
}, []);

2.5 Initialise HyperElements

<div className="App">
  {clientSecret && (
    <HyperElements options={options} hyper={hyperPromise}>
      <CheckoutForm />
    </HyperElements>
  )}
</div>

2.6 Setup the state (optional)

Initialize a state to keep track of payment, display errors and control the user interface.

const [message, setMessage] = useState(null);
const [isLoading, setIsLoading] = useState(false);

2.7 Store a reference to Hyper

Access the hyper-js library in your CheckoutForm component by using the useHyper() and useWidgets() hooks. If you need to access Widgets via a class component, use the WidgetsConsumer instead. If you need to access Widgets via a class component, use the WidgetsConsumer instead. You can find the API for these methods here.

const hyper = useHyper();
const widgets = useWidgets();

3. Complete the checkout on the client

Key Features of Hyperswitch's Express Checkout

  • Fast Performance: One-click payment at checkout enables a smooth and frictionless payment experience to customers.

  • Multiple Payment Options: Supports ApplePay,Paypal Klarna, and GooglePay, giving customers a variety of payment choices on top of the speed in checkout.

  • Easy Integration: Our SDK can be easily integrated with web applications.

Benefits of Hyperswitch's Express Checkout Feature

  • Better User Experience: One-click payment makes shopping easier, leading to more sales and fewer abandoned carts.

  • Time Savings: Speeds up the checkout process, saving time for both customers and merchants.

  • Great for Mobile: Optimized for mobile shopping with ApplePay, Paypal and GooglePay integration for quick purchases on smartphones.

  • Collect billing and shipping details directly from the ApplePay, Klarna, GooglePay, Paypal

3.1 Add the ExpressCheckout

The Express Checkout Element gives you a single integration for accepting payments through one-click payment buttons. Supported payment methods include ApplePay, GooglePay and PayPal.

Add the ExpressCheckout to your Checkout. This embeds an iframe that displays configured payment method types supported by the browser available for the Payment, allowing your customer to select a payment method. The payment methods automatically collects the associated payment details for the selected payment method type.

Define paymentElementOptions:

var expressCheckoutOptions = {
  wallets: {
    walletReturnUrl: "https://example.com/complete",
    //Mandatory parameter for Wallet Flows such as Googlepay, Paypal and Applepay
  },
};
<ExpressCheckoutElement id="express-checkout" options={expressCheckoutOptions} />

3.1.A Add the UnifiedCheckout

Add the UnifiedCheckout to your Checkout. This embeds an iframe with a dynamic form that displays configured payment method types available for the Payment, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type.

(Optional) Define paymentElementOptions:

var unifiedCheckoutOptions = {
  wallets: {
    walletReturnUrl: "https://example.com/complete",
    //Mandatory parameter for Wallet Flows such as Googlepay, Paypal and Applepay
  },
};
<UnifiedCheckout id="unified-checkout" options={unifiedCheckoutOptions} />

3.1.B Complete the payment and handle errors

Call confirmPayment(), passing along the UnifiedCheckout and a return_url to indicate where hyper should redirect the user after they complete the payment. For payments that require additional authentication, hyper redirects the customer to an authentication page depending on the payment method. After the customer completes the authentication process, they’re redirected to the return_url.

If there are any immediate errors (for example, your customer’s card is declined), hyper-js returns an error. Show that error message to your customer so they can try again.

const handleSubmit = async (e) => {
  setMessage("");
  //e.preventDefault();

  if (!hyper || !widgets) {
    return;
  }
  setIsLoading(true);

  const { error, status } = await hyper.confirmPayment({
    elements,
    confirmParams: {
      // Make sure to change this to your payment completion page
      return_url: "https://example.com/complete",
    },
    redirect: "always", // if you wish to redirect always, otherwise it is defaulted to "if_required"
  });

  if (error) {
    if (error.type === "card_error" || error.type === "validation_error") {
      setMessage(error.message);
    } else {
      if (error.message) {
        setMessage(error.message);
      } else {
        setMessage("An unexpected error occurred.");
      }
    }
  }
  if (status) {
    handlePaymentStatus(status); //handle payment status
  }
  setIsLoading(false);
};
Alternate Implementation: SDK handles the Confirm Button

For SDK to render the confirm button and handle the confirm payment, in paymentElementOptions, you can send:

var unifiedCheckoutOptions = {
  ...,
  sdkHandleConfirmPayment: {
     handleConfirm: true,
     buttonText: "SDK Pay Now",
     confirmParams: {
       return_url: "https://example.com/complete",
     },
   },
};
  1. handleConfirm (required) - A boolean value indicating whether the SDK should handle the confirmation of the payment.

  2. confirmParams (required) - It’s an object which takes return_url. return_url parameter specifies the URL where the user should be redirected after payment confirmation.

  3. buttonText (optional) - The text to display on the payment button. Default value: Pay Now

3.2 Display payment status message

When Hyperswitch redirects the customer to the return_url, the payment_client_secret query parameter is appended by hyper-js. Use this to retrieve the Payment to determine what to show to your customer.

//Look for a parameter called `payment_intent_client_secret` in the url which gives a payment ID, which is then used to retrieve the status of the payment

const paymentID = new URLSearchParams(window.location.search).get(
  "payment_intent_client_secret"
);

if (!paymentID) {
  return;
}

hyper.retrievePaymentIntent(paymentID).then(({ paymentIntent }) => {
  switch (paymentIntent.status) {
    case "succeeded":
      setMessage("Payment succeeded!");
      break;
    case "processing":
      setMessage("Your payment is processing.");
      break;
    case "requires_payment_method":
      setMessage("Your payment was not successful, please try again.");
      break;
    default:
      setMessage("Something went wrong.");
      break;
  }
});

Please retrieve the payment status from the Hyperswitch backend to get the terminal status of the payment. Do not rely solely on the status returned by the SDK, as it may not always reflect the final state of the transaction.

4. Elements Events

Some events are emitted by payment elements, listening to those events is the only way to communicate with these elements. All events have a payload object with the type of the Element that emitted the event as an elementType property. Following events are emitted by payment elements.

  • change

  • ready

  • focus

  • blur

4.1 Calling Elements events

First create instance of widgets using getElement function. It will return null if no matching type is found.

// Create instance of widgets
var paymentElement = widgets.getElement("payment");

// handle event
if (paymentelement) {
  // in place of "EVENT" use "change", "ready", "focus" etc.
  paymentElement.on("EVENT", callbackFn);
}

4.2 "change" event

The "change" event will be triggered when value changes in Payment element.

paymentElement.on("change", function (event) {
  // YOUR CODE HERE
});

Callback function will be fired when the event will be triggered. When called it will be passed an event object with the following properties.

{
  elementType: 'payment',   // The type of element that emitted this event.
  complete: false,          // If all required field are complete
  empty: false,             // if the value is empty.
  value: { type: "card" },  // current selected payment method like "card", "klarna" etc
}

4.3 "ready" event

The "ready" event will be triggered when payment element is full rendered and can accept "focus" event calls.

Callback for ready event will be triggered with following event object

{
  ready: boolean,   // true when payment element is full rendered
}

4.4 "focus", "blur" event

Focus and blur event triggered when respective event will be triggered in payment element.

Callback for these event will be triggered with following event object.

// Event object for focus event
{
  focus: boolean,   // true when focused on payment element
}

// Event object for blur event
{
  blur: boolean,
}

Congratulations! Now that you have integrated the Hyperswitch SDK on your app, you can customize the payment elements to blend with the rest of your app.

5. Additional Callback Handling for Wallets Payment Process

This document outlines the details and functionality of an optional callback and onPaymentComplete that can be provided by merchants during the payment process. These callbacks allow merchants to hook into the payment flow at key stages and handle specific actions or events before continuing the normal flow.

  • onPaymentButtonClick: This callback is triggered immediately after the user clicks any wallet button.

  • onPaymentComplete: This callback is triggered after the payment is completed, just before the SDK redirects to walletReturnUrl provided. It allows the merchant to handle actions post-payment. If not provided, the SDK's default flow will proceed.

Redirection Handling: The onPaymentComplete callback should handle redirection or any steps needed after payment, as the SDK no longer does this automatically. You must ensure to implement the necessary redirection logic.

Fallback: If no callbacks are provided by the merchant, the SDK will continue with its default behaviour, including automatic redirection after payment completion.

The task within onPaymentButtonClick must be completed within 1 second. If an asynchronous callback is used, it must resolve within this time to avoid Apple Pay payment failures.

Example Usage for React Integration

<PaymentElement
  id="payment-element"
  options={options}
  onPaymentButtonClick={() => {
    console.log("This is a SYNC CLICK");
    // Add any custom logic for when the payment button is clicked, such as logging or tracking
  }}
  onPaymentComplete={() => {
    console.log("OnPaymentComplete");
    // Add any custom post-payment logic here, such as redirection or displaying a success message
  }}
/>

Next step:

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 HyperElements component. This allows the child components to access the Hyper service via the HyperElements parent component. Additionally, pass the client secret as an to the HyperElements component.

For customization, please follow the .

Demo App
Server Setup
here
options
Customization docs
Setup Payment Methods