Step 1: Import this js script

Import this js script bellow

<script src=”https://checkout.fairsurepayment.com.ng/js/host/inline-stage-pay.js”> </script>

Step 2: function to call

Create a js script function to call the FairsurePay.setup() function with parameters highlighted in the sample below. In the sample our function is called doFairSurePay().

<script>

function doFairSurePay() {

const form = document.getElementById(“payment-form”);

const handler = FairsurePay.setup({

key: ‘LIVE_EJXVHJWNXSPYNW4XBFR2’, //this is a demo key.

email: document.getElementById(“email”).value, // customer email

amount: document.getElementById(“amount”).value,  // amount to be processed

currency: “NGN”, // currency

first_name: document.getElementById(“firstName”).value,

last_name: document.getElementById(“lastName”).value,

phone_number: document.getElementById(“phone”).value, // customer’s phone number (optional)

            customerId: document.getElementById(“email”).value,

ref: ` ${Math.floor((Math.random() * 1000000000) + 1)}`, // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you

narration: document.getElementById(“narration”).value,

callback_url: ‘https://my-site.com.go’, // specified redirect URL (optional)

meta: { // optional parameters

consumer_id: ‘data.customer_id’,

item_ref: ‘payment.res’,

}

});

}

</script>

Step 3: Create a form

Create a form like the sample below, that collects input parameters and pass them to the doFairsurePay() function

<form id=”payment-form”>

        <input type=”text” class=”form-control” id=”firstName” placeholder=”Enter First Name” name=”firstName”>

        <input type=”text” class=”form-control” id=”lastName” placeholder=”Enter Last Name” name=”lastName”>

        <input type=”text” class=”form-control” id=”email” placeholder=”Enter Email” name=”email”>

        <input type=”text” class=”form-control” id=”phone” placeholder=”Enter Phone” name=”phone”>

        <input type=”text” class=”form-control” id=”narration” placeholder=”Enter Narration” name=”narration”>

        <input type=”text” class=”form-control” id=”amount” placeholder=”Enter Amount” name=”amount”>

        <input type=”button” value=”Submit” button class=”button” onclick=”doFairSurePay()”/>

    </form>

Step 4: Conclusion

On completing payment process, your callback_url will be triggered. You can also hit the verify endpoint to check status of transaction. verify-transaction endpoint (https:// checkout.fairsurepayment.com.ng/api/pub/) to check transaction status.