@motopays/pay-form 1.0.9 → 1.0.10-rc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +342 -198
- package/lib/index.js +1 -1
- package/package.json +19 -19
package/README.md
CHANGED
|
@@ -1,199 +1,343 @@
|
|
|
1
|
-
# @motopays/pay-form
|
|
2
|
-
|
|
3
|
-
## Installation
|
|
4
|
-
|
|
5
|
-
```
|
|
6
|
-
npm i @motopays/pay-form
|
|
7
|
-
#or
|
|
8
|
-
yarn add @motopays/pay-form
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<body>
|
|
15
|
-
<moto-web-pay id="payment"></moto-web-pay>
|
|
16
|
-
</body>
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
```javascript
|
|
20
|
-
import "@motopays/pay-form/lib/index.js";
|
|
21
|
-
import "@motopays/pay-form/lib/styles/styles.css";
|
|
22
|
-
|
|
23
|
-
const payment$ = document.querySelector("#payment");
|
|
24
|
-
|
|
25
|
-
payment$.payment = {
|
|
26
|
-
customerAuthToken?: string;
|
|
27
|
-
|
|
28
|
-
env: EnvironmentType; //one of strings:
|
|
29
|
-
|
|
30
|
-
paymentId: string;
|
|
31
|
-
amount: number;
|
|
32
|
-
amountType?: AmountType; //one of strings: GrossWithoutGst, Net, Gross
|
|
33
|
-
tax?: number;
|
|
34
|
-
orderType?: OrderType; //one of numbers: Regular, FreeTrial
|
|
35
|
-
currency: string;
|
|
36
|
-
customerId: string;
|
|
37
|
-
merchantId: string;
|
|
38
|
-
initiator?: PaymentInitiatorType; //one of strings: Customer, Merchant
|
|
39
|
-
|
|
40
|
-
webhookUrl: string;
|
|
41
|
-
returnUrl: string;
|
|
42
|
-
|
|
43
|
-
description: string;
|
|
44
|
-
email?: string;
|
|
45
|
-
details?: ISimple<any>; //any object
|
|
46
|
-
phoneNumber?: string;
|
|
47
|
-
ipAddress?: string;
|
|
48
|
-
|
|
49
|
-
billingAddress?: {
|
|
50
|
-
addressLine: string;
|
|
51
|
-
city: string;
|
|
52
|
-
state: string;
|
|
53
|
-
country: string;
|
|
54
|
-
zip: string;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
###
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
|
113
|
-
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
1
|
+
# @motopays/pay-form
|
|
2
|
+
|
|
3
|
+
## Installation
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
npm i @motopays/pay-form
|
|
7
|
+
#or
|
|
8
|
+
yarn add @motopays/pay-form
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<body>
|
|
15
|
+
<moto-web-pay id="payment"></moto-web-pay>
|
|
16
|
+
</body>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```javascript
|
|
20
|
+
import "@motopays/pay-form/lib/index.js";
|
|
21
|
+
import "@motopays/pay-form/lib/styles/styles.css";
|
|
22
|
+
|
|
23
|
+
const payment$ = document.querySelector("#payment");
|
|
24
|
+
|
|
25
|
+
payment$.payment = {
|
|
26
|
+
customerAuthToken?: string;
|
|
27
|
+
|
|
28
|
+
env: EnvironmentType; //one of strings: dev, stage, live, prod
|
|
29
|
+
|
|
30
|
+
paymentId: string;
|
|
31
|
+
amount: number;
|
|
32
|
+
amountType?: AmountType; //one of strings: GrossWithoutGst, Net, Gross
|
|
33
|
+
tax?: number;
|
|
34
|
+
orderType?: OrderType; //one of numbers: Regular, FreeTrial
|
|
35
|
+
currency: string;
|
|
36
|
+
customerId: string;
|
|
37
|
+
merchantId: string;
|
|
38
|
+
initiator?: PaymentInitiatorType; //one of strings: Customer, Merchant
|
|
39
|
+
|
|
40
|
+
webhookUrl: string;
|
|
41
|
+
returnUrl: string;
|
|
42
|
+
|
|
43
|
+
description: string;
|
|
44
|
+
email?: string;
|
|
45
|
+
details?: ISimple<any>; //any object
|
|
46
|
+
phoneNumber?: string;
|
|
47
|
+
ipAddress?: string;
|
|
48
|
+
|
|
49
|
+
billingAddress?: {
|
|
50
|
+
addressLine: string;
|
|
51
|
+
city: string;
|
|
52
|
+
state: string;
|
|
53
|
+
country: string;
|
|
54
|
+
zip: string;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
customEndpoints?: {
|
|
58
|
+
billingProfiles?: string;
|
|
59
|
+
processing?: string
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
payment$.settings = {
|
|
64
|
+
isPhoneNumberFieldVisible: false;
|
|
65
|
+
isCloseButtonVisible: true;
|
|
66
|
+
isMerchantInfoVisible: true;
|
|
67
|
+
merchantInfo: 'The info';
|
|
68
|
+
merchantLinks: { text: string; href: string; } [];
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
payment$.addEventListener("close", (event) => {
|
|
73
|
+
console.log("clicked to close icon: ", e); // Custom event
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
payment$.addEventListener("paid", (event) => {
|
|
77
|
+
console.log("event after pay: ", event.detail); // Payment result event
|
|
78
|
+
});
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Usage with TypeScript
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
declare module "@motopays/pay-form/pay";
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Payment interface
|
|
88
|
+
|
|
89
|
+
| Field | Type | Description |
|
|
90
|
+
| ------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
91
|
+
| customerAuthToken | string | End-customer authorization token to access Moto services |
|
|
92
|
+
| env **\*required** | EnvironmentType or string | App environments, for testing, develop and production. Currently accepted: {test, qa1, qa2, qa3, dev, live, prod} |
|
|
93
|
+
| paymentId **\*required** | string | Id of a payment |
|
|
94
|
+
| amount **\*required** | number | Payment amount |
|
|
95
|
+
| amountType | AmountType or string | Type of amount can be only one of the following values: {GrossWithoutGst, Net, Gross} |
|
|
96
|
+
| tax | number | Payment tax |
|
|
97
|
+
| orderType | OrderType or string | Type of order can be only one of the following values: {Regular, FreeTrial} |
|
|
98
|
+
| currency **\*required** | string | Payment currency in ISO_4217 format. Currently accepted: {gbp, eur, usd} |
|
|
99
|
+
| customerId **\*required** | string | End-customer Id in merchant's system. That parameter can be used to find a best button appearance for the particular customer. |
|
|
100
|
+
| merchantId **\*required** | string | Merchant's identificator, issued by Moto. |
|
|
101
|
+
| initiator | PaymentInitiatorType or string | Identifies who of 2 types initiated the payment. Currently accepted: {Merchant, Customer} |
|
|
102
|
+
| webhookUrl | string | URL where the Moto will send hooks about the payment status changes |
|
|
103
|
+
| returnUrl **\*required** | string | After the payment completed, customer will be redirected into this Url |
|
|
104
|
+
| description | string | Short order description for the customer |
|
|
105
|
+
| email | string | End-customer e-mail. That parameter can be used to find a best button appearance for the particular customer. |
|
|
106
|
+
| details | ISimple<any> | Additional information about payment |
|
|
107
|
+
| phoneNumber | string | End-customer phone number (can be changed if a customer fill the number by themself) |
|
|
108
|
+
| ipAddress | string | End-customer ip address |
|
|
109
|
+
| billingAddress | BillingAddress | The address linked to a customer bank account |
|
|
110
|
+
| billingAddress.addressLine | string | Street, building appartment and etc in one line |
|
|
111
|
+
| billingAddress.city | string | City of a customer bank account |
|
|
112
|
+
| billingAddress.state | string | State of a customer bank account |
|
|
113
|
+
| billingAddress.country | string | Country of a customer bank account (ISO 3166-1 alpha-2 country code). Example: US |
|
|
114
|
+
| billingAddress.zip | string | Zip of a customer bank account |
|
|
115
|
+
| customEndpoints.billingProfiles | string | Custom set endpoint for BillingProfiles |
|
|
116
|
+
| customEndpoints.processing | string | Custom set endpoint for Processing
|
|
117
|
+
|
|
118
|
+
### Settings interface
|
|
119
|
+
|
|
120
|
+
| Field | Type | Description |
|
|
121
|
+
|-----------------------------|---------|-----------------------------------------------------------------------------|
|
|
122
|
+
| isPhoneNumberFieldVisible | boolean | Whether to show the phone input field when creating a map |
|
|
123
|
+
| isCloseButtonVisible | boolean | Whether to show a window close button in the top right corner of the screen |
|
|
124
|
+
| isMerchantInfoVisible | boolean | Whether to show information about merchant |
|
|
125
|
+
| merchantInfo | string | The information displays in merchant info section |
|
|
126
|
+
| merchantLinks | ILink[] | The array of link which will be displayed in merchant info section |
|
|
127
|
+
|
|
128
|
+
Example of merchant links:
|
|
129
|
+
```
|
|
130
|
+
merchantLinks: [
|
|
131
|
+
{
|
|
132
|
+
text: 'Terms of service',
|
|
133
|
+
href: 'https://my.host.com/terms_of_service',
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
text: 'Privacy policy',
|
|
137
|
+
href: 'https://my.host.com/privacy_policy',
|
|
138
|
+
}
|
|
139
|
+
]
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### Output events
|
|
143
|
+
|
|
144
|
+
| Event | Type | Description |
|
|
145
|
+
| ----- | -------------- | -------------------------------------------- |
|
|
146
|
+
| close | void | triggered by clicking on the closing icon |
|
|
147
|
+
| paid | Payment Result | triggered after receiving a payment response |
|
|
148
|
+
|
|
149
|
+
### Payment Result Structure
|
|
150
|
+
|
|
151
|
+
```javascript
|
|
152
|
+
IPaymentResponse {
|
|
153
|
+
action?: {
|
|
154
|
+
name: string;
|
|
155
|
+
data: IThreeDsData | IRedirectData | any;
|
|
156
|
+
}
|
|
157
|
+
ip: string;
|
|
158
|
+
merchant: string;
|
|
159
|
+
order: {
|
|
160
|
+
invoiceId: string;
|
|
161
|
+
details: string;
|
|
162
|
+
}
|
|
163
|
+
payment: {
|
|
164
|
+
paymentId: string;
|
|
165
|
+
state: PaymentState; //on of strings: completed, rejected, needAction
|
|
166
|
+
rebillAnchor: string;
|
|
167
|
+
info: {
|
|
168
|
+
completeProcessingTime?: Date;
|
|
169
|
+
currency: string;
|
|
170
|
+
paymentType: string;
|
|
171
|
+
paymentSystem: string;
|
|
172
|
+
paymentRequisites?: string;
|
|
173
|
+
price: number
|
|
174
|
+
}
|
|
175
|
+
rejectionDetails?: {
|
|
176
|
+
hardDecline: boolean;
|
|
177
|
+
message?: string;
|
|
178
|
+
problemSolvingTips: string[];
|
|
179
|
+
rejectionCode: number;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
taxInfo: {
|
|
183
|
+
abbreviation: string;
|
|
184
|
+
price: number;
|
|
185
|
+
priceNet: number;
|
|
186
|
+
tax: number;
|
|
187
|
+
}
|
|
188
|
+
user: {
|
|
189
|
+
id: string;
|
|
190
|
+
}
|
|
191
|
+
signature: string;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
IThreeDsData {
|
|
195
|
+
paReq: string;
|
|
196
|
+
acsurl: string;
|
|
197
|
+
termUrl: string;
|
|
198
|
+
md: string;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
IRedirectData {
|
|
202
|
+
location: string;
|
|
203
|
+
}
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
### Custom Endpoints
|
|
207
|
+
|
|
208
|
+
If it's necessary to override endpoints, It's possible to do by overriding them through CustomEndpoint field.
|
|
209
|
+
|
|
210
|
+
BillingProfiles endpoints in use of this form:
|
|
211
|
+
```
|
|
212
|
+
Get method: {billingProfilesEndpoint}/api/UserPaymentMethods
|
|
213
|
+
Description: Payment methods user's already used before
|
|
214
|
+
Returns: [
|
|
215
|
+
{
|
|
216
|
+
id: string;
|
|
217
|
+
isDefault: boolean;
|
|
218
|
+
name: string;
|
|
219
|
+
rebill: string;
|
|
220
|
+
type: string;
|
|
221
|
+
},
|
|
222
|
+
...
|
|
223
|
+
]
|
|
224
|
+
|
|
225
|
+
Delete method: {billingProfilesEndpoint}/api/UserPaymentMethods/${cardId}
|
|
226
|
+
Description: delete card user's used before
|
|
227
|
+
Returns: void
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
Processing endpoints in use of this form:
|
|
231
|
+
```
|
|
232
|
+
Get method: {processingEndpoint}/api/merchants/${merchantId}/settings
|
|
233
|
+
Description: Available apms
|
|
234
|
+
Query params: {
|
|
235
|
+
currency: string,
|
|
236
|
+
payerId: string
|
|
237
|
+
}
|
|
238
|
+
Returns: {
|
|
239
|
+
payments: [
|
|
240
|
+
{
|
|
241
|
+
name: string;
|
|
242
|
+
logo: string;
|
|
243
|
+
},
|
|
244
|
+
...
|
|
245
|
+
]
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
Get method: {processingEndpoint}/api/merchants/${merchantId}/payments/${paymentId}
|
|
249
|
+
Description: Get payment info
|
|
250
|
+
Returns:
|
|
251
|
+
{
|
|
252
|
+
action?: {
|
|
253
|
+
name: string;
|
|
254
|
+
data: IThreeDsData | IRedirectData | any;
|
|
255
|
+
}
|
|
256
|
+
ip: string;
|
|
257
|
+
merchant: string;
|
|
258
|
+
order: {
|
|
259
|
+
invoiceId: string;
|
|
260
|
+
details: string;
|
|
261
|
+
}
|
|
262
|
+
payment: {
|
|
263
|
+
paymentId: string;
|
|
264
|
+
state: PaymentState;
|
|
265
|
+
rebillAnchor: string;
|
|
266
|
+
info: {
|
|
267
|
+
completeProcessingTime?: Date;
|
|
268
|
+
currency: string;
|
|
269
|
+
paymentType: string;
|
|
270
|
+
paymentSystem: string;
|
|
271
|
+
paymentRequisites?: string;
|
|
272
|
+
price: number
|
|
273
|
+
}
|
|
274
|
+
rejectionDetails?: {
|
|
275
|
+
hardDecline: boolean;
|
|
276
|
+
message?: string;
|
|
277
|
+
problemSolvingTips: string[];
|
|
278
|
+
rejectionCode: number;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
taxInfo: {
|
|
282
|
+
abbreviation: string;
|
|
283
|
+
price: number;
|
|
284
|
+
priceNet: number;
|
|
285
|
+
tax: number;
|
|
286
|
+
}
|
|
287
|
+
user: {
|
|
288
|
+
id: string;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
Get method: {processingEndpoint}/api/security/key/${secretId}
|
|
293
|
+
Description: Get secret key for encryption (it's better to contact Moto team). By default secretId = 2
|
|
294
|
+
Returns: string
|
|
295
|
+
|
|
296
|
+
Post method: {processingEndpoint}/api/merchants/{merchantId}/payments
|
|
297
|
+
Description: Make payment
|
|
298
|
+
Body: It's better to contact Moto team
|
|
299
|
+
Returns: {
|
|
300
|
+
action?: {
|
|
301
|
+
name: string;
|
|
302
|
+
data: IThreeDsData | IRedirectData | any;
|
|
303
|
+
}
|
|
304
|
+
ip: string;
|
|
305
|
+
merchant: string;
|
|
306
|
+
order: {
|
|
307
|
+
invoiceId: string;
|
|
308
|
+
details: string;
|
|
309
|
+
}
|
|
310
|
+
payment: {
|
|
311
|
+
paymentId: string;
|
|
312
|
+
state: PaymentState;
|
|
313
|
+
rebillAnchor: string;
|
|
314
|
+
info: {
|
|
315
|
+
completeProcessingTime?: Date;
|
|
316
|
+
currency: string;
|
|
317
|
+
paymentType: string;
|
|
318
|
+
paymentSystem: string;
|
|
319
|
+
paymentRequisites?: string;
|
|
320
|
+
price: number
|
|
321
|
+
}
|
|
322
|
+
rejectionDetails?: {
|
|
323
|
+
hardDecline: boolean;
|
|
324
|
+
message?: string;
|
|
325
|
+
problemSolvingTips: string[];
|
|
326
|
+
rejectionCode: number;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
taxInfo: {
|
|
330
|
+
abbreviation: string;
|
|
331
|
+
price: number;
|
|
332
|
+
priceNet: number;
|
|
333
|
+
tax: number;
|
|
334
|
+
}
|
|
335
|
+
user: {
|
|
336
|
+
id: string;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
### Webpack 5 Issues
|
|
342
|
+
|
|
199
343
|
During the integration process, you might face multiple issues with webpack 5. This issue is caused due to the fact that some packages have certain dependencies, which are not present within the browser environment by webpack 5. Hence, you require certain [node polyfills](https://webpack.js.org/configuration/resolve/#resolvefallback) to be added to your project, while overriding the configurations to enable their usage. When that is done, your project should run without any issues.
|