chimoney-payment-widget
v0.0.28
Published
Accept Payment from card, wallets, mobile money, interac and other options powered by chimoney.io.
Downloads
374
Maintainers
Readme
Chimoney Payment Widget
Simplify payments within your web application with Chimoney's embedded payment widget.
Our widget allows you to integrate a multi-currency payment gateway directly into your web applications, supporting a seamless checkout experience with customization options to match your brand.
Install with:
$ yarn add chimoney-payment-widget
For non-module usage, include directly in your HTML:
<script src="https://cdn.jsdelivr.net/gh/Chimoney/payment-widget@main/dist/chimoney-payment-widget.umd.js"></script>
.
Usage
For Module Bundlers
For projects using module bundlers like Webpack, Rollup, or when using frameworks like React, Vue.js, etc.:
import PaymentWidget from 'chimoney-payment-widget';
// Initialize the widget with your configuration
const paymentWidget = new PaymentWidget({
brandColor: '#FF5722',
brandName: 'Your Brand',
paymentLink: 'https://dash.chimoney.io/pay?issueID=your_unique_issue_id'
});
// To open the payment modal
paymentWidget.open();
// To close the payment modal
paymentWidget.close();
### For Vanilla JavaScript
For simple HTML/JavaScript applications, include the script and initialize the widget:
```html
<script src="https://cdn.jsdelivr.net/gh/Chimoney/payment-widget@main/dist/chimoney-payment-widget.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const paymentWidget = new PaymentWidget({
brandColor: '#FF5722',
brandName: 'Your Brand',
paymentLink: 'https://dash.chimoney.io/pay?issueID=your_unique_issue_id'
});
// Open the widget on button click
document.getElementById('payButton').addEventListener('click', function() {
paymentWidget.open();
});
});
</script>
Configuration Options
Configure your widget by passing options during initialization. Here are the configurable options:
- brandColor: String, sets the primary color of the widget to match your brand. (optional)
- brandName: String, displays your brand name on the widget. (optional)
- paymentLink: String, the unique URL to your Chimoney payment page.
- onPaymentSuccess - Function, The callback after payment is completed. (optional)
- onWidgetClosed - Function, The callback when modal is closed. (optional)
Customization
Customize the look and feel of the widget to match your website or app:
const paymentWidget = new PaymentWidget({
brandColor: '#4CAF50', // Green
brandName: 'GreenTech',
paymentLink: 'https://dash.chimoney.io/pay?issueID=your_custom_issue_id',
});
More Examples
Integration in React
import React, { useEffect } from 'react';
import PaymentWidget from 'chimoney-payment-widget';
const PaymentButton = () => {
useEffect(() => {
const paymentWidget = new PaymentWidget({
brandColor: '#673AB7',
brandName: 'My App',
paymentLink: 'https://your.payment.url',
});
document.getElementById('paymentButton').onclick = function() {
paymentWidget.open();
};
}, []);
return <button id="paymentButton">Pay with Chimoney</button>;
};
export default PaymentButton;
Integration in Vue.js
<template>
<button @click="openPayment">Pay with Chimoney</button>
</template>
<script>
import PaymentWidget from 'chimoney-payment-widget';
export default {
methods: {
openPayment() {
const paymentWidget = new PaymentWidget({
brandColor: '#3F51B5',
brandName: 'VueApp',
paymentLink: 'https://your.payment.url'
});
paymentWidget.open();
}
}
}
</script>
What's included?
Tools / stack
- 🗪 Babel for transpiling
- 🪄 Standard for linting
- ⚗️ Mocha and Chai for testing
- 🔍 c8 for code coverage
- 📚 JSDoc for documentation and jsdoc-to-markdown to create docs as markdown files
- ⚡ GitHub actions for continuous integration
- 📦 Rollup for bundling
All tools are defined as dev-dependencies
!
Contributing and development
We provide an extensive contribution guideline and a code of conduct to help you in making your contribution a success!
Security
Please read our security policy to get to know which versions are covered.
License
MIT, see license file