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 @collectapp/checkout-sdk

Using yarn:

$ yarn add @collectapp/checkout-sdk

Using CDN:

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

Usage

For JS frameworks import it and use

import CollectCheckoutService from '@collectapp/checkout-sdk';

For others, just use

const checkout = new CollectCheckoutService({
  email: '[email protected]',
  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

• @temitopeadesoji

• @DotunAj