Direct debit

Configure Connect.js to launch a one-time or recurring payment flow.

Connect.js can launch payment flows by passing scope: "payments" and payment configuration in data.

Payment products and required fields can change independently of the JavaScript SDK. Confirm availability, field values, currency behavior, limits, and server-side verification in Mono’s current official documentation before shipping a production flow.

One-time debit

The current Connect.js examples use an integer amount in the currency’s minor unit. In this naira example, 150000 represents ₦1,500.

import Connect from "@mono.co/connect.js"

const connect = new Connect({
  key: "PUBLIC_KEY",
  scope: "payments",
  data: {
    type: "one-time-debit",
    amount: 150000,
    description: "Electricity bill"
  },
  onSuccess: (charge) => {
    // Send the returned reference to your backend for verification.
    console.log("Payment flow completed", charge)
  },
  onClose: () => console.log("Payment flow closed")
})

connect.setup()
connect.open()

Recurring debit

Use the recurring type shown in the current package examples when your Mono application and payment product support it.

const connect = new Connect({
  key: "PUBLIC_KEY",
  scope: "payments",
  data: {
    type: "recurring-debit",
    amount: 150000,
    description: "Monthly subscription"
  },
  onSuccess: handleCharge,
  onEvent: (eventName, data) => console.log(eventName, data)
})

connect.setup()

Account linking and payments return different results

Flow	Configuration	onSuccess result
Account linking	scope: "auth"	Object containing an auth code
Payment	scope: "payments"	Charge data returned by the widget

Do not destructure { code } in a payment callback unless the current Mono payment contract explicitly returns that shape.

Verify on the backend

Treat the browser callback as a signal to continue. It is not final proof that funds settled. Send the returned payment reference or charge identifier to your backend and verify it using the current Mono payment API before fulfilling an order or granting paid access.

Avoid duplicate launches

Track whether a payment is already open or awaiting verification. Return early from repeated calls, and use the same state to disable the payment button in your interface.

let paymentPending = false

async function openPayment() {
  if (paymentPending) return

  paymentPending = true
  connect.open()
}

async function handleCharge(charge) {
  try {
    await verifyChargeOnBackend(charge)
  } finally {
    paymentPending = false
  }
}