react-glade-pay

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.