# 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](https://collect.africa/) 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:

```bash
$ npm install @collectapp/checkout-sdk
```

Using yarn:

```bash
$ yarn add @collectapp/checkout-sdk
```

Using CDN:

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

## Usage

For JS frameworks import it and use

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

For others, just use

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

- [@temitopeadesoji](https://github.com/temitopeadesoji)

- [@DotunAj](https://github.com/DotunAj)