Aauti Payment Gateway

Groovy TechnoWeb Pvt. Ltd.

• It is for both the platforms iOS and Android

Installation

npm install react-native-aauti-pay yarn add react-native-aauti-pay

Manual installation

You need to manually installed below plugins.

• react-native-paper
• react-native-inappbrowser-reborn
• react-native-reanimated
• react-native-google-pay
• @stripe/stripe-react-native

Enable Android Pay in your Manifest

To enable Google Pay in your app, you need to add the following Google Pay API meta-data element to the <application> element of your project's AndroidManifest.xml file.

<meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />

Please go through once with react-native-inappbrowser-reborn documentation

Append the following lines to your ProGuard config (proguard-rules.pro)

-keepattributes Annotation -keepclassmembers class *_ { @org.greenrobot.eventbus.Subscribe ; } -keep enum org.greenrobot.eventbus.ThreadMode { _; }

Authentication Flow using Deep Linking

For Deep linking integration you can checkout Deep Linking documentation

In order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this, add below code to your AndroidManifest file.

• Enable deep linking (Android) - AndroidManifest.xml

<activity
  ...
  android:launchMode="singleTask">
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="intent" android:host="aauti-pay" />
  </intent-filter>
</activity>

• Enable deep linking (iOS) - Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>intent</string>
    </array>
  </dict>
</array>

Usage

# Import this line
import PaymentAggregator from “react-native-aauti-pay”;

# Pass data in an object like this
# All parameters must be same as below and its mandatory
const [change, setChange] = useState(""); // this state is for passing the value via webhook
const pay_data = {
	"name": ‘Name of the payer',
	"email": Email of the payer,
	"amount": Amount to be paid in Number,
	"country_code": Two digit country code,
	"app_token": 'unique application token',
	"currency": "currency short code", // INR, USD, AUD, CAD, GBP, etc.
	"transaction_code": "unique transaction id for payment",
};


# Usage of the plugin
 <PaymentAggregator
          paymentData={pay_data}
		  onButtonClick={() => {
			// here is your main button click in this you do for opening a payment modal bu passing open in injectedMessage
		  }}
          onPaymentDone={() => {
			// Code here it will give you a response when payment is completed
          }}
          injectedMessage={change} // this prop is also for closing the modal and it is compulsory
          onModalClose={() => {}} // this prop is also for closing the modal
          PaymentType = "", //require => one_time, subscription
        />

# It must be mandatory to pass "open" message in injectedMessage for opening the modal
# It must be mandatory to pass "close" message in injectedMessage for closing the modal

Parameters you can use in this is below:

For close icons we have to use react-native-vector-icons/AntDesign only.

| Param Name | Type | Default Value | Required | Description | | ------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | PaymentType | String | '' | Yes | For Payment Type for ex: one_time => one time payment, subscription => for subscription plan | | paymentData | Object | { name: ‘Name of the payer', email: Email of the payer, amount: Amount to be paid, country_code: country code, app_token: 'unique app token', currency: "short code of your currency", transactionId: "Unique transaction id for payment", mode: "live or test"} | Yes | Pass data in this format for payment process | | appCharges | Array | [] | No | Pass the app charges in array with changes. You'll get default app array in aauti portal. | | onPaymentDone | Function | () => {} | Yes | When you done payment this function will trigger and you get response back in this function. | | modalContainerStyles | Object | {} | No | Modal container styles | | merchantIdentifier | String | 'merchant.com.app.saayampayment' | Yes | Enable Apple Pay for your app ApplePay Guide & pass merchant ID in this param. It is required to enable Apple Pay. | | pluginURL | String | 'staging' | No | Pass slug according to your server (staging, dev, prodapi) | | noCharge | Boolean | false | No | if this is true no appCharges will be applied | | injectedMessage | String | Empty string | Yes | it is for closing the modal via webhook calls | | onModalClose | Function | () => {} | No | Closing the modal when state changes | | buttonTitle | String | Aauti Pay | No | Button Title | | onButtonClick | Function | () => {} | Yes | If you want to something to be happen on this button click | | buttonTextStyle | Object | {} | No | Button text styles | | mainButtonContainerStyle | Object | {} | No | Main Button container styles | | loaderColor | String | white | No | Loader color | | loader | Boolean | false | No | Main button loader | | isGradientButton | Boolean | false | No | If you want gradient or multicolor button than you have to pass true | | linearColorsName | Array | [ "red", "pink" ] | No | If you have enable isGradientButton and you want to change colors than you have to pass particular color name default is red. Like [ "red", "pink" ] | | changeBtnText | String | Pay | No | Button Title before the amount in payment button | | startPosition | Object | { x: 0, y: 0.5 } | No | Start position | | endPosition | Object | { x: 1, y: 0.5 } | No | End position | | themeColor | String | '#F5F9FF' | No | Theme color for whole plugin (Note:- Please add light color of your App theme color) |