​
Introduction

Monieswitch Checkout is a JavaScript library designed to help developers create secure and user-friendly payment flows for web applications. It can be easily integrated into frontend projects using a CDN.

​
Get started

Let’s walk through the steps to integrate the Monieswitch Checkout library into your web application in two simple steps.

  • Integration to your app: Include the Checkout library via CDN in your HTML file.
  • Utilized our CDN-hosted Library: Use the Checkout library in your JavaScript code to create a payment form and handle payment processing.

This codepen explains how to incorporate the Checkout library via CDN and use it in your project.

1

Integration to your app

To use the Checkout in your web application, you need to include the library’s JavaScript file from the CDN. This is done by adding a script tag to your HTML file.

  <script defer="defer" src="https://juju-inline.pages.dev/inline.js"></script>

Key Points:

  • The src attribute points to the CDN URL where the ABC Checkout library is hosted.
  • The defer attribute is used to ensure that the script is executed after the HTML document has been parsed.
  • Place this script tag in the head section of your HTML document.
2

Utilized our CDN-hosted Library

Once the library is included via CDN, you can use its functionality in your JavaScript code without any additional imports or requires.

    <script>
      const paymentForm = document.getElementById("paymentForm");

      paymentForm.addEventListener("submit", PayWithMonieswitch, false);

      function PayWithMonieswitch(e) {
        e.preventDefault();

        let handler = PayWithMonieswitch.setup({
          publicKey: "{{PUBLIC_KEY}}",
          amount: Number(document.getElementById("amount").value),
          email: document.getElementById("email-address").value,
          currency: document.getElementById("currency").value,
          channels: ["BANK", "CARD"],
          bearer: document.getElementById("bearer").value,
          subaccountId: document.getElementById("subaccount").value,
          onClose: function () {
            // Handle closure of payment modal
          },
          callback: function (response) {
            // Handle successful payment
          },
        });

        handler.openIframe();
      }
      </script>

Key Points:

  • The PayWithMonieswitch object is globally available after including the CDN script.
  • Use PayWithMonieswitch.setup() to configure the payment handler with your specific options.
  • Call handler.openIframe() to launch the payment interface.
  • Ensure that the PUBLIC_KEY is replaced with your actual public key

Caution: Never expose your SECRET_KEY in client-side(frontend) **code. All communication with the Monieswitch API must be routed through your server. Your frontend application should only receive and process responses that have been securely handled by your backend.

​
Confirming Payment Status with Webhooks

When a payment is successfully processed, Monieswitch Checkout sends a webhook event to the webhook URL you’ve configured in your account settings. It is strongly advised to utilize these webhooks to verify the payment status before fulfilling orders or providing services to your customers. Learn more about Webhooks and how to set them up.

API

Refer to our API Documentation for integration details

Virtual accountsPayment links