Collect.js

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.

Installing
Using npm:

$ npm install collect-widget-js

Using yarn:

$ yarn add collect-widget-js

Using CDN:

<script src="https://cdn.collect.africa/collect-widget.js"></script>

Usage
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)
        },
      })
      checkout.setup()
      checkout.open()

Collect Widget Options

Name

Type

Required

Default Value

Description

email

String

true

Email address.

firstName

String

true

First name.

lastName

String

true

Last name.

reference

Number

true

Unique transaction reference

amount

Number

true

Amount to charge.

currency

String

false

NGN

Processing currency

itemImage

String(URL)

false

URL for item image

publicKey

String

true

The Collect public api key.

logo

String(URL)

false

Collect's Logo

callbackUrl

String(URL)

false

onSuccess

false

Action to perform after widget is successful

onClose

false

Action to perform after widget is closed

onError

false

Action to perform on widget Error

beforeClose

fasle

Action to perform before widget close