react-native-paymob-accept

Getting started

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

Mostly automatic installation

$ react-native link react-native-paymob-accept

$ cd ios && pod install

for older versions

Add the below line at the top of your PodFile, if using Pod

use_modular_headers!

Update your PodFile React dependency to look like this

pod 'React', :path => '../node_modules/react-native', :modular_headers => true

pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false

pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false

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-paymob-accept and add RNPaymobAccept.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNPaymobAccept.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.RNPaymobAcceptPackage; to the imports at the top of the file
• Add new RNPaymobAcceptPackage() to the list returned by the getPackages() method

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

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

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

     compile project(':react-native-paymob-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">
 
  <activity android:name="com.paymob.acceptsdk.ThreeDSecureWebViewActivty"
          android:theme="@style/PaymobAcceptTheme"/>

1. add action bar styles to styles.xml

<style name="PaymobAcceptTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <!-- <item name="android:windowNoTitle">true</item> -->
            <item name="android:editTextBackground">@android:color/transparent</item>
            <item name="colorPrimary">#030</item>
            <item name="colorPrimaryDark">#543</item>
            <item name="colorAccent">#909</item>
        </style>

1. (OPTIONAL) You can control the wording anf styles by adding the below resources to your styles.xml or values.xml resources

        <!-- Paymob SDK params-->
        <color name="colorAccent">#CC0bd796</color>
        <color name="colorDefaultButton">#CC0bd796</color>
        <color name="colorHint">#96b1bc</color>
        <color name="colorPrimary">@color/colorPrimaryDark</color>
        <color name="colorPrimaryDark" ns1:ignore="ResourceCycle">@color/colorPrimaryDark</color>
        <color name="colorText">#4F7283</color>
        <dimen name="large_padding_value">20dp</dimen>
        <dimen name="large_text_size">15sp</dimen>
        <dimen name="normal_padding_value">15dp</dimen>
        <dimen name="normal_text_size">14sp</dimen>
        <dimen name="small_padding_value">10dp</dimen>
        <dimen name="tiny_padding_value">5dp</dimen>
        <string name="Card_Number_check"> Card Number must be 16 digits! </string>
        <string name="Cvv_check">CVV must be 3 digits! </string>
        <string name="Date_check">Invalid Date!</string>
        <string name="Empty_name_check">Name can not be empty</string>
        <string name="Expiration"> Expiry Date</string>
        <string name="PoweredBy">Powered by </string>
        <string name="app_id">app_id</string>
        <string name="app_name">AcceptSDK</string>
        <string name="card_holder_name"> Card Holder Name </string>
        <string name="card_info">Card Information</string>
        <string name="card_number"> Card Number</string>
        <string name="cvv"> CVV </string> -->
        <string name="pay_button"> TEST </string>
        <!-- <string name="pref_file_name">shared_pref</string>
        <string name="processing">Processing payment...</string>
        <string name="save_card"> This Card will be saved for future use </string>
        <string name="wait">Please wait...</string> 

Usage

Payment with Token

import RNPaymobAccept from "react-native-paymob-accept";
 
RNPaymobAccept.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 RNPaymobAccept from "react-native-paymob-accept";
 
RNPaymobAccept.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
showSaveCard	show save card checkbox	Boolean	Required
saveCardDefault	default boolean for saving card	Boolean	Required
showAlerts	show popup alerts	Boolean	Required
isEnglish	Language English or Arabic	Boolean
Required
hideActionBar	hide action bar (Android Only)	Boolean	Optional
isEnglish	Language English or Arabic	Boolean	Optional
activityTitle	title for the 3d secure Screen (Android Only)	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
}