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

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

Requirements

• iOS 10.0+ / macOS 10.12+ / tvOS 10.0+ / watchOS 3.0+
• Xcode 11+
• Swift 5.1+

Linking

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

1. $ npm install react-native-pz-checkout-kit --save // Install the Paymentz React Native Standard SDK using the npm command.

2. 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)

1. 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

2. 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')

3. Insert the following lines inside the dependencies block in android/app/build.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": "[email protected]",
    "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>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

react-native-pz-checkout-kit is Copyright (c) 2024 Paymentz Gateway Solutions 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.