Inline/Popup Checkout

1app Inline Checkout enables you to build a secure and reliable payment flow directly within your web application. Simply add the JavaScript library to your checkout page and call the OneAppCheckout()function when your customer clicks the button to initiate the payment."

Add the inline library script tag as a CDN on your file . html

<script src="https://js.oneappgo.com/v1/checkout.js"> </script>

Create a button to call the OneappCheckout function

<button type="button" onclick="InitiatePayment()">Make Payment</button>

Next, step is to add the OneAppCheckout function inside the InitiatePayment function with the required parameters needed for the payment

function makePayment() {
const initpay = OneAppCheckout({
      publickey: PUBLIC_KEY,
      amount: 20000,
      fname: "John",
      lname: "Doe",
      customer_email: "[email protected]",
      phone: "09012345678",
      reference: "SH9992IOQP820",
      currency: "NGN",    

      onComplete:async (response) => {
        //loading.value = false
        if((response.status) && (response.responsecode == '01')){
          var dref = response.reference;
          var token = response.token;
          var initiate_ref = response.initiate_ref;
          successCallback(initiate_ref, token, dref, demail);
        }else{
          alert(response.message)
        }
      }
  });
  
  initpay.makePayment()   //inittiate the payment
}

Below are the parameters passed to the OneAppCheckout() and the details

Name	Description
publickey	Your account public generated on the developer page. Check the authentication section on how to get this.
amount	The amount the customer is to pay
fname	First name of the customer making the payment
lname	Last name of the customer making the payment
customer_email	The customer email
phone	Customer phone number
reference	A unique transaction reference generate from you for each transactions
currency	The currency of the payment, which can either be NGN or USD

The call to OneAppCheckout () returns a JavaScript object with an onComplete() method that can be used as callbacks for payment verification.

Always Verify your Transactions

You should always verify the payment on your server afterward to ascertain its completion, even if you used a callback.

Need to verify the payment? Kindly use the verify trans endpoint here