Atlas Pay by Raven

Atlas Pay by Raven bank allows you recieve payments and build powerful checkout experience on your website and apps, to use this you will need to create an account on raven atlas, visit, "Raven bank" for more.

Live Demo

✨ Features

New

• Compatibility in all JavaScript environments, including RequireJS and script tags.

Existing

• Card Payments. (Visa, MasterCard)
• USSD Payment.
• Bank Transfers.
• NQR Payments.
• Pay with Raven.

Installation:

1npm install atlas-pay-sdk
2
3or
4
5```bash
6yarn add atlas-pay-sdk

Usage :

Atlas-Pay provides you with few Javascript API's to interact with below is an example implementation of the atlas-pay library:

1
2
3
4import './App.css'
5import  AtlasPay  from 'atlas-pay-sdk';
6
7function App() {
8  AtlasPay.onSuccess = function(data) {
9    /**
10     * handle successful payment
11     * (optional) : you can decide to retrieve the onSuccess message we send via data, the message contains the payload of the successful payment.
12    **/
13    console.log('Payment successful:', data);
14  }
15
16  AtlasPay.onClose = function(data) {
17       /**
18     * handle close event, this happens when user closes the payment modal
19     * (optional) : you can decide to retrieve the onClose message we send via data
20     * (optional) : if you want to force close the payment window on onClose you can call the shutdown API within the onClose
21     * (note) : this also triggers when the close modal button is clicked after successful paymen, but the message returned is 'payment_successful' , you can hook into this and do your magic.
22    **/
23
24    console.log('Payment modal Closed:', data);
25
26    // optional shutdown
27    AtlasPay.shutdown()
28  }
29
30  AtlasPay.shutdown() /* This closes the payment window and removes it from your DOM */
31
32  AtlasPay.onResponse = function(data) {
33       /**
34     * handle generate response, this triggers when you try generating a new ref via AtlasPay.generate(), you catch ther response here
35     * (required) : you are to retrieve the response via the data returned
36    **/
37      console.log('We got a response:', data); // or do your stuff here
38  }
39
40
41  AtlasPay.onLoad = function(data) {
42    /**
43  * this triggers when the payment window is loaded onto your dom, it returns for you a payload containing the payment object.
44  * (optional) : you can decide to retrieve the payment object we send via data
45 **/
46   console.log('Payment window loaded:', data); // or do your stuff here
47}
48
49  // set up your new payment parameters, along side your secret key
50
51  let config = {
52    "customer_email": "john@example.com",
53    "description" : "test payment",
54    "merchant_ref": "your_merchant_reference",
55    "amount": 100,
56    "redirect_url": "",
57    "payment_methods" : "card,bank_transfer,ussd,raven",
58    "public_key" : "your_atlas_public_key"
59}
60
61
62  return (
63    <>
64    {/* This button will fire the generate function */}
65    <button onClick={()=> AtlasPay.generate(config)}>Generate New Ref</button>
66
67    {/* This button will fire the init function and load up the payment window */}
68     <button onClick={()=> AtlasPay.init('202304211026JBCAADE')}>Initialize Payment Window</button>
69    </>
70  )
71}
72
73export default App
74
75

In the example above, we created two functions that you can call to initiate the payment window and generate new payment references.

Integration

Browsers

1<script src="https://cdn.jsdelivr.net/npm/atlas-pay-sdk@[version]/dist/index.min.js"></script>
2
3<!-- Remember to change the [version] with the actual version you need, it is adviceable to always use the recent versions -->
4

After adding the script tag you now have access to AtlasPaySdk Object on your browser, refer to the usage for implementation but replace AtlasPay with AtlasPaySdk i.e AtlasPaySdk.init().

RequireJS

If you are using RequireJS, you can include Atlas-Pay-SDK like this:

1require(['path/to/atlas-pay-sdk'], function (AtlasPay) {
2
3  // Use AtlasPay object here
4  // Refer to the Usage section for usage examples
5});
6

NodeJS

In a Node.js environment, you can install Atlas-Pay-SDK with npm:

1npm install atlas-pay-sdk
2

Then you can use it in your Node.js code like this:

1
2const AtlasPay = require('atlas-pay-sdk');
3
4// Use AtlasPay object here
5// Refer to the Usage section for usage examples
6

API

AtlasPay.generate(config: PaymentConfig): void

This function is used to generate a new payment reference. The config parameter is an object that contains the following properties:

• customer_email: the email of the customer making the payment
• description: a brief description of the payment
• merchant_ref: your unique merchant reference for this payment
• amount: the amount to be paid redirect_url: the URL to redirect the customer to after payment or when customer decides to cancel the payment
• payment_methods: a comma separated list of payment methods to enable (card, bank_transfer, ussd, raven)
• secret_key: your secret key

Example:

1let config = {
2  "customer_email": "john@example.com",
3  "description": "test payment",
4  "merchant_ref": "your_merchant_reference",
5  "amount": 100,
6  "redirect_url": "",
7  "payment_methods": "card,bank_transfer,ussd,raven",
8  "secret_key": "your_atlas_secret_key"
9};
10
11AtlasPay.generate(config);
12

AtlasPay.init(ref: string): void

This function is used to initialize the payment window with the specified payment_reference. The payment_reference parameter is the reference generated using the AtlasPay.generate() function.

Example:

1AtlasPay.init('202304211026JBCAADE');
2

AtlasPay.shutdown(): void

This method is used to close the payment window and remove it from the DOM.

Example:

1AtlasPay.shutdown();
2

AtlasPay.onLoad(data: any): void

This callback is triggered when the payment window is loaded onto the DOM. The data parameter is an object containing the payment object.

Example:

1AtlasPay.onLoad(function(data) {
2  console.log('Payment window loaded:', data);
3});
4

AtlasPay.onSuccess(data: any): void

This callback is triggered when a payment is successful. The data parameter is an object containing the payload of the successful payment.

Example:

1AtlasPay.onSuccess(function(data) {
2  console.log('Payment successful:', data);
3});
4

AtlasPay.onClose(data: any): void

This callback is triggered when the payment window is closed. The data parameter is an object containing the message returned when the payment window is closed.

Example:

1AtlasPay.onClose(function(data) {
2  console.log('Payment modal Closed:', data);
3});
4

AtlasPay.onResponse(data: any): void

This callback is triggered when a new payment reference is generated using the AtlasPay.generate() function. The data parameter is an object containing the response returned from the server.

Example:

1AtlasPay.onResponse(function(data) {
2  console.log('We got a response:', data);
3});
4

License

AtlasPay by Raven bank is licensed under the MIT