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 |
Other information
For enquires and questions, contact