@motopays/pay-form 1.0.14-rc.3 → 1.0.14

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 (3) hide show
  1. package/CHANGELOG.md +69 -69
  2. package/README.md +282 -282
  3. package/package.json +20 -20
package/CHANGELOG.md CHANGED
@@ -1,70 +1,70 @@
1
- # Changelog
2
-
3
- ## 1.0.14
4
-
5
- ### Added
6
- - Possibility to control the location of charge terms component by settings.chargeTerms.location fields (Values: 'AfterPay', 'BeforePay')
7
- - Possibility to control the behavior of form errors (for details check settings.requiredFieldsBehavior in Readme.md)
8
-
9
-
10
-
11
- ## 1.0.13
12
-
13
- ### Added
14
- - ApplePay (requirements: Apple environment, https, userAuthToken is not empty)
15
-
16
-
17
-
18
- ## 1.0.11
19
-
20
- ### Changed
21
- - Payment requests are encrypted
22
-
23
-
24
-
25
- ## 1.0.10
26
-
27
- ### Breaking changes
28
-
29
- ##### Payment model
30
- - cusomterAuthToken field renamed to userAuthToken
31
- - customerId field renamed to userId
32
- - env field deleted (set urls.billingProfiles and urls.processing from 'settings' model instead)
33
-
34
- ##### Settings model
35
- - the model has become mandatory
36
- - isEmailFieldVisible field deleted
37
- - merchantInfo field type changed. Now it's: {
38
-  visible: boolean,
39
-  text: string,
40
-  links?: ILink[]
41
- }
42
- - isMerchantInfoVisible field renamed and moved to merchantInfo.visible
43
- - merchantLinks field renamed and moved to merchantInfo.links
44
- - urls field added instead of env field from 'payment'. Now it's: {
45
- //example: "https://processing.dev.motopays.com"
46
-  processing: string;
47
-  billingProfiles: string;
48
- }
49
-
50
- ### Added
51
- - chargeTerms field added to settings model. This field allows to configure checkboxes that have to be selected by users (otherwise, users cannot make payments).
52
- The interface of the field: {
53
-  visible: boolean,
54
-  checkboxes?: ITermCheckbox[],
55
-  text: string;
56
- }
57
-
58
- The interface of ITermCheckbox: {
59
-  text: string;
60
-  link?: ILink;
61
- }
62
- - 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"
63
- - Checkboxes
64
- - Text for the checkboxes
65
- - Payment methods icons
66
- - Transactions secured icons
67
- - Signature in response model of payment
68
-
69
- ### Changes
1
+ # Changelog
2
+
3
+ ## 1.0.14
4
+
5
+ ### Added
6
+ - Possibility to control the location of charge terms component by settings.chargeTerms.location fields (Values: 'AfterPay', 'BeforePay')
7
+ - Possibility to control the behavior of form errors (for details check settings.requiredFieldsBehavior in Readme.md)
8
+
9
+
10
+
11
+ ## 1.0.13
12
+
13
+ ### Added
14
+ - ApplePay (requirements: Apple environment, https, userAuthToken is not empty)
15
+
16
+
17
+
18
+ ## 1.0.11
19
+
20
+ ### Changed
21
+ - Payment requests are encrypted
22
+
23
+
24
+
25
+ ## 1.0.10
26
+
27
+ ### Breaking changes
28
+
29
+ ##### Payment model
30
+ - cusomterAuthToken field renamed to userAuthToken
31
+ - customerId field renamed to userId
32
+ - env field deleted (set urls.billingProfiles and urls.processing from 'settings' model instead)
33
+
34
+ ##### Settings model
35
+ - the model has become mandatory
36
+ - isEmailFieldVisible field deleted
37
+ - merchantInfo field type changed. Now it's: {
38
+  visible: boolean,
39
+  text: string,
40
+  links?: ILink[]
41
+ }
42
+ - isMerchantInfoVisible field renamed and moved to merchantInfo.visible
43
+ - merchantLinks field renamed and moved to merchantInfo.links
44
+ - urls field added instead of env field from 'payment'. Now it's: {
45
+ //example: "https://processing.dev.motopays.com"
46
+  processing: string;
47
+  billingProfiles: string;
48
+ }
49
+
50
+ ### Added
51
+ - chargeTerms field added to settings model. This field allows to configure checkboxes that have to be selected by users (otherwise, users cannot make payments).
52
+ The interface of the field: {
53
+  visible: boolean,
54
+  checkboxes?: ITermCheckbox[],
55
+  text: string;
56
+ }
57
+
58
+ The interface of ITermCheckbox: {
59
+  text: string;
60
+  link?: ILink;
61
+ }
62
+ - 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"
63
+ - Checkboxes
64
+ - Text for the checkboxes
65
+ - Payment methods icons
66
+ - Transactions secured icons
67
+ - Signature in response model of payment
68
+
69
+ ### Changes
70
70
  - Styles for links, indent and text at the bottom of the payment form
