for Android & iOS by Arttitude 360
This React Native module provides a wrapper to add Paystack Payments to your React Native application using the Paystack Android Mobile SDK and the Paystack iOS Mobile SDK libraries. If interested, there is a Sample App.
PS: If you are using this library in production, please give the repo a star - I am not being vain and have no interest in the vanity metric, just trying to figure out if it is still worth the time or effort spent supporting the library. Cheers!
You can pull in react-native-paystack via npm:
npm install react-native-paystack --save
OR
yarn add react-native-paystack
- For
RN >=0.40
only; - Breaking Change Alert for v3.2.0+. Looking for the docs for the 3.1.* version of this library? Check here!
react-native link react-native-paystack
- (iOS only): The next steps are only applicable to setting up for iOS.
- If you do not have CocoaPods already installed on your machine, run
gem install cocoapods
to set it up the first time. (Hint: Go grab a cup of coffee!) - If you are not using Cocoapods in your project already, run
cd ios && pod init
at the root directory of your project. Otherwise, jump to next step. - Add
pod 'Paystack'
to your Podfile. Otherwise just edit your Podfile to include:
source 'https://github.com/CocoaPods/Specs.git'
target 'YOUR_APP_TARGET_NAME' do
pod 'Paystack'
end
- Run
pod install
while still in the/ios
directory of your project. - Exit Xcode if you had it running prior to setting up CocoaPods and only open your project with the
yourprojectname.xcworkspace
file in Xcode subsequently and throughout the lifespan of your project.
- Download a fresh copy of the
Paystack iOS framework
from their releases page on Github. - Extract
Paystack.framework
from the downloaded zip. - In XCode's "Project navigator", right click on project name folder ➜
Add Files to <Your-Project-Name>
. EnsureCopy items if needed
andCreate groups
are checked and select your copy ofPaystack.framework
. - Your files tree in XCode should look similar to the screenshot below:
- Always trust/use the most recent
Paystack.framework
obtained from the releases page on Github over the version shipped with the library.
- If you are working with XCode 8+, to allow encryptions work properly with the Paystack SDK, you may need to enable
Keychain Sharing
for your app. In the Capabilities pane, if Keychain Sharing isn’t enabled, toggle ON the switch in the Keychain Sharing section.
- The following steps are optional, should be taken if you have not run
react-native link react-native-paystack
already. - In XCode's "Project navigator", right click on project name folder ➜
Add Files to <...>
. EnsureCopy items if needed
andCreate groups
are checked - Go to
node_modules
➜react-native-paystack/ios
➜ addRNPaystack.xcodeproj
. - Click on your main project file (the one that represents the .xcodeproj for your project) select
Build Phases
and drag the static library,libRNPaystack.a
from theProducts
folder insideRNPaystack.xcodeproj
toLink Binary With Libraries
. See the react-native docs for more details.
- The following steps are optional, should be taken if you have not run
react-native link react-native-paystack
already. - Add the following in your
android/settings.gradle
file:
include ':react-native-paystack'
project(':react-native-paystack').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-paystack/android')
- Add the following in your
android/app/build.grade
file:
dependencies {
...
compile project(':react-native-paystack')
}
- Add the following in your
...MainApplication.java
file:
import com.arttitude360.reactnative.rnpaystack.RNPaystackPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
...
new RNPaystackPackage() //<-- Add line
);
}
- Update Gradle plugin to v3.0.0+ for your app, follow the following steps if you are not sure how:
- Edit your
~ android/build.gradle
to look similar to build.gradle - Edit your
~ android/gradle/wrapper/gradle-wrapper.properties
to look similar to gradle-wrapper.properties
- Edit your
- To avoid build issues, enable
Aapt2
for your project by addingandroid.enableAapt2=true
to yourandroid/gradle.properties
file. - If you are using RN with a version lower than 0.57.0, it is important you replace your
node-modules/react-native/react.gradle
file with this version @ commit da6a5e0 to avoid further build issues when assembling a release version of your app.
Somewhere high up in your project and way before calling any other method exposed by this library, your index
file or equivalent is a good spot, ensure you initialize the library with your public key
as follos:
import RNPaystack from 'react-native-paystack';
RNPaystack.init({ publicKey: 'YOUR_PUBLIC_KEY_HERE' });
It's a cinch to charge a card token using the react-native-paystack module. This is the recommended or the most-preferred workflow favored by the folks at Paystack. Initiate a new transaction on your server side using the appropriate Paystack endpoint - obtain an access_code
and complete the charge on your mobile application. Pls note, the SDK assumes you are responsible for building the card form/UI.
RNPaystack.chargeCardWithAccessCode(cardParams);
To be more elaborate, cardParams
is a Javascript Object
representing the card to be charged and RNPaystack.chargeCardWithAccessCode()
returns a Javascript Promise
like:
import RNPaystack from 'react-native-paystack';
chargeCard() {
RNPaystack.chargeCardWithAccessCode({
cardNumber: '4123450131001381',
expiryMonth: '10',
expiryYear: '17',
cvc: '883',
accessCode: '2p3j42th639duy4'
})
.then(response => {
console.log(response); // do stuff with the token
})
.catch(error => {
console.log(error); // error is a javascript Error object
console.log(error.message);
console.log(error.code);
})
}
Argument | Type | Description |
---|---|---|
cardNumber | string | the card number as a String without any seperator e.g 5555555555554444 |
expiryMonth | string | the card expiry month as a double-digit ranging from 1-12 e.g 10 (October) |
expiryYear | string | the card expiry year as a double-digit e.g 15 |
cvc | string | the card 3/4 digit security code as a String e.g 123 |
accessCode | string | the access_code obtained for the charge |
An object of the form is returned from a successful token request
{
reference: "trx_1k2o600w"
}
Using the react-native-paystack module, you can start and complete a transaction with the mobile Paystack Android and iOS SDKs. With this option, you pass both your charge and card properties to the SDK - with this worklow, you initiate and complete a transaction on your mobile app. Note that as with charging with an access_code, the SDK assumes you are responsible for building the card form/UI.
RNPaystack.chargeCard(chargeParams);
To be more elaborate, chargeParams
is a Javascript Object
representing the parameters of the charge to be initiated and RNPaystack.chargeCard()
returns a Javascript Promise
like:
import RNPaystack from 'react-native-paystack';
chargeCard() {
RNPaystack.chargeCard({
cardNumber: '4123450131001381',
expiryMonth: '10',
expiryYear: '17',
cvc: '883',
email: 'chargeIOS@master.dev',
amountInKobo: 150000,
subAccount: 'ACCT_pz61jjjsslnx1d9',
})
.then(response => {
console.log(response); // card charged successfully, get reference here
})
.catch(error => {
console.log(error); // error is a javascript Error object
console.log(error.message);
console.log(error.code);
})
}
Argument | Type | Description |
---|---|---|
cardNumber | string | the card number as a String without any seperator e.g 5555555555554444 |
expiryMonth | string | the card expiry month as a double-digit ranging from 1-12 e.g 10 (October) |
expiryYear | string | the card expiry year as a double-digit e.g 15 |
cvc | string | the card 3/4 digit security code as e.g 123 |
string | email of the user to be charged | |
amountInKobo | integer | the transaction amount in kobo |
currency (optional) | string | sets the currency for the transaction e.g. USD |
plan (optional) | string | sets the plan ID if the transaction is to create a subscription e.g. PLN_n0p196bg73y4jcx |
subAccount (optional) | string | sets the subaccount ID for split-payment transactions e.g. ACCT_pz61jjjsslnx1d9 |
transactionCharge (optional) | integer | the amount to be charged on a split-payment, use only when subAccount is set |
bearer (optional) | string | sets which party bears paystack fees on a split-payment e.g. 'subaccount', use only when subAccount is set |
reference (optional) | string | sets the transaction reference which must be unique per transaction |
An object of the form is returned from a successful charge
{
reference: "trx_1k2o600w"
}
Verify a charge by calling Paystack's REST API with the reference
obtained above. An authorization_code
will be returned once the card has been charged successfully. Learn more about that here.
Parameter:
- reference - the transaction reference (required)
Example
$ curl https://api.paystack.co/transaction/verify/trx_1k2o600w \
-H "Authorization: Bearer SECRET_KEY" \
-H "Content-Type: application/json" \
-X GET
Perhaps needless to say, this module leverages the Paystack Android SDK and the Paystack IOS SDK for all the heavy liftings.
- 1.0.12: Initial version supporting Android.
- 1.1.1: Android library upgrade and initial iOS support.
- 2.0.0: A couple of breaking changes have been introduced, see [Old Docs](./Old Docs.md) for previous documentations.
- 2.0.0: Upgraded to v2.0 of the Paystack Android SDK.
- 2.0.0: Unified APIs across both platforms (iOS & Android).
- 2.0.0: Methods now return Javascript Promises on both platforms.
- 2.1.1: Upgraded to v2.1+ of both the Paystack iOS and Android SDKs.
- 2.1.1: Added support for
chargeCard
on both platforms. - 2.1.1: Added support for
subscriptions
andsplit-payments
. - 3.1.0: Retired support for
getToken
on both platforms. - 3.1.0: Added support for
chargeCardWithAccessCode
on both platforms. - 3.1.0: Upgraded to v3.*+ of both the Paystack iOS and Android SDKs.
- 3.1.1: Fix for breaking change in RN v0.47+
- 3.1.4: Miscellaneous and dependencies update on Android.
- 3.2.0: A Breaking Change - Initialize library in JS, rather than in native code.
- 3.3.0: Move to a CocoaPods Flow for iOS.
This should be The MIT License (MIT). I would have to get back to you on that!