Accept Paystack Payments in React Native Apps.
A super simple and lightweight react-native package for accepting payments using paystack. Doesn't require any form of linking, just install and start using.
Installation
Add React-Native-Paystack-Popup to your project by running:
npm install react-native-paystack-popup
or
yarn add react-native-paystack-popup
Dependency
This package is dependent on react-native-webview. Install the dependency by running the following command on your terminal:
yarn add react-native-webview
or
npm install react-native-webview
DEMO
Usage Example
import React useRef from 'react'; import View Button from 'react-native'; import PaystackWebView from 'react-native-paystack-popup'; const App = const ref = ; const showPayment setShowPayment = React; return <View => !showPayment && <Button = ="Checkout" /> showPayment && <PaystackWebView = = = = = = = = /> </View> ; ;
CONFIGURATION
Property | Required | Description |
---|---|---|
paystackKey | Yes | Paystack Public Key |
customerEmail | Yes | Customer email address |
amount | Yes | Amount (in the lowest currency value - kobo, pesewas or cent) |
currency | No | Currency charge should be performed in. It defaults to NGN |
label | No | String that replaces customer email as shown on the checkout form |
metadata | No | Object containing any extra information you want recorded with the transaction. Fields within the custom_field object will show up on customer receipt and within the transaction information on the Paystack Dashboard. |
channels | No | An array of payment channels to control what channels you want to make available to the user to make a payment with. Available channels include; ['card', 'bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer'] |
transactionRef | No | 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. |
onError | No | Error callback function - failed loading paystack |
onDismissed | No | Callback function for when user dismisses / cancels the payment |
onSuccess | No | Callback function with a response parameter when payment was successfully completed. |
indicatorColor | No | Color name for the default loading indicator |
renderIndicator | No | Override this function and return a component to change the default loading indicator |
Maintenance
This project is actively maintained by the following developers:
Example App
For more information and usage guidelines, check the Examples App.
If you encounter any problem using this library, open a new issue
Contribution
If you want to make contribution to this library:
- Fork this project.
- Each new feature must be a new PR.
- Explain exactly what your PR is suppose to do.
Your PR will reviewed and merged!