@justifi/webcomponents 6.0.0-rc.3 → 6.0.0-rc.5

package/dist/collection/ui-components/form/form-control-monetary.js

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '0e31cb58a7b3560cea88bc515b55e787d6be0a71' }, h("div", { key: 'd0ad28b761a1fb95b5e446684eb77d25202908fd', class: "form-group d-flex flex-column" }, h("label", { key: 'f075865f14b8697838454c3da270e974e19b0bb4', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '4835ba829efc4d65ec93f8c406c56635f3fb55e9', name: this.name, helpText: this.helpText }), h("div", { key: '88394d95831cf79a9f6d68ed824e2f0f28e5c4b3', class: "input-group" }, h("span", { key: 'c0f56328b5330230114cbc6dbec2ff5ab50fa6fa', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '615dee630e13fc603bcf0020588ea89a8006fe97', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c8f67091e23f41d7cff3ae8e7d484682546c7b46' }, h("div", { key: '5a957dc0aec90bdf3220b8b736353d158d23d5e2', class: "form-group d-flex flex-column" }, h("label", { key: 'a71b52991e5ec8a46aa01d0d3017aaf6de15a682', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '85b306a5a8445187ac103d15926ef9d6d161db3c', name: this.name, helpText: this.helpText }), h("div", { key: '2a9cf50fc362e436d6c2b3c592fea5ddfbc95710', class: "input-group" }, h("span", { key: '99829c1fb6bec3bb86fa7c13bf3182f04b41a5bc', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '8adbcae5bb6aa9d110b5c47b29edd6021a90b3fc', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: 'cb2c4f53cc3bdc3b83302b30cb6087cac33e7a95', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: 'c390bb0b610a367b9ca08ff3a737250b97b685fb', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number-masked.js

@@ -61,10 +61,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '7e2cbd8676a4513170e1c920fafffeae4cc042f2' }, h("div", { key: 'bde27be5dfe86c5c820f46263ec73f014f8a628a', class: "form-group d-flex flex-column" }, h("div", { key: 'bee2a81a0b23aafbb522debac5697dbc4eaaf7bc', class: "d-flex align-items-start gap-2" }, h("label", { key: '1d43eb5e7167cba5ef63439e6807deef35f7c2ea', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'aadef33688848d580ec6b369528165480c61bc49', helpText: this.helpText })), h("input", { key: 'a57624c146db1bf54ce73853f6c0514042335502', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '589d87bd8c266abca5f90b98a4c283bbbf7395e0' }, h("div", { key: 'b81beb01581f1ba626e62fbd977e50ee0ce1e511', class: "form-group d-flex flex-column" }, h("div", { key: '6d19e6935f4b161a803b5c977b031f47590bd9cc', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f083814b699a6b319d487e4d604c944c25e33604', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '50dc464aa682be09049620371eda508deb4e622a', helpText: this.helpText })), h("input", { key: 'bfddf6e15747db29189374015178c167a491e4ec', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '56be93f77b87e7a4ced570d8d12c94f3864083a5', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '3f89d9f453eb3267606abc1ac4138eee97b18d22', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number.js

@@ -36,10 +36,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '1d13bdff56070e4d188779f07081dcf2a4031f02' }, h("div", { key: 'e1324de4cd2b183e3674eb5b182a7d51d8a6e571', class: 'form-group d-flex flex-column' }, h("label", { key: 'fea8787bc32e452c1ba339fee15be3cebd274d97', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'adc992f81d060ae9317995fbf728cf0d188fd747', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '53d8829b903659510dcac88b1d9656bf820b0c0b' }, h("div", { key: '795d0f1b6033e039a081fb10f93908cffddb493f', class: 'form-group d-flex flex-column' }, h("label", { key: 'dd5bfb80db6bd7b0332976034705c58c0421638c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'e8f794181b53447d9f352e3b00405c24bcbdc0f8', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '50db62ad988d180660df8b4cf8aad2a97ad341ba', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '41a8e98a776d0e265d5b7febce941e741eaa1a6c', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '04c4a1f7f9e991190462cae647f569bfbef9ba48', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'ab947bca804ceb6ec9f1c3d603a2b550266aa20f', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-radio.js

@@ -26,10 +26,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: 'a22020f52ab144e24df5d8b66e1e4a2e96a46118', class: 'form-group d-flex flex-column' }, h("div", { key: '92e094809b59818298423b9e239cab73757c4361', class: "form-check" }, h("input", { key: 'f86decea91a82284fdda6916c342e8921df9dbc7', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'f699cf07beab2c184ed0bf349b547e20b8a809a3', class: 'form-group d-flex flex-column' }, h("div", { key: '7a6427ca06397dd7ef610484e66766137a49bcc5', class: "form-check" }, h("input", { key: '2cbda070ab205f489ec5345a387f95aa63303ad4', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: 'd7abd665cf385ab45f154c2607ad8732f5d778f2', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '2c495cb8c25c1984addbcdcb8899823aa2db64a5', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '136d3defc1f11627d0eeb4d202f4938b5e0cbde3', errorText: this.errorText, name: this.name })));
+            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '653fbd79f9fc7e55337208e02b55f2e7751d2811', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '36bebcb0ce02c548a21a02219d6d6b54c9a856eb', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8bc6df11eeaea35ea50b3d8132678c9855beacd9', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-text.js

@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '51f427955047c079bcd4277ce54f27168d6c3e14' }, h("div", { key: '3724cd9797feb1b383e031a3509dfc365a4d1dc0', class: "form-group d-flex flex-column" }, h("div", { key: '883b87e2e1ddf1eb3956fd232ab7c7239a9ee08f', class: "d-flex align-items-start gap-2" }, h("label", { key: '7d8acb9db3c54034fff1d310555ed15d039c8ab4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '70c94e2dea56b70ae3e6e6fae86127ee366fa1a2', helpText: this.helpText })), h("input", { key: 'af0adb1ba6ac16dcd8c39a45c8c44f6bd41c9ab9', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'd2bda676ececdf630c420c541d070b0e24f0c876' }, h("div", { key: '11cb790f797a1ea3009b134670741d3cf8da4c87', class: "form-group d-flex flex-column" }, h("div", { key: '7049eba9568b3847d6eec66133606ab6ec3534ab', class: "d-flex align-items-start gap-2" }, h("label", { key: '591c5e32006d90bf7e6cfdd0cebaa72f01e5535f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '206b51faffe537a28854f36d632354ded8b09e84', helpText: this.helpText })), h("input", { key: '3849d55e0d300acfdaadbc649e9adb7d977e3216', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'd393476376fa8f749b4e54a35da2586a878da4bd', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '63ac8e960213bd020b222be5e5082514b96ddbcd', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-textarea.js

@@ -38,10 +38,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'e88e4c0a4206046607c1e4c30777017881a8dd80' }, h("div", { key: 'eb712fe05c4e6a51a68d57b9d11742bf23dc5b5d', class: "form-group d-flex flex-column" }, h("label", { key: '6a4c5c62c94fe0d3695af529660c4a0d0287cc8f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '76e0681514be96eb581074d8382b7577b62ada5f', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '7d4f4ae4d68bb1bd8367eaeb35004c812cc7a486' }, h("div", { key: 'f313b9fd13190c4bb2c9806ef81cef2b7c9fd888', class: "form-group d-flex flex-column" }, h("label", { key: '57d3e7f77c4a92c7e37a49a30981848586189c67', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '2a8f08aed29a0931d8ec6c00794b3d3a328040f4', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '81cb12aa1552e90df24e073a9a2cc5ac669ed89a', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '1f7999d157fff74502fe16379d55733106bdc4f7', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '2a2bf6e0bee0cd60f7fae84dc30684e816527b4d', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '4d4fc8fc5450eb711dad88e2d8ca0d318b6dfd0c', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

package/dist/collection/ui-components/form/hidden-input.js

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '4d650e7de7ed14c4483608412b6e2012b16de0d1' }, h("input", { key: 'bddc32a79593dc42a1edda6f982562b2399319e0', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: 'd43ecd651426b84f971c3cd8a447b5022d26cec4' }, h("input", { key: 'b5c0880882ebbe14ac4e24ead353e26b3c86271c', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
     static get is() { return "hidden-input"; }
     static get states() {

package/dist/collection/ui-components/form/iframe-input.js

@@ -77,10 +77,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: 'ecbbcb6efd1855e0f89c66b8878f93a1f98a103d', class: "form-group d-flex flex-column" }, h("div", { key: '9e57bb4eacca52cc7a77fcb044d3ef7036acaca2', style: {
+        return (h(Host, { key: 'f8aa1654e8ea569bb287d7a16e5d1f0f10faddd2', class: "form-group d-flex flex-column" }, h("div", { key: 'bc11e0b644272ac251f41c8f104d04f117ddca1f', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '91c717d727068698244692d607e1959116d6a72d', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '1b655b4939a6c74088dbc6d58346d91aa4c0b1f1', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: 'f46944026ae45f6ff71638adb52dc2ca716adb28', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '10d634dcd3697797932d89abeaedf572667819e2', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'ee4f6ff9b8753ad65c32927a1d62c5755d8e4cbf', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '14bbe359e808944e19aeb0742adfc1f4db07c9b5', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'cbcdd23b9de6a26a3d183af48a45caacc674a3c7', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'c88d3d3e88707285d207341347a088b05c19ab2b', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

package/dist/collection/ui-components/shadow-dom-components/justifi-button.js

@@ -7,7 +7,7 @@ export class JustifiButton {
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '56c3098559d728e326c9d76276f2e54bfb8b6697' }, h(Button, { key: '56d123ed4bc90972e8bcd8ad00e5942819998bed', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: '0cc61730e0afccbf438382a3d709397ebe327a9a' }, h(Button, { key: 'c82eb8f914aa50df8b3e51d271a9e4c29602369e', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
     static get is() { return "justifi-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/shadow-dom-components/justifi-header.js

@@ -14,7 +14,7 @@ export class Header {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '5113142a64d38ab38fbf95f37e2548501b11d81e' }, h(HeaderComponent, { key: 'e28419adc9ac323a1846358efc7ffab98dddec95', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '73104ea086f8a9948e69f86451adf19e0f39fb32' }, h(HeaderComponent, { key: 'a8582109634299a24e2a9b3c7181c6bba511fde7', text: this.text, class: this.class })));
     }
     static get is() { return "justifi-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/shadow-dom-components/justifi-skeleton.js

@@ -3,7 +3,7 @@ import { StyledHost } from "../styled-host/styled-host";
 import { Skeleton } from "../skeleton";
 export class JustifiSkeleton {
     render() {
-        return (h(StyledHost, { key: 'bc7f16e36d1d3da605bf59bdcb6106d7ed51bcc9' }, h(Skeleton, { key: 'b3947442cec1bf7b5634f42dc682a436ad9bddee', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: '0dbb20245a88851e3cf9fc853029b22847f1cdfe' }, h(Skeleton, { key: '7778f32d71f1b7d46b0f8eab39bb7d98a215ebb3', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
     }
     static get is() { return "justifi-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-13T21:15:45",
+  "timestamp": "2025-08-19T19:10:19",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.2",
@@ -5616,6 +5616,453 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/modular-checkout/sub-components/apple-pay.tsx",
+      "encapsulation": "shadow",
+      "tag": "justifi-apple-pay",
+      "readme": "# payment-method-option\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "apiBaseUrl",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "api-base-url",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "configState.apiOrigin"
+            }
+          ],
+          "default": "configState.apiOrigin",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "buttonStyle",
+          "type": "ApplePayButtonStyle.BLACK | ApplePayButtonStyle.WHITE | ApplePayButtonStyle.WHITE_OUTLINE",
+          "complexType": {
+            "original": "ApplePayButtonStyle",
+            "resolved": "ApplePayButtonStyle.BLACK | ApplePayButtonStyle.WHITE | ApplePayButtonStyle.WHITE_OUTLINE",
+            "references": {
+              "ApplePayButtonStyle": {
+                "location": "import",
+                "path": "../../../api/ApplePay",
+                "id": "src/api/ApplePay.ts::ApplePayButtonStyle"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "button-style",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "ApplePayButtonStyle.BLACK"
+            }
+          ],
+          "default": "ApplePayButtonStyle.BLACK",
+          "values": [
+            {
+              "type": "ApplePayButtonStyle.BLACK"
+            },
+            {
+              "type": "ApplePayButtonStyle.WHITE"
+            },
+            {
+              "type": "ApplePayButtonStyle.WHITE_OUTLINE"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "buttonType",
+          "type": "ApplePayButtonType.BOOK | ApplePayButtonType.BUY | ApplePayButtonType.CHECK_OUT | ApplePayButtonType.DONATE | ApplePayButtonType.PLAIN | ApplePayButtonType.SET_UP | ApplePayButtonType.SUBSCRIBE",
+          "complexType": {
+            "original": "ApplePayButtonType",
+            "resolved": "ApplePayButtonType.BOOK | ApplePayButtonType.BUY | ApplePayButtonType.CHECK_OUT | ApplePayButtonType.DONATE | ApplePayButtonType.PLAIN | ApplePayButtonType.SET_UP | ApplePayButtonType.SUBSCRIBE",
+            "references": {
+              "ApplePayButtonType": {
+                "location": "import",
+                "path": "../../../api/ApplePay",
+                "id": "src/api/ApplePay.ts::ApplePayButtonType"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "button-type",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "ApplePayButtonType.PLAIN"
+            }
+          ],
+          "default": "ApplePayButtonType.PLAIN",
+          "values": [
+            {
+              "type": "ApplePayButtonType.BOOK"
+            },
+            {
+              "type": "ApplePayButtonType.BUY"
+            },
+            {
+              "type": "ApplePayButtonType.CHECK_OUT"
+            },
+            {
+              "type": "ApplePayButtonType.DONATE"
+            },
+            {
+              "type": "ApplePayButtonType.PLAIN"
+            },
+            {
+              "type": "ApplePayButtonType.SET_UP"
+            },
+            {
+              "type": "ApplePayButtonType.SUBSCRIBE"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "countryCode",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "country-code",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "\"US\""
+            }
+          ],
+          "default": "\"US\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "initiativeContext",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "initiative-context",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "\"dev-checkout.justifi-staging.com\""
+            }
+          ],
+          "default": "\"dev-checkout.justifi-staging.com\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "merchantDisplayName",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "merchant-display-name",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "\"JustiFi Checkout\""
+            }
+          ],
+          "default": "\"JustiFi Checkout\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "merchantIdentifier",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "merchant-identifier",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "\"merchant.com.staging-justifi.checkout-dev\""
+            }
+          ],
+          "default": "\"merchant.com.staging-justifi.checkout-dev\"",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showSkeleton",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-skeleton",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "abort",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "abort() => Promise<void>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "getPaymentMethods",
+          "returns": {
+            "type": "Promise<string[]>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string[]>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string[]>"
+          },
+          "signature": "getPaymentMethods() => Promise<string[]>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "isSupported",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "isSupported() => Promise<boolean>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "applePayCancelled",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "event": "applePayCompleted",
+          "detail": "{ success: boolean; token?: IApplePayToken; paymentMethodId?: string; error?: any; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n    success: boolean;\n    token?: IApplePayToken;\n    paymentMethodId?: string;\n    error?: any;\n  }",
+            "resolved": "{ success: boolean; token?: IApplePayToken; paymentMethodId?: string; error?: any; }",
+            "references": {
+              "IApplePayToken": {
+                "location": "import",
+                "path": "../../../api/ApplePay",
+                "id": "src/api/ApplePay.ts::IApplePayToken"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "event": "applePayError",
+          "detail": "{ error: string; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ error: string }",
+            "resolved": "{ error: string; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "event": "applePayStarted",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/modular-checkout/sub-components/bank-account-billing-form-simple.tsx",
       "encapsulation": "shadow",
@@ -20375,6 +20822,21 @@
       "docstring": "",
       "path": "src/components.d.ts"
     },
+    "src/api/ApplePay.ts::ApplePayButtonType": {
+      "declaration": "export enum ApplePayButtonType {\n  PLAIN = 'plain',\n  BUY = 'buy',\n  SET_UP = 'set-up',\n  DONATE = 'donate',\n  CHECK_OUT = 'check-out',\n  BOOK = 'book',\n  SUBSCRIBE = 'subscribe',\n}",
+      "docstring": "",
+      "path": "src/api/ApplePay.ts"
+    },
+    "src/api/ApplePay.ts::ApplePayButtonStyle": {
+      "declaration": "export enum ApplePayButtonStyle {\n  BLACK = 'black',\n  WHITE = 'white',\n  WHITE_OUTLINE = 'white-outline',\n}",
+      "docstring": "",
+      "path": "src/api/ApplePay.ts"
+    },
+    "src/api/ApplePay.ts::IApplePayToken": {
+      "declaration": "export interface IApplePayToken {\n  paymentData: IApplePayTokenData;\n  paymentMethod: IApplePayTokenPaymentMethod;\n  transactionIdentifier: string;\n}",
+      "docstring": "",
+      "path": "src/api/ApplePay.ts"
+    },
     "src/api/index.ts::TerminalModelName": {
       "declaration": "any",
       "docstring": "",