Lesaka Online SDK#

<script src="https://staging-gateway.adumoonline.com/sdk/v1/adumo-js-client.js"></script>

<script src="https://gateway.adumoonline.com/sdk/v1/adumo-js-client.js"></script>

const express = require("express");
const fetch = require("node-fetch");
const jwt = require("jsonwebtoken");
const crypto = require("crypto");

const app = express();
app.use(express.json());

function generateJWT(cuid, auid, mref, amount, secretKey, notificationURL) {
  const now = Math.floor(Date.now() / 1000);
  const payload = {
    iss: "My App",
    cuid,
    auid,
    amount,
    mref,
    jti: crypto.randomBytes(32).toString("base64"),
    iat: now - 60,
    exp: now + 600,
    notificationURL,
  };
  return jwt.sign(payload, secretKey, { algorithm: "HS256" });
}

app.post("/create-session", async (req, res) => {
  const { Amount, CurrencyCode, Flow, MerchantReference, puid } = req.body;

  const MerchantID = process.env.MERCHANT_ID;
  const ApplicationID = process.env.APP_ID;
  const jwtSecret = process.env.JWT_SECRET;

  const Token = generateJWT(
    MerchantID,
    ApplicationID,
    MerchantReference,
    Amount,
    jwtSecret,
  );

  const apiUrl =
    Flow === "CARD_VERIFICATION"
      ? "https://staging-apiv3.adumoonline.com/product/payment/v1/initialiseverification"
      : "https://staging-apiv3.adumoonline.com/product/payment/v1/initialisevirtual";

  const formData = new URLSearchParams({
    Amount,
    ApplicationID,
    CurrencyCode,
    Flow,
    Token,
    MerchantID,
    MerchantReference,
    puid,
  });

  const response = await fetch(apiUrl, {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: formData,
  });

  const data = await response.json();

  if (data.token) {
    res.json({ success: true, sessionToken: data.token });
  } else {
    const error =
      data.extendedErrors
        ?.map((e) => (e.field ? `${e.field}: ${e.message}` : e.message))
        .join(", ") ?? "Unexpected response from payment API";
    res.status(response.status).json({ success: false, error });
  }
});

app.listen(3001);

<!-- Two containers: one for the payment method selector, one for the payment form -->
<div id="payment-methods-container"></div>
<div id="payments-element-container"></div>
<!-- Alternative: use this container with initPaymentMethod when mounting a single payment method button -->
<!-- <div id="payment-method-container"></div> -->
<!-- Button to restart the session when the transaction completes or is cancelled -->
<button class="button" id="start-new-session-btn">Cancel Session</button>

<script>
  const adumoClient = window.adumo.initClient();
  let transactionCompleted = false;

  function startNewSession() {
    window.location.href = "redirect to capture page";
  }

  // Mount the payments element
  adumoClient.initPayments({
    ref: document.getElementById("payments-element-container"),
    sessionToken: "<token from your backend>",
    onReady: (actions) => {
      // Payment UI is mounted. `actions` exposes imperative actions i.e. cancelSession
      console.log("Payments element ready");
      document
        .getElementById("start-new-session-btn")
        .addEventListener("click", function () {
          if (!transactionCompleted && actions) {
            // Cancel current session but don't navigate away
            actions.cancelSession();
            return;
          }
          startNewSession();
        });
    },
    onCancel: (response) => {
      console.log("Payment cancelled", response);
      startNewSession();
    },
    onSuccess: (response) => {
      console.log("Payment successful", response);
      transactionCompleted = true;
    },
    onFailure: (response) => {
      console.error("Payment failed", response);
      transactionCompleted = true;
    },
    onError: (response) => {
      console.error("Payment error", response);
    },
    // Optional: per-payment-method callbacks
    paymentMethods: {
      Card: {
        onSuccess: (response) => console.log("Card success", response),
        onFailure: (response) => console.error("Card failure", response),
        onError: (response) => console.error("Card error", response),
        onCancel: (response) => console.log("Card cancelled", response),
      },
      MasterPass: {
        onSuccess: (response) => console.log("MasterPass success", response),
        onFailure: (response) => console.error("MasterPass failure", response),
        onError: (response) => console.error("MasterPass error", response),
        onCancel: (response) => console.log("MasterPass cancelled", response),
      },
      Mobicred: {
        onSuccess: (response) => console.log("Mobicred success", response),
        onFailure: (response) => console.error("Mobicred failure", response),
        onError: (response) => console.error("Mobicred error", response),
        onCancel: (response) => console.log("Mobicred cancelled", response),
      },
      OttVoucher: {
        onSuccess: (response) => console.log("OTT Voucher success", response),
        onFailure: (response) => console.error("OTT Voucher failure", response),
        onError: (response) => console.error("OTT Voucher error", response),
        onCancel: (response) => console.log("OTT Voucher cancelled", response),
      },
      Ozow: {
        onSuccess: (response) => console.log("Ozow success", response),
        onFailure: (response) => console.error("Ozow failure", response),
        onError: (response) => console.error("Ozow error", response),
        onCancel: (response) => console.log("Ozow cancelled", response),
      },
      Zapper: {
        onSuccess: (response) => console.log("Zapper success", response),
        onFailure: (response) => console.error("Zapper failure", response),
        onError: (response) => console.error("Zapper error", response),
        onCancel: (response) => console.log("Zapper cancelled", response),
      },
    },
  });

  // Mount the payment method selector
  adumoClient.initPaymentMethods({
    ref: document.getElementById("payment-methods-container"),
    appearance: {
      styles: {
        PaymentMethodContainer: {
          backgroundColor: "rgb(240, 240, 240)",
          borderRadius: "var(--border-radius)",
          paddingBlock: "calc(3 * var(--spacing-unit))",
          paddingInline: "calc(3 * var(--spacing-unit))",
        },
      },
      settings: {
        order: {
          ApplePay: 0,
          GooglePay: 1,
          Card: 2,
          MasterPass: 3,
          Mobicred: 4,
          OttVoucher: 5,
          Ozow: 6,
          Zapper: 7,
        },
      },
    },
    onError: (error) => console.error("PaymentMethods error", error),
  });

  // Alternative: mount a single payment method button instead of the selector above.
  // Use this block in place of initPaymentMethods when you want to show only one method.
  // adumoClient.initPaymentMethod({
  //   ref: document.getElementById("payment-method-container"),
  //   type: "Card",
  //   appearance: {
  //     settings: {
  //       hideDetailedInfo: true,
  //       hideSummary: true,
  //     },
  //   },
  //   onError: (error) => console.error("PaymentMethod error", error),
  // });
</script>