> For the complete documentation index, see [llms.txt](https://developers.klasha.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.klasha.com/accepting-payments/klasha-inline.md).

# Klasha Inline

Take the following steps to integrate the Klasha payment gateway into your website and begin accepting payments from anywhere in the world:

* Embed Klasha JavaScript into the head tag of your HTML code.
* Define a JavaScript function in your script file.

#### Embed Klasha JavaScript into the head tag of your HTML code

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="https://js.klasha.com/pay.js"></script>
    <title>Klasha Payment</title>
  </head>

  <body>
    
    <form>
      <input type="button" onclick="payWithKlasha()" value="Pay With Klasha" />
    </form>

    
  </body>
</html>
```

#### Define a JavaScript function in your script file <a href="#defineajavascriptfunction" id="defineajavascriptfunction"></a>

```javascript
<script>
      // Callback for handling transaction status
      const callWhenDone = (data) => {
        if (data.status === "success") {
          console.log("Payment successful", data);
        } else if (data.status === "failed") {
          console.error("Payment failed", data);
        }
      };

      // Payment configuration and initialization
      const payWithKlasha = () => {
        const MERCHANT_KEY = "{{merchantKey}}";
        const AMOUNT = 1;
        const BUSINESS_ID = "{{businessId}}";
        const ENVIRONMENT = true; // true for dev, false for production
        const currency = "{{currency}}";
        const DESTINATION_CURRENCY = "{{destinationCurrency}}";
        const DESCRIPTION = "school fee";

        const paymentKit = {
          tx_ref: "{{paylink_ref}}",
          fullname: "{{fullname}}",
          firstName: "{{firstName}}",
          lastName: "{{lastName}}",
          email: "{{email}}",
          phone_number: "{{phone_number}}",
          businessId: BUSINESS_ID,
          merchantKey: MERCHANT_KEY,
          amount: AMOUNT,
          sourceAmount: "1",
          rate: 1,
        };

        const client = new KlashaClient(
          MERCHANT_KEY,
          BUSINESS_ID,
          AMOUNT,
          DESCRIPTION,
          callWhenDone,
          currency,
          DESTINATION_CURRENCY,
          paymentKit,
          ENVIRONMENT
        );

        client.init();
      };

      document.addEventListener("DOMContentLoaded", payWithKlasha);
    </script>
```

![Pop-up Sample](/files/o2o21ntwJlcgFGicukKL)

#### Callback response

```json
{
   "amount": 560,
   "currency": "NGN",
   "status": "successful",
   "tnxRef": "tnxRef"
}
```

With this, other activities like confirming a [Transaction Status](/misc/transaction-status.md) can be done.

#### Webhook response

If you have Webhook notifications set up on the dashboard, we will send you a transaction response in the format below:

```json
{
  "event": "charge.completed",
  "data": {
    "createdAt": "2021-11-18T15:23:16.781",
    "narration": "CARD Transaction ",
    "destinationCurrency": "NGN",
    "sourceAmount": 1,
    "sourceCurrency": "USD",
    "tnxRef": "tnxRef",
    "status": "successful",
    "destinationAmount": 560,
    "customer": {
      "id": 13,
      "name": "Klasha",
      "email": "test@klasha.com",
      "phone": "09012332122",
      "createdAt": "2021-07-20 10:28:43",
      "updatedAt": "2021-07-20 10:28:43"
    }
  }
}
```
