For installing it to your project follow the below steps.
$ npm install payu-non-seam-less-react --save$ react-native link payu-non-seam-less-react
Checkoutpro is a dynamic framework. If you are not using 'use_frameworks!', then please add the following line at the end of your podfile.
$dynamic_framework = ['PayUAssetLibraryKit', 'PayUBizCoreKit', 'PayUCheckoutProBaseKit', 'PayUCheckoutProKit', 'PayUCustomBrowser', 'PayULoggerKit', 'PayUNetworkingKit', 'PayUUPICoreKit', 'Socket.IO-Client-Swift', 'Starscream']pre_install do |installer|Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}installer.pod_targets.each do |pod|if $dynamic_framework.include?(pod.name)def pod.build_type;Pod::BuildType.dynamic_frameworkendendendend
After updating the podfile, install the pod using below command.
pod install
import PayUBizSdk from 'payu-non-seam-less-react';
var payUPaymentParams = {key: <Merchant key>,transactionId: <Transaction Id>,amount: <Transaction amount>,productInfo: <productInfo>,firstName: <Customer firstName>,email: <Customer email>,phone: <Customer phone>,ios_surl: <Success Url for Android>,ios_furl: <Failure Url for Android>,android_surl: <Success Url for Android>,android_furl: <Failure Url for Android>,environment: '0'/'1',<0 for Production/1 for Staging>userCredential: userCredential,additionalParam: {payment_related_details_for_mobile_sdk: <payment_related_details_for_mobile_sdk hash>,vas_for_mobile_sdk: <vas_for_mobile_sdk hash>,payment: <Payment Hash>}
For information about CheckoutProConfig refer here
var payUCheckoutProConfig = {//iOS specific propertyprimaryColor: <Color Hex Code e.g. "#aabbcc">,secondaryColor: <Color Hex Code e.g. "#aabbcc">,merchantLogo: <Image asset name like 'Jio'>,//Properties common for both platforms (Android &iOS)merchantName: <Merchant Name>,showExitConfirmationOnCheckoutScreen: <true/false>,showExitConfirmationOnPaymentScreen: <true/false>,cartDetails: <Cart Details like [{ 'Order': 'Value' }, { 'Key Name': 'Value1' }]>,paymentModesOrder: <Checkout Order like [{ 'UPI': 'TEZ' }, { 'Wallets': 'PAYTM' }]>,surePayCount: <0-3>,merchantResponseTimeout: <In milliseconds e.g. 1000>,autoSelectOtp: <true/false>,// Android specific propertyautoApprove: <true/false>,merchantSMSPermission: <true/false>,showCbToolbar: <true/false>,}
For generating below hashes use method described as here where command name is same as their type and var1 is userCredentials which uniquely identifies your Customer or default.
vas_for_mobile_sdk
payment_related_details_for_mobile_sdk
For generating Payment Hash(to be set under payment key visit here.
Create a hashmap of payment params and config object(optional) like below.
var paymentObject = {payUPaymentParams: payUPaymentParams,payUCheckoutProConfig: payUCheckoutProConfig}
Call openCheckoutScreen method available in PayUBizSdk module like below.
PayUBizSdk.openCheckoutScreen(paymentObject);
To get the callbacks for payment-related statuses create an object of NativeEventEmitter and subscribe to the below events.
//App.jsimport {NativeEventEmitter } from 'react-native';//Register event emitters here.componentDidMount() {const eventEmitter = new NativeEventEmitter(PayUBizSdk);this.paymentSuccess = eventEmitter.addListener('onPaymentSuccess', this.onPaymentSuccess);this.paymentFailure = eventEmitter.addListener('onPaymentFailure', this.onPaymentFailure);this.paymentCancel = eventEmitter.addListener('onPaymentCancel', this.onPaymentCancel);this.error = eventEmitter.addListener('onError', this.onError);this.generateHash = eventEmitter.addListener('generateHash', this.generateHash);}onPaymentSuccess = (e) => {console.log(e.merchantResponse);console.log(e.payuResponse);}onPaymentFailure = (e) => {console.log(e.merchantResponse);console.log(e.payuResponse);}onPaymentCancel = (e) => {console.log('onPaymentCancel isTxnInitiated -' + e);}onError = (e) => {console.log(e);}generateHash = (e) => {console.log(e.hashName);console.log(e.hashString);this.sendBackHash(e.hashName, e.hashString);}//Do remember to unregister eventEmitters herecomponentWillUnmount() {this.paymentSuccess.remove();this.paymentFailure.remove();this.paymentCancel.remove();this.error.remove();this.generateHash.remove();}
For more details on the hashes used in PayUCheckoutPro SDK refer here. Native sdk request hashes on runtime via generateHash event callback which can be calculated at your server end and has to be passed back to sdk like below.More information about hashString and hashName here.
sendBackHash = (hashName, hashString) => {var hashValue = <Calculate Hash at your server using hashString provided>var result = { [hashName]: hashValue };PayUBizSdk.hashGenerated(result);}
Currently, we support only PhonePe and GooglePay via Intent in iOS. Add the query schemes in the info.plist of your Xcode project.
<key>LSApplicationQueriesSchemes</key><array><string>phonepe</string><string>tez</string></array>
Add your logo image in the Xcode project with the same name as provided in payUCheckoutProConfig's merchantLogo property.
allprojects {repositories {...maven { url "https://phonepe.bintray.com/PhonePeIntentSDK" }...}}
In order to Autofill OTP on bank pages SDK requires "RECEIVE_SMS" permission so kindly add the same in your AndroidManifest.xml like below.
<uses-permission android:name="android.permission.RECEIVE_SMS" />