react-native-we-accept

##[NOTE] iOS is still under development! will be published soon!

Getting started

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

Mostly automatic installation

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

Manual installation

iOS

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

Android

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

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

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  compile project(':react-native-we-accept')
```

add repository as below

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

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">

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",
}, successCallback: function, errorCallback: function);

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",
}, successCallback: function, errorCallback: function);

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: string, token?: string)=>{
  ... add your success code block here
}