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.
npm install atlas-pay-sdk
or
```bash
yarn add atlas-pay-sdk
Atlas-Pay provides you with few Javascript API's to interact with below is an example implementation of the atlas-pay library:
import './App.css'
import AtlasPay from 'atlas-pay-sdk';
function App() {
AtlasPay.onSuccess = function(data) {
/**
* handle successful payment
* (optional) : you can decide to retrieve the onSuccess message we send via data, the message contains the payload of the successful payment.
**/
console.log('Payment successful:', data);
}
AtlasPay.onClose = function(data) {
/**
* handle close event, this happens when user closes the payment modal
* (optional) : you can decide to retrieve the onClose message we send via data
* (optional) : if you want to force close the payment window on onClose you can call the shutdown API within the onClose
* (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.
**/
console.log('Payment modal Closed:', data);
// optional shutdown
AtlasPay.shutdown()
}
AtlasPay.shutdown() /* This closes the payment window and removes it from your DOM */
AtlasPay.onResponse = function(data) {
/**
* handle generate response, this triggers when you try generating a new ref via AtlasPay.generate(), you catch ther response here
* (required) : you are to retrieve the response via the data returned
**/
console.log('We got a response:', data); // or do your stuff here
}
AtlasPay.onLoad = function(data) {
/**
* this triggers when the payment window is loaded onto your dom, it returns for you a payload containing the payment object.
* (optional) : you can decide to retrieve the payment object we send via data
**/
console.log('Payment window loaded:', data); // or do your stuff here
}
// set up your new payment parameters, along side your secret key
let config = {
"customer_email": "john@example.com",
"description" : "test payment",
"merchant_ref": "your_merchant_reference",
"amount": 100,
"redirect_url": "",
"payment_methods" : "card,bank_transfer,ussd,raven",
"secret_key" : "your_atlas_secret_key"
}
return (
<>
{/* This button will fire the generate function */}
<button onClick={()=> AtlasPay.generate(config)}>Generate New Ref</button>
{/* This button will fire the init function and load up the payment window */}
<button onClick={()=> AtlasPay.init('202304211026JBCAADE')}>Initialize Payment Window</button>
</>
)
}
export default App
In the example above, we created two functions that you can call to initiate the payment window and generate new payment references.
Browsers
<script src="https://cdn.jsdelivr.net/npm/atlas-pay-sdk@[version]/dist/index.min.js"></script>
<!-- Remember to change the [version] with the actual version you need, it is adviceable to always use the recent versions -->
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:
require(['path/to/atlas-pay-sdk'], function (AtlasPay) {
// Use AtlasPay object here
// Refer to the Usage section for usage examples
});
NodeJS
In a Node.js environment, you can install Atlas-Pay-SDK with npm:
npm install atlas-pay-sdk
Then you can use it in your Node.js code like this:
const AtlasPay = require('atlas-pay-sdk');
// Use AtlasPay object here
// Refer to the Usage section for usage examples
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:
Example:
let config = {
"customer_email": "john@example.com",
"description": "test payment",
"merchant_ref": "your_merchant_reference",
"amount": 100,
"redirect_url": "",
"payment_methods": "card,bank_transfer,ussd,raven",
"secret_key": "your_atlas_secret_key"
};
AtlasPay.generate(config);
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:
AtlasPay.init('202304211026JBCAADE');
AtlasPay.shutdown(): void
This method is used to close the payment window and remove it from the DOM.
Example:
AtlasPay.shutdown();
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:
AtlasPay.onLoad(function(data) {
console.log('Payment window loaded:', data);
});
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:
AtlasPay.onSuccess(function(data) {
console.log('Payment successful:', data);
});
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:
AtlasPay.onClose(function(data) {
console.log('Payment modal Closed:', data);
});
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:
AtlasPay.onResponse(function(data) {
console.log('We got a response:', data);
});
AtlasPay by Raven bank is licensed under the MIT
Generated using TypeDoc