Via Widget

Initiating one time payment

Simply update your widget SDKs with the following

const mInstance = new MonoConnect({
  key: "PUBLIC_KEY",
  onClose: () => console.log("closed"),
  onSuccess: () => console.log("done"),
  scope: "payments",
  data: {
    type: "onetime-debit",
    amount: 1000 // in kobo,
    currency: "NGN" || optional // defaults to NGN,
    description: "description of payment" || optional,
    reference: 'xyz' || required
  }
});

mInstance.setup();

Example

<html lang="en">
  <head>
    <title>MonoPay test</title>

    <style>
      .p-5 {
        padding: 5em;
      }
    </style>

    <script type="application/javascript" src="https://connect.withmono.com/connect.js"></script>
  </head>

  <body>
    <div className="p-5" style="display: flex;width: 100%;height: 100vh;justify-content: center;align-items: center;flex-direction: column;">
      <p>Welcome to MonoPay.</p>
      <div style="display: flex;gap: 4px;margin-top: 4px;">
        <button id="trigger-btn" style="padding: 1rem 2rem;background-color: #182CD1;border-radius: 10px;border: none;color: white;font-size: medium;cursor:pointer;">
          One-time Pay
        </button>

        <button id="trigger-recurring" style="padding: 1rem 2rem;background-color: #000000;border-radius: 10px;border: none;color: white;font-size: medium;cursor:pointer;">
          Recurring Pay
        </button>
      </div>
    </div>

    <script type="application/javascript">
            var connect;

      var config = {
        key: "YOUR PUBLIC KEY",
        onSuccess: function (response) {
          alert(JSON.stringify(response));
        },
        onClose: function () {
          console.log('user closed the widget.')
        },
        scope: "payments",
      };

      var recurringData = {
        type: 'recurring-debit',
        amount: 5000,
        description: 'Data subscription'
      };

      var data = {
        type: 'onetime-debit',
        amount: 25000,
        description: 'Payment for jacket'
      };

      var launch = document.getElementById('trigger-btn');
      var launchRecurring = document.getElementById('trigger-recurring');

      launch.onclick = function (e) { 
        var onetimeConfig = Object.assign(config, {data: data});
        connect = new Connect(onetimeConfig);
        connect.setup();
        connect.open(); 
      };

      launchRecurring.onclick = function (e) { 
        var recurringConfig = Object.assign(config, {data: recurringData});
        connect = new Connect(recurringConfig);
        connect.setup();
        connect.open(); 
      };
    </script>
  </body>
</html>

Did this page help you?