React-glade-pay NPM

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

alt text

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