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>.

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>

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)

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',
});

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;

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

• 🗪 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!

We provide an extensive contribution guideline and a code of conduct to help you in making your contribution a success!

Please read our security policy to get to know which versions are covered.

MIT, see license file