React Native with Node Backend (Beta)
Integrate hyper SDK to your React Native App using hyperswitch-node
Currently in beta please contact to get early access
Use this guide to integrate hyper
SDK to your React Native app. You can use the following Demo App as a reference with your Hyperswitch credentials to test the setup.
Before following these steps, please configure your payment methods here.
Requirements
Android 5.0 (API level 21) and above
Android Gradle Plugin 7.3.1
Gradle 7.5.1+
iOS 12.4 and above
CocoaPods
npm
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 react-native-hyperswitch
libraries
react-native-hyperswitch
librariesInstall the packages and import it into your code
2.2 Peer Dependencies
Install the following dependencies
2.3 iOS Only
Run pod install
in iOS folder
2.4 Android Only
In the Android Folder inside strings.xml file(android/app/src/main/res/values/strings.xml) add the below line
In the Android Folder inside settings.gradle file add the following line
2.5 Add HyperProvider
to your React Native app
HyperProvider
to your React Native appUse HyperProvider
to ensure that you stay PCI compliant by sending payment details directly to Hyperswitch server.
2.6 Use HyperProvider
HyperProvider
To initialize Hyperswitch in your React Native app, wrap your payment screen with the HyperProvider component. Only the API publishable key in publishableKey is required. The following example shows how to initialize Hyperswitch using the HyperProvider component.
3. Complete the checkout on the client
3.1 import useHyper to your checkout page
In the checkout of your app, import useHyper() hook
3.2 Fetch the PaymentIntent client Secret
Make a network request to the backend endpoint you created in the previous step. The clientSecret returned by your endpoint is used to complete the payment.
3.3 Collect Payment details
Call initPaymentSession from the useHyper hook to customise paymentsheet, billing or shipping addresses and initialize paymentsheet
3.4 Handle Payment Response
To display the Payment Sheet, integrate a "Pay Now" button within the checkout page, which, when clicked, invokes the presentPaymentSheet() function. This function will return an asynchronous payment response with various payment status.
Congratulations! Now that you have integrated the payment sheet
Last updated