HTML Checkout

Collect payments from your customers using Klasha inline in your HTML file.

Sample implementation:

<!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

amount

Paying amount. It will be converted to the currency the customer is using if the source currency is different from the transaction currency.

destinationCurrency

Merchant accepting current

USD

currency

Customer payment current

NGN

ENVIRONMENT

Mode to switch betwwen development and production environment

true or false. Set to true in development. Set to false in production.

More explanantion

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.

PreviousKlasha Inline NextPlugins

Last updated 1 month ago

<!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> <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>

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.