Hyperwidget Integration Guide

Once the merchant signs up onto the unified dashboard, they’ll get their API keys and can enable the APMs <> PSP combinations that they would like to provide on their checkout.

Hyperswitch provides a code transformer that allows the merchant to leverage their existing integration (with PSP or middle layer) and make a call to Hyperswitch server with minimal changes. Hyperwidget acts as a Unified wrapper on top of all major APMs and simplifies up-scaling or down-scaling of these APMs across one or multiple PSPs.

The unified dashboard offers the merchants ability to enable or disable APMs via any PSP. The dashboard also offers capabilities like - Analytics, Operations, Refunds, Chargebacks, and Reconciliation.

Supported APM features:

Payment Method

Region

Type

Supported flow

Shipping Address availability

Billing address availability

Paypal

US + EU

Wallet

SDK flow, Redirect flow

Yes*

Yes

Apple Pay

US + EU

Wallet

SDK flow

Yes*

Yes

Google Pay

US + EU

Wallet

SDK flow

Yes*

Yes

Paze

US + EU

Wallet

SDK flow

Yes

Samsung Pay

US + EU

Wallet

SDK flow

Ali Pay

US + EU

Wallet

Redirect flow

Yes

WeChat Pay

US + EU

Wallet

Redirect flow

Yes

Affirm

US + EU

BNPL

Redirect flow

Yes

Klarna

US + EU

BNPL

SDK flow, Redirect flow

Yes*

Yes

Afterpay

US + EU

BNPL

Redirect flow

Yes

iDEAL

Bank-to-bank

Redirect flow

Yes

SEPA

Bank-to-bank

Redirect flow

Yes

*only in the SDK flow

Steps to integrate Hyperwidgets:

To start collecting payments via the APM of your choice, follow these simple steps:

For React Integration:

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

import React, { useState, useEffect } from "react";
import { loadHyper } from "@juspay-tech/hyper-js";
import { hyperElements } from "@juspay-tech/react-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.
});

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));
}, []);

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

Now add this component to the PaymentElement -

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} />

Last updated 4 months ago

Was this helpful?

import React, { useState, useEffect } from "react"; import { loadHyper } from "@juspay-tech/hyper-js"; import { hyperElements } from "@juspay-tech/react-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. }); 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)); }, []); <div className="App"> {clientSecret && ( <HyperElements options={options} hyper={hyperPromise}> <CheckoutForm /> </HyperElements> )} </div>

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} />