@motopays/pay-form 1.0.10-rc.4 → 1.0.10
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/CHANGELOG.md +47 -46
- package/README.md +277 -277
- package/lib/index.js +1 -1
- package/package.json +20 -20
package/CHANGELOG.md
CHANGED
|
@@ -1,47 +1,48 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
## 1.0.10
|
|
4
|
-
|
|
5
|
-
### Breaking changes
|
|
6
|
-
|
|
7
|
-
##### Payment model
|
|
8
|
-
- cusomterAuthToken field renamed to userAuthToken
|
|
9
|
-
- customerId field renamed to userId
|
|
10
|
-
- env field deleted (set urls.billingProfiles and urls.processing from 'settings' model instead)
|
|
11
|
-
|
|
12
|
-
##### Settings model
|
|
13
|
-
- the model has become mandatory
|
|
14
|
-
- isEmailFieldVisible field deleted
|
|
15
|
-
- merchantInfo field type changed. Now it's: {
|
|
16
|
-
 visible: boolean,
|
|
17
|
-
 text: string,
|
|
18
|
-
 links?: ILink[]
|
|
19
|
-
}
|
|
20
|
-
- isMerchantInfoVisible field renamed and moved to merchantInfo.visible
|
|
21
|
-
- merchantLinks field renamed and moved to merchantInfo.links
|
|
22
|
-
- urls field added instead of env field from 'payment'. Now it's: {
|
|
23
|
-
//example: "https://processing.dev.motopays.com"
|
|
24
|
-
 processing: string;
|
|
25
|
-
 billingProfiles: string;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
### Added
|
|
29
|
-
- chargeTerms field added to settings model. This field allows to configure checkboxes that have to be selected by users (otherwise, users cannot make payments).
|
|
30
|
-
The interface of the field: {
|
|
31
|
-
 visible: boolean,
|
|
32
|
-
 checkboxes?: ITermCheckbox[],
|
|
33
|
-
 text: string;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
The interface of ITermCheckbox: {
|
|
37
|
-
 text: string;
|
|
38
|
-
 link?: ILink;
|
|
39
|
-
}
|
|
40
|
-
- availableCardBrands field added to settings model. It's an array of strings which will be shown to users as available card payment methods. Now it supports these strings: "american-express" | "discover" | "jcb" | "maestro" | "mastercard" | "unionpay" | "visa"
|
|
41
|
-
- Checkboxes
|
|
42
|
-
- Text for the checkboxes
|
|
43
|
-
- Payment methods icons
|
|
44
|
-
- Transactions secured icons
|
|
45
|
-
|
|
46
|
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 1.0.10
|
|
4
|
+
|
|
5
|
+
### Breaking changes
|
|
6
|
+
|
|
7
|
+
##### Payment model
|
|
8
|
+
- cusomterAuthToken field renamed to userAuthToken
|
|
9
|
+
- customerId field renamed to userId
|
|
10
|
+
- env field deleted (set urls.billingProfiles and urls.processing from 'settings' model instead)
|
|
11
|
+
|
|
12
|
+
##### Settings model
|
|
13
|
+
- the model has become mandatory
|
|
14
|
+
- isEmailFieldVisible field deleted
|
|
15
|
+
- merchantInfo field type changed. Now it's: {
|
|
16
|
+
 visible: boolean,
|
|
17
|
+
 text: string,
|
|
18
|
+
 links?: ILink[]
|
|
19
|
+
}
|
|
20
|
+
- isMerchantInfoVisible field renamed and moved to merchantInfo.visible
|
|
21
|
+
- merchantLinks field renamed and moved to merchantInfo.links
|
|
22
|
+
- urls field added instead of env field from 'payment'. Now it's: {
|
|
23
|
+
//example: "https://processing.dev.motopays.com"
|
|
24
|
+
 processing: string;
|
|
25
|
+
 billingProfiles: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
