The package allows you accept payment using paystack and guess what , it doesn't require any form of linking, just install and begin to use .
Our release cycle is independent of react-native. We follow semver and here is the compatibility table:
@react-native-paystack-webview |
react-native |
|---|---|
| ^2.0 | ^0.59 |
| ^3 | ^0.60 |
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!
import PaystackWebView from 'react-native-paystack-webview';
import React, {Component} from 'react';
import {View} from 'react-native';
class MyApp extends Component {
render() {
return (
<View style={{flex: 1}}>
<PaystackWebView
buttonText="Pay Now"
showPayButton={false}
paystackKey="your-public-key-here"
paystackSecretKey="your-secret-key-here"
amount={120000}
billingEmail="[email protected]"
billingMobile="09787377462"
billingName="Oluwatobi Shokunbi"
ActivityIndicatorColor="green"
SafeAreaViewContainer={{marginTop: 5}}
SafeAreaViewContainerModal={{marginTop: 5}}
onCancel={(e) => {
// handle response here
}}
onSuccess={(e) => {
// handle response here
}}
autoStart={false}
/>
</View>
);
}
}import PaystackWebView from 'react-native-paystack-webview';
import React, {Component} from 'react';
import {View} from 'react-native';
class MyApp extends Component {
render() {
return (
<View style={{flex: 1}}>
<PaystackWebView
buttonText="Pay Now"
showPayButton={false}
paystackKey="your-public-key-here"
paystackSecretKey="your-secret-key-here"
amount={120000}
billingEmail="[email protected]"
billingMobile="09787377462"
billingName="Oluwatobi Shokunbi"
ActivityIndicatorColor="green"
SafeAreaViewContainer={{marginTop: 5}}
SafeAreaViewContainerModal={{marginTop: 5}}
handleWebViewMessage={(e) => {
// handle the message
}}
onCancel={(e) => {
// handle response here
}}
onSuccess={(e) => {
// handle response here
}}
autoStart={false}
refNumber={uuid()} // this is only for cases where you have a reference number generated
renderButton=((onPress) => {
<Button onPress={onPress}>
Pay Now
<Button>
})
/>
</View>
);
}
}make use of ref's to start transaction. See example below;
import React, {useRef} from 'react';
import {View, TouchableOpacity,Text} from 'react-native';
function Pay(){
const childRef = useRef();
return(
<View style={{flex: 1}}>
<PaystackWebView
showPayButton={false}
paystackKey="your-public-key-here"
paystackSecretKey="your-secret-key-here"
amount={120000}
billingEmail="[email protected]"
billingMobile="09787377462"
billingName="Oluwatobi Shokunbi"
ActivityIndicatorColor="green"
SafeAreaViewContainer={{marginTop: 5}}
SafeAreaViewContainerModal={{marginTop: 5}}
onCancel={(e) => { // handle response here }}
onSuccess={(e) => { // handle response here }}
ref={childRef}
/>
<TouchableOpacity onPress={()=> childRef.current.StartTransaction()}>
<Text>pay now</Text>
<TouchableOpacity/>
</View>
)
}Once billing of card is successful, you'll get an object data in the success callback. The call back will contain cardDetails , this object contains basic details about the card you just billed, save this to your backend.
import React, {useRef} from 'react';
import {View, TouchableOpacity,Text} from 'react-native';
function Pay(){
const childRef = useRef();
const success = (e) =>{
// get authorization_code
const {authorization_code} = e.cardDetails;
}
return(
<View style={{flex: 1}}>
<PaystackWebView
showPayButton={false}
paystackKey="your-public-key-here"
paystackSecretKey="your-secret-key-here"
amount={120000}
billingEmail="[email protected]"
billingMobile="09787377462"
billingName="Oluwatobi Shokunbi"
ActivityIndicatorColor="green"
SafeAreaViewContainer={{marginTop: 5}}
SafeAreaViewContainerModal={{marginTop: 5}}
onCancel={(e) => { // handle response here }}
onSuccess={(e) => { success(e) }}
ref={childRef}
/>
<TouchableOpacity onPress={()=> childRef.current.StartTransaction()}>
<Text>pay now</Text>
<TouchableOpacity/>
</View>
)
}now we have the authorization_code, and other card details, we can bill this card again by using the react-native-paystack-helpers package to bill this card anytime we want to.
first run; yarn add react-native-paystack-helpers || npm i react-native-paystack-helpers
now to bill the card again;
import React from 'react';
import {Transaction} from 'react-native-paystack-helpers';
import {View, TouchableOpacity,Text} from 'react-native';
function Pay(){
const bill = () =>{
// get authorization_code
const aa = await Transaction.ChargeAuthorization(
authorization_code,
payStack-secret-key,
amount,
billing-email,
);
console.log(aa);
}
return(
<View style={{flex: 1}}>
<TouchableOpacity onPress={()=> bill()}>
<Text>Bill again</Text>
<TouchableOpacity/>
</View>
)
}You can also make use of the new props autoStart to initiate payment once the screen mounts. Just see autoStart={true}. This is set to false by default.
| Name | use/description | extra |
|---|---|---|
buttonText |
Defines text on the button | default: Pay Now |
textStyles |
Defines styles for text in button | nill |
btnStyles |
Defines style for button | nill |
paystackKey |
Public or Private paystack key(visit paystack.com to get yours) | nill |
paystackSecretKey |
Paystack Secret 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 |
channels |
Specify payment options available to users. Available channel options are: ["card", "bank", "ussd", "qr", "mobile_money"]. Here's an example of usage: channels={JSON.stringify(["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 |
SafeAreaViewContainer |
style for SafeAreaView containter | default: nill |
SafeAreaViewContainerModal |
style for SafeAreaView for modal | default: nill |
showPayButton |
Control the Pay Now button visibility | default: true |
refNumber |
Reference number, if you have already generated one | default: ''+Math.floor((Math.random() * 1000000000) + 1) |
renderButton |
Render your own Pay Now button, should be used when showPayButton is true |
default: null |
handleWebViewMessage |
Will be called when a WebView receives a message | default: true |
What to help make this package even more awesome? Read how to contribute
This project is licensed under MIT license.
Do not put your seceret key in production, only use the callback! as it is not safe. I won't be held accountable for any lost, hack or security breach.
Thanks goes to these wonderful people (emoji key):
 Oluwatobi Shokunbi 💻 📖 |
 Akinyemi Mosolasi 📖 💻 |
 okechukwu0127 💻 |
 Johney 💻 |
 sammy 💻 |
 Jimoh Jamiu 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!