package/README.md CHANGED
@@ -1,283 +1,283 @@
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. This field is necessary for ApplePay availability |
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
- | chargeTerms.location | string or ChargeTermsLocation | The location of ChargeTerms element. Currently accepted: { BeforePay, AfterPay } |
152
- | 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} |
153
- | requiredFieldsBehavior | IRequiredFieldsBehavior | Configuration of the display of required fields for the user to manage the user's focus on them |
154
- | requiredFieldsBehavior.showStars | boolean | Show the stars on labels of required fields |
155
- | requiredFieldsBehavior.buttonStateUntilCorrect | string | If 'disabled', the payment buttons remain disabled until the user fills in all the required fields. If 'enabled', then when one of the buttons is pressed (the buttons are enabled), the required fields will be marked as invalid (red color) for the user. If 'hidden-enabled', then when one of the buttons is pressed (the buttons are enabled but have styles as disabled), the required fields will be marked as invalid (red color) for the user. Current accepted: { enabled, disabled, hidden-enabled } |
156
- | requiredFieldsBehavior.markAsInvalidUntilCorrect | boolean | If true, then all unfilled or incorrectly filled required fields will initially appear as invalid (red color) to the user until they are filled and correct. If the value is false, the required fields will only be shown as invalid in the event that the user presses the payment button when the buttons are enabled |
157
-
158
-
159
- ILink interface:
160
- ```
161
- interface ILink {
162
- text: string;
163
- href: string;
164
- }
165
- ```
166
-
167
- ITermCheckbox interface:
168
- ```
169
- interface ITermCheckbox {
170
- text: string;
171
- link?: ILink;
172
- }
173
- ```
174
-
175
- Example of merchantInfo:
176
- ```
177
- merchantInfo: {
178
- "visible": true,
179
- "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",
180
- "links": [
181
- {
182
- "text": "Terms",
183
- "href": "https://www.google.com/"
184
- },
185
- {
186
- "text": "Policy",
187
- "href": "https://www.google.com/"
188
- }
189
- ]
190
- }
191
- ```
192
-
193
- Example of chargeTerms:
194
- ```
195
- chargeTerms: {
196
- "visible": true,
197
- "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.",
198
- "checkboxes": [
199
- {
200
- "text": "I hereby agree to the conditions previously outlined.",
201
- "link": {
202
- "text": "Link to the application",
203
- "href": "https://www.google.com/"
204
- }
205
- },
206
- {
207
- "text": "I validate the foregoing stipulations.",
208
- "link": {
209
- "text": "Google",
210
- "href": "https://www.google.com/"
211
- }
212
- }
213
- ]
214
- },
215
- ```
216
-
217
- ### Output events
218
-
219
- | Event | Type | Description |
220
- | ----- | -------------- | -------------------------------------------- |
221
- | close | void | triggered by clicking on the closing icon |
222
- | paid | Payment Result | triggered after receiving a payment response |
223
-
224
- ### Payment Result Structure
225
-
226
- ```javascript
227
- IPaymentResponse {
228
- action?: {
229
- name: string;
230
- data: IThreeDsData | IRedirectData | any;
231
- }
232
- ip: string;
233
- merchant: string;
234
- order: {
235
- invoiceId: string;
236
- details: string;
237
- }
238
- payment: {
239
- paymentId: string;
240
- state: PaymentState; //on of strings: completed, rejected, needAction
241
- rebillAnchor: string;
242
- info: {
243
- completeProcessingTime?: Date;
244
- currency: string;
245
- paymentType: string;
246
- paymentSystem: string;
247
- paymentRequisites?: string;
248
- price: number
249
- }
250
- rejectionDetails?: {
251
- hardDecline: boolean;
252
- message?: string;
253
- problemSolvingTips: string[];
254
- rejectionCode: number;
255
- }
256
- }
257
- taxInfo: {
258
- abbreviation: string;
259
- price: number;
260
- priceNet: number;
261
- tax: number;
262
- }
263
- user: {
264
- id: string;
265
- }
266
- signature: string;
267
- }
268
-
269
- IThreeDsData {
270
- paReq: string;
271
- acsurl: string;
272
- termUrl: string;
273
- md: string;
274
- }
275
-
276
- IRedirectData {
277
- location: string;
278
- }
279
- ```
280
-
281
- ### Webpack 5 Issues
282
-
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. This field is necessary for ApplePay availability |
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
+ | chargeTerms.location | string or ChargeTermsLocation | The location of ChargeTerms element. Currently accepted: { BeforePay, AfterPay } |
152
+ | 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} |
153
+ | requiredFieldsBehavior | IRequiredFieldsBehavior | Configuration of the display of required fields for the user to manage the user's focus on them |
154
+ | requiredFieldsBehavior.showStars | boolean | Show the stars on labels of required fields |
155
+ | requiredFieldsBehavior.buttonStateUntilCorrect | string | If 'disabled', the payment buttons remain disabled until the user fills in all the required fields. If 'enabled', then when one of the buttons is pressed (the buttons are enabled), the required fields will be marked as invalid (red color) for the user. If 'hidden-enabled', then when one of the buttons is pressed (the buttons are enabled but have styles as disabled), the required fields will be marked as invalid (red color) for the user. Current accepted: { enabled, disabled, hidden-enabled } |
156
+ | requiredFieldsBehavior.markAsInvalidUntilCorrect | boolean | If true, then all unfilled or incorrectly filled required fields will initially appear as invalid (red color) to the user until they are filled and correct. If the value is false, the required fields will only be shown as invalid in the event that the user presses the payment button when the buttons are enabled |
157
+
158
+
159
+ ILink interface:
160
+ ```
161
+ interface ILink {
162
+ text: string;
163
+ href: string;
164
+ }
165
+ ```
166
+
167
+ ITermCheckbox interface:
168
+ ```
169
+ interface ITermCheckbox {
170
+ text: string;
171
+ link?: ILink;
172
+ }
173
+ ```
174
+
175
+ Example of merchantInfo:
176
+ ```
177
+ merchantInfo: {
178
+ "visible": true,
179
+ "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",
180
+ "links": [
181
+ {
182
+ "text": "Terms",
183
+ "href": "https://www.google.com/"
184
+ },
185
+ {
186
+ "text": "Policy",
187
+ "href": "https://www.google.com/"
188
+ }
189
+ ]
190
+ }
191
+ ```
192
+
193
+ Example of chargeTerms:
194
+ ```
195
+ chargeTerms: {
196
+ "visible": true,
197
+ "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.",
198
+ "checkboxes": [
199
+ {
200
+ "text": "I hereby agree to the conditions previously outlined.",
201
+ "link": {
202
+ "text": "Link to the application",
203
+ "href": "https://www.google.com/"
204
+ }
205
+ },
206
+ {
207
+ "text": "I validate the foregoing stipulations.",
208
+ "link": {
209
+ "text": "Google",
210
+ "href": "https://www.google.com/"
211
+ }
212
+ }
213
+ ]
214
+ },
215
+ ```
216
+
217
+ ### Output events
218
+
219
+ | Event | Type | Description |
220
+ | ----- | -------------- | -------------------------------------------- |
221
+ | close | void | triggered by clicking on the closing icon |
222
+ | paid | Payment Result | triggered after receiving a payment response |
223
+
224
+ ### Payment Result Structure
225
+
226
+ ```javascript
227
+ IPaymentResponse {
228
+ action?: {
229
+ name: string;
230
+ data: IThreeDsData | IRedirectData | any;
231
+ }
232
+ ip: string;
233
+ merchant: string;
234
+ order: {
235
+ invoiceId: string;
236
+ details: string;
237
+ }
238
+ payment: {
239
+ paymentId: string;
240
+ state: PaymentState; //on of strings: completed, rejected, needAction
241
+ rebillAnchor: string;
242
+ info: {
243
+ completeProcessingTime?: Date;
244
+ currency: string;
245
+ paymentType: string;
246
+ paymentSystem: string;
247
+ paymentRequisites?: string;
248
+ price: number
249
+ }
250
+ rejectionDetails?: {
251
+ hardDecline: boolean;
252
+ message?: string;
253
+ problemSolvingTips: string[];
254
+ rejectionCode: number;
255
+ }
256
+ }
257
+ taxInfo: {
258
+ abbreviation: string;
259
+ price: number;
260
+ priceNet: number;
261
+ tax: number;
262
+ }
263
+ user: {
264
+ id: string;
265
+ }
266
+ signature: string;
267
+ }
268
+
269
+ IThreeDsData {
270
+ paReq: string;
271
+ acsurl: string;
272
+ termUrl: string;
273
+ md: string;
274
+ }
275
+
276
+ IRedirectData {
277
+ location: string;
278
+ }
279
+ ```
280
+
281
+ ### Webpack 5 Issues
282
+
283
283
  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.
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
- {
2
- "name": "@motopays/pay-form",
3
- "version": "1.0.14-rc.3",
4
- "description": "motopays ui, card payments, pay form",
5
- "main": "lib/index.js",
6
- "files": [
7
- "lib/styles/styles.css",
8
- "CHANGELOG.md"
9
- ],
10
- "publishConfig": {
11
- "access": "public"
12
- },
13
- "keywords": [
14
- "moto",
15
- "cards",
16
- "payments",
17
- "js",
18
- "web"
19
- ]
20
- }
1
+ {
2
+ "name": "@motopays/pay-form",
3
+ "version": "1.0.14",
4
+ "description": "motopays ui, card payments, pay form",
5
+ "main": "lib/index.js",
6
+ "files": [
7
+ "lib/styles/styles.css",
8
+ "CHANGELOG.md"
9
+ ],
10
+ "publishConfig": {
11
+ "access": "public"
12
+ },
13
+ "keywords": [
14
+ "moto",
15
+ "cards",
16
+ "payments",
17
+ "js",
18
+ "web"
19
+ ]
20
+ }