Node And React
Integrate hyper SDK to your React Web App using Hyperswitch-node
In this section, you will get details to Integrate Unified Checkout using Node Backend and React Frontend
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.
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 hyper 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 Install the hyper-js
and react-hyper-js
libraries
hyper-js
and react-hyper-js
librariesInstall the packages and import it into your code
2.2 Add hyper
to your React app
hyper
to your React appUse hyper-js
to ensure that you stay PCI compliant by sending payment details directly to Hyperswitch server.
2.3 Load hyper-js
hyper-js
Call loadHyper
with your publishable API keys to configure the library. To get an publishable Key please find it here.
2.4 Fetch the Payment and Initialise hyperElements
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.
2.5 Initialise HyperElements
HyperElements
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 options to the HyperElements
component.
2.6 Setup the state (optional)
Initialize a state to keep track of payment, display errors and control the user interface.
2.7 Store a reference to Hyper
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.
3. Complete the checkout on the client
3.1 Add the UnifiedCheckout
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:
3.2 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.
3.3 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.
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.
4.2 "change" event
The "change" event will be triggered when value changes in Payment element.
Callback function will be fired when the event will be triggered. When called it will be passed an event object with the following properties.
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
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.
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.
Next step:
π³pagePayment methods setupLast updated