Using JS Plugin
You can use our open-source JavaScript plugin to support crypto payment on your web page.
This method lets your customer complete the payment without leaving your website.
Online Demo
- Real-time Demo: https://mixpay.me/plugins/payment.html
- Source code of the Demo: https://github.com/MixPayProtocol/mixpayjs/tree/master/docs
JS Plugin vs Paylink
Compared to Paylink, the MixPay JS plugin runs on your page; you can have more control over it. For example:
- Customise the UI;
- Use the plugin's callback function or
hide()andshow()method to customise the logic.
The disadvantage of the JS Plugin is that when MixPay new feature is added, you must manually update the JS plugin.
Source Code
The JS plugin source code repo is https://github.com/MixPayProtocol/mixpayjs .
├── dist - Production ready code.
├── example - Example of the JS Plugin.
└── src - Source code of the JS Plugin.
dist file explains:
dist/
├── mixpay.css
├── mixpay.min.css (compressed)
├── mixpay.js (UMD)
├── mixpay.min.js (UMD, compressed)
├── mixpay.common.js (CommonJS, default)
└── mixpay.esm.js (ES Module)
Install JS Plugin
Option 1. Use npm
npm install mixpayjs
Option 2. Use CDN
<link href="https://cdn.jsdelivr.net/npm/mixpayjs/dist/mixpay.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/mixpayjs/dist/mixpay.min.js""></script>
Using JS Plugin
Syntax
Just new the MixPay object and provide the necessary parameters:
new MixPay(element, options);
- element
- Type:
HTMLElement - Default:
document.body
- Type:
- options
- Type:
Object - The options for payment. Check out the available options.
- Type:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of MixPay JS Plugin</title>
<link rel="stylesheet" href="css/mixpay.css">
</head>
<body>
<div id="mixpay-plugin-wrapper"></div>
<button id="pay-with-mixpy-btn">Pay with MixPay</button>
</body>
<script src="js/mixpay.js"></script>
<script src="js/main.js"></script>
</html>
Using the plugin as a popup:
window.onload = function () {
var MixPay = window.MixPay;
var element = document.getElementById('mixpay-plugin-wrapper');
var btn = document.getElementById('pay-with-mixpy-btn');
var mixpayModal = new MixPay(element, {
isModal: true,
hasMask: true,
payeeId: 'a0d7791408776b47eb1dd3f94ed15d6a',
settlementAssetId: '4d8c508b-91c5-375b-92b0-ee702ed2dac5',
settlementMemo: 'this is a demo.',
orderId: '123131',
fontSize: 16,
remark: 'this is a demo.',
onReady: function () {
console.log('onReady');
},
onShow: function () {
console.log('onShow');
},
onClose: function () {
console.log('onClose');
},
onPaymentCreate: function () {
console.log('onPaymentCreate');
},
onPaymentSuccess: function () {
console.log('onPaymentSuccess');
},
onPaymentFail: function () {
console.log('onPaymentFail');
},
});
btn.onclick = function () {
if (!mixpayModal.isShow) {
mixpayModal.show();
} else {
mixpayModal.close();
}
};
};
Using it as embedded element:
const mixpay = new MixPay(element, {
isModal: false, // as embedded element
.
.
.
});
Options
| params | type | default | description |
|---|---|---|---|
| isModal | boolean | false | Render as a modal |
| hasMask | boolean | false | Has mask or not |
| payeeId | string | '' | The Mixin UUID of the payee |
| settlementAssetId | string | '' | AssetId of settlement cryptocurrency |
| settlementMemo | string | '' | memo |
| clientId | string | MixPay.newUUID() | UUID of client of the payment |
| traceId | string | '' | UUID of the payment for preventing duplicate payment |
| orderId | string | null | orderId and payeeId makes a payment unique, must be 6-36 letters, [0-9a-zA-Z_-]{6,36} |
| remark | string | '' | Payees leave a message to payers |
| note | string | '' | Payers leave a message to payees |
| quoteAssetId | string | '' | assetId of quote cryptocurrencies |
| quoteAmount | number | '' | Amount of quote cryptocurrency |
| onReady | function | null | This event fires when quote assets and payment assets are loaded |
| onShow | function | null | This event fires when the modal is show |
| onClose | function | null | This event fires when the modal is closed |
| onPaymentCreate | function | null | This event fires when a payment is created |
| onPaymentSuccess | function | null | This event fires when a payment is successful |
| onPaymentFail | function | null | This event fires when a payment is failed |
Instance properties
payments
The information of the payment you create.
result
the result information of the your payment;
Instance Methods
show() and hide()
Show/hide the modal/popup if isModal is true.
destory()
Remove the modal/element and events from the document.
Global Methods
newUUID()
create a random UUID for clientId and traceId.
How to customise the UI?
You can customise the UI through --mixpay parent CSS class. It acts like a namespace and will not mess with your website style.
