Node And React
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
Create a payment
(We highly recommend using this S2S method for all production activities and functionalities, as it offers greater scalability and enhanced features designed for production environments)
To create a payment intent, send a request to either our sandbox or production endpoint. For detailed information, refer to the API Reference documentation.
Upon successful creation, you will receive a client_secret
, which must be provided to the SDK to render it properly.
In case your integrating the ExpressCheckout (mentioned later below), instead of creating multiple paymentIntents for the same customer session, you can also use paymentsUpdate API for better analytics.
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
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:
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.
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 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
Next step:
Last updated