react-native-dhanyatra
v1.1.3
Published
React Native wrapper for Dhanyatra
Downloads
8
Maintainers
Readme
react-native-dhanyatra
React Native wrapper around our Android and iOS mobile SDKs
- Prerequisites
- Installation
- Requirements
- Linking
- Usage
- Example App
- Proguard Rules
- Notes
- FAQ's
- Contributing
- License
The following documentation is only focussed on the react-native wrapper around our Android and iOS sdks. To know more about our react-native SDK, refer to the following documentation -
https://dhanyatra.brighthustle.in/docs/payment-gateway/react-native-integration/
To know more about Dhanyatra payment flow and steps involved, read up here: https://docs.dhanyatra.brighthustle.in/docs
Prerequisites
- Learn about the Dhanyatra Payment Flow.
- Sign up for a dhanyatra Account and generate the API Keys from the Dhanyatra Dashboard. Using the Test keys helps simulate a sandbox environment. No actual monetary transaction happens when using the Test keys. Use Live keys once you have thoroughly tested the application and are ready to go live.
Installation
Using npm:
npm install --save react-native-dhanyatra
or using yarn:
yarn add react-native-dhanyatra
For Expo Users:
npx expo install react-native-dhanyatra
Requirements
- iOS 10.0+ / macOS 10.12+ / tvOS 10.0+ / watchOS 3.0+
- Xcode 11+
- Swift 5.1+
Linking
Automatic
For React Native 0.60+
# install
npm install react-native-dhanyatra --save
cd ios && open podfile # Change the platform from iOS 9.0 to 10.0
pod install && cd .. # CocoaPods on iOS needs this extra step
# run
yarn react-native run-ios
For React Native 0.59 and lower
$ npm install react-native-dhanyatra --save
// Install the Dhanyatra React Native Standard SDK using the npm command.react-native link react-native-dhanyatra
// Link the SDK with React Native Project using Xcode.Drag the
Dhanyatra.framework
file from the Libraries folder and drop it under the root folder, for more info follow this link, after this go to Target > General Settings> Framework, Libraries and Embedded Content section, set the Embed status of Dhanyatra.framework to Embed & Sign.Also make sure the dhanyatra framework is added in the embedded binaries section and you have Always Embed Swift Standard Binaries set to yes in build settings.
Manual
Add the following line to your build targets in your Podfile
pod 'react-native-dhanyatra', :path => '../node_modules/react-native-dhanyatra'
Then run pod install
In XCode, in the project navigator:
- Right click Libraries
- Add Files to [your project's name]
- Go to
node_modules/react-native-dhanyatra
- Add the
.xcodeproj
file
In XCode, in the project navigator, select your project.
- Add the
libRNDeviceInfo.a
from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries - Click
.xcodeproj
file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic). - Look for Header Search Paths and make sure it contains both
$(SRCROOT)/../react-native/React
and$(SRCROOT)/../../React
- Mark both as recursive (should be OK by default).
Run your project (Cmd+R)
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.dhanyatra.rn.DhanyatraPackage;
to the imports at the top of the file - Add
new DhanyatraPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-dhanyatra' project(':react-native-dhanyatra').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dhanyatra/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:gradle implementation project(':react-native-dhanyatra')
Note for Expo Applications:
After adding the react-native-dhanyatra package,the option to prebuild
the app must be used(this generates the android/ios platform folders in the project to use native-modules). Command for which,
npx expo prebuild
After which the application will be installed on the device/emulator.
npx expo run:[ios|android] --device
Usage
Sample code to integrate with Dhanyatra can be found in [App.tsx][App.tsx] in the included example directory.
To run the example, simply do the following in example directory and then link iOS SDK as explained in the previous section:
$ npm i
Steps
Import DhanyatraCheckout module to your component:
import DhanyatraCheckout from 'react-native-dhanyatra';
Call
DhanyatraCheckout.open
method with the paymentoptions
. The method returns a JS Promise wherethen
part corresponds to a successful payment and thecatch
part corresponds to payment failure.<TouchableHighlight onPress={() => { var options = { description: 'Credits towards consultation', image: '', currency: 'INR', key: '', // Your api key amount: '5000', name: 'foo', prefill: { email: '[email protected]', contact: '9191919191', name: 'Dhanyatra' }, theme: { color: { text: '#ffa800', base: '#ffa800' } }, } DhanyatraCheckout.open(options).then((data) => { // handle success alert(`Success: ${data.payment_id}`); }).catch((error) => { // handle failure alert(`Error: ${error.code} | ${error.description}`); }); }}>
A descriptive list of valid options for checkout is available (under Manual Checkout column).
Proguard Rules
If you are using proguard for your builds, you need to add following lines to proguard files
-keepattributes _Annotation_
-dontwarn com.dhanyatra.**
-keep class com.dhanyatra.** {_;}
-optimizations !method/inlining/
-keepclasseswithmembers class _ {
public void onPayment\*(...);
}
Things to be taken care
- The react native plugin is wrapper around native SDK, so it doesn't work with the tools like expo which doesn't support native modules.
FAQ's
- For UPI Intent in iOS, the info.plist in iOS should be modified to include
LSApplicationQueriesSchemes
- For Bare React-Native Apps:
- info.plist can directly be modified from the xcode project. LSApplicationQueriesSchemes takes as array value and can currently include only ["tez","phonepe","paytmmp"]
- For Expo Apps:
- Directly modifying info.plist is discouraged, and hence this should be added in app.json
"ios": { "infoPlist": { "LSApplicationQueriesSchemes": [ "tez", "phonepe", "paytmmp" ] } }
- P.S: The apps won't be visible if the application is run with metro builder. The info.plist is generated successfully and integrated only when the app is built as standalone app.
- For Bare React-Native Apps:
- Still having trouble with integrating our payment gateway? Follow this link for more info.
Contributing
See the CONTRIBUTING document. Thank you, contributors!
License
react-native-dhanyatra is Copyright (c) 2020 Bright Hustle Pvt. Ltd. It is distributed under the MIT License.
We ♥ open source software! See our other supported plugins / SDKs or contact us to help you with integrations.