@motopays/pay-form 1.0.10-rc.3 → 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.
Files changed (4) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +277 -342
  3. package/lib/index.js +1 -1
  4. package/package.json +20 -19
package/README.md CHANGED
@@ -1,343 +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
- 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
-
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
+
343
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.