##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@domain.com',
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@domain.com',
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;