@justifi/webcomponents 3.0.3 → 3.1.4
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 +4 -0
- package/dist/cjs/justifi-billing-form_2.cjs.entry.js +11 -0
- package/dist/cjs/justifi-payment-method-form.cjs.entry.js +1 -1
- package/dist/collection/components/billing-form/billing-form.js +27 -7
- package/dist/collection/components/card-form/card-form.stories.js +6 -39
- package/dist/components/billing-form.js +11 -0
- package/dist/components/payment-method-form.js +1 -1
- package/dist/esm/justifi-billing-form_2.entry.js +11 -0
- package/dist/esm/justifi-payment-method-form.entry.js +1 -1
- package/dist/types/components/billing-form/billing-form.d.ts +11 -0
- package/dist/types/components/card-form/card-form.stories.d.ts +0 -2
- package/dist/types/components.d.ts +11 -0
- package/dist/webcomponents/{p-cf46c082.entry.js → p-fbed6d27.entry.js} +1 -1
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### 3.1.4
|
|
8
|
+
> 04 May 2023
|
|
9
|
+
|
|
10
|
+
- Fix missing url to show recently added introduction page.
|
|
7
11
|
#### 3.0.3
|
|
8
12
|
> 04 May 2023
|
|
9
13
|
|
|
@@ -2129,9 +2129,16 @@ const BillingForm = class {
|
|
|
2129
2129
|
this.billingFields = billingFieldsClone;
|
|
2130
2130
|
}
|
|
2131
2131
|
}
|
|
2132
|
+
/**
|
|
2133
|
+
* Method for filling the form with provided data
|
|
2134
|
+
* @argument {BillingFormFields} fields - The fields to fill the form with
|
|
2135
|
+
*/
|
|
2132
2136
|
async fill(fields) {
|
|
2133
2137
|
this.billingFields = Object.assign({}, fields);
|
|
2134
2138
|
}
|
|
2139
|
+
/**
|
|
2140
|
+
* Run validation on the form
|
|
2141
|
+
*/
|
|
2135
2142
|
async validate() {
|
|
2136
2143
|
const newErrors = {};
|
|
2137
2144
|
let isValid = true;
|
|
@@ -2147,6 +2154,10 @@ const BillingForm = class {
|
|
|
2147
2154
|
this.billingFieldsErrors = newErrors;
|
|
2148
2155
|
return { isValid: isValid };
|
|
2149
2156
|
}
|
|
2157
|
+
/**
|
|
2158
|
+
* Returns the values of the form as an object
|
|
2159
|
+
* @returns {Promise<BillingFormFields>} The values of the form
|
|
2160
|
+
*/
|
|
2150
2161
|
async getValues() {
|
|
2151
2162
|
return this.billingFields;
|
|
2152
2163
|
}
|
|
@@ -22,7 +22,7 @@ const MessageEventType = {
|
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
const name = "@justifi/webcomponents";
|
|
25
|
-
const version = "3.
|
|
25
|
+
const version = "3.1.4";
|
|
26
26
|
const description = "JustiFi Web Components";
|
|
27
27
|
const main = "dist/index.cjs.js";
|
|
28
28
|
const module$1 = "dist/components/index.js";
|
|
@@ -23,9 +23,16 @@ export class BillingForm {
|
|
|
23
23
|
this.billingFields = billingFieldsClone;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
+
/**
|
|
27
|
+
* Method for filling the form with provided data
|
|
28
|
+
* @argument {BillingFormFields} fields - The fields to fill the form with
|
|
29
|
+
*/
|
|
26
30
|
async fill(fields) {
|
|
27
31
|
this.billingFields = Object.assign({}, fields);
|
|
28
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* Run validation on the form
|
|
35
|
+
*/
|
|
29
36
|
async validate() {
|
|
30
37
|
const newErrors = {};
|
|
31
38
|
let isValid = true;
|
|
@@ -41,6 +48,10 @@ export class BillingForm {
|
|
|
41
48
|
this.billingFieldsErrors = newErrors;
|
|
42
49
|
return { isValid: isValid };
|
|
43
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* Returns the values of the form as an object
|
|
53
|
+
* @returns {Promise<BillingFormFields>} The values of the form
|
|
54
|
+
*/
|
|
44
55
|
async getValues() {
|
|
45
56
|
return this.billingFields;
|
|
46
57
|
}
|
|
@@ -92,8 +103,11 @@ export class BillingForm {
|
|
|
92
103
|
"complexType": {
|
|
93
104
|
"signature": "(fields: BillingFormFields) => Promise<void>",
|
|
94
105
|
"parameters": [{
|
|
95
|
-
"tags": [
|
|
96
|
-
|
|
106
|
+
"tags": [{
|
|
107
|
+
"name": "argument",
|
|
108
|
+
"text": "fields - The fields to fill the form with"
|
|
109
|
+
}],
|
|
110
|
+
"text": "- The fields to fill the form with"
|
|
97
111
|
}],
|
|
98
112
|
"references": {
|
|
99
113
|
"Promise": {
|
|
@@ -107,8 +121,11 @@ export class BillingForm {
|
|
|
107
121
|
"return": "Promise<void>"
|
|
108
122
|
},
|
|
109
123
|
"docs": {
|
|
110
|
-
"text": "",
|
|
111
|
-
"tags": [
|
|
124
|
+
"text": "Method for filling the form with provided data",
|
|
125
|
+
"tags": [{
|
|
126
|
+
"name": "argument",
|
|
127
|
+
"text": "fields - The fields to fill the form with"
|
|
128
|
+
}]
|
|
112
129
|
}
|
|
113
130
|
},
|
|
114
131
|
"validate": {
|
|
@@ -127,7 +144,7 @@ export class BillingForm {
|
|
|
127
144
|
"return": "Promise<{ isValid: boolean; }>"
|
|
128
145
|
},
|
|
129
146
|
"docs": {
|
|
130
|
-
"text": "",
|
|
147
|
+
"text": "Run validation on the form",
|
|
131
148
|
"tags": []
|
|
132
149
|
}
|
|
133
150
|
},
|
|
@@ -147,8 +164,11 @@ export class BillingForm {
|
|
|
147
164
|
"return": "Promise<BillingFormFields>"
|
|
148
165
|
},
|
|
149
166
|
"docs": {
|
|
150
|
-
"text": "",
|
|
151
|
-
"tags": [
|
|
167
|
+
"text": "Returns the values of the form as an object",
|
|
168
|
+
"tags": [{
|
|
169
|
+
"name": "returns",
|
|
170
|
+
"text": "The values of the form"
|
|
171
|
+
}]
|
|
152
172
|
}
|
|
153
173
|
}
|
|
154
174
|
};
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { userEvent, within } from '@storybook/testing-library';
|
|
2
|
-
import { expect } from '@storybook/jest';
|
|
3
1
|
const isDev = process.env.NODE_ENV === 'development';
|
|
4
2
|
export default {
|
|
5
3
|
title: 'Components/CardForm',
|
|
@@ -84,23 +82,8 @@ export const SingleLine = Template.bind({});
|
|
|
84
82
|
SingleLine.args = {
|
|
85
83
|
'single-line': true,
|
|
86
84
|
};
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
(story) => `
|
|
90
|
-
<style>
|
|
91
|
-
#wrapper {
|
|
92
|
-
background-color: #aaaaaa;
|
|
93
|
-
}
|
|
94
|
-
</style>
|
|
95
|
-
<div id="wrapper" style="width: 50%;">
|
|
96
|
-
${story()}
|
|
97
|
-
</div>
|
|
98
|
-
`,
|
|
99
|
-
];
|
|
100
|
-
export const Styled = Template.bind({});
|
|
101
|
-
Styled.args = {
|
|
102
|
-
cssVariables: (`
|
|
103
|
-
--jfi-layout-padding: 0;
|
|
85
|
+
const styledVariables = `
|
|
86
|
+
--jfi-layout-padding: 0;
|
|
104
87
|
--jfi-layout-form-control-spacing-x: .5rem;
|
|
105
88
|
--jfi-layout-form-control-spacing-y: 1rem;
|
|
106
89
|
--jfi-form-label-font-weight: 700;
|
|
@@ -130,24 +113,8 @@ Styled.args = {
|
|
|
130
113
|
--jfi-error-message-color: #C12727;
|
|
131
114
|
--jfi-error-message-margin: .25rem 0 0 0;
|
|
132
115
|
--jfi-error-message-font-size: .875rem;
|
|
133
|
-
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
// Need to wait for iFrame to load
|
|
138
|
-
addEventListener('cardFormReady', async () => {
|
|
139
|
-
const canvas = within(canvasElement);
|
|
140
|
-
await step('CardForm is rendered', async () => {
|
|
141
|
-
expect(canvas.getByTestId('card-form-iframe')).toBeDefined();
|
|
142
|
-
});
|
|
143
|
-
await step('Validate form when empty shows errors', async () => {
|
|
144
|
-
userEvent.click(canvas.getByRole('button', { name: 'Validate' }));
|
|
145
|
-
});
|
|
146
|
-
// Expect errors to show up, but can't figure out how to get them
|
|
147
|
-
await step('Call tokenize with empty form shows errors', async () => {
|
|
148
|
-
userEvent.click(canvas.getByRole('button', { name: 'Tokenize' }));
|
|
149
|
-
});
|
|
150
|
-
// Expect errors to show up, but can't figure out how to get them
|
|
151
|
-
// Fill form
|
|
152
|
-
});
|
|
116
|
+
`;
|
|
117
|
+
export const Styled = Template.bind({});
|
|
118
|
+
Styled.args = {
|
|
119
|
+
'css-variables': styledVariables
|
|
153
120
|
};
|
|
@@ -2129,9 +2129,16 @@ const BillingForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
2129
2129
|
this.billingFields = billingFieldsClone;
|
|
2130
2130
|
}
|
|
2131
2131
|
}
|
|
2132
|
+
/**
|
|
2133
|
+
* Method for filling the form with provided data
|
|
2134
|
+
* @argument {BillingFormFields} fields - The fields to fill the form with
|
|
2135
|
+
*/
|
|
2132
2136
|
async fill(fields) {
|
|
2133
2137
|
this.billingFields = Object.assign({}, fields);
|
|
2134
2138
|
}
|
|
2139
|
+
/**
|
|
2140
|
+
* Run validation on the form
|
|
2141
|
+
*/
|
|
2135
2142
|
async validate() {
|
|
2136
2143
|
const newErrors = {};
|
|
2137
2144
|
let isValid = true;
|
|
@@ -2147,6 +2154,10 @@ const BillingForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
2147
2154
|
this.billingFieldsErrors = newErrors;
|
|
2148
2155
|
return { isValid: isValid };
|
|
2149
2156
|
}
|
|
2157
|
+
/**
|
|
2158
|
+
* Returns the values of the form as an object
|
|
2159
|
+
* @returns {Promise<BillingFormFields>} The values of the form
|
|
2160
|
+
*/
|
|
2150
2161
|
async getValues() {
|
|
2151
2162
|
return this.billingFields;
|
|
2152
2163
|
}
|
|
@@ -18,7 +18,7 @@ const MessageEventType = {
|
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
const name = "@justifi/webcomponents";
|
|
21
|
-
const version = "3.
|
|
21
|
+
const version = "3.1.4";
|
|
22
22
|
const description = "JustiFi Web Components";
|
|
23
23
|
const main = "dist/index.cjs.js";
|
|
24
24
|
const module = "dist/components/index.js";
|
|
@@ -2125,9 +2125,16 @@ const BillingForm = class {
|
|
|
2125
2125
|
this.billingFields = billingFieldsClone;
|
|
2126
2126
|
}
|
|
2127
2127
|
}
|
|
2128
|
+
/**
|
|
2129
|
+
* Method for filling the form with provided data
|
|
2130
|
+
* @argument {BillingFormFields} fields - The fields to fill the form with
|
|
2131
|
+
*/
|
|
2128
2132
|
async fill(fields) {
|
|
2129
2133
|
this.billingFields = Object.assign({}, fields);
|
|
2130
2134
|
}
|
|
2135
|
+
/**
|
|
2136
|
+
* Run validation on the form
|
|
2137
|
+
*/
|
|
2131
2138
|
async validate() {
|
|
2132
2139
|
const newErrors = {};
|
|
2133
2140
|
let isValid = true;
|
|
@@ -2143,6 +2150,10 @@ const BillingForm = class {
|
|
|
2143
2150
|
this.billingFieldsErrors = newErrors;
|
|
2144
2151
|
return { isValid: isValid };
|
|
2145
2152
|
}
|
|
2153
|
+
/**
|
|
2154
|
+
* Returns the values of the form as an object
|
|
2155
|
+
* @returns {Promise<BillingFormFields>} The values of the form
|
|
2156
|
+
*/
|
|
2146
2157
|
async getValues() {
|
|
2147
2158
|
return this.billingFields;
|
|
2148
2159
|
}
|
|
@@ -18,7 +18,7 @@ const MessageEventType = {
|
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
const name = "@justifi/webcomponents";
|
|
21
|
-
const version = "3.
|
|
21
|
+
const version = "3.1.4";
|
|
22
22
|
const description = "JustiFi Web Components";
|
|
23
23
|
const main = "dist/index.cjs.js";
|
|
24
24
|
const module = "dist/components/index.js";
|
|
@@ -7,10 +7,21 @@ export declare class BillingForm {
|
|
|
7
7
|
billingFields: BillingFormFields;
|
|
8
8
|
billingFieldsErrors: any;
|
|
9
9
|
setFormValue(event: any): void;
|
|
10
|
+
/**
|
|
11
|
+
* Method for filling the form with provided data
|
|
12
|
+
* @argument {BillingFormFields} fields - The fields to fill the form with
|
|
13
|
+
*/
|
|
10
14
|
fill(fields: BillingFormFields): Promise<void>;
|
|
15
|
+
/**
|
|
16
|
+
* Run validation on the form
|
|
17
|
+
*/
|
|
11
18
|
validate(): Promise<{
|
|
12
19
|
isValid: boolean;
|
|
13
20
|
}>;
|
|
21
|
+
/**
|
|
22
|
+
* Returns the values of the form as an object
|
|
23
|
+
* @returns {Promise<BillingFormFields>} The values of the form
|
|
24
|
+
*/
|
|
14
25
|
getValues(): Promise<BillingFormFields>;
|
|
15
26
|
legendBlock: any;
|
|
16
27
|
render(): any;
|
|
@@ -28,12 +28,23 @@ export namespace Components {
|
|
|
28
28
|
"validationMode": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
|
|
29
29
|
}
|
|
30
30
|
interface JustifiBillingForm {
|
|
31
|
+
/**
|
|
32
|
+
* Method for filling the form with provided data
|
|
33
|
+
* @argument fields - The fields to fill the form with
|
|
34
|
+
*/
|
|
31
35
|
"fill": (fields: BillingFormFields) => Promise<void>;
|
|
36
|
+
/**
|
|
37
|
+
* Returns the values of the form as an object
|
|
38
|
+
* @returns The values of the form
|
|
39
|
+
*/
|
|
32
40
|
"getValues": () => Promise<BillingFormFields>;
|
|
33
41
|
/**
|
|
34
42
|
* (Optional) A label for the form.
|
|
35
43
|
*/
|
|
36
44
|
"legend"?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Run validation on the form
|
|
47
|
+
*/
|
|
37
48
|
"validate": () => Promise<{ isValid: boolean; }>;
|
|
38
49
|
}
|
|
39
50
|
interface JustifiCardForm {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,c as r,h as t,H as i}from"./p-48c17d38.js";const e={card:{ready:"justifi.card.ready",tokenize:"justifi.card.tokenize",validate:"justifi.card.validate",resize:"justifi.card.resize",styleOverrides:"justifi.card.styleOverrides"},bankAccount:{ready:"justifi.bankAccount.ready",tokenize:"justifi.bankAccount.tokenize",validate:"justifi.bankAccount.validate",resize:"justifi.bankAccount.resize",styleOverrides:"justifi.bankAccount.styleOverrides"}},s=class{constructor(t){o(this,t),this.paymentMethodFormReady=r(this,"paymentMethodFormReady",7),this.paymentMethodFormTokenize=r(this,"paymentMethodFormTokenize",7),this.computedTheme=(()=>{const o=getComputedStyle(document.body);return{layout:{padding:o.getPropertyValue("--jfi-layout-padding"),formControlSpacingHorizontal:o.getPropertyValue("--jfi-layout-form-control-spacing-x"),formControlSpacingVertical:o.getPropertyValue("--jfi-layout-form-control-spacing-y")},formControl:{backgroundColor:o.getPropertyValue("--jfi-form-control-background-color"),borderColor:o.getPropertyValue("--jfi-form-control-border-color"),borderColorFocus:o.getPropertyValue("--jfi-form-control-border-color-focus"),borderColorError:o.getPropertyValue("--jfi-form-control-border-color-error"),borderWidth:o.getPropertyValue("--jfi-form-control-border-width"),borderBottomWidth:o.getPropertyValue("--jfi-form-control-border-bottom-width"),borderLeftWidth:o.getPropertyValue("--jfi-form-control-border-left-width"),borderRightWidth:o.getPropertyValue("--jfi-form-control-border-right-width"),borderTopWidth:o.getPropertyValue("--jfi-form-control-border-top-width"),borderRadius:o.getPropertyValue("--jfi-form-control-border-radius"),borderStyle:o.getPropertyValue("--jfi-form-control-border-style"),boxShadow:o.getPropertyValue("--jfi-form-control-box-shadow"),boxShadowError:o.getPropertyValue("--jfi-form-control-box-shadow-error"),boxShadowErrorFocus:o.getPropertyValue("--jfi-form-control-box-shadow-error-focus"),boxShadowFocus:o.getPropertyValue("--jfi-form-control-box-shadow-focus"),color:o.getPropertyValue("--jfi-form-control-color"),colorFocus:o.getPropertyValue("--jfi-form-control-color-focus"),fontSize:o.getPropertyValue("--jfi-form-control-font-size"),fontWeight:o.getPropertyValue("--jfi-form-control-font-weight"),lineHeight:o.getPropertyValue("--jfi-form-control-line-height"),margin:o.getPropertyValue("--jfi-form-control-margin"),padding:o.getPropertyValue("--jfi-form-control-padding")},formLabel:{color:o.getPropertyValue("--jfi-form-label-color"),fontFamily:o.getPropertyValue("--jfi-form-label-font-family"),fontSize:o.getPropertyValue("--jfi-form-label-font-size"),fontWeight:o.getPropertyValue("--jfi-form-label-font-weight"),margin:o.getPropertyValue("--jfi-form-label-margin")},errorMessage:{color:o.getPropertyValue("--jfi-error-message-color"),margin:o.getPropertyValue("--jfi-error-message-margin"),fontSize:o.getPropertyValue("--jfi-error-message-font-size")}}})(),this.paymentMethodFormType=void 0,this.paymentMethodFormValidationMode=void 0,this.iframeOrigin=void 0,this.singleLine=void 0,this.height=55}connectedCallback(){window.addEventListener("message",this.dispatchMessageEvent.bind(this))}disconnectedCallback(){window.removeEventListener("message",this.dispatchMessageEvent.bind(this))}componentShouldUpdate(){this.sendStyleOverrides()}sendStyleOverrides(){this.computedTheme&&this.postMessage(e[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.computedTheme})}dispatchMessageEvent(o){const r=o.data,t=r.eventType,i=r.data;t===e[this.paymentMethodFormType].ready&&this.paymentMethodFormReady.emit(i),t===e[this.paymentMethodFormType].resize&&(this.height=i.height)}postMessage(o,r){var t,i;null===(i=null===(t=this.iframeElement)||void 0===t?void 0:t.contentWindow)||void 0===i||i.postMessage(Object.assign({eventType:o},r),"*")}async postMessageWithResponseListener(o,r){return new Promise((t=>{const i=r=>{r.data.eventType===o&&(window.removeEventListener("message",i),t(r.data.data))};window.addEventListener("message",i),this.postMessage(o,r)}))}async tokenize(o,r,t){return this.postMessageWithResponseListener(e[this.paymentMethodFormType].tokenize,{clientId:o,componentVersion:"3.
|
|
1
|
+
import{r as o,c as r,h as t,H as i}from"./p-48c17d38.js";const e={card:{ready:"justifi.card.ready",tokenize:"justifi.card.tokenize",validate:"justifi.card.validate",resize:"justifi.card.resize",styleOverrides:"justifi.card.styleOverrides"},bankAccount:{ready:"justifi.bankAccount.ready",tokenize:"justifi.bankAccount.tokenize",validate:"justifi.bankAccount.validate",resize:"justifi.bankAccount.resize",styleOverrides:"justifi.bankAccount.styleOverrides"}},s=class{constructor(t){o(this,t),this.paymentMethodFormReady=r(this,"paymentMethodFormReady",7),this.paymentMethodFormTokenize=r(this,"paymentMethodFormTokenize",7),this.computedTheme=(()=>{const o=getComputedStyle(document.body);return{layout:{padding:o.getPropertyValue("--jfi-layout-padding"),formControlSpacingHorizontal:o.getPropertyValue("--jfi-layout-form-control-spacing-x"),formControlSpacingVertical:o.getPropertyValue("--jfi-layout-form-control-spacing-y")},formControl:{backgroundColor:o.getPropertyValue("--jfi-form-control-background-color"),borderColor:o.getPropertyValue("--jfi-form-control-border-color"),borderColorFocus:o.getPropertyValue("--jfi-form-control-border-color-focus"),borderColorError:o.getPropertyValue("--jfi-form-control-border-color-error"),borderWidth:o.getPropertyValue("--jfi-form-control-border-width"),borderBottomWidth:o.getPropertyValue("--jfi-form-control-border-bottom-width"),borderLeftWidth:o.getPropertyValue("--jfi-form-control-border-left-width"),borderRightWidth:o.getPropertyValue("--jfi-form-control-border-right-width"),borderTopWidth:o.getPropertyValue("--jfi-form-control-border-top-width"),borderRadius:o.getPropertyValue("--jfi-form-control-border-radius"),borderStyle:o.getPropertyValue("--jfi-form-control-border-style"),boxShadow:o.getPropertyValue("--jfi-form-control-box-shadow"),boxShadowError:o.getPropertyValue("--jfi-form-control-box-shadow-error"),boxShadowErrorFocus:o.getPropertyValue("--jfi-form-control-box-shadow-error-focus"),boxShadowFocus:o.getPropertyValue("--jfi-form-control-box-shadow-focus"),color:o.getPropertyValue("--jfi-form-control-color"),colorFocus:o.getPropertyValue("--jfi-form-control-color-focus"),fontSize:o.getPropertyValue("--jfi-form-control-font-size"),fontWeight:o.getPropertyValue("--jfi-form-control-font-weight"),lineHeight:o.getPropertyValue("--jfi-form-control-line-height"),margin:o.getPropertyValue("--jfi-form-control-margin"),padding:o.getPropertyValue("--jfi-form-control-padding")},formLabel:{color:o.getPropertyValue("--jfi-form-label-color"),fontFamily:o.getPropertyValue("--jfi-form-label-font-family"),fontSize:o.getPropertyValue("--jfi-form-label-font-size"),fontWeight:o.getPropertyValue("--jfi-form-label-font-weight"),margin:o.getPropertyValue("--jfi-form-label-margin")},errorMessage:{color:o.getPropertyValue("--jfi-error-message-color"),margin:o.getPropertyValue("--jfi-error-message-margin"),fontSize:o.getPropertyValue("--jfi-error-message-font-size")}}})(),this.paymentMethodFormType=void 0,this.paymentMethodFormValidationMode=void 0,this.iframeOrigin=void 0,this.singleLine=void 0,this.height=55}connectedCallback(){window.addEventListener("message",this.dispatchMessageEvent.bind(this))}disconnectedCallback(){window.removeEventListener("message",this.dispatchMessageEvent.bind(this))}componentShouldUpdate(){this.sendStyleOverrides()}sendStyleOverrides(){this.computedTheme&&this.postMessage(e[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.computedTheme})}dispatchMessageEvent(o){const r=o.data,t=r.eventType,i=r.data;t===e[this.paymentMethodFormType].ready&&this.paymentMethodFormReady.emit(i),t===e[this.paymentMethodFormType].resize&&(this.height=i.height)}postMessage(o,r){var t,i;null===(i=null===(t=this.iframeElement)||void 0===t?void 0:t.contentWindow)||void 0===i||i.postMessage(Object.assign({eventType:o},r),"*")}async postMessageWithResponseListener(o,r){return new Promise((t=>{const i=r=>{r.data.eventType===o&&(window.removeEventListener("message",i),t(r.data.data))};window.addEventListener("message",i),this.postMessage(o,r)}))}async tokenize(o,r,t){return this.postMessageWithResponseListener(e[this.paymentMethodFormType].tokenize,{clientId:o,componentVersion:"3.1.4",paymentMethodMetadata:r,account:t})}async validate(){return this.postMessageWithResponseListener(e[this.paymentMethodFormType].validate)}composeQueryParams(o){return o.map((r=>r===o[0]?`?${r}`:`&${r}`)).join("")}getIframeSrc(){let o=`${this.iframeOrigin||"https://js.justifi.ai/v2"}/${this.paymentMethodFormType}`,r=[];return this.paymentMethodFormValidationMode&&r.push(`validationMode=${this.paymentMethodFormValidationMode}`),this.singleLine&&r.push(`singleLine=${this.singleLine}`),o.concat(this.composeQueryParams(r))}render(){return t(i,null,t("iframe",{id:`justifi-payment-method-form-${this.paymentMethodFormType}`,src:this.getIframeSrc(),ref:o=>this.iframeElement=o,height:this.height}))}};s.style=":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";export{s as justifi_payment_method_form}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-48c17d38.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t([["p-587697d6",[[1,"justifi-payment-form",{bankAccount:[4,"bank-account"],card:[4],email:[1],iframeOrigin:[1,"iframe-origin"],clientId:[1,"client-id"],accountId:[1,"account-id"],submitButtonText:[1,"submit-button-text"],submitButtonEnabled:[32],selectedPaymentMethodType:[32],allowedPaymentMethodTypes:[32],fillBillingForm:[64],enableSubmitButton:[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["p-282af003",[[0,"justifi-bank-account-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],internalStyleOverrides:[32],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-af8d98bb",[[0,"justifi-card-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],singleLine:[4,"single-line"],internalStyleOverrides:[32],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-57d070c8",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-f2438424",[[1,"select-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],options:[16],internalValue:[32]}],[1,"text-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],internalValue:[32]}]]],["p-0d4b4f19",[[1,"justifi-billing-form",{legend:[1],billingFields:[32],billingFieldsErrors:[32],fill:[64],validate:[64],getValues:[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{paymentMethodTypes:[16],selectedPaymentMethodType:[1,"selected-payment-method-type"]}]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-48c17d38.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t([["p-587697d6",[[1,"justifi-payment-form",{bankAccount:[4,"bank-account"],card:[4],email:[1],iframeOrigin:[1,"iframe-origin"],clientId:[1,"client-id"],accountId:[1,"account-id"],submitButtonText:[1,"submit-button-text"],submitButtonEnabled:[32],selectedPaymentMethodType:[32],allowedPaymentMethodTypes:[32],fillBillingForm:[64],enableSubmitButton:[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["p-282af003",[[0,"justifi-bank-account-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],internalStyleOverrides:[32],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-af8d98bb",[[0,"justifi-card-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],singleLine:[4,"single-line"],internalStyleOverrides:[32],tokenize:[64],validate:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-57d070c8",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-f2438424",[[1,"select-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],options:[16],internalValue:[32]}],[1,"text-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],internalValue:[32]}]]],["p-0d4b4f19",[[1,"justifi-billing-form",{legend:[1],billingFields:[32],billingFieldsErrors:[32],fill:[64],validate:[64],getValues:[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{paymentMethodTypes:[16],selectedPaymentMethodType:[1,"selected-payment-method-type"]}]]],["p-fbed6d27",[[0,"justifi-payment-method-form",{paymentMethodFormType:[1,"payment-method-form-type"],paymentMethodFormValidationMode:[1025,"payment-method-form-validation-mode"],iframeOrigin:[1,"iframe-origin"],singleLine:[4,"single-line"],height:[32],tokenize:[64],validate:[64]}]]]],e)));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justifi/webcomponents",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.4",
|
|
4
4
|
"description": "JustiFi Web Components",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/components/index.js",
|
|
@@ -69,4 +69,4 @@
|
|
|
69
69
|
"storybook": "^7.0.4"
|
|
70
70
|
},
|
|
71
71
|
"license": "MIT"
|
|
72
|
-
}
|
|
72
|
+
}
|