##Perfect Biller React SDK

To install npm install perfectbiller_react or yarn add perfectbiller_react

In your root script for react hooks

useEffect(()=> {
     const script = document.createElement("script");
     script.src = "//perfectbiller.com/pay/perfectbiller.js?1d=fsd";
     document.body.appendChild(script);
   }, [])

For classComponent

componentDidMount() {
  const script = document.createElement("script");
  script.src = "//perfectbiller.com/pay/perfectbiller.js?1d=fsd";
  document.body.appendChild(script);
}

See react stateless complete example below

 import Pay from 'perfectbiller_react'
 import React from 'react'
 
 function App() {
   useEffect(()=> {
     const script = document.createElement("script");
     script.src = "//perfectbiller.com/pay/perfectbiller.js?1d=fsd";
     document.body.appendChild(script);
   }, [])
   function button() {
     Pay({
       mode: 'offpage', //can use onpage or offpage
       total: "price",
       notify_url:'http://www.mywebsite.com/notify',
       cur: 'NGN',
       customer_email: '[email protected]',
       customer_phone: "2348012345678",
       merchant_ref:  "ABCD-1234",
       memo:'Payment for '+"item",
       store_id:1,
       items: [
         {
           name: "Fancy Beautiful handbag",
           description: "zena handbag 78S",
           price: 1800
         },
         {
           name: "Donzim Shoes",
           description: "Italian male shoe",
           price: 5000
         },
 
       ],
     }, "key").then(()=> {
 
     }).catch(()=> {
 
     })
    
 }
   return (
     <>
       <button onClick={ button }>Pay</button>
     </>
   );
 }
 
 export default App;

Here is Class Component Example below:

import React , { Component } from 'react';
import pay from 'perfectbiller_react'

class App extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.src = "//perfectbiller.com/pay/perfectbiller.js?1d=fsd";
    document.body.appendChild(script);
  }
  Paynow = () =>{
    Pay({
      mode: 'offpage', //can use onpage or offpage
      total: "price",
      notify_url:'http://www.mywebsite.com/notify',
      cur: 'NGN',
      customer_email: '[email protected]',
      customer_phone: "2348012345678",
      merchant_ref:  "ABCD-1234",
      memo:'Payment for '+"item",
      store_id:1,
      items: [
        {
          name: "Fancy Beautiful handbag",
          description: "zena handbag 78S",
          price: 1800
        },
        {
          name: "Donzim Shoes",
          description: "Italian male shoe",
          price: 5000
        },

      ],
    }, "key").then(()=> {

    }).catch(()=> {

    })

  }
  render() {
    return (
      <div>
        <button onClick={ this.Paynow }>Pay</button>
      </div>
    );
  }
}

export default App;