react-glade-pay
v1.3.0
Published
React Wrapper for GladePay
Downloads
63
Maintainers
Readme
react-glade-pay
This is a React library for GladePay payment integration
Intro
This React library provides a wrapper to add Glade Pay Payments to your React application.
Note
You can check the demo folder in the Project root for assistance.
Install
npm install --save react-glade-pay
Sample Usage
import React, { Component } from "react";
import { render } from 'react-dom';
import GladePay from 'react-glade-pay';
import "./index.css"; // some basic styling
import "./animate.min.css"; // some basic styling
class App extends Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.state = {
MerchantId:"", //MerchantId Goes Here
data: {
FirstName:"",
LastName: "",
Description: "",
Title: "",
Country: "",
Currency: "",
IsRecurring: false,
Email: "",
Amount: ""
}
};
}
handleInputChange(e) {
this.setState({
data: {
...this.state.data,
FirstName:"John",
LastName: "Doe",
Description: "Payment for Dominos Pizza",
Title: "Pizza Payment",
Country: "NG",
Currency: "NGN",
IsRecurring:false,
[e.target.name]: e.target.value
}
});
}
onClose = () =>{
console.log("Payment Window Closed");
}
callback = (response) =>{
console.log({response})
}
render() {
return (
<section className="form animated flipInX">
<h2>Glade Pay Demo (Live Payments Only)</h2>
<div className="loginbox" autoComplete="off">
<input
placeholder="Email"
type="text"
name="Email"
onChange={this.handleInputChange}
value={this.state.data.Email}
/>
<input
placeholder="Amount"
type="number"
name="Amount"
onChange={this.handleInputChange}
value={this.state.data.Amount}
/>
<GladePay
merchantId={this.state.MerchantId}
onClose = {this.onClose}
callback={this.callback}
tag="button"
class="payButton"
text="Pay with GladePay"
disabled={false}
data={this.state.data}
embed={true}
/>
<br/>
<a href="https://github.com/allindeveloper/react-glade-pay" target="_blank">View On GitHub</a>
</div>
</section>
);
}
}
render(<App />, document.getElementById("root"));
Please checkout GladePay Documentation for information
Live Deployment
REMEMBER TO CHANGE THE MerchantId WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM
Contributing
- Fork it!
- Create your feature branch:
git checkout -b feature-name
- Commit your changes:
git commit -m 'Some commit message'
- Push to the branch:
git push origin feature-name
- Submit a pull request 😉😎
How can I thank you?
Why not star the github repo? Don't forget to Share to others.
Don't forget to follow me on twitter!
Acknowledgements
Many thanks to The Coding Mom for all the Support.