Embed Collect's single payment integration in your application

Collect.js enables you to embed Collect's checkout into your web application, allowing your users to choose their preferred payment method and be redirected to its authorization process without needing to go into Collect's hosted checkout.

How to implement Collect.js
Collect.js is a library for implementing the Collect widget - the Collect widget is a safe and secure web drop-in module that provides a simple interface for users to select their preferred payment method during checkout.

Before getting started

  • Retrieve your Client Public API Keys.
  • Create a sandbox customer, so you can get connecting immediately.

Using npm:

$ npm install collect-widget-js

Using yarn:

$ yarn add collect-widget-js

Using CDN:

<script src=""></script>

For JS frameworks, import it and use;

import CollectWidget from 'collect-widget-js';

For others, just use;

import CollectCheckoutService from 'collect-africa-js'
      const checkout = new CollectCheckoutService({
        email: '[email protected]',
        firstName: 'Peter',
        lastName: 'Parker',
        reference: this.generateReference(),
        amount: 1000000,
        currency: 'NGN',
        publicKey: 'XXXXXXXX',
        onSuccess(e) {
          console.log('user closed the widget.', e)
        onClose(e) {
          console.log('closed the widget.', e)

Collect Widget Options

NameTypeRequiredDefault ValueDescription
emailStringtrueEmail address.
firstNameStringtrueFirst name.
lastNameStringtrueLast name.
referenceNumbertrueUnique transaction reference
amountNumbertrueAmount to charge.
currencyStringfalseNGNProcessing currency
itemImageString(URL)falseURL for item image
publicKeyStringtrueThe Collect public api key.
logoString(URL)falseCollect's Logo
onSuccessfalseAction to perform after widget is successful
onClosefalseAction to perform after widget is closed
onErrorfalseAction to perform on widget Error
beforeClosefasleAction to perform before widget close