# HTML Checkout

Sample implementation:

```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>
    <!-- There are two ways to call this script using a click event
    or waiting for the document to load completely. 
    Totally depends on you based on your usecase -->

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

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

### klashaClient Parameters

| Name                | Description                                                                                                                                            | Sample                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
| merchantKey         | Merchant Public Key                                                                                                                                    |                                                                     |
| businessId          | Merchant businessId                                                                                                                                    | 12                                                                  |
| amount              | <p>Paying amount.<br>It will be converted to the currency the customer is using if the source currency is different from the transaction currency.</p> | 1                                                                   |
| destinationCurrency | Merchant accepting current                                                                                                                             | USD                                                                 |
| currency            | Customer payment current                                                                                                                               | NGN                                                                 |
| ENVIRONMENT         | Mode to switch between development and production environment                                                                                          | true or false. (set to true in development and false in production) |

{% code title="More explanantion" overflow="wrap" fullWidth="false" %}

```bash
To effectively test a paid or failed transaction, it's important to include the callWhenDone() function in your kit. This function should look similar to the example provided above. It takes an argument that, when logged, will return a status object indicating either an ERROR or a successful transaction. You can then decide how to proceed based on this status.

If the user clicks the close button, the system assumes no action was taken, and it will return an ERROR status.

```

{% endcode %}
