> ## Documentation Index
> Fetch the complete documentation index at: https://sammydocs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`.

<Warning>
  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.
</Warning>

## 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.

```javascript theme={null}
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.

```javascript theme={null}
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.

```javascript theme={null}
let paymentPending = false

async function openPayment() {
  if (paymentPending) return

  paymentPending = true
  connect.open()
}

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