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