Node and HTML
Integrate hyper SDK to your HTML Web App using Hyperswitch-node
In this section, you will get details to Integrate Unified Checkout using Node Backend and HTML Frontend
Before following these steps, please configure your payment methods here. Use this guide to integrate hyperswitch
SDK to your HTML app. You can also use this demo app as a reference with your Hyperswitch credentials to test the setup.
1. Setup the server
1.1 Install the hyperswitch-node
library
hyperswitch-node
libraryInstall the package and import it in your code
1.2 Create a payment
Before creating a payment, import the hyperswitch-node
dependencies and initialize it with your API key. Get your API key from Hyperswitch dashboard.
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.
2. Build checkout page on the client
2.1 Load HyperLoader
Use HyperLoader
to ensure PCI compliant means of accepting payment details from your customer and sending it directly to the hyperswitch server. Always load hyperLoader
from https://beta.hyperswitch.io/v1/HyperLoader.js
to ensure compliance. Please refrain from including the script in a bundle or hosting it yourself.
2.2 Define the payment form
Add one empty placeholder div
to your checkout form for each Widget that youβll mount. HyperLoader
inserts an iframe into each div
to securely collect the customerβs email address and payment information.
2.3 Initialize HyperLoader
Initialize HyperLoader
onto your app with your publishable key with the Hyper
constructor. Youβll use HyperLoader
to create the Unified Checkout and complete the payment on the client. To get a Publishable Key please find it here.
2.4 Fetch the Payment and create the Unified Checkout
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.
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 unifiedCheckout
and mount it to the placeholder div
in your payment form. 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.
3. Complete payment on the client
3.1 Handle the submit event and complete the payment
Listen to the formβs submit event to know when to confirm the payment through the hyper API.
Call confirmPayment()
, passing along the unifiedCheckout
and a return_url
to indicate where Hyper should redirect the user after they complete the payment. 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
.
Also if there are any immediate errors (for example, your customerβs card is declined), HyperLoader
returns an error. Show that error message to your customer so they can try again.
3.2 Display a payment status message
When Hyper redirects the customer to the return_url
, the payment_intent_client_secret
query parameter is appended by HyperLoader
. Use this to retrieve the Payment
to determine what to show to your customer.
Congratulations! Now that you have integrated the unified checkout on your app, you can customize the payment elements to blend with the rest of your app.
Last updated