gainfedpay/src/GainFedPay.js

``` import GainFedPay from "@ledgergreen/gainfedpay"

import { BASE_URL } from "./constants";



class GainFedPay{
    constructor(api_token){
        this.token = api_token;

    }

    async pay({amount,orderId},{onSuccess,onFailure}){
        if(!orderId || orderId==='' || orderId===undefined){
          console.error('Order Id required')
          return
        }
        if(!amount || amount <= 0){
          console.error('Amount must be an positive integer')
         return
        }
        const resp = await fetch(BASE_URL+'/api/checkout',{
            method: 'POST',
            headers:{'Content-Type': 'application/json','Authorization':'Bearer '+this.token},
            body: JSON.stringify({
                amount,orderId
            })
        })
        const data = await resp.json()
        if(data.error){
            console.log(data.error)
            return
        }
       await openModal(data.token)

       window.onmessage = async function (e) {
        e.preventDefault();
        const data = JSON.parse(e.data);
        if(data.paymentStatus === 'success'){

          onSuccess({transactionID:data.transactionID,orderID:data.orderID});
        }
        if(data.paymentStatus === 'failed'){
          onFailure(data)
        }

      };
    }

}
async function openModal(token) {
    const div = document.createElement("div");
    div.style.position = "fixed";
    div.style.top = 0;
    div.style.left = 0;
    div.style.right = 0;
    div.style.bottom = 0;
    div.style.background = "#F9F9F97B";

    const div2 = document.createElement("div");
    div2.setAttribute("id", "gain-feed-checkout-frame");
    div2.style.position = "absolute";
    div2.style.top = 0;
    div2.style.left = 0;
    div2.style.width = "100%";
    div2.style.height = "100%";
    div2.innerHTML = `<iframe src='${BASE_URL}/checkout?token=${token}' style='width:100%;height:100%;border:none'/>`
    div.append(div2);
    document.body.append(div);
  }


export default GainFedPay