react-native-we-accept

Getting started

$ npm install react-native-we-accept --save

Mostly automatic installation

$ react-native link react-native-we-accept

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-we-accept and add RNWeAccept.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNWeAccept.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.breadfast.reactnative.RNWeAcceptPackage; to the imports at the top of the file
• Add new RNWeAcceptPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-we-accept'
   project(':react-native-we-accept').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-we-accept/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-we-accept')

4. add repository as below

   allprojects {
   	repositories {
   		google()
   		...
   		maven { url "https://dl.bintray.com/paymobsolutions/paymob_accept_sdk" }
   	}
   }

5. Add to your AndroidManifest.xml

xmlns:tools="http://schemas.android.com/tools"

and

android:allowBackup="false"
android:supportsRtl="true"
tools:replace="android:supportsRtl, android:allowBackup"

to look like this

<manifest
...
xmlns:tools="http://schemas.android.com/tools">

<application
    ...
    android:allowBackup="false"
    android:supportsRtl="true"
    tools:replace="android:supportsRtl, android:allowBackup">

6. add action bar styles to styles.xml (replace AppTheme if exist)

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>

Usage

Payment with Token

import WeAccept from "react-native-we-accept";

WeAccept.payWithToken({
  token: "12345",
  maskedPanNumber: "XXXXXXXXXXXXXX1234",
  firstName: "first_name",
  lastName: "last_name",
  building: "building",
  floor: "floor",
  apartment: "apartment",
  city: "city",
  state: "state",
  country: "country",
  email: "email",
  phoneNumber: "phoneNumber",
  postalCode: "postalCode",
});

| Prop | Description | Type | Default | | --------------------- | ------------------------------ | ------ | ------------ | | paymentKey | Generated one-time payment key | String | Required | | token | user token | String | Required | | maskedPanNumber | last four digits | String | Required | | activityTitle | title for the 3d secure Screen | String | Optional | | firstName | TODO | String | Optional | | lastName | TODO | String | Optional | | building | TODO | String | Optional | | floor | TODO | String | Optional | | apartment | TODO | String | Optional | | city | TODO | String | Optional | | state | TODO | String | Optional | | country | TODO | String | Optional | | email | TODO | String | Optional | | phoneNumber | TODO | String | Optional | | postalCode | TODO | String | Optional |

Payment with No Token

import WeAccept from "react-native-we-accept";

WeAccept.payWithNoToken({
  showSaveCard: false,
  firstName: "first_name",
  lastName: "last_name",
  building: "building",
  floor: "floor",
  apartment: "apartment",
  city: "city",
  state: "state",
  country: "country",
  email: "email",
  phoneNumber: "phoneNumber",
  postalCode: "postalCode",
});

| Prop | Description | Type | Default | | --------------------- | ------------------------------- | ------- | ------------ | | paymentKey | Generated one-time payment key | String | Required | | showSavedCard | show save card checkbox | Boolean | Required | | saveCardDefault | default boolean for saving card | Boolean | Required | | activityTitle | title for the 3d secure Screen | String | Optional | | firstName | TODO | String | Optional | | lastName | TODO | String | Optional | | building | TODO | String | Optional | | floor | TODO | String | Optional | | apartment | TODO | String | Optional | | city | TODO | String | Optional | | state | TODO | String | Optional | | country | TODO | String | Optional | | email | TODO | String | Optional | | phoneNumber | TODO | String | Optional | | postalCode | TODO | String | Optional |

Callbacks functions

onSuccess function

| Prop | Description | Type | Default | | ------------- | --------------------------------------------------------------------- | ------- | ------------ | | status | boolean to determine whether transaction was done successfully or not | Boolean | Optional | | code | result code generated by SDK | String | Optional | | message | error message mapped from result code | String | Optional |

(status: boolean, code: number, message)=>{
  ... add your success code block here
}