react-native-paydala-sdk

react-native-paydala-sdk

This is a react-native library that's supported on Android | iOS SDK for Paydala

Installation

To ensure the best experience, we recommend to install the latest version of React Native.

npm install react-native-paydala-sdk

This will install the library in your project.

Peer Dependecies

There are some dependencies in the library that use native code and hence must be added inside your project so that the proper linking happens.

npm install react-native-permissions react-native-safe-area-context react-native-svg react-native-vector-icons @react-native-async-storage/async-storage @react-native-community/datetimepicker react-native-geolocation-service

Dependecy	Purpose
react-native-permissions	to get permissions to access the geo location of the user
react-native-safe-area-context	to Handle the physical notches in latest devices
react-native-svg	load the image assets used in the library
@react-native-async-storage/async-storage	save the token across sessions
@react-native-community/datetimepicker	to show the native date pickers
react-native-geolocation-service	to access the native geolocation apis

If you are using RN < 0.60 please ensure you are linking the above packages in your project as per their respective instructions.

Note on react-native-permissions You will require only the geolocation permissions when the app is active so you add only the following to your podfile

target 'YourAwesomeProject' do
      pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"

And the following in your info.plist file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>YOUR TEXT</string>
</dict>

Usage

import { PayWithPaydala } from "react-native-paydala";

// ...

export default function YourApp() {
  return (
    <View>
      <PayWithPaydala 
        clientName={'Your company name'} 
        clientId={"Your client id"}
        defaultUser= {{
            name:"userName",
            email:"userEmail",
            phone: "userPhone"
        }}/>
    </View>
  );
}

Props	Description	Values
clientName	The brand name to be used inside the SDK	string
clientId	A unique identifier for your brand as provided by the Paydala team	string
defaultUser	can be used to prefill some form values to improve the user experience	{ name:string, email:string, phone:string }