Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/just1and0/react-native-paystack-webview
💸💳The package allows you accept payment using paystack and guess what, it doesn't require linking! just install and begin to use 🚀
https://github.com/just1and0/react-native-paystack-webview
archived deprecated mobile obsolete payment payment-gateway payments paystack react-native
Last synced: 6 days ago
JSON representation
💸💳The package allows you accept payment using paystack and guess what, it doesn't require linking! just install and begin to use 🚀
- Host: GitHub
- URL: https://github.com/just1and0/react-native-paystack-webview
- Owner: just1and0
- License: mit
- Created: 2019-08-28T08:59:28.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-24T00:23:30.000Z (6 months ago)
- Last Synced: 2024-05-29T12:37:03.684Z (6 months ago)
- Topics: archived, deprecated, mobile, obsolete, payment, payment-gateway, payments, paystack, react-native
- Language: JavaScript
- Homepage: https://paystack.com
- Size: 499 KB
- Stars: 141
- Watchers: 4
- Forks: 95
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Native Paystack WebView
[](#contributors-)
[](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
The package allows you accept payment using paystack, install, add keys and use. No stress :)
### [](https://github.com/just1and0/React-Native-Paystack-WebView#installation)Installation
Add React-Native-Paystack-WebView to your project by running;
`npm install react-native-paystack-webview`
or
`yarn add react-native-paystack-webview`
### **One more thing**
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!
### [](https://github.com/just1and0/React-Native-Paystack-WebView#usage)Usage 1
```javascript
import React from 'react';
import { Paystack } from 'react-native-paystack-webview';
import { View } from 'react-native';
function Pay() {
return (
{
// handle response here
}}
onSuccess={(res) => {
// handle response here
}}
autoStart={true}
/>
);
}
```
## Usage 2 - Using Refs
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 (
{
// handle response here
}}
onSuccess={(res) => {
// handle response here
}}
ref={paystackWebViewRef}
/>
paystackWebViewRef.current.startTransaction()}>
Pay Now
);
}
```
## API's
#### [](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` |
## [](https://github.com/just1and0/object-to-array-convert#contributions)Contributions
Want to help make this package even more awesome? [Read how to contribute](https://github.com/just1and0/React-Native-Paystack-WebView/blob/master/CONTRIBUTING.md) and feel free to send in your PR!
## [](https://github.com/just1and0/React-Native-Paystack-WebView#licensing)Licensing
This project is licensed under MIT license.
## Related Projects
- [React-Native-quidpay-WebView](https://github.com/react-native-nigeria/react-native-quidpay-webview)
- [React-Native-rave-WebView](https://github.com/react-native-nigeria/react-native-rave-webview)
### Video Tutorial
- [Accepting Payment With Paystack In React Native](https://www.youtube.com/watch?v=M-V4Q9zk9DE&t=19s) by [just1and0](https://twitter.com/just1and0)
### Don't forget to star, like and share :)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Oluwatobi Shokunbi
💻 📖
Akinyemi Mosolasi
📖 💻
okechukwu0127
💻
Johney
💻
sammy
💻
Jimoh Jamiu
🐛 📖 💻
Cahak George
💻
John Ayeni
📖
majirieyowel
💻
David Erinayo Obidu
🐛
surafelbm
🐛
Rex Omiv
🐛
Osagie Osaigbovo Charles
🐛
Ujjalcha1
🐛
Oyefeso Oluwatunmise
🐛
Fuad Olatunji
📖
Wilhelm Erasmus
💻
Matiluko Opeyemi Emmanuel
💻
Oluwamurewa Alao
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
# Roadmap
we have a lot to get done before we hit stable, here's a list;
- Make the reference usage more user friendly
- Since you want it to conform to InlineJS, let the variable names also match
- Let the parameter types also conform to InlineJS parameter types
- Paystack is a word, hence when used as a package name/class name, let it use PascalCase (Paystack) and when used as a variable, camelCase (paystack)