### Added
|
|
29
|
+
- chargeTerms field added to settings model. This field allows to configure checkboxes that have to be selected by users (otherwise, users cannot make payments).
|
|
30
|
+
The interface of the field: {
|
|
31
|
+
 visible: boolean,
|
|
32
|
+
 checkboxes?: ITermCheckbox[],
|
|
33
|
+
 text: string;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
The interface of ITermCheckbox: {
|
|
37
|
+
 text: string;
|
|
38
|
+
 link?: ILink;
|
|
39
|
+
}
|
|
40
|
+
- availableCardBrands field added to settings model. It's an array of strings which will be shown to users as available card payment methods. Now it supports these strings: "american-express" | "discover" | "jcb" | "maestro" | "mastercard" | "unionpay" | "visa"
|
|
41
|
+
- Checkboxes
|
|
42
|
+
- Text for the checkboxes
|
|
43
|
+
- Payment methods icons
|
|
44
|
+
- Transactions secured icons
|
|
45
|
+
- Signature in response model of payment
|
|
46
|
+
|
|
47
|
+
### Changes
|
|
47
48
|
- Styles for links, indent and text at the bottom of the payment form
|
package/README.md
CHANGED
|
@@ -1,278 +1,278 @@
|
|
|
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
|
-
userAuthToken?: string;
|
|
27
|
-
userId: string;
|
|
28
|
-
|
|
29
|
-
paymentId: string;
|
|
30
|
-
amount: number;
|
|
31
|
-
amountType?: AmountType; //one of strings: GrossWithoutGst, Net, Gross
|
|
32
|
-
tax?: number;
|
|
33
|
-
orderType?: OrderType; //one of numbers: Regular, FreeTrial
|
|
34
|
-
currency: string;
|
|
35
|
-
merchantId: string;
|
|
36
|
-
initiator?: PaymentInitiatorType; //one of strings: Customer, Merchant
|
|
37
|
-
|
|
38
|
-
webhookUrl?: string;
|
|
39
|
-
returnUrl?: string;
|
|
40
|
-
|
|
41
|
-
description: string;
|
|
42
|
-
email?: string;
|
|
43
|
-
details?: ISimple<any>; //any object
|
|
44
|
-
phoneNumber?: string;
|
|
45
|
-
ipAddress?: string;
|
|
46
|
-
|
|
47
|
-
billingAddress?: {
|
|
48
|
-
addressLine: string;
|
|
49
|
-
city: string;
|
|
50
|
-
state: string;
|
|
51
|
-
country: string;
|
|
52
|
-
zip: string;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
payment$.settings = {
|
|
57
|
-
isPhoneNumberFieldVisible: boolean;
|
|
58
|
-
isCloseButtonVisible: boolean;
|
|
59
|
-
|
|
60
|
-
urls: {
|
|
61
|
-
//For example, "https://billingprofiles.dating.com
|
|
62
|
-
billingProfiles: string;
|
|
63
|
-
processing: string;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
//Now it supports these strings: "american-express" | "discover" | "jcb" | "maestro" | "mastercard" | "unionpay" | "visa"
|
|
67
|
-
availableCardBrands: string[] or CreditCardTypeCardBrandId[];
|
|
68
|
-
|
|
69
|
-
chargeTerms: {
|
|
70
|
-
visible: boolean;
|
|
71
|
-
text?: string;
|
|
72
|
-
checkboxes?: {
|
|
73
|
-
text: string;
|
|
74
|
-
link: {
|
|
75
|
-
text: string;
|
|
76
|
-
href: string;
|
|
77
|
-
}
|
|
78
|
-
} [];
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
merchantInfo: {
|
|
82
|
-
visible: boolean;
|
|
83
|
-
text?: string;
|
|
84
|
-
links?: {
|
|
85
|
-
text: string;
|
|
86
|
-
href: string;
|
|
87
|
-
} [];
|
|
88
|
-
};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
payment$.addEventListener("close", (event) => {
|
|
92
|
-
console.log("clicked to close icon: ", e); // Custom event
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
payment$.addEventListener("paid", (event) => {
|
|
96
|
-
console.log("event after pay: ", event.detail); // Payment result event
|
|
97
|
-
});
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
### Usage with TypeScript
|
|
101
|
-
|
|
102
|
-
```typescript
|
|
103
|
-
declare module "@motopays/pay-form/pay";
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### Payment interface
|
|
107
|
-
|
|
108
|
-
| Field | Type | Description |
|
|
109
|
-
| ------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
110
|
-
| userAuthToken | string | End-user authorization token to access Motopays services |
|
|
111
|
-
| userId **\*required** | string | External end-user Id generated on the merchant side (not Motopays) |
|
|
112
|
-
| paymentId **\*required** | string | Id of a payment |
|
|
113
|
-
| amount **\*required** | number | Payment amount |
|
|
114
|
-
| amountType | AmountType or string | Type of amount can be only one of the following values: {GrossWithoutGst, Net, Gross} |
|
|
115
|
-
| tax | number | Payment tax |
|
|
116
|
-
| orderType | OrderType or string | Type of order can be only one of the following values: {Regular, FreeTrial} |
|
|
117
|
-
| currency **\*required** | string | Payment currency in ISO_4217 format. Currently accepted: {gbp, eur, usd} |
|
|
118
|
-
| merchantId **\*required** | string | Merchant's identificator, issued by Motopays. |
|
|
119
|
-
| initiator | PaymentInitiatorType or string | Identifies who of 2 types initiated the payment. Currently accepted: {Merchant, Customer} |
|
|
120
|
-
| webhookUrl | string | URL where the Motopays will send hooks about the payment status changes |
|
|
121
|
-
| returnUrl | string | The URL to which the user will be redirected after completing some types of payment, such as PayPal |
|
|
122
|
-
| description | string | Short order description for the customer |
|
|
123
|
-
| email | string | End-customer e-mail. That parameter can be used to find a best button appearance for the particular customer. |
|
|
124
|
-
| details | ISimple<any> | Additional information about payment |
|
|
125
|
-
| phoneNumber | string | End-customer phone number (can be changed if a customer fill the number by themself) |
|
|
126
|
-
| ipAddress | string | End-customer ip address |
|
|
127
|
-
| billingAddress | BillingAddress | The address linked to a customer bank account |
|
|
128
|
-
| billingAddress.addressLine | string | Street, building appartment and etc in one line |
|
|
129
|
-
| billingAddress.city | string | City of a customer bank account |
|
|
130
|
-
| billingAddress.state | string | State of a customer bank account |
|
|
131
|
-
| billingAddress.country | string | Country of a customer bank account (ISO 3166-1 alpha-2 country code). Example: US |
|
|
132
|
-
| billingAddress.zip | string | Zip of a customer bank account |
|
|
133
|
-
|
|
134
|
-
### Settings interface
|
|
135
|
-
|
|
136
|
-
| Field | Type | Description |
|
|
137
|
-
|-----------------------------|---------|-----------------------------------------------------------------------------|
|
|
138
|
-
| urls **\*required** | IServicesUrls | The necessary services urls |
|
|
139
|
-
| urls.processing **\*required** | string | The processing service URL |
|
|
140
|
-
| urls.billingprofiles **\*required** | string | The billing profiles service URL |
|
|
141
|
-
| isPhoneNumberFieldVisible | boolean | Whether to show the phone input field when creating a map |
|
|
142
|
-
| isCloseButtonVisible | boolean | Whether to show a window close button in the top right corner of the screen |
|
|
143
|
-
| merchantInfo | IMerchantInfoSettings | The information displays in merchant info section |
|
|
144
|
-
| merchantInfo.visible | boolean | Whether to show the merchant information |
|
|
145
|
-
| merchantInfo.text | string | The information about a merchant |
|
|
146
|
-
| merchantInfo.links | ILink[] | The array of merchant links. For example, Policy and Terms |
|
|
147
|
-
| chargeTerms | IChargeTermsSettings | The charge terms section |
|
|
148
|
-
| chargeTerms.visible | boolean | Whether to show the charge terms |
|
|
149
|
-
| chargeTerms.checkboxes | ITermCheckbox[] | The checkboxes that, without being selected, the user will not be able to make a payment. All these checkboxes have to be selected by user to be able to make a payment |
|
|
150
|
-
| chargeTerms.text | string | The text of charge terms. For example, description of subscription plan |
|
|
151
|
-
| availableCardBrands | string[] or CreditCardTypeCardBrandId[] | The сard brands for which icons will be displayed on the form as card payment methods. Currently accepted: {american-express, discover, jcb, maestro, mastercard, unionpay, visa} |
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
ILink interface:
|
|
155
|
-
```
|
|
156
|
-
interface ILink {
|
|
157
|
-
text: string;
|
|
158
|
-
href: string;
|
|
159
|
-
}
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
ITermCheckbox interface:
|
|
163
|
-
```
|
|
164
|
-
interface ITermCheckbox {
|
|
165
|
-
text: string;
|
|
166
|
-
link?: ILink;
|
|
167
|
-
}
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
Example of merchantInfo:
|
|
171
|
-
```
|
|
172
|
-
merchantInfo: {
|
|
173
|
-
"visible": true,
|
|
174
|
-
"text": "The vendor prides itself on designing and implementing state-of-the-art payment infrastructures that cater to a wide range of commercial activities. Specializing in the creation of robust payment processing platforms, the merchant provides tailored solutions that support the dynamic needs of the global market",
|
|
175
|
-
"links": [
|
|
176
|
-
{
|
|
177
|
-
"text": "Terms",
|
|
178
|
-
"href": "https://www.google.com/"
|
|
179
|
-
},
|
|
180
|
-
{
|
|
181
|
-
"text": "Policy",
|
|
182
|
-
"href": "https://www.google.com/"
|
|
183
|
-
}
|
|
184
|
-
]
|
|
185
|
-
}
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
Example of chargeTerms:
|
|
189
|
-
```
|
|
190
|
-
chargeTerms: {
|
|
191
|
-
"visible": true,
|
|
192
|
-
"text": "By checking this box, I am affirming my full and complete understanding of, as well as my agreement to, all the terms and conditions that were previously presented to me, acknowledging that they form a binding contractual agreement.",
|
|
193
|
-
"checkboxes": [
|
|
194
|
-
{
|
|
195
|
-
"text": "I hereby agree to the conditions previously outlined.",
|
|
196
|
-
"link": {
|
|
197
|
-
"text": "Link to the application",
|
|
198
|
-
"href": "https://www.google.com/"
|
|
199
|
-
}
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
"text": "I validate the foregoing stipulations.",
|
|
203
|
-
"link": {
|
|
204
|
-
"text": "Google",
|
|
205
|
-
"href": "https://www.google.com/"
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
]
|
|
209
|
-
},
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
### Output events
|
|
213
|
-
|
|
214
|
-
| Event | Type | Description |
|
|
215
|
-
| ----- | -------------- | -------------------------------------------- |
|
|
216
|
-
| close | void | triggered by clicking on the closing icon |
|
|
217
|
-
| paid | Payment Result | triggered after receiving a payment response |
|
|
218
|
-
|
|
219
|
-
### Payment Result Structure
|
|
220
|
-
|
|
221
|
-
```javascript
|
|
222
|
-
IPaymentResponse {
|
|
223
|
-
action?: {
|
|
224
|
-
name: string;
|
|
225
|
-
data: IThreeDsData | IRedirectData | any;
|
|
226
|
-
}
|
|
227
|
-
ip: string;
|
|
228
|
-
merchant: string;
|
|
229
|
-
order: {
|
|
230
|
-
invoiceId: string;
|
|
231
|
-
details: string;
|
|
232
|
-
}
|
|
233
|
-
payment: {
|
|
234
|
-
paymentId: string;
|
|
235
|
-
state: PaymentState; //on of strings: completed, rejected, needAction
|
|
236
|
-
rebillAnchor: string;
|
|
237
|
-
info: {
|
|
238
|
-
completeProcessingTime?: Date;
|
|
239
|
-
currency: string;
|
|
240
|
-
paymentType: string;
|
|
241
|
-
paymentSystem: string;
|
|
242
|
-
paymentRequisites?: string;
|
|
243
|
-
price: number
|
|
244
|
-
}
|
|
245
|
-
rejectionDetails?: {
|
|
246
|
-
hardDecline: boolean;
|
|
247
|
-
message?: string;
|
|
248
|
-
problemSolvingTips: string[];
|
|
249
|
-
rejectionCode: number;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
taxInfo: {
|
|
253
|
-
abbreviation: string;
|
|
254
|
-
price: number;
|
|
255
|
-
priceNet: number;
|
|
256
|
-
tax: number;
|
|
257
|
-
}
|
|
258
|
-
user: {
|
|
259
|
-
id: string;
|
|
260
|
-
}
|
|
261
|
-
signature: string;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
IThreeDsData {
|
|
265
|
-
paReq: string;
|
|
266
|
-
acsurl: string;
|
|
267
|
-
termUrl: string;
|
|
268
|
-
md: string;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
IRedirectData {
|
|
272
|
-
location: string;
|
|
273
|
-
}
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
### Webpack 5 Issues
|
|
277
|
-
|
|
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
|
+
userAuthToken?: string;
|
|
27
|
+
userId: string;
|
|
28
|
+
|
|
29
|
+
paymentId: string;
|
|
30
|
+
amount: number;
|
|
31
|
+
amountType?: AmountType; //one of strings: GrossWithoutGst, Net, Gross
|
|
32
|
+
tax?: number;
|
|
33
|
+
orderType?: OrderType; //one of numbers: Regular, FreeTrial
|
|
34
|
+
currency: string;
|
|
35
|
+
merchantId: string;
|
|
36
|
+
initiator?: PaymentInitiatorType; //one of strings: Customer, Merchant
|
|
37
|
+
|
|
38
|
+
webhookUrl?: string;
|
|
39
|
+
returnUrl?: string;
|
|
40
|
+
|
|
41
|
+
description: string;
|
|
42
|
+
email?: string;
|
|
43
|
+
details?: ISimple<any>; //any object
|
|
44
|
+
phoneNumber?: string;
|
|
45
|
+
ipAddress?: string;
|
|
46
|
+
|
|
47
|
+
billingAddress?: {
|
|
48
|
+
addressLine: string;
|
|
49
|
+
city: string;
|
|
50
|
+
state: string;
|
|
51
|
+
country: string;
|
|
52
|
+
zip: string;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
payment$.settings = {
|
|
57
|
+
isPhoneNumberFieldVisible: boolean;
|
|
58
|
+
isCloseButtonVisible: boolean;
|
|
59
|
+
|
|
60
|
+
urls: {
|
|
61
|
+
//For example, "https://billingprofiles.dating.com
|
|
62
|
+
billingProfiles: string;
|
|
63
|
+
processing: string;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
//Now it supports these strings: "american-express" | "discover" | "jcb" | "maestro" | "mastercard" | "unionpay" | "visa"
|
|
67
|
+
availableCardBrands: string[] or CreditCardTypeCardBrandId[];
|
|
68
|
+
|
|
69
|
+
chargeTerms: {
|
|
70
|
+
visible: boolean;
|
|
71
|
+
text?: string;
|
|
72
|
+
checkboxes?: {
|
|
73
|
+
text: string;
|
|
74
|
+
link: {
|
|
75
|
+
text: string;
|
|
76
|
+
href: string;
|
|
77
|
+
}
|
|
78
|
+
} [];
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
merchantInfo: {
|
|
82
|
+
visible: boolean;
|
|
83
|
+
text?: string;
|
|
84
|
+
links?: {
|
|
85
|
+
text: string;
|
|
86
|
+
href: string;
|
|
87
|
+
} [];
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
payment$.addEventListener("close", (event) => {
|
|
92
|
+
console.log("clicked to close icon: ", e); // Custom event
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
payment$.addEventListener("paid", (event) => {
|
|
96
|
+
console.log("event after pay: ", event.detail); // Payment result event
|
|
97
|
+
});
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Usage with TypeScript
|
|
101
|
+
|
|
102
|
+
```typescript
|
|
103
|
+
declare module "@motopays/pay-form/pay";
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Payment interface
|
|
107
|
+
|
|
108
|
+
| Field | Type | Description |
|
|
109
|
+
| ------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
110
|
+
| userAuthToken | string | End-user authorization token to access Motopays services |
|
|
111
|
+
| userId **\*required** | string | External end-user Id generated on the merchant side (not Motopays) |
|
|
112
|
+
| paymentId **\*required** | string | Id of a payment |
|
|
113
|
+
| amount **\*required** | number | Payment amount |
|
|
114
|
+
| amountType | AmountType or string | Type of amount can be only one of the following values: {GrossWithoutGst, Net, Gross} |
|
|
115
|
+
| tax | number | Payment tax |
|
|
116
|
+
| orderType | OrderType or string | Type of order can be only one of the following values: {Regular, FreeTrial} |
|
|
117
|
+
| currency **\*required** | string | Payment currency in ISO_4217 format. Currently accepted: {gbp, eur, usd} |
|
|
118
|
+
| merchantId **\*required** | string | Merchant's identificator, issued by Motopays. |
|
|
119
|
+
| initiator | PaymentInitiatorType or string | Identifies who of 2 types initiated the payment. Currently accepted: {Merchant, Customer} |
|
|
120
|
+
| webhookUrl | string | URL where the Motopays will send hooks about the payment status changes |
|
|
121
|
+
| returnUrl | string | The URL to which the user will be redirected after completing some types of payment, such as PayPal |
|
|
122
|
+
| description | string | Short order description for the customer |
|
|
123
|
+
| email | string | End-customer e-mail. That parameter can be used to find a best button appearance for the particular customer. |
|
|
124
|
+
| details | ISimple<any> | Additional information about payment |
|
|
125
|
+
| phoneNumber | string | End-customer phone number (can be changed if a customer fill the number by themself) |
|
|
126
|
+
| ipAddress | string | End-customer ip address |
|
|
127
|
+
| billingAddress | BillingAddress | The address linked to a customer bank account |
|
|
128
|
+
| billingAddress.addressLine | string | Street, building appartment and etc in one line |
|
|
129
|
+
| billingAddress.city | string | City of a customer bank account |
|
|
130
|
+
| billingAddress.state | string | State of a customer bank account |
|
|
131
|
+
| billingAddress.country | string | Country of a customer bank account (ISO 3166-1 alpha-2 country code). Example: US |
|
|
132
|
+
| billingAddress.zip | string | Zip of a customer bank account |
|
|
133
|
+
|
|
134
|
+
### Settings interface
|
|
135
|
+
|
|
136
|
+
| Field | Type | Description |
|
|
137
|
+
|-----------------------------|---------|-----------------------------------------------------------------------------|
|
|
138
|
+
| urls **\*required** | IServicesUrls | The necessary services urls |
|
|
139
|
+
| urls.processing **\*required** | string | The processing service URL |
|
|
140
|
+
| urls.billingprofiles **\*required** | string | The billing profiles service URL |
|
|
141
|
+
| isPhoneNumberFieldVisible | boolean | Whether to show the phone input field when creating a map |
|
|
142
|
+
| isCloseButtonVisible | boolean | Whether to show a window close button in the top right corner of the screen |
|
|
143
|
+
| merchantInfo | IMerchantInfoSettings | The information displays in merchant info section |
|
|
144
|
+
| merchantInfo.visible | boolean | Whether to show the merchant information |
|
|
145
|
+
| merchantInfo.text | string | The information about a merchant |
|
|
146
|
+
| merchantInfo.links | ILink[] | The array of merchant links. For example, Policy and Terms |
|
|
147
|
+
| chargeTerms | IChargeTermsSettings | The charge terms section |
|
|
148
|
+
| chargeTerms.visible | boolean | Whether to show the charge terms |
|
|
149
|
+
| chargeTerms.checkboxes | ITermCheckbox[] | The checkboxes that, without being selected, the user will not be able to make a payment. All these checkboxes have to be selected by user to be able to make a payment |
|
|
150
|
+
| chargeTerms.text | string | The text of charge terms. For example, description of subscription plan |
|
|
151
|
+
| availableCardBrands | string[] or CreditCardTypeCardBrandId[] | The сard brands for which icons will be displayed on the form as card payment methods. Currently accepted: {american-express, discover, jcb, maestro, mastercard, unionpay, visa} |
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
ILink interface:
|
|
155
|
+
```
|
|
156
|
+
interface ILink {
|
|
157
|
+
text: string;
|
|
158
|
+
href: string;
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
ITermCheckbox interface:
|
|
163
|
+
```
|
|
164
|
+
interface ITermCheckbox {
|
|
165
|
+
text: string;
|
|
166
|
+
link?: ILink;
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
Example of merchantInfo:
|
|
171
|
+
```
|
|
172
|
+
merchantInfo: {
|
|
173
|
+
"visible": true,
|
|
174
|
+
"text": "The vendor prides itself on designing and implementing state-of-the-art payment infrastructures that cater to a wide range of commercial activities. Specializing in the creation of robust payment processing platforms, the merchant provides tailored solutions that support the dynamic needs of the global market",
|
|
175
|
+
"links": [
|
|
176
|
+
{
|
|
177
|
+
"text": "Terms",
|
|
178
|
+
"href": "https://www.google.com/"
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"text": "Policy",
|
|
182
|
+
"href": "https://www.google.com/"
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Example of chargeTerms:
|
|
189
|
+
```
|
|
190
|
+
chargeTerms: {
|
|
191
|
+
"visible": true,
|
|
192
|
+
"text": "By checking this box, I am affirming my full and complete understanding of, as well as my agreement to, all the terms and conditions that were previously presented to me, acknowledging that they form a binding contractual agreement.",
|
|
193
|
+
"checkboxes": [
|
|
194
|
+
{
|
|
195
|
+
"text": "I hereby agree to the conditions previously outlined.",
|
|
196
|
+
"link": {
|
|
197
|
+
"text": "Link to the application",
|
|
198
|
+
"href": "https://www.google.com/"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"text": "I validate the foregoing stipulations.",
|
|
203
|
+
"link": {
|
|
204
|
+
"text": "Google",
|
|
205
|
+
"href": "https://www.google.com/"
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
]
|
|
209
|
+
},
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### Output events
|
|
213
|
+
|
|
214
|
+
| Event | Type | Description |
|
|
215
|
+
| ----- | -------------- | -------------------------------------------- |
|
|
216
|
+
| close | void | triggered by clicking on the closing icon |
|
|
217
|
+
| paid | Payment Result | triggered after receiving a payment response |
|
|
218
|
+
|
|
219
|
+
### Payment Result Structure
|
|
220
|
+
|
|
221
|
+
```javascript
|
|
222
|
+
IPaymentResponse {
|
|
223
|
+
action?: {
|
|
224
|
+
name: string;
|
|
225
|
+
data: IThreeDsData | IRedirectData | any;
|
|
226
|
+
}
|
|
227
|
+
ip: string;
|
|
228
|
+
merchant: string;
|
|
229
|
+
order: {
|
|
230
|
+
invoiceId: string;
|
|
231
|
+
details: string;
|
|
232
|
+
}
|
|
233
|
+
payment: {
|
|
234
|
+
paymentId: string;
|
|
235
|
+
state: PaymentState; //on of strings: completed, rejected, needAction
|
|
236
|
+
rebillAnchor: string;
|
|
237
|
+
info: {
|
|
238
|
+
completeProcessingTime?: Date;
|
|
239
|
+
currency: string;
|
|
240
|
+
paymentType: string;
|
|
241
|
+
paymentSystem: string;
|
|
242
|
+
paymentRequisites?: string;
|
|
243
|
+
price: number
|
|
244
|
+
}
|
|
245
|
+
rejectionDetails?: {
|
|
246
|
+
hardDecline: boolean;
|
|
247
|
+
message?: string;
|
|
248
|
+
problemSolvingTips: string[];
|
|
249
|
+
rejectionCode: number;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
taxInfo: {
|
|
253
|
+
abbreviation: string;
|
|
254
|
+
price: number;
|
|
255
|
+
priceNet: number;
|
|
256
|
+
tax: number;
|
|
257
|
+
}
|
|
258
|
+
user: {
|
|
259
|
+
id: string;
|
|
260
|
+
}
|
|
261
|
+
signature: string;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
IThreeDsData {
|
|
265
|
+
paReq: string;
|
|
266
|
+
acsurl: string;
|
|
267
|
+
termUrl: string;
|
|
268
|
+
md: string;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
IRedirectData {
|
|
272
|
+
location: string;
|
|
273
|
+
}
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
### Webpack 5 Issues
|
|
277
|
+
|
|
278
278
|
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.
|