# 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="../authentication">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](https://docs.1app.online/v1/payments/verify-payment)