React-native-pz-checkout-kit NPM

react-native-pz-checkout-kit

React Native wrapper around our Android and iOS mobile SDKs

Installation
Requirements
Linking
Usage
Example App
Notes
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://docs.paymentz.com/integration/react-native-integration.php

To know more about Paymentz payment flow and steps involved, read up here: https://docs.paymentz.com/integration/

Installation

Using npm:

npm install --save react-native-pz-checkout-kit

or using yarn:

yarn add react-native-pz-checkout-kit

For Expo Users:

npx expo install react-native-pz-checkout-kit

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-pz-checkout-kit --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-pz-checkout-kit --save // Install the Paymentz React Native Standard SDK using the npm command.
react-native link react-native-pz-checkout-kit // Link the SDK with React Native Project using Xcode.

Manual

Add the following line to your build targets in your Podfile

pod 'react-native-pz-checkout-kit', :path => '../node_modules/react-native-pz-checkout-kit'

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-pz-checkout-kit
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.pzcheckoutkit.WebViewManagerPackage; to the imports at the top of the file
Add new WebViewManagerPackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include ':react-native-pz-checkout-kit'
project(':react-native-pz-checkout-kit').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-pz-checkout-kit/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
```gradle
implementation project(':react-native-pz-checkout-kit')
```
```

Note for Expo Applications:

After adding the react-native-pz-checkout-kit 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

import { PaymentzCheckoutKit, RequestParameter } from 'react-native-pz-checkout-kit'

const requestParameters: RequestParameter = {
    "amount": amount,
    "city": "Mumbai",
    "country": "IN",
    "currency": "INR",
    "device": Platform.OS,
    "email": "test@abc.com",
    "hostUrl": "https://test.paymentz.com/transaction/Checkout",
    "memberId": "13219",
    "merchantTransactionId": merchantTransactionId,
    "orderDescription": "TestinTransaction",
    "paymentBrand": "",
    "paymentMode": "",
    "phone": "1234567890",
    "postCode": "400064",
    "state": "MH",
    "street": "Malad",
    "telnocc": "+91",
    "terminalId": "",
    "toType": "paymentz"
  }
  
          <TouchableOpacity style={{ width: "100%", padding: 10, backgroundColor: '#1488CC' }} onPress={() => {
            PaymentzCheckoutKit.initPayment(requestParameters, "YOUR SECRET KEY HERE").then((data) => {
              // handle success
              alert(data.resultDescription)
              console.log(data)

            }).catch((error) => {
              //handle failed
              alert(error.resultDescription)
              console.log(error)
            })
          }}>
            <Text style={{ color: 'white', alignSelf: 'center' }}>Pay</Text>
          </TouchableOpacity>