This is a ReactJS library for implementing RavePay Payment Gateway
This React library provides a wrapper to add RavePay Payment to your React application
npm install react-ravepayment --save
import React, { Component } from 'react'
// import the library
import RavePaymentModal from 'react-ravepayment'
class App extends Component {
state = {
key: "FLWPUBK-XXXXXXXXXXXXXXXXXXXXXXXXXX-X", // RavePay PUBLIC KEY
email: "[email protected]", // customer email
amount: 1000 // equals NGN 1000. Minimum amount allowed NGN 1 while on production or live system, it's 10
}
callback = (response) => {
console.log(response);
}
close = () => {
console.log("Payment closed");
}
getReference = () => {
let text = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.=";
for( let i=0; i < 10; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
render () {
return (
<div className='App'>
<p className='App-intro'>
<RavePaymentModal
text="Make Payment"
class="payButton"
metadata={[{metaname:'Device', metavalue : 'IPhone X'}]}
reference={this.getReference()}
email={this.state.email}
amount={this.state.amount}
ravePubKey={this.state.key}
callback={this.callback}
close={this.close}
isProduction={false}
tag="button" {/*it can be button or a or input tag */}
/>
</p>
</div>
)
}
}
export default App
Please checkout Rave Documentation for other available options you can add to the tag
props | parameter | type | required |
---|---|---|---|
ravePubKey | Your merchant public key, see how to get your API Keys Here | String |
Required |
text | Text to be displayed on the Rave Checkout Button. | String |
Required |
metadata | Any other custom data you wish to pass. | Array |
Not Required |
currency | Currency to charge in. Defaults to NGN | String |
Not Required |
country | Route country. Defaults to NG | String |
Not required |
customer_firstname | Firstname of the customer. | String |
Not Required |
customer_lastname | Lastname of the customer. | String |
Not Required |
custom_title | Text to be displayed as the title of the payment modal. | String |
Not Required |
custom_logo | Link to the Logo image. | String |
Required |
reference | Your Unique transaction reference. | String |
Required |
This is the email of the customer | String |
Required | |
amount | This is the amount to be charged from card/account | Number |
Required |
callback | A function to be called on successful card charge. Users can always be redirected to a successful or failed page supplied by the merchant here based on the response. | Function |
Required |
close | A function to be called when the pay modal is closed. | Function |
Required |
subaccounts | This is an array of objects containing the subaccount IDs to split the payment into. | Array |
Not Required |
payment_options | This allows you select the payment option you want for your users. see Choose Payment Options for more info. | String |
Not Required |
payment_plan | This is the payment plan ID used for Recurring billing ]. | Number |
not Required |
redirect_url | URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them. | String |
Not Required |
hosted_payment | allow you load rave's modal on a different page, this can be useful for browsers like opera or for people who don't want the modal to load on their site | Number |
Not Required |
IsProduction | Set to true if you want your transactions to run in the production environment otherwise set to false . Defaults to false |
Boolean |
Not Required ('defaults to false') |
WHEN DEPLOYING TO PRODUCTION/LIVE SYSTEM, take note of the following;
- Change isProduction attribute in the component tag to true i.e isProduction={true}
- Change RavePay PUBLIC KEY
- Ensure you implement webhooks to receive automatic updates when a transaction happens.
- Fork it!
- Create your feature branch:
git checkout -b feature-name
- Commit your changes:
git commit -am 'Some commit message'
- Push to the branch:
git push origin feature-name
- Submit a pull request ๐๐
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? Spread the word!
Don't forget to follow me on twitter!
Thanks! Ayeni Olusegun.
This project is licensed under the MIT License - see the LICENSE.md file for details