This package allows you to accept payment in your react native project using paystack
The package allows you accept payment using paystack, install, add keys and use. No stress :)
Add React-Native-Paystack-WebView to your project by running;
npm install react-native-paystack-webview
or
yarn add react-native-paystack-webview
To frontload the installation work, let's also install and configure dependencies used by this project, being react-native-webview
run
yarn add react-native-webview
for iOS: cd iOS && pod install && cd ..
for expo applications run;
expo install react-native-webview
and that's it, you're all good to go!

``javascript
import React from 'react';
import { Paystack } from 'react-native-paystack-webview';
import { View } from 'react-native';
function Pay() {
return (
amount={'25000.00'}
billingEmail="paystackwebview@something.com"
activityIndicatorColor="green"
onCancel={(e) => {
// handle response here
}}
onSuccess={(res) => {
// handle response here
}}
autoStart={true}
/>
);
}
`
Make use of a ref to start transaction. See example below;
`javascript
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
return (
billingEmail="paystackwebview@something.com"
amount={'25000.00'}
onCancel={(e) => {
// handle response here
}}
onSuccess={(res) => {
// handle response here
}}
ref={paystackWebViewRef}
/>
);
}
`
#### [](https://github.com/just1and0/object-to-array-convert#all-object-to-array-convert-props)all React-Native-Paystack-WebView API
| 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 |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` |
Want to help make this package even more awesome? Read how to contribute and feel free to send in your PR!
This project is licensed under MIT license.
- React-Native-quidpay-WebView
- React-Native-rave-WebView
- Accepting Payment With Paystack In React Native by just1and0
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!