Collect-africa-js NPM

Collect Widget - JavaScript SDK

JS library for implementing the Collect widget - CollectWidgetJS is a safe and secure web drop-in module and this library provides a front-end web with ability to make payment for each bank that Collect supports.

Try the demo

Checkout the widget flow to view how the Collect Widget works. Click "See How it Works"

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-africa-js

Using yarn:

$ yarn add collect-africa-js

Using CDN:

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

Usage

For JS frameworks import it and use

import CollectCheckoutService from 'collect-africa-js';

For others, just use

const checkout = new CollectCheckoutService({
  email: 'peterparker@gmail.com',
  firstName: 'Peter',
  lastName: 'Parker',
  reference: 'XXXXX-XXXXX',
  amount: 1000000, // in Kobo
  currency: 'NGN', // NGN
  itemImage: '', // URL for item image
  paymentLinkCode: '', // Payment link code
  invoiceCode: '', // Invoice code
  planCode: '', // Plan code
  publicKey: 'pk_sandbox_XXXXXXXXXX', // Your public key
  onSuccess(e) {
    console.log('payment successful.', e);
  },
  onClose(e) {
    console.log('closed the widget.', e);
  },
});

checkout.setup();
checkout.open();

CollectWidget Options

Name	Type	Required	Default Value	Description
`email`	`String`	true		Email address.
`firstName`	`String`	true		First name.
`lastName`	`String`	false		Last name.
`reference`	`String`	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.
`paymentLinkCode`	`String`	false		The payment link code.
`invoiceCode`	`String`	false		The invoice code.
`planCode`	`String`	false		The plan code.
`logo`	`String(URL)`	false	Collect's Logo
`callbackUrl`	`String(URL)`	false
`onSuccess`	`Function`	false		Action to perform after widget is successful
`onClose`	`Function`	false		Action to perform if widget is closed
`onError`	`Function`	false		Action to perform on widget Error
`beforeClose`	`Function`	false		Action to perform before widget close