0.0.1 • Published 4 years ago

@breadfast/react-native-we-accept v0.0.1

Weekly downloads
1
License
MIT
Repository
-
Last release
4 years ago

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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-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 PhasesLink 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
  1. 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')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-we-accept')
  3. add repository as below
    allprojects {
    	repositories {
    		google()
    		...
    		maven { url "https://dl.bintray.com/paymobsolutions/paymob_accept_sdk" }
    	}
    }
  4. 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">
  1. 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",
});
PropDescriptionTypeDefault
paymentKeyGenerated one-time payment keyStringRequired
tokenuser tokenStringRequired
maskedPanNumberlast four digitsStringRequired
activityTitletitle for the 3d secure ScreenStringOptional
firstNameTODOStringOptional
lastNameTODOStringOptional
buildingTODOStringOptional
floorTODOStringOptional
apartmentTODOStringOptional
cityTODOStringOptional
stateTODOStringOptional
countryTODOStringOptional
emailTODOStringOptional
phoneNumberTODOStringOptional
postalCodeTODOStringOptional

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",
});
PropDescriptionTypeDefault
paymentKeyGenerated one-time payment keyStringRequired
showSavedCardshow save card checkboxBooleanRequired
saveCardDefaultdefault boolean for saving cardBooleanRequired
activityTitletitle for the 3d secure ScreenStringOptional
firstNameTODOStringOptional
lastNameTODOStringOptional
buildingTODOStringOptional
floorTODOStringOptional
apartmentTODOStringOptional
cityTODOStringOptional
stateTODOStringOptional
countryTODOStringOptional
emailTODOStringOptional
phoneNumberTODOStringOptional
postalCodeTODOStringOptional

Callbacks functions

onSuccess function

PropDescriptionTypeDefault
statusboolean to determine whether transaction was done successfully or notBooleanOptional
coderesult code generated by SDKStringOptional
messageerror message mapped from result codeStringOptional
(status: boolean, code: number, message)=>{
  ... add your success code block here
}