A React native library for integrating paystack directly into react-native apps without popup or webview. Using this library lift the burden of PCI compliance by helping you send credit cards directly to paystack servers. This library embodied's processing, validating and verifying payment transactions.
$ npm install react-native-paystack-payment --save
Users on React Native 0.60+ automatically have access to "autolinking", requiring no further manual installation steps. To automatically link the package, rebuild your project
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.paystacknative.RNPaystackPaymentPackage;
to the imports at the top of the file - Add
new RNPaystackPaymentPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-paystack-payment' project(':react-native-paystack-payment').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-paystack-payment/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-paystack-payment')
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-paystack-payment
and addRNPaystackPayment.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNPaystackPayment.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
To allow Paystack to use the credentials, the paystackServices file must be added to the project. This requires modification to app.json in the Project directory.
- Create a
paystackServices.json
file and add the following
{
"public_key":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"secret_key":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
}
In subsiquent update feature like logo, organisation name etc will be added to this file.
- Open
app.json
file and add the following
{
"name": "paystacknative",
"displayName": "paystacknative",
"paystackServices":"paystackconfig.json" // path to `paystackServices.json` file
}
Now you can go ahead and build your app.
Note: paystackServices
is a key and must match what is in your app.json
file. If any of this requirement is not fufiled or file not found app will throw error during build
import RNPaystackPayment from 'react-native-paystack-payment'
const App = () => {
return (
<View>
< RNPaystackPayment
email='[email protected]'
amount={1000}
onError={(error)=>{
console.log(error) // Developer related error
}}
onSuccess={(data)=>{
console.log(data) // Datas after payment verification from paysatck
}}
/>
</View>
);
};
...
Integration with Expo is possible in both bare workflow and custom managed workflow. React Native Paystack Payment cannot be used in the "Expo Go" app, because it requires custom native code. However installation on expo is pretty much the same as on bare React Native app and it quite faster. I assume you already have a the paystackServices.json
file ready if not check above to get it. we are still linking this file to app.json
, Place the paystack config path as bellow
...
"web": {
"favicon": "./assets/favicon.png"
}
},
"paystackServices": "paystackconfig.json"
Then rebuild your app using expo run:android
.
Note:
- During build this library will be installing the reuired dependency for this project ensure you have an internet connection
- Ensure the
app.json
file is close during build to avoid access error, as it will be required by the build script.
Oh! wait is that it, yes oooo! :)
Property | Required | Type | Description |
---|---|---|---|
true | String | Email address of customer | |
amount | true | Integer | Amount you are debiting customer. |
reference | Optional | String | Unique case sensitive transaction reference. Only -,., =and alphanumeric characters allowed. If you do not pass this parameter, Paystack will generate a unique reference for you. |
currency | Optional | String | Currency charge should be performed in. Allowed values are: NGN, GHS, ZAR or USD It defaults to your integration currency. |
subaccount | Optional | String | The code for the subaccount that owns the payment. e.g. ACCT_8f4s1eq7ml6rlzj |
transaction_charge | Optional | Integer | A flat fee to charge the subaccount for this transaction (in kobo, pesewas or cents). This overrides the split percentage set when the subaccount was created. Ideally, you will need to use this if you are splitting in flat rates (since subaccount creation only allows for percentage split). |
bearer | Optional | String | Decide who will bear Paystack transaction charges between account and subaccount. Defaults to account. |
onError | Optional | Function | Javascript function that is called if error from developer script is encountered like invalid secret key etc. This function return error as object |
onSuccess | Optional | Function | Function that runs when payment is successful. This should ideally be a script that accept props after plugin query Paystack verification API to check the status of the transaction.This function return data as object |
{"data": {"amount": 100000, "authorization": {"account_name": null, "authorization_code": "AUTH_80rp9154te", "bank": "TEST BANK", "bin": "408408", "brand": "visa", "card_type": "visa ", "channel": "card", "country_code": "NG", "exp_month": "12", "exp_year": "2022", "last4": "4081", "reusable": true, "signature": "SIG_AddUcji3MexpHUi90yXN"}, "channel": "card", "createdAt": "2021-12-24T12:18:58.000Z", "created_at": "2021-12-24T12:18:58.000Z", "currency": "NGN", "customer": {"customer_code": "CUS_guap9c5lutdhn97", "email": "[email protected]", "first_name": null, "id": 65139299, "international_format_phone": null, "last_name": null, "metadata": null, "phone": null, "risk_action": "default"}, "domain": "test", "fees": 1500, "fees_breakdown": null, "fees_split": null, "gateway_response": "Approved", "id": 1525072096, "ip_address": null, "log": null, "message": null, "metadata": 0, "order_id": null, "paidAt": "2021-12-24T12:18:58.000Z", "paid_at": "2021-12-24T12:18:58.000Z", "plan": null, "plan_object": {}, "pos_transaction_data": null, "reference": "trx_xoli2yoa", "requested_amount": null, "source": null, "split": {}, "status": "success", "subaccount": {}, "transaction_date": "2021-12-24T12:18:58.000Z"}, "message": "Verification successful", "status": true}
Visit Paystack to get test cards for transaction, this library support all cards listed on paystack website
If this project help you reduce time to develop, you can give this project a star :)
MIT |