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

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() and show() 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
  • options
    • Type: Object
    • The options for payment. Check out the available options.

Example

index.html
<!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:

js/main.js
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

paramstypedefaultdescription
isModalbooleanfalseRender as a modal
hasMaskbooleanfalseHas mask or not
payeeIdstring''The Mixin UUID of the payee
settlementAssetIdstring''AssetId of settlement cryptocurrency
settlementMemostring''memo
clientIdstringMixPay.newUUID()UUID of client of the payment
traceIdstring''UUID of the payment for preventing duplicate payment
orderIdstringnullorderId and payeeId makes a payment unique, must be 6-36 letters, [0-9a-zA-Z_-]{6,36}
remarkstring''Payees leave a message to payers
notestring''Payers leave a message to payees
quoteAssetIdstring''assetId of quote cryptocurrencies
quoteAmountnumber''Amount of quote cryptocurrency
onReadyfunctionnullThis event fires when quote assets and payment assets are loaded
onShowfunctionnullThis event fires when the modal is show
onClosefunctionnullThis event fires when the modal is closed
onPaymentCreatefunctionnullThis event fires when a payment is created
onPaymentSuccessfunctionnullThis event fires when a payment is successful
onPaymentFailfunctionnullThis 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.

Using CSS class to customize the UI
Using CSS class to customize the UI

Resources