# 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

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

Create a button to call the OneappCheckout function

```html
<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

```javascript
function makePayment() {
const initpay = OneAppCheckout({
      publickey: PUBLIC_KEY,
      amount: 20000,
      fname: "John",
      lname: "Doe",
      customer_email: "johndoes@example.cm",
      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

<table><thead><tr><th>Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>publickey</td><td>Your account public generated on the developer page. Check the <a href="/pages/bPgofjmVZLO6s5qK34wR">authentication </a>section on how to get this.</td><td></td></tr><tr><td>amount</td><td>The amount the customer is to pay</td><td></td></tr><tr><td>fname</td><td>First name of the customer making the payment</td><td></td></tr><tr><td>lname</td><td>Last name of the customer making the payment</td><td></td></tr><tr><td>customer_email</td><td>The customer email</td><td></td></tr><tr><td>phone</td><td>Customer phone number</td><td></td></tr><tr><td>reference</td><td>A unique transaction reference generate from you for each transactions</td><td></td></tr><tr><td>currency</td><td>The currency of the payment, which can either be NGN or USD</td><td></td></tr></tbody></table>

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

{% hint style="danger" %}

### Always Verify your Transactions

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

Need to verify the payment?  Kindly use the verify trans endpoint [here](/v1/payments/verify-payment.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.1app.online/v1/inline-popup-checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.