Checkouts

Monieswitch Checkout is a JavaScript library designed to help developers create secure and user-friendly payment flows for web applications. It offers two primary checkout methods to accommodate different payment scenarios and security requirements.

​

Checkout Methods

​

1. Direct Checkout (checkout())

​

When to Use

• For simple, immediate payment flows
• When you can collect all payment information on the client-side
• For scenarios with minimal security requirements

​

Method Characteristics

• Requires a public key
• All payment details are passed directly from the client
• No prior server-side initialization needed

​

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.

The Result and HTML (generated from jsfiddle) tab explains how to incorporate the Checkout library via CDN and use it in your project.

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

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

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

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

      PayWithMonieswitch.checkout({
        publicKey: "pk_test_K3wdW5DQBZQC5bvJQkPfu07Ou4GRyxtKROU1YIELJG0knSQy",
        reference: Date.now(),
        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,
        redirectURL: "https://google.com",
        onClose: function () {},
        onError: (error) => {
          console.log("Something went wrong: ", error);
        },
        onSuccess: function (reference) {
          console.log("Payment was successful: ", reference);
         },
      });
    }
  </script>

​

2. Continued Checkout (continueCheckout())

The continueCheckout() method represents a more secure and flexible approach to payment processing, providing enhanced control and validation through server-side initialization. It’s involve first initializing the payment on the server-side to get the checkout and then passing the checkout code to the client-side for payment processing.

​

Server-Side Checkout Initialization

First initializing the payment on the server-side to get the checkout.

Endpoint:

POST https://nini.monieswitch.com/checkout/initialize

REQUEST HEADERS

• x-access-token: Authentication SECRET_KEY
• x-pub-key: Merchant’s public key

REQUEST PARAMETERS

Required Parameters:

• amount (Number): Payment amount
• email (String): Customer’s email address

Optional Parameters:

• redirectURL (String): Redirect after payment
• bearer (String): Payment bearer type Options: account, subaccount, customer
• subaccountId (String): Required if bearer is subaccount
• currency (String): Payment currency Options: NGN, USD
• channels (Array): Payment channels Options: BANK, CARD

RESPONSE

{
  "status": true,
  "message": "Operation is successful",
  "data": {
    "checkout": {
      "id": "cc2c7639-0779-40b8-8e69-1853d8ef4b92",
      "code": "wGOQclyVduY943DW",
      "link": "https://checkout.monieswitch.com/wGOQclyVduY9TyDW",
      "reference": "cktvJgMj8Glxfh5x"
    }
  }
}

​

Client-Side Payment Processing

After initializing the payment on the server-side, you can pass the checkout code to the client-side for payment processing.

​

Get started

Let’s walk through the steps to integrate the Monieswitch continueCheckout 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 ContinueCheckout library in your JavaScript code to create a payment form and handle payment processing.

The Result and HTML (generated from jsfiddle) tab explains how to incorporate the ContinueCheckout library and use it in your project.

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

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

    continuePaymentForm.addEventListener("submit", continuePayWithMonieswitch, false);

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

      PayWithMonieswitch.continueCheckout({
        checkoutCode: document.getElementById("code").value,
        onClose: function () {},
        onError: (error) => {
          console.log("Something went wrong: ", error);
        },
        onSuccess: function (reference) {
          console.log("Successful")
        },
      });
    }
 </script>

​

When to Use

• For complex payment scenarios
• When additional server-side validation is required
• To add an extra layer of security to your payment process

​

Method Characteristics

• Requires a checkout code generated by your server
• Payment process is initiated and validated on the server-side
• Provides more control over the payment flow

​

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.

​

Considerations

• Choose the checkout method based on your specific use case
• Prioritize server-side security
• Implement robust error handling
• Always verify payments through webhooks