Before following these steps, please configure your payment methods here.
Use this guide to integrate hyper SDK to your React app. You can also use this demo app as a reference with your Hyperswitch credentials to test the setup.
hyperswitch-node libraryInstall the package and import it in your code
$ npm install @juspay-tech/hyperswitch-nodeBefore creating a payment, import the hyper dependencies and initialize it with your API key. Get your API key from Hyperswitch dashboard.
const hyper = require("@juspay-tech/hyperswitch-node")(‘YOUR_API_KEY’);Add an endpoint on your server that creates a Payment. Creating a Payment helps to establish the intent of the customer to start a payment. It also helps to track the customer’s payment lifecycle, keeping track of failed payment attempts and ensuring the customer is only charged once. Return the client_secret obtained in the response to securely complete the payment on the client.
// Create a Payment with the order amount and currency
app.post("/create-payment", async (req, res) => {
try {
const paymentIntent = await hyper.paymentIntents.create({
currency: "USD",
amount: 100,
});
// Send publishable key and PaymentIntent details to client
res.send({
clientSecret: paymentIntent.client_secret,
});
} catch (err) {
return res.status(400).send({
error: {
message: err.message,
},
});
}
});hyper-js and react-hyper-js librariesInstall the packages and import it into your code
$ npm install @juspay-tech/hyper-js
$ npm install @juspay-tech/react-hyper-jshyper to your React appUse 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";hyper-jsCall loadHyper with your publishable API keys to configure the library. To get an publishable Key please find it here.
const hyperPromise = loadHyper("YOUR_PUBLISHABLE_KEY");hyperElementsImmediately 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));
}, []);HyperElementsPass 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 options to the HyperElements component.
<div className="App">
{clientSecret && (
<HyperElements options={options} hyper={hyperPromise}>
<CheckoutForm />
</HyperElements>
)}
</div>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);HyperAccess 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();Add the UnifiedCheckout to your Checkout. This embeds an iframe with a dynamic form that displays configured payment method types available from 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} />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);
};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;
}
});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.
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);
}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
}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
}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,
}