This is a React library for GladePay payment integration
This React library provides a wrapper to add Glade Pay Payments to your React application.
You can check the demo folder in the Project root for assistance.
npm install --save react-glade-pay
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
REMEMBER TO CHANGE THE MerchantId WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM
- 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 😉😎
Why not star the github repo? Don't forget to Share to others.
Don't forget to follow me on twitter!
Many thanks to The Coding Mom for all the Support.