This package lets you accept payments with Paystack in a snap! Just install, add your keys, and youβre good to goβno headaches here! Plus, itβs officially endorsed by Paystack, so you know youβre in good hands. Payment processing has never been this easy!
Add react-native-paystack-webview
to your project by running;
npm install react-native-paystack-webview
or
yarn add react-native-paystack-webview
To ensure everything works smoothly, install and configure the required dependency, react-native-webview
:
yarn add react-native-webview
for iOS:
cd iOS && pod install && cd ..
for expo applications run;
npx expo install react-native-webview
Thatβs it! Youβre all set.
import React from 'react';
import { Paystack } from 'react-native-paystack-webview';
import { View } from 'react-native';
function Pay() {
return (
<View style={{ flex: 1 }}>
<Paystack
paystackKey="your-public-key-here"
amount={'25000.00'}
billingEmail="[email protected]"
activityIndicatorColor="green"
onCancel={(e) => {
// handle response here
}}
onSuccess={(res) => {
// handle response here
}}
autoStart={true}
/>
</View>
);
}
You can also use a ref
to start a transaction. Hereβs how:
import React, { useRef } from 'react';
import { Paystack , paystackProps} from 'react-native-paystack-webview';
import { View, TouchableOpacity,Text } from 'react-native';
function Pay(){
const paystackWebViewRef = useRef<paystackProps.PayStackRef>();
return (
<View style={{flex: 1}}>
<Paystack
paystackKey="your-public-key-here"
billingEmail="[email protected]"
amount={'25000.00'}
onCancel={(e) => {
// handle response here
}}
onSuccess={(res) => {
// handle response here
}}
ref={paystackWebViewRef}
/>
<TouchableOpacity onPress={()=> paystackWebViewRef.current.startTransaction()}>
<Text>Pay Now</Text>
</TouchableOpacity>
</View>
);
}
Name | use/description | extra |
---|---|---|
paystackKey |
Public or Private paystack key(visit paystack.com to get yours) | nill |
amount |
Amount to be paid | nill |
activityIndicatorColor |
color of loader | default: green |
billingEmail(required by paystack) |
Billers email | default: nill |
billingMobile |
Billers mobile | default: nill |
billingName |
Billers Name | default: nill |
subaccount |
Specify subaccount code generated from the Paystack Dashboard or API to enable Split Payment on the transaction. Here's an example of usage: subaccount: "SUB_ACCOUNTCODE" |
default: nill |
split_code |
Specify split_code generated from the Paystack Dashboard under Transaction Splits menu or API to enable Multi-Split Payment on the transaction. According to Paystack's documentation available here, Multi-split enables merchants to split the settlement for a transaction across their payout account, and one or more subaccounts. Here's an example of usage: split_code: "SPL_xxxxxxx" |
default: nill |
split |
Specify split object to enable Dynamic Multi-Split Payment on the transaction. According to Paystack's documentation available here, Sometimes, you can't determine a split configuration until later in the purchase flow. With dynamic splits, you can create splits on the fly. The Structure is defined in the Dynamic Multi-Split Structure below | default: nill |
channels |
Specify payment options available to users. Available channel options are: ["card", "bank", "ussd", "qr", "mobile_money"]. Here's an example of usage: channels={["card","ussd"]} |
default: ["card"] |
onCancel |
callback function if user cancels or payment transaction could not be verified. In a case of not being verified, transactionRef number is also returned in the callback | default: nill |
onSuccess |
callback function if transaction was successful and verified (it will also return the transactionRef number in the callback ) | default: nill |
autoStart |
Auto start payment once page is opened | default: false |
refNumber |
Reference number, if you have already generated one | default: ''+Math.floor((Math.random() * 1000000000) + 1) |
handleWebViewMessage |
Will be called when a WebView receives a message | default: true |
Name | use/description | required? |
---|---|---|
type |
Dynamic Multi-Split type. Value can be flat or percentage |
YES |
bearer_type |
Defines who bears the charges. Value can be all , all-proportional , account or subaccount |
YES |
subaccounts |
An array of subaccount object as defined below. e.g. {"subaccount": 'ACCT_xxxxxx', "share": 60} | YES |
bearer_subaccount |
Subaccount code of the bearerof the transaction. It should be specified if bearer_type is subaccount |
NO |
reference |
Unique reference of the split. Can be defined by the user | NO |
Name | use/description | required? |
---|---|---|
subaccount |
Specify subaccount code generated from the Paystack Dashboard or API to enable Split Payment on the transaction. Here's an example of usage: subaccount: "SUB_ACCOUNTCODE" |
YES |
share |
Defines the amount in percentage (integer) or value (decimal allowed) depending on the type of multi-split defined |
YES |
Want to help improve this package? Read how to contribute and feel free to submit your PR!
This project is licensed under the MIT License.
- Star the project on Github
- Buy me a coffee
A huge shoutout to our amazing contributors! Your efforts make this project better every day. Check out the (emoji key) for what each contribution means:
This project follows the all-contributors specification. Contributions of any kind welcome!