LogoLogo
  • Welcome!
  • Integrating Klasha
    • Getting Started
    • Prerequisites
    • Integration Checklist
    • Wrap Up
  • Overview
    • Introduction
    • Parameters
    • Token Generation
    • Errors
    • Countries & Payment Methods
  • Accepting Payments
    • Test Payments
    • Payments API
      • Mobile money
      • USSD
    • Payment Link
      • Dashboard
      • Payment Link API
    • Klasha Inline
    • HTML Checkout
  • PLUGINS AND SDKS
    • Plugins
    • Mobile SDKs
    • Web SDKs
  • MISC
    • Transaction Status
    • Webhook
    • API Status
  • Features
    • One-time Payments
    • Recurrent Payment
  • Transfers
    • Payout
      • ZAR Payout(new encryption)
      • KES Payout(new encryption)
      • ZMW Payout(new encryption)
      • TZS Payout(new encryption)
      • CNY Payout(new encryption)
    • Klasha Wire API
    • Swap API
    • Currency Coverage
  • Bank Account Collection
    • Virtual Account Creation
    • VA balance and statement
    • Business Identification Service
Powered by GitBook
On this page
  1. Accepting Payments

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

12

amount

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

1

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 InlineNextPlugins

Last updated 2 months ago