|
1 | 1 | # MixPay.js |
2 | 2 |
|
3 | | -## Main files |
4 | 3 |
|
5 | | -```text |
6 | | -dist/ |
7 | | -├── mixpay.css |
8 | | -├── mixpay.min.css (compressed) |
9 | | -├── mixpay.js (UMD) |
10 | | -├── mixpay.min.js (UMD, compressed) |
11 | | -├── mixpay.common.js (CommonJS, default) |
12 | | -└── mixpay.esm.js (ES Module) |
13 | | -``` |
| 4 | +JavaScript Plugin for mixpay.me. |
14 | 5 |
|
15 | | -## Getting started |
16 | 6 |
|
17 | | -### Installation |
| 7 | +## Document and demo |
18 | 8 |
|
19 | | -```shell |
20 | | -npm install mixpayjs |
21 | | -``` |
22 | | - |
23 | | -In browser: |
24 | | - |
25 | | -```html |
26 | | -<link href="https://cdn.jsdelivr.net/npm/mixpayjs/dist/mixpay.min.css" rel="stylesheet" /> |
27 | | -<script src="https://cdn.jsdelivr.net/npm/mixpayjs/dist/mixpay.min.js""></script> |
28 | | -``` |
29 | | -
|
30 | | -#### Syntax |
31 | | -
|
32 | | -```js |
33 | | -new MixPay(element, options); |
34 | | -``` |
35 | | -
|
36 | | -- **element** |
37 | | - - Type: `HTMLElement` |
38 | | - - Default: `document.body` |
39 | | -- **options** |
40 | | - - Type: `Object` |
41 | | - - The options for payment. Check out the available [options](#options) |
42 | | -
|
43 | | -#### Example |
44 | | -
|
45 | | -```html |
46 | | -<div id="app"></div> |
47 | | -``` |
48 | | -
|
49 | | -```js |
50 | | -import MixPay from 'mixpayjs'; |
51 | | -import 'mixpay/dist/mixpay.css'; |
52 | | -
|
53 | | -const element = document.getElementById('app'); |
54 | | -
|
55 | | -// render as a modal/popup |
56 | | -
|
57 | | -const mixpayModal = new MixPay(element, { |
58 | | - isModal: true, |
59 | | - hasMask: true, |
60 | | - payeeId: '', |
61 | | - settlementAssetId: '', |
62 | | - settlementMemo: '', |
63 | | - settlementMethod: '', |
64 | | - clientId: '', |
65 | | - expireSeconds: '', |
66 | | - remark: '', |
67 | | - note: '', |
68 | | - quoteAssetId: '', |
69 | | - quoteAmount: '', |
70 | | -
|
71 | | - onReady() {}, |
72 | | - onShow() {}, |
73 | | - onClose() {}, |
74 | | - onPaymentCreate() {}, |
75 | | - onPaymentSuccess() {}, |
76 | | - onPaymentFail() {}, |
77 | | -}); |
78 | | -
|
79 | | -mixpayModal.show(); |
80 | | -
|
81 | | -// render as a normal flow |
82 | | -
|
83 | | -const mixpay = new MixPay(element, { |
84 | | - isModal: false, |
85 | | - hasMask: true, |
86 | | - payeeId: '', |
87 | | - settlementAssetId: '', |
88 | | - settlementMemo: '', |
89 | | - settlementMethod: '', |
90 | | - clientId: '', |
91 | | - expireSeconds: '', |
92 | | - orderId: null, |
93 | | - remark: '', |
94 | | - note: '', |
95 | | - quoteAssetId: 'usd', |
96 | | - quoteAmount: '100', |
97 | | -
|
98 | | - onReady() {}, |
99 | | - onShow() {}, |
100 | | - onClose() {}, |
101 | | - onPaymentCreate() {}, |
102 | | - onPaymentSuccess() {}, |
103 | | - onPaymentFail() {}, |
104 | | -}); |
105 | | -
|
106 | | -``` |
107 | | -
|
108 | | -## Options |
109 | | -
|
110 | | -| params | type | default | description | |
111 | | -| ------ | ------- | -------- | ----------- | |
112 | | -| isModal| boolean| false | Render as a modal | |
113 | | -| hasMask | boolean| false | Has mask or not | |
114 | | -| payeeId | string | '' | The Mixin UUID of the payee | |
115 | | -| settlementAssetId | string | '' | AssetId of settlement cryptocurrency | |
116 | | -| settlementMemo | string | '' | memo | |
117 | | -| settlementMethod | string | mixin | 'mixin' or 'mixpay', settle to your Mixin Wallet or MixPay Account | |
118 | | -| clientId | string | MixPay.newUUID() | UUID of client of the payment | |
119 | | -| traceId | string | '' | UUID of the payment for preventing duplicate payment | |
120 | | -| orderId | string | null | orderId and payeeId makes a payment unique, must be 6-36 letters, [0-9a-zA-Z_-]{6,36} | |
121 | | -| expireSeconds | number | null | 60-172800, expiration date of the payment | |
122 | | -| remark | string | '' | Payees leave a message to payers | |
123 | | -| note | string | '' | Payers leave a message to payees | |
124 | | -| quoteAssetId | string | '' | assetId of quote cryptocurrencies | |
125 | | -| quoteAmount | number | '' | Amount of quote cryptocurrency | |
126 | | -| onReady | function | null | This event fires when quote assets and payment assets are loaded | |
127 | | -| onShow | function | null | This event fires when the modal is show | |
128 | | -| onClose | function | null | This event fires when the modal is closed | |
129 | | -| onPaymentCreate | function | null | This event fires when a payment is created | |
130 | | -| onPaymentSuccess | function | null | This event fires when a payment is successful | |
131 | | -| onPaymentFail | function | null | This event fires when a payment is failed | |
132 | | -
|
133 | | -## Instance properties |
134 | | -
|
135 | | -### payments |
136 | | -
|
137 | | -the infomation of the payment you create. |
138 | | -
|
139 | | -### result |
140 | | -
|
141 | | -the result infomation of the your payment; |
142 | | -
|
143 | | -## Instance Methods |
144 | | -
|
145 | | -### destory() |
146 | | -
|
147 | | -remove the modal/element and events from document |
148 | | -
|
149 | | -### show() |
150 | | -### hide() |
151 | | -
|
152 | | -show/hide the modal/popup, if `isModal` is `true` |
153 | | -
|
154 | | -## Global Methods |
155 | | -
|
156 | | -### newUUID() |
157 | | -
|
158 | | -create a random UUID for `clientId` and `traceId` |
159 | | -
|
160 | | -## Resources |
161 | | -
|
162 | | -* [Documentation API](https://developers.mixpay.me/docs/api-overview) |
| 9 | +Please go to - https://mixpay.me/developers/guides/using-js-plugin |
0 commit comments