@primer-io/primer-js 0.14.1 → 1.0.0
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 +21 -0
- package/dist/custom-elements.json +517 -635
- package/dist/jsx/index.d.ts +21 -21
- package/dist/primer-loader.d.ts +102 -154
- package/dist/primer-loader.js +11 -11
- package/dist/vscode.html-custom-data.json +14 -14
- package/dist/web-types.json +53 -53
- package/package.json +1 -1
|
@@ -47,16 +47,6 @@
|
|
|
47
47
|
}
|
|
48
48
|
]
|
|
49
49
|
},
|
|
50
|
-
{
|
|
51
|
-
"kind": "variable",
|
|
52
|
-
"name": "cr",
|
|
53
|
-
"default": "class{constructor(t){this._methods=t}get(t){return this._methods.get(t)}toArray(){return Array.from(this._methods.values())}size(){return this._methods.size}}"
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
"kind": "variable",
|
|
57
|
-
"name": "ur",
|
|
58
|
-
"default": "class{constructor(t){this._methods=t}get(t){return this._methods.get(t)}toArray(){return Array.from(this._methods.values())}size(){return this._methods.size}}"
|
|
59
|
-
},
|
|
60
50
|
{
|
|
61
51
|
"kind": "variable",
|
|
62
52
|
"name": "ne",
|
|
@@ -65,32 +55,32 @@
|
|
|
65
55
|
{
|
|
66
56
|
"kind": "variable",
|
|
67
57
|
"name": "Pe",
|
|
68
|
-
"default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this._eventListenerController=null;this.locale=
|
|
58
|
+
"default": "class extends v{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this._jsInitialized=!1;this.previousLoadingState=!0;this.hasAssignedContent=!1;this._loadingTimeoutId=null;this._eventListenerController=null;this.locale=Qt(vr());this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.sdkContextController=new nr(this),this.sdkStateController=new ir(this),this.primerEventsController=new Zt(this),this.styleProcessingController=new or(this),this.vaultManagerController=new ga(this),this.cardNetworkController=new wa(this),this.achPaymentEventsController=new _r(this),this.headlessSdkController=new xr(this)}set jsInitialized(e){this.requestUpdate(),this._jsInitialized=e}get jsInitialized(){return this._jsInitialized}get primerJS(){return this.headlessSdkController?.primerJSInstance??void 0}connectedCallback(){super.connectedCallback(),this.sdkContextController.setEventsController(this.primerEventsController),this._eventListenerController=new AbortController,document.addEventListener(\"primer:card-submit\",this.handleExternalCardSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:vault-submit\",this.handleExternalVaultSubmit.bind(this),{signal:this._eventListenerController.signal}),document.addEventListener(\"primer:show-other-payments-toggle\",this.handleExternalShowOtherPaymentsToggle.bind(this),{signal:this._eventListenerController.signal})}attributeChangedCallback(e,a,i){e===Ap.CUSTOM_STYLES?this.styleProcessingController.processCustomStyles(i):super.attributeChangedCallback(e,a,i)}disconnectedCallback(){this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null),this.sdkStateController?.currentState.isLoading&&this.sdkStateController.forceCompleteLoading(),this._eventListenerController&&(this._eventListenerController.abort(),this._eventListenerController=null),super.disconnectedCallback()}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Fi(this.options?.locale)?this.locale=Qt(this.options?.locale):P.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to system locale\")),Gi(this.locale))}updated(){let e=getComputedStyle(this);this.sdkContextController.setComputedStyles(e),this.checkLoadingStateChange()}handleExternalCardSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:card-submit\",e.detail)}handleExternalVaultSubmit(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:vault-submit\",e.detail)}handleExternalShowOtherPaymentsToggle(e){this._eventListenerController?.signal.aborted||e.target!==this&&this.primerEventsController.dispatchEvent(\"primer:show-other-payments-toggle\",e.detail)}checkLoadingStateChange(){let e=this.sdkStateController?.currentState.isLoading||!1;if(this.previousLoadingState&&!e){this.jsInitialized=!0,Q({eventName:\"CHECKOUT_FLOW_STARTED\"});let a=Ye.getSdkInitStartTime(),i=a?Date.now()-a:void 0;Eo(i)}this.previousLoadingState=e,e&&!this._loadingTimeoutId?this._loadingTimeoutId=window.setTimeout(()=>{this.sdkStateController?.currentState.isLoading&&(P.warn(\"Loading timeout in component, forcing completion\"),this.sdkStateController.forceCompleteLoading(),this.jsInitialized=!0),this._loadingTimeoutId=null},1e4):!e&&this._loadingTimeoutId&&(window.clearTimeout(this._loadingTimeoutId),this._loadingTimeoutId=null)}render(){let e=this.sdkStateController.currentState,a=e.isLoading,i=e.primerJsError,n=!a&&!i;return p` ${R(a,()=>y)} ${R(i,()=>p`<primer-checkout-error></primer-checkout-error>`)} ${R(n,()=>p`<slot name=\"main\" @slotchange=${this.onSlotChange}></slot>${R(this.hasAssignedContent,()=>y,()=>p`<primer-main></primer-main>`)} `,()=>y)} `}addEventListener(e,a,i){super.addEventListener(e,a,i)}removeEventListener(e,a,i){super.removeEventListener(e,a,i)}}"
|
|
69
59
|
},
|
|
70
60
|
{
|
|
71
61
|
"kind": "function",
|
|
72
|
-
"name": "
|
|
62
|
+
"name": "Es"
|
|
73
63
|
},
|
|
74
64
|
{
|
|
75
65
|
"kind": "function",
|
|
76
|
-
"name": "
|
|
66
|
+
"name": "Ts"
|
|
77
67
|
},
|
|
78
68
|
{
|
|
79
69
|
"kind": "function",
|
|
80
|
-
"name": "
|
|
70
|
+
"name": "Pp"
|
|
81
71
|
},
|
|
82
72
|
{
|
|
83
73
|
"kind": "function",
|
|
84
|
-
"name": "
|
|
74
|
+
"name": "Np"
|
|
85
75
|
},
|
|
86
76
|
{
|
|
87
77
|
"kind": "variable",
|
|
88
|
-
"name": "
|
|
89
|
-
"default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-loader)\";this.size=\"medium\";this.compact=!1}getSize(){if(this.size in
|
|
78
|
+
"name": "$e",
|
|
79
|
+
"default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-loader)\";this.size=\"medium\";this.compact=!1}getSize(){if(this.size in Qi)return Qi[this.size];let e=parseInt(this.size,10);return isNaN(e)?Qi.medium:e}render(){let e=this.getSize(),a=20,i=`0 0 ${a} ${a}`;return this.style.setProperty(\"--spinner-color\",this.color),this.style.setProperty(\"--spinner-size\",`${e}px`),p`<div class=\"spinner-container ${this.compact?\"compact\":\"\"}\"><svg class=\"spinner\" width=\"${e}\" height=\"${e}\" viewBox=\"${i}\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"status\" aria-label=\"Loading\" ><path d=\"M4.27827 10.002C4.27827 6.84166 6.84019 4.27973 10.0005 4.27973C10.7676 4.27973 11.3894 3.6579 11.3894 2.89084C11.3894 2.12378 10.7676 1.50195 10.0005 1.50195C5.30607 1.50195 1.50049 5.30753 1.50049 10.002C1.50049 14.6964 5.30607 18.502 10.0005 18.502C14.6949 18.502 18.5005 14.6964 18.5005 10.002C18.5005 9.23489 17.8787 8.61306 17.1116 8.61306C16.3445 8.61306 15.7227 9.23489 15.7227 10.002C15.7227 13.1622 13.1608 15.7242 10.0005 15.7242C6.84019 15.7242 4.27827 13.1622 4.27827 10.002Z\" fill=\"currentColor\" class=\"path\" /></svg></div>`}}"
|
|
90
80
|
},
|
|
91
81
|
{
|
|
92
82
|
"kind": "variable",
|
|
93
|
-
"name": "
|
|
83
|
+
"name": "ze",
|
|
94
84
|
"default": "class extends v{constructor(){super(...arguments);this.focusWithin=!1;this.hasError=!1;this.handleWrapperClick=e=>{if(e.target!==e.currentTarget)return;let a=this.findSlottedPrimerInput();a?a.focus():this.dispatchEvent(new CustomEvent(\"wrapper-click\",{bubbles:!0,composed:!0}))}}findSlottedPrimerInput(){if(!this.inputSlot)return null;let e=this.inputSlot.assignedElements({flatten:!0}),a=e.find(i=>i.tagName.toLowerCase()===\"primer-input\");if(a)return a;for(let i of e){let n=i.querySelector(\"primer-input\");if(n)return n}return null}render(){let e={\"input-slot\":!0,\"focus-within\":this.focusWithin};return p`<div class=\"input-wrapper\"><slot name=\"label\"></slot><div class=\"${oe(e)}\" @click=\"${this.handleWrapperClick}\"><slot name=\"input\"></slot></div><slot name=\"error\"></slot></div>`}}"
|
|
95
85
|
},
|
|
96
86
|
{
|
|
@@ -111,7 +101,7 @@
|
|
|
111
101
|
{
|
|
112
102
|
"kind": "variable",
|
|
113
103
|
"name": "je",
|
|
114
|
-
"default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-icon-primary)\";this.size=\"lg\"}render(){let e=this.name?
|
|
104
|
+
"default": "class extends v{constructor(){super(...arguments);this.color=\"var(--primer-color-icon-primary)\";this.size=\"lg\"}render(){let e=this.name?Rs[this.name]:null;return p`<div style=\"--internal-icon-color: ${this.color}\">${e||p`<slot></slot>`}</div>`}}"
|
|
115
105
|
},
|
|
116
106
|
{
|
|
117
107
|
"kind": "variable",
|
|
@@ -151,67 +141,67 @@
|
|
|
151
141
|
{
|
|
152
142
|
"kind": "variable",
|
|
153
143
|
"name": "se",
|
|
154
|
-
"default": "class extends v{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.klarnaCategories=null;this.disabled=!1;this.selectedCategory=null;this.isExpanded=!1;this.headerAriaLabel=b(\"pay_with\",{id:\"pay_with\"});this._paymentMethodManagerTask=new
|
|
144
|
+
"default": "class extends v{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.klarnaCategories=null;this.disabled=!1;this.selectedCategory=null;this.isExpanded=!1;this.headerAriaLabel=b(\"pay_with\",{id:\"pay_with\"});this._paymentMethodManagerTask=new O(this,{task:async([e,a])=>{if(!e||!a)return w;let i=await a.getCDNAssets(\"KLARNA\");return{manager:e.manager,klarnaIcon:i?.assets?.icon?`${i.goatCdnUrl}/${i.assets.icon}`:\"\"}},args:()=>[this.paymentManagers.get(\"KLARNA\"),this.headlessUtils]});this.toggleExpand=()=>{this.disabled||(this.isExpanded=!this.isExpanded,this.isExpanded||(this.selectedCategory=null))}}async startKlarnaPayment(){if(!(!this._paymentMethodManagerTask.value||!this.selectedCategory))try{await this._paymentMethodManagerTask.value.manager.start({paymentMethodCategoryId:this.selectedCategory})}catch(e){P.errorWithDatadog(\"Failed to start Klarna payment\",{error:e})}}async renderSelectedCategory(){if(!(!this._paymentMethodManagerTask.value||!this.selectedCategory||!this.klarnaContainer))try{this.klarnaContainer.innerHTML=\"\",await this._paymentMethodManagerTask.value.manager.renderCategory({containerId:this.klarnaContainer,paymentMethodCategoryId:this.selectedCategory,onHeightChange:e=>{e>0&&(this.klarnaContainer.style.height=`${e}px`)}})}catch(e){P.errorWithDatadog(\"Failed to render Klarna category\",{error:e})}}selectCategory(e){this.disabled||(this.selectedCategory=e,this.renderSelectedCategory())}updated(e){e.has(\"selectedCategory\")&&this.selectedCategory&&this.renderSelectedCategory()}renderCategorySelection(){let e=this.klarnaCategories?.categories||[];return this.klarnaCategories?.isLoading||!1?p`<div class=\"loading\"><primer-spinner size=\"small\"></primer-spinner></div>`:p`<div class=\"category-selection\">${e.map(i=>p`<button class=${oe({\"category-button\":!0,selected:i.id===this.selectedCategory})} @click=${()=>{this.selectCategory(i.id)}} ?disabled=${this.disabled} >${i.name}</button>`)}</div>`}renderExpandedContent(){return p` ${this.renderCategorySelection()} ${this.selectedCategory?p`<div id=\"klarna-category-container\" class=\"klarna-category-container\" ></div>`:y}<button class=${oe({\"klarna-pay-button\":!0,loading:!!this.sdkState?.isProcessing,disabled:!this.selectedCategory||this.disabled})} ?disabled=${!this.selectedCategory||this.sdkState?.isProcessing||this.disabled} @click=${()=>this.startKlarnaPayment()} >${b(\"confirm\",{id:\"confirm\"})}</button>`}render(){return this._paymentMethodManagerTask.render({error:e=>{let a=e instanceof Error?e.message:\"Unknown error in Klarna\";return p`<div class=\"error\"> Error loading Klarna: ${a}</div>`},complete:({manager:e,klarnaIcon:a})=>e?p`<div class=\"klarna-container ${this.isExpanded?\"expanded\":\"\"}\"><div class=\"klarna-button-header\"><primer-button buttonType=\"button\" variant=\"secondary\" class=\"klarna-button\" @click=${this.toggleExpand} aria-expanded=${this.isExpanded} aria-controls=\"collapsable-content\" aria-label=${this.headerAriaLabel} ?disabled=${this.disabled} ><img src=${a} alt=\"Klarna logo\" /><span>${b(\"pay_with\",{id:\"pay_with\"})} Klarna</span><span class=\"klarna-accordion-icon ${this.isExpanded?\"expanded\":\"\"}\" > ▼ </span></primer-button></div><div class=\"klarna-expanded-content ${this.isExpanded?\"visible\":\"\"}\" ><div class=\"klarna-accordion-content\">${this.renderExpandedContent()}</div></div></div>`:y})}}"
|
|
155
145
|
},
|
|
156
146
|
{
|
|
157
147
|
"kind": "variable",
|
|
158
148
|
"name": "Ze",
|
|
159
|
-
"default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.disabled=!1;this.loadManagerTask=new
|
|
149
|
+
"default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.disabled=!1;this.loadManagerTask=new O(this,{args:()=>[this.paymentMethod?.type],task:([e])=>{if(!e)return w;let a=this.paymentManagers.get(e);if(!a)throw new Error(`No manager found for payment method type ${e}`);if(a.type!==\"GOOGLE_PAY\")throw new Error(\"Invalid payment method type for Google Pay component\");return a.manager}}),this.renderButtonTask=new O(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return w;await this.updateComplete;let a=e.createButton();return await a.render(this.shadowRoot?.getRootNode(),{style:{shadowRoot:!0}}),this.disabled&&await a.setDisabled(this.disabled),this.disabled&&this.shadowRoot&&(await this.updateComplete,Dr(this.disabled,this.shadowRoot)),a}})}attributeChangedCallback(e,a,i){if(super.attributeChangedCallback(e,a,i),e===\"disabled\"&&a!==i){let n=i!==null,o=this.renderButtonTask.value;o&&o.setDisabled(n)}}updated(e){e.has(\"disabled\")&&this.shadowRoot&&Dr(this.disabled,this.shadowRoot)}render(){return y}}"
|
|
160
150
|
},
|
|
161
151
|
{
|
|
162
152
|
"kind": "variable",
|
|
163
153
|
"name": "Je",
|
|
164
|
-
"default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.disabled=!1;this.buttonContainerRef=
|
|
154
|
+
"default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.disabled=!1;this.buttonContainerRef=Ft();this.loadManagerTask=new O(this,{args:()=>[this.paymentMethod?.type],task:([e])=>{if(!e)return w;let a=this.paymentManagers.get(e);if(!a)throw new Error(`No manager found for payment method type ${e}`);if(a.type!==\"APPLE_PAY\")throw new Error(\"Invalid payment method type for Apple Pay component\");return a.manager}}),this.renderButtonTask=new O(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return w;await this.updateComplete;let a=this.buttonContainerRef.value;if(!a)throw new Error(\"Button container not found\");let i=e.createButton(),n=Or(a);return await i.render(a,{style:{buttonHeight:n}}),this.disabled&&await i.setDisabled(this.disabled),this.disabled&&(await this.updateComplete,aa(this.disabled,this.buttonContainerRef)),i}})}attributeChangedCallback(e,a,i){if(super.attributeChangedCallback(e,a,i),e===\"disabled\"&&a!==i){let n=i!==null,o=this.renderButtonTask.value;o&&o.setDisabled(n)}}updated(e){e.has(\"disabled\")&&aa(this.disabled,this.buttonContainerRef)}render(){return p`<div class=\"native-button-container\" ${Et(this.buttonContainerRef)} ></div>`}}"
|
|
165
155
|
},
|
|
166
156
|
{
|
|
167
157
|
"kind": "variable",
|
|
168
158
|
"name": "qe",
|
|
169
|
-
"default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.disabled=!1;this.buttonContainerRef=
|
|
159
|
+
"default": "class extends v{constructor(){super();this.paymentManagers=new Map;this.disabled=!1;this.buttonContainerRef=Ft();this.loadManagerTask=new O(this,{args:()=>[this.paymentMethod?.type],task:([e])=>{if(!e)return w;let a=this.paymentManagers.get(e);if(!a)throw new Error(`No manager found for payment method type ${e}`);if(a.type!==\"PAYPAL\")throw new Error(\"Invalid payment method type for PayPal component\");return a.manager}}),this.renderButtonTask=new O(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return w;await this.updateComplete;let a=this.buttonContainerRef.value;if(!a)throw new Error(\"Button container not found\");let i=e.createButton(),n=Ws(Or(this));return await i.render(a,{style:{buttonHeight:n}}),this.disabled&&await i.setDisabled(this.disabled),this.disabled&&(await this.updateComplete,aa(this.disabled,this.buttonContainerRef)),i}})}attributeChangedCallback(e,a,i){if(super.attributeChangedCallback(e,a,i),e===\"disabled\"&&a!==i){let n=i!==null,o=this.renderButtonTask.value;o&&o.setDisabled(n)}}updated(e){e.has(\"disabled\")&&aa(this.disabled,this.buttonContainerRef)}render(){return p`<div class=\"native-button-container\" ${Et(this.buttonContainerRef)} ></div>`}}"
|
|
170
160
|
},
|
|
171
161
|
{
|
|
172
162
|
"kind": "variable",
|
|
173
163
|
"name": "Me",
|
|
174
|
-
"default": "class extends v{constructor(){super(...arguments);this.disabled=!1;this.paymentManagers=new Map;this.currentState=\"collapsed\";this.blikCode=\"\";this.errorMessage=\"\";this.pollingDuration=0;this.pollingTimer=null;this.loadManagerTask=new
|
|
164
|
+
"default": "class extends v{constructor(){super(...arguments);this.disabled=!1;this.paymentManagers=new Map;this.currentState=\"collapsed\";this.blikCode=\"\";this.errorMessage=\"\";this.pollingDuration=0;this.pollingTimer=null;this.loadManagerTask=new O(this,{args:()=>[this.paymentMethod?.type],task:([e])=>{if(!e)return w;let a=this.paymentManagers.get(e);if(!a)throw new Error(\"BLIK payment method manager not initialized\");if(a.type!==\"ADYEN_BLIK\")throw new Error(\"Invalid payment method type for BLIK component\");return a.manager}});this.handleButtonClick=async()=>{if(this.disabled)return;if(this.currentState===\"expanded-input\"){this.handleCollapse();return}if(this.currentState!==\"collapsed\")return;let e=this.paymentMethod?.type;if(!e){this.errorMessage=b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"}),this.currentState=\"error\",P.error(\"Payment method type not available\");return}let a=this.paymentManagers.get(e);if(!a||a.type!==\"ADYEN_BLIK\"){this.errorMessage=b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"}),this.currentState=\"error\",P.error(\"Manager not available when expanding BLIK form\");return}this.currentState=\"expanded-input\",await this.updateComplete,this.shadowRoot?.querySelector(\"#blik-code\")?.focus()};this.handleCollapse=()=>{this.currentState=\"collapsed\",this.blikCode=\"\",this.errorMessage=\"\",this.stopPollingTimer()};this.handleInput=e=>{let a=e.target,i=a.value,o=i.replace(/\\D/g,\"\").slice(0,6);i!==o&&(a.value=o),this.blikCode=o,this.currentState===\"error\"&&(this.currentState=\"expanded-input\",this.errorMessage=\"\"),o.length===6&&this.submitBlikCode()};this.handleRetry=async()=>{this.currentState=\"expanded-input\",this.errorMessage=\"\",this.blikCode=\"\",await this.updateComplete,this.shadowRoot?.querySelector(\"#blik-code\")?.focus()}}startPollingTimer(){this.pollingDuration=0,this.pollingTimer=window.setInterval(()=>{this.pollingDuration+=1},1e3)}stopPollingTimer(){this.pollingTimer!==null&&(window.clearInterval(this.pollingTimer),this.pollingTimer=null),this.pollingDuration=0}async submitBlikCode(){if(this.blikCode.length!==6){this.errorMessage=b(\"sixDigitCodeErrorTooShort\",{id:\"sixDigitCodeErrorTooShort\"}),this.currentState=\"error\";return}let e=this.loadManagerTask.value;if(!e){this.errorMessage=\"BLIK payment method not initialized\",this.currentState=\"error\",P.error(\"BLIK manager not available via loadManagerTask\");return}this.currentState=\"loading\",this.errorMessage=\"\",this.startPollingTimer();try{await e.start({blikCode:this.blikCode}),this.stopPollingTimer(),this.currentState=\"collapsed\",this.blikCode=\"\"}catch(a){this.stopPollingTimer(),this.currentState=\"error\",this.errorMessage=a instanceof Error?a.message:b(\"tokenizationError\",{id:\"tokenizationError\"}),P.errorWithDatadog(\"BLIK payment failed\",{error:a instanceof Error?{message:a.message,name:a.name}:\"Unknown error\"})}}renderCollapsed(){return p`<primer-button class=\"blik-button\" @click=${this.handleButtonClick} ?disabled=${this.disabled} aria-label=\"${b(\"pay_with\",{id:\"pay_with\"})} BLIK\" aria-expanded=\"${this.currentState!==\"collapsed\"}\" title=\"BLIK\" ><span class=\"image-container\"><img src=\"https://goat-assets.production.core.primer.io/button/blik/inverted.png\" alt=\"BLIK\" /></span></primer-button>`}renderExpandedInput(){return p`<div class=\"blik-expanded-content\"><div class=\"blik-content-wrapper\"><div class=\"blik-input-wrapper\"><label for=\"blik-code\" class=\"blik-label\">${b(\"getCodeFromBankingApp\",{id:\"getCodeFromBankingApp\"})}</label><input id=\"blik-code\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"6\" class=\"blik-input\" .value=\"${this.blikCode}\" @input=\"${this.handleInput}\" ?disabled=\"${this.disabled}\" placeholder=\"000000\" aria-label=\"${b(\"sixDigitCodeLabel\",{id:\"sixDigitCodeLabel\"})}\" autocomplete=\"off\" spellcheck=\"false\" /></div></div></div>`}renderLoading(){return p`<div class=\"blik-expanded-content\"><div class=\"blik-content-wrapper\"><div class=\"blik-loading\"><primer-spinner size=\"medium\"></primer-spinner>${this.pollingDuration>30?p`<div class=\"blik-timeout-warning\"> This is taking longer than expected... </div>`:y}</div></div></div>`}renderError(){return p`<div class=\"blik-expanded-content\"><div class=\"blik-content-wrapper\"><div class=\"blik-error\"><div class=\"blik-error-message\" role=\"alert\">${this.errorMessage||b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}</div><button class=\"blik-retry-button\" @click=\"${this.handleRetry}\" ?disabled=\"${this.disabled}\" >${b(\"retry_button\",{id:\"retry_button\"})}</button></div></div></div>`}renderExpandedState(){switch(this.currentState){case\"expanded-input\":return this.renderExpandedInput();case\"loading\":return this.renderLoading();case\"error\":return this.renderError();default:return y}}disconnectedCallback(){super.disconnectedCallback(),this.stopPollingTimer()}render(){return p`<div class=\"blik-container ${this.currentState!==\"collapsed\"?\"expanded\":\"\"}\" >${this.renderCollapsed()} ${this.currentState!==\"collapsed\"?this.renderExpandedState():y}</div>`}}"
|
|
175
165
|
},
|
|
176
166
|
{
|
|
177
167
|
"kind": "variable",
|
|
178
168
|
"name": "Fe",
|
|
179
|
-
"default": "class extends v{constructor(){super(...arguments);this.type=void 0;this.disabled=!1;this.paymentMethods=null;this.analyticsUtils=null;this.handleClick=()=>{this.paymentMethods?.
|
|
169
|
+
"default": "class extends v{constructor(){super(...arguments);this.type=void 0;this.disabled=!1;this.paymentMethods=null;this.analyticsUtils=null;this.handleClick=()=>{this.paymentMethods?.find(a=>a.type===this.type)?.managerType!==\"CARD\"&&this.sendPaymentMethodSelectionEvent()}}sendPaymentMethodSelectionEvent(){this.type&&Q({eventName:\"PAYMENT_METHOD_SELECTION\",paymentMethod:this.type})}render(){if(!this.type)return y;let e=this.paymentMethods?.find(i=>i.type===this.type);if(!e)return y;let a;switch(e?.managerType){case\"CARD\":a=p`<primer-card-form ?disabled=${this.disabled} ></primer-card-form>`;break;case\"NATIVE\":{let i=e.type;i===ka.GOOGLE_PAY?a=p`<primer-google-pay .paymentMethod=${e} ?disabled=${this.disabled} ></primer-google-pay>`:i===ka.APPLE_PAY?a=p`<primer-apple-pay .paymentMethod=${e} ?disabled=${this.disabled} ></primer-apple-pay>`:i===ka.PAYPAL?a=p`<primer-paypal .paymentMethod=${e} ?disabled=${this.disabled} ></primer-paypal>`:i===ka.ADYEN_BLIK&&(a=p`<primer-blik .paymentMethod=${e} ?disabled=${this.disabled} ></primer-blik>`);break}case\"REDIRECT\":a=p`<primer-redirect-payment .paymentMethod=${e} ?disabled=${this.disabled} ></primer-redirect-payment>`;break;case\"KLARNA\":a=p`<primer-klarna ?disabled=${this.disabled} ></primer-klarna>`;break;case\"ACH\":a=p`<primer-dynamic-payment .paymentMethod=${e} ></primer-dynamic-payment>`;break;default:return y}return p`<div @click=${this.handleClick}>${a}</div>`}}"
|
|
180
170
|
},
|
|
181
171
|
{
|
|
182
172
|
"kind": "variable",
|
|
183
173
|
"name": "Re",
|
|
184
|
-
"default": "class extends v{constructor(){super(...arguments);this.disabled=!1;this.paymentMethods=null;this.clientOptions=null}getFilteredMethods(){if(!this.paymentMethods)return[];let e=this.paymentMethods
|
|
174
|
+
"default": "class extends v{constructor(){super(...arguments);this.disabled=!1;this.paymentMethods=null;this.clientOptions=null}getFilteredMethods(){if(!this.paymentMethods)return[];let e=[...this.paymentMethods];if(this.include){let a=this.include.split(\",\").map(i=>i.trim());e=e.filter(i=>a.includes(i.type))}if(this.exclude){let a=this.exclude.split(\",\").map(i=>i.trim());e=e.filter(i=>!a.includes(i.type))}return e}render(){let e=this.getFilteredMethods();return e.length===0?y:p`<div class=\"payment-methods-container\">${e.map(a=>p`<primer-payment-method type=\"${a.type}\" ?disabled=\"${this.disabled||this.clientOptions?.disabledPayments===!0}\" ></primer-payment-method>`)}</div>`}}"
|
|
185
175
|
},
|
|
186
176
|
{
|
|
187
177
|
"kind": "variable",
|
|
188
|
-
"name": "
|
|
189
|
-
"default": "class extends v{constructor(){super(...arguments);this.formController=new Gr(this,e=>this._paymentMethodManagerTask.value.setAndValidate(e));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen=\"form\";this.isSubmitting=!1;this._paymentMethodManagerTask=new
|
|
178
|
+
"name": "Ne",
|
|
179
|
+
"default": "class extends v{constructor(){super(...arguments);this.formController=new Gr(this,e=>this._paymentMethodManagerTask.value.setAndValidate(e));this.paymentManagers=new Map;this.sdkState=void 0;this.clientOptions=void 0;this.screen=\"form\";this.isSubmitting=!1;this._paymentMethodManagerTask=new O(this,{task:([e])=>e!==\"STRIPE_ACH\"?w:this.paymentManagers.get(e)?.manager,args:()=>[this.paymentMethod?.type]})}_handleInput(e,a){let i=e.target;this.formController.setFieldValue(a,i.value)}_handleBlur(e){this.formController.setFieldTouched(e)}_handleError(e){this.dispatchEvent(new CustomEvent(\"primer-ach-error\",{bubbles:!0,composed:!0,detail:{error:e instanceof Error?e:new Error(typeof e==\"string\"?e:\"Unknown error occurred\")}}))}async _handleSubmitButtonClick(e){if(!this.isSubmitting){this.isSubmitting=!0;try{let a=await e.start(this.formController.formData);if(!a||a.valid)return await this._handleCollectBankAccountDetails(e);a&&this.formController.setValidation(a,!0)}catch(a){this._handleError(a)}finally{this.isSubmitting=!1}}}async _handleCollectBankAccountDetails(e){try{await e.collectBankAccountDetails(),this.screen=\"mandate\",this.dispatchEvent(new CustomEvent(\"primer-ach-bank-details-collected\",{bubbles:!0,composed:!0}))}catch(a){this._handleError(a)}}async _handleConfirmMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.confirmMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-confirmed\",{bubbles:!0,composed:!0}))}catch(e){this._handleError(e)}finally{this.isSubmitting=!1}}}async _handleDeclineMandate(){if(this._paymentMethodManagerTask.value){this.isSubmitting=!0;try{await this._paymentMethodManagerTask.value.declineMandate(),this.dispatchEvent(new CustomEvent(\"primer-ach-mandate-declined\",{bubbles:!0,composed:!0}))}catch(e){this._handleError(e)}finally{this.isSubmitting=!1}}}renderForm(e){return p`<h2>${b(\"payWithAch\",{id:\"payWithAch\"})}</h2><p>${b(\"stripe_ach_user_details_collection_subtitle_label\",{id:\"stripe_ach_user_details_collection_subtitle_label\"})}</p><form @submit=${a=>a.preventDefault()}><div class=\"form-row\"><primer-input-wrapper .hasError=${this.formController.hasError.firstName} ><primer-input-label slot=\"label\">${b(\"stripe_ach_user_details_collection_first_name_label\",{id:\"stripe_ach_user_details_collection_first_name_label\"})}</primer-input-label><primer-input slot=\"input\" .value=${this.formController.formState.firstName.value} @input=${a=>this._handleInput(a,\"firstName\")} @blur=${()=>this._handleBlur(\"firstName\")} ?disabled=${this.isSubmitting} ></primer-input><primer-input-error slot=\"error\">${this.formController.hasError.firstName?this.formController.formState.firstName.error:y}</primer-input-error></primer-input-wrapper><primer-input-wrapper .hasError=${this.formController.hasError.lastName} ><primer-input-label slot=\"label\">${b(\"stripe_ach_user_details_collection_last_name_label\",{id:\"stripe_ach_user_details_collection_last_name_label\"})}</primer-input-label><primer-input slot=\"input\" .value=${this.formController.formState.lastName.value} @input=${a=>this._handleInput(a,\"lastName\")} @blur=${()=>this._handleBlur(\"lastName\")} ?disabled=${this.isSubmitting} ></primer-input><primer-input-error slot=\"error\">${this.formController.hasError.lastName?this.formController.formState.lastName.error:y}</primer-input-error></primer-input-wrapper></div><primer-input-wrapper .hasError=${this.formController.hasError.emailAddress} ><primer-input-label slot=\"label\">${b(\"stripe_ach_user_details_collection_email_address_label\",{id:\"stripe_ach_user_details_collection_email_address_label\"})}</primer-input-label><primer-input slot=\"input\" type=\"email\" .value=${this.formController.formState.emailAddress.value} @input=${a=>this._handleInput(a,\"emailAddress\")} @blur=${()=>this._handleBlur(\"emailAddress\")} ?disabled=${this.isSubmitting} ></primer-input><primer-input-error slot=\"error\">${this.formController.hasError.emailAddress?this.formController.formState.emailAddress.error:y}</primer-input-error></primer-input-wrapper><p>${b(\"stripe_ach_user_details_collection_data_usage_label\",{id:\"stripe_ach_user_details_collection_data_usage_label\"})}</p><primer-button buttonType=\"submit\" variant=\"primary\" @click=${()=>this._handleSubmitButtonClick(e)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} >${b(\"stripe_ach_user_details_collection_continue_button\",{id:\"stripe_ach_user_details_collection_continue_button\"})}</primer-button></form>`}renderMandate(){return p`<h2>${b(\"payWithAch\",{id:\"payWithAch\"})}</h2><p>${this.clientOptions?.stripe?.mandateData.fullMandateText??b(\"stripe_ach_mandate_template_web\",{id:\"stripe_ach_mandate_template_web\"}).replace(/\\{merchantName\\}/g,this.clientOptions?.stripe?.mandateData.merchantName??\"Merchant\")}</p><div class=\"button-group\"><primer-button variant=\"primary\" @click=${this._handleConfirmMandate.bind(this)} ?disabled=${this.isSubmitting} ?loading=${this.isSubmitting} >${b(\"stripe_ach_mandate_accept_button\",{id:\"stripe_ach_mandate_accept_button\"})}</primer-button><primer-button variant=\"tertiary\" @click=${this._handleDeclineMandate.bind(this)} ?disabled=${this.isSubmitting} >${b(\"stripe_ach_mandate_cancel_payment_button\",{id:\"stripe_ach_mandate_cancel_payment_button\"})}</primer-button></div>`}render(){return this._paymentMethodManagerTask.render({complete:e=>e?this.screen===\"form\"?this.renderForm(e):this.renderMandate():y})}}"
|
|
190
180
|
},
|
|
191
181
|
{
|
|
192
182
|
"kind": "variable",
|
|
193
183
|
"name": "xe",
|
|
194
|
-
"default": "class extends v{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.open=!1;this._paymentMethodManagerTask=new
|
|
184
|
+
"default": "class extends v{constructor(){super(...arguments);this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this.open=!1;this._paymentMethodManagerTask=new O(this,{task:([e,a])=>!e||!a?w:a.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new O(this,{task:([e,a])=>{if(!e||!a)return w;let i=a.getPaymentMethodConfiguration(e);return i?{backgroundColor:i.displayMetadata.button.backgroundColor.colored,name:i.name,displayName:this._legacyGetButtonLabel(i.displayMetadata.button.text),iconUrl:i.displayMetadata.button.iconUrl.colored||i.displayMetadata.button.iconUrl.light||i.displayMetadata.button.iconUrl.dark}:w},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new O(this,{task:([e,a])=>!e||!a?w:{paymentMethodManager:e,assetsConfig:a},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}_legacyGetButtonLabel(e){if(!e)return;let a=e?xa(e):\"\";return a===\"payWith\"&&(a=\"pay_with\"),b(a,{id:a})}start(){this._paymentMethodManagerTask.value&&(this.open=!0)}renderDialog(){return this.open?p`<primer-portal><primer-dialog @primer:dialog-close=\"${()=>this.open=!1}\"><primer-ach-payment .paymentMethod=${this.paymentMethod} @primer-ach-error=${()=>this.open=!1} @primer-ach-mandate-confirmed=${()=>this.open=!1} @primer-ach-mandate-declined=${()=>this.open=!1} ></primer-ach-payment></primer-dialog></primer-portal>`:y}render(){return this._setupTasks.render({error:()=>y,complete:({assetsConfig:e})=>(this.style.setProperty(\"--dynamic-payment-button-bg-color\",e.backgroundColor),p`<primer-button @click=\"${()=>this.start()}\" class=${oe({loading:!!this.sdkState?.isProcessing,reverse:!0})} title=\"${b(\"pay_with\",{id:\"pay_with\"})} ${e.name}\" ><span class=\"image-container\"><img src=\"${e.iconUrl}\" alt=\"${e.name}\" /></span>${e.displayName}</primer-button>${this.renderDialog()} `)})}}"
|
|
195
185
|
},
|
|
196
186
|
{
|
|
197
187
|
"kind": "variable",
|
|
198
188
|
"name": "_e",
|
|
199
|
-
"default": "class extends v{constructor(){super(...arguments);this.disabled=!1;this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this._paymentMethodManagerTask=new
|
|
189
|
+
"default": "class extends v{constructor(){super(...arguments);this.disabled=!1;this.paymentManagers=new Map;this.sdkState=null;this.headlessUtils=null;this._paymentMethodManagerTask=new O(this,{task:([e,a])=>!e||!a?w:a.get(e)?.manager,args:()=>[this.paymentMethod?.type,this.paymentManagers]});this._getAssetsTask=new O(this,{task:([e,a])=>{if(!e||!a)return w;let i=a.getPaymentMethodConfiguration(e);if(!i)return w;let n=i.displayMetadata.button.backgroundColor.colored??i.displayMetadata.button.backgroundColor.light,o=i.displayMetadata.button.iconPositionRelativeToText||\"START\";return{backgroundColor:n,name:i.name,displayName:this._legacyGetButtonLabel(i.displayMetadata.button.text),iconUrl:i.displayMetadata.button.iconUrl.colored??i.displayMetadata.button.iconUrl.light,iconPosition:o}},args:()=>[this.paymentMethod?.type,this.headlessUtils]});this._setupTasks=new O(this,{task:([e,a])=>!e||!a?w:{paymentMethodManager:e,assetsConfig:a},args:()=>[this._paymentMethodManagerTask.value,this._getAssetsTask.value]})}_legacyGetButtonLabel(e){if(!e)return;let a=e?xa(e):\"\";return a===\"payWith\"&&(a=\"pay_with\"),b(a,{id:a})}startRedirectPayment(){this.disabled||this._paymentMethodManagerTask.value&&this._paymentMethodManagerTask.value.start()}render(){return this._setupTasks.render({error:()=>y,complete:({assetsConfig:e})=>{this.style.setProperty(\"--redirect-payment-button-bg-color\",e.backgroundColor);let a={loading:!!this.sdkState?.isProcessing,\"icon-end\":e.iconPosition===\"END\",\"image-only\":!e.displayName},i=e.displayName?p`<span class=\"image-container\"><img src=\"${e.iconUrl}\" alt=\"${e.name}\" /></span><span class=\"button-text\">${e.displayName}</span>`:p`<span class=\"image-container\"><img src=\"${e.iconUrl}\" alt=\"${e.name}\" /></span>`;return p`<primer-button @click=\"${()=>this.startRedirectPayment()}\" class=${oe(a)} title=\"${b(\"pay_with\",{id:\"pay_with\"})} ${e.name}\" ?disabled=${this.disabled} >${i}</primer-button>`}})}}"
|
|
200
190
|
},
|
|
201
191
|
{
|
|
202
192
|
"kind": "variable",
|
|
203
193
|
"name": "le",
|
|
204
|
-
"default": "class extends v{constructor(){super(...arguments);this.configuration=null;this.headlessUtils=null;this.formData={};this.errors={};this.touchedFields=new Set;this.dirtyFields=new Set;this.focusedField=null;this.submitted=!1;this.countryOptions=[];this._initializationTask=new
|
|
194
|
+
"default": "class extends v{constructor(){super(...arguments);this.configuration=null;this.headlessUtils=null;this.formData={};this.errors={};this.touchedFields=new Set;this.dirtyFields=new Set;this.focusedField=null;this.submitted=!1;this.countryOptions=[];this._initializationTask=new O(this,{task:async([e,a])=>{if(!e||!a)return w;let i=this.extractFieldConfig(e);return await this.initializeCountryOptions(),i},args:()=>[this.configuration,this.headlessUtils]})}connectedCallback(){super.connectedCallback(),this._initializationTask.value}extractFieldConfig(e){if(e?.checkoutModules){let a=e.checkoutModules.find(i=>i.type===\"BILLING_ADDRESS\");if(a?.options){let i=a.options;return Object.keys(nn).reduce((n,o)=>({...n,[o]:i[o]??!1}),{})}}return this.defaultFieldConfig}async initializeCountryOptions(){try{let e=rn(\"en\");this.countryOptions=[...e.map(([n,o])=>({value:n,label:o}))],this.requestUpdate(\"countryOptions\");let a=Ki();if(a===\"en\"||a===\"en-GB\"||a.startsWith(\"en-\"))return;if(await Kl(a)){let n=rn(a);this.countryOptions=[...n.map(([o,s])=>({value:o,label:s}))],this.requestUpdate(\"countryOptions\")}}catch(e){P.errorWithDatadog(\"Failed to load country locale\",{error:e})}}get fieldConfig(){return this.extractFieldConfig(this.configuration)}get defaultFieldConfig(){return Object.keys(nn).reduce((e,a)=>({...e,[a]:!1}),{})}get shouldShowForm(){return this.fieldConfig.postalCode}handleInput(e,a){this.formData={...this.formData,[e]:a},this.dirtyFields.add(e),(this.submitted||this.dirtyFields.has(e)&&this.touchedFields.has(e))&&this.validateField(e),this.dispatchEvent(new CustomEvent(\"primer-billing-address-change\",{detail:this.formData,bubbles:!0,composed:!0}))}handleFocus(e){this.focusedField=e}handleBlur(e){this.focusedField=null,this.touchedFields.add(e),this.validateField(e)}validateField(e){let a=this.formData[e],i=this.fieldConfig[e];if(!i){delete this.errors[e];return}if(i&&(!a||a.trim()===\"\")){let n=`${e}ErrorRequired`;this.errors={...this.errors,[e]:b(\"This field is required\",{id:n})}}else{let n={...this.errors};delete n[e],this.errors=n}}validateForm(){return Object.keys(nn).forEach(e=>{let a=e;this.fieldConfig[a]&&this.validateField(a)}),Object.keys(this.errors).length===0}async validateForSubmission(){if(!this.shouldShowForm)return!0;this.submitted=!0,Object.keys(this.fieldConfig).forEach(a=>{this.fieldConfig[a]&&this.touchedFields.add(a)});let e=this.validateForm();return this.requestUpdate(),await this.updateComplete,e}async submitToSDK(){if(this.headlessUtils?.setBillingAddress)try{return await this.headlessUtils.setBillingAddress(this.formData),this.dispatchEvent(new CustomEvent(\"primer-billing-address-submit\",{detail:this.formData,bubbles:!0,composed:!0})),!0}catch(e){return P.errorWithDatadog(\"Failed to set billing address\",{error:e}),!1}return!0}shouldShowError(e){let a=!!this.errors[e],i=this.dirtyFields.has(e),n=this.touchedFields.has(e);return a&&(this.submitted||i&&n)}render(){return this._initializationTask.render({pending:()=>y,error:()=>y,complete:()=>this.shouldShowForm?(this.removeAttribute(\"hidden\"),p`<div class=\"billing-address-form\"><div class=\"billing-address-title\">${b(\"Billing address\",{id:\"billingAddressLabel\"})}</div>${R(this.fieldConfig.countryCode,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"countryCode\"} .hasError=${this.shouldShowError(\"countryCode\")} ><primer-input-label slot=\"label\">${b(\"Country code\",{id:\"countryCodeLabel\"})}</primer-input-label><primer-select slot=\"input\" id=\"countryCode\" name=\"countryCode\" .value=${this.formData.countryCode||\"\"} .options=${this.countryOptions} .hasError=${this.shouldShowError(\"countryCode\")} placeholder=${b(\"Select a country\",{id:\"countrySelectPlaceholder\"})} @input=${e=>this.handleInput(\"countryCode\",e.detail)} @focus=${()=>this.handleFocus(\"countryCode\")} @blur=${()=>this.handleBlur(\"countryCode\")} ></primer-select>${R(this.shouldShowError(\"countryCode\"),()=>p`<primer-input-error slot=\"error\">${this.errors.countryCode}</primer-input-error>`)}</primer-input-wrapper>`)} ${R(this.fieldConfig.firstName||this.fieldConfig.lastName,()=>p`<div class=\"billing-address-row\">${R(this.fieldConfig.firstName,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"firstName\"} .hasError=${this.shouldShowError(\"firstName\")} ><primer-input-label slot=\"label\">${b(\"First name\",{id:\"firstNameLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"firstName\" name=\"firstName\" type=\"text\" .value=${this.formData.firstName||\"\"} placeholder=${b(\"First name\",{id:\"firstNamePlaceholder\"})} @input=${e=>this.handleInput(\"firstName\",e.detail)} @focus=${()=>this.handleFocus(\"firstName\")} @blur=${()=>this.handleBlur(\"firstName\")} ></primer-input>${R(this.shouldShowError(\"firstName\"),()=>p`<primer-input-error slot=\"error\">${this.errors.firstName}</primer-input-error>`)}</primer-input-wrapper>`)} ${R(this.fieldConfig.lastName,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"lastName\"} .hasError=${this.shouldShowError(\"lastName\")} ><primer-input-label slot=\"label\">${b(\"Last name\",{id:\"lastNameLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"lastName\" name=\"lastName\" type=\"text\" .value=${this.formData.lastName||\"\"} placeholder=${b(\"Last name\",{id:\"lastNamePlaceholder\"})} @input=${e=>this.handleInput(\"lastName\",e.detail)} @focus=${()=>this.handleFocus(\"lastName\")} @blur=${()=>this.handleBlur(\"lastName\")} ></primer-input>${R(this.shouldShowError(\"lastName\"),()=>p`<primer-input-error slot=\"error\">${this.errors.lastName}</primer-input-error>`)}</primer-input-wrapper>`)}</div>`)} ${R(this.fieldConfig.addressLine1,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"addressLine1\"} .hasError=${this.shouldShowError(\"addressLine1\")} ><primer-input-label slot=\"label\">${b(\"Address line 1\",{id:\"addressLine1\"})}</primer-input-label><primer-input slot=\"input\" id=\"addressLine1\" name=\"addressLine1\" type=\"text\" .value=${this.formData.addressLine1||\"\"} placeholder=${b(\"Address line 1\",{id:\"addressLine1Placeholder\"})} @input=${e=>this.handleInput(\"addressLine1\",e.detail)} @focus=${()=>this.handleFocus(\"addressLine1\")} @blur=${()=>this.handleBlur(\"addressLine1\")} ></primer-input>${R(this.shouldShowError(\"addressLine1\"),()=>p`<primer-input-error slot=\"error\">${this.errors.addressLine1}</primer-input-error>`)}</primer-input-wrapper>`)} ${R(this.fieldConfig.addressLine2,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"addressLine2\"} .hasError=${this.shouldShowError(\"addressLine2\")} ><primer-input-label slot=\"label\">${b(\"Address line 2\",{id:\"addressLine2\"})}</primer-input-label><primer-input slot=\"input\" id=\"addressLine2\" name=\"addressLine2\" type=\"text\" .value=${this.formData.addressLine2||\"\"} placeholder=${b(\"Address line 2\",{id:\"addressLine2Placeholder\"})} @input=${e=>this.handleInput(\"addressLine2\",e.detail)} @focus=${()=>this.handleFocus(\"addressLine2\")} @blur=${()=>this.handleBlur(\"addressLine2\")} ></primer-input>${R(this.shouldShowError(\"addressLine2\"),()=>p`<primer-input-error slot=\"error\">${this.errors.addressLine2}</primer-input-error>`)}</primer-input-wrapper>`)} ${R(this.fieldConfig.postalCode||this.fieldConfig.city,()=>p`<div class=\"billing-address-row\">${R(this.fieldConfig.postalCode,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"postalCode\"} .hasError=${this.shouldShowError(\"postalCode\")} ><primer-input-label slot=\"label\">${b(\"Postal code\",{id:\"postalCodeLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"postalCode\" name=\"postalCode\" type=\"text\" .value=${this.formData.postalCode||\"\"} placeholder=${b(\"90210\",{id:\"postalCodePlaceholder\"})} @input=${e=>this.handleInput(\"postalCode\",e.detail)} @focus=${()=>this.handleFocus(\"postalCode\")} @blur=${()=>this.handleBlur(\"postalCode\")} ></primer-input>${R(this.shouldShowError(\"postalCode\"),()=>p`<primer-input-error slot=\"error\">${this.errors.postalCode}</primer-input-error>`)}</primer-input-wrapper>`)} ${R(this.fieldConfig.city,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"city\"} .hasError=${this.shouldShowError(\"city\")} ><primer-input-label slot=\"label\">${b(\"City\",{id:\"cityLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"city\" name=\"city\" type=\"text\" .value=${this.formData.city||\"\"} placeholder=${b(\"Cape Town\",{id:\"cityPlaceholder\"})} @input=${e=>this.handleInput(\"city\",e.detail)} @focus=${()=>this.handleFocus(\"city\")} @blur=${()=>this.handleBlur(\"city\")} ></primer-input>${R(this.shouldShowError(\"city\"),()=>p`<primer-input-error slot=\"error\">${this.errors.city}</primer-input-error>`)}</primer-input-wrapper>`)}</div>`)} ${R(this.fieldConfig.state,()=>p`<primer-input-wrapper .focusWithin=${this.focusedField===\"state\"} .hasError=${this.shouldShowError(\"state\")} ><primer-input-label slot=\"label\">${b(\"State / Region / County\",{id:\"stateLabel\"})}</primer-input-label><primer-input slot=\"input\" id=\"state\" name=\"state\" type=\"text\" .value=${this.formData.state||\"\"} placeholder=${b(\"State / Region / County\",{id:\"statePlaceholder\"})} @input=${e=>this.handleInput(\"state\",e.detail)} @focus=${()=>this.handleFocus(\"state\")} @blur=${()=>this.handleBlur(\"state\")} ></primer-input>${R(this.shouldShowError(\"state\"),()=>p`<primer-input-error slot=\"error\">${this.errors.state}</primer-input-error>`)}</primer-input-wrapper>`)}</div>`):(this.setAttribute(\"hidden\",\"\"),y)})}}"
|
|
205
195
|
},
|
|
206
196
|
{
|
|
207
197
|
"kind": "variable",
|
|
208
198
|
"name": "X",
|
|
209
|
-
"default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.contextEventsController=null;this.hasSlottedSubmit=!1;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;this._isHandlingContextEvent=!1;this._contextVaultSubmitListener=null;this.deleteAssetConfig=null;this.handleSubmitSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasSlottedSubmit=i.length>0};this.handleToggleEditMode=e=>{this.isEditMode=e.detail,this.deletePaymentMethodId=null,this.isEditMode&&this.vaultItemContext&&this.vaultItemContext.setSelectedVaultedPaymentMethod(null)};this.handleDeletePaymentMethod=async e=>{if(this.deletePaymentMethodId=e.detail,this.deletePaymentMethodId&&this.vaultManagerContext&&this.headlessUtils){let a=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===this.deletePaymentMethodId);a&&(this.deleteAssetConfig=await Fr(a,this.headlessUtils,this.vaultManagerContext))}};this.handleCancelDelete=()=>{this.deletePaymentMethodId=null,this.deleteAssetConfig=null};this.handleConfirmDelete=async()=>{if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null,this.deleteAssetConfig=null}catch(e){this.errorMessage=e instanceof Error?e.message:b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}finally{this.isDeleting=!1}};this.handlePaymentError=e=>{let a=e.detail?.error;this.errorMessage=a instanceof Error?a.message:b(\"payment_processing_error\",{id:\"payment_processing_error\"})};this.handleCloseError=()=>{this.errorMessage=\"\"};this.handleSlotButtonClick=e=>{let i=e.target.closest(\"button, primer-button\");if(!i)return;let n=i;this.isSubmitButton(n)&&(e.preventDefault(),this.submitVaultPayment())};this.handleDirectSubmit=()=>{this.submitVaultPayment()};this.handleContextVaultSubmit=e=>{if(!this._isHandlingContextEvent){this._isHandlingContextEvent=!0;try{e.target!==this&&(e.stopPropagation(),this.submitVaultPayment())}finally{this._isHandlingContextEvent=!1}}};new
|
|
199
|
+
"default": "class extends v{constructor(){super();this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.contextEventsController=null;this.hasSlottedSubmit=!1;this.isEditMode=!1;this.deletePaymentMethodId=null;this.isDeleting=!1;this.errorMessage=\"\";this.animationDuration=300;this._isHandlingContextEvent=!1;this._contextVaultSubmitListener=null;this.deleteAssetConfig=null;this.handleSubmitSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasSlottedSubmit=i.length>0};this.handleToggleEditMode=e=>{this.isEditMode=e.detail,this.deletePaymentMethodId=null,this.isEditMode&&this.vaultItemContext&&this.vaultItemContext.setSelectedVaultedPaymentMethod(null)};this.handleDeletePaymentMethod=async e=>{if(this.deletePaymentMethodId=e.detail,this.deletePaymentMethodId&&this.vaultManagerContext&&this.headlessUtils){let a=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===this.deletePaymentMethodId);a&&(this.deleteAssetConfig=await Fr(a,this.headlessUtils,this.vaultManagerContext))}};this.handleCancelDelete=()=>{this.deletePaymentMethodId=null,this.deleteAssetConfig=null};this.handleConfirmDelete=async()=>{if(!this.vaultManagerContext?.deleteVaultedPaymentMethod||!this.deletePaymentMethodId){this.errorMessage=b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"});return}try{this.isDeleting=!0,await this.vaultManagerContext.deleteVaultedPaymentMethod(this.deletePaymentMethodId),this.deletePaymentMethodId=null,this.deleteAssetConfig=null}catch(e){this.errorMessage=e instanceof Error?e.message:b(\"something_went_wrong_error\",{id:\"something_went_wrong_error\"})}finally{this.isDeleting=!1}};this.handlePaymentError=e=>{let a=e.detail?.error;this.errorMessage=a instanceof Error?a.message:b(\"payment_processing_error\",{id:\"payment_processing_error\"})};this.handleCloseError=()=>{this.errorMessage=\"\"};this.handleSlotButtonClick=e=>{let i=e.target.closest(\"button, primer-button\");if(!i)return;let n=i;this.isSubmitButton(n)&&(e.preventDefault(),this.submitVaultPayment())};this.handleDirectSubmit=()=>{this.submitVaultPayment()};this.handleContextVaultSubmit=e=>{if(!this._isHandlingContextEvent){this._isHandlingContextEvent=!0;try{e.target!==this&&(e.stopPropagation(),this.submitVaultPayment())}finally{this._isHandlingContextEvent=!1}}};new ra(this,{defaultOptions:{keyframeOptions:{duration:Number(getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-duration\").trim().replace(\"ms\",\"\")),easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim()}}})}getAnimationConfig(){return{keyframeOptions:{duration:this.animationDuration,easing:getComputedStyle(document.documentElement).getPropertyValue(\"--primer-animation-easing\").trim(),fill:\"both\"}}}isSubmitButton(e){let a=e.tagName.toLowerCase(),i=a===\"button\",n=a===\"primer-button\";return i&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||n&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitVaultPayment(){if(this.vaultManagerContext)try{await this.vaultManagerContext.startVaultedPaymentFlow()}catch(e){this.dispatchEvent(new CustomEvent(\"primer-vault-payment-error\",{detail:{error:e},bubbles:!0,composed:!0}))}}getPaymentMethodName(e){if(!this.vaultManagerContext)return\"\";let a=this.vaultManagerContext.vaultedPaymentMethods.find(i=>i.id===e);if(!a)return\"\";try{return sn(a).description||\"\"}catch{return\"\"}}setupContextEventListeners(){this.contextEventsController?.host&&this._contextVaultSubmitListener&&this.contextEventsController.host.addEventListener(\"primer:vault-submit\",this._contextVaultSubmitListener)}cleanupContextEventListeners(){this.contextEventsController?.host&&this._contextVaultSubmitListener&&this.contextEventsController.host.removeEventListener(\"primer:vault-submit\",this._contextVaultSubmitListener)}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer:vault-submit\",this.handleDirectSubmit),this._contextVaultSubmitListener=e=>{this.handleContextVaultSubmit(e)},this.setupContextEventListeners()}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer:vault-submit\",this.handleDirectSubmit),this.cleanupContextEventListeners(),super.disconnectedCallback()}renderLoadingOverlay(){return p`<div class=\"loading-overlay\" ${Tt({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ><primer-spinner size=\"medium\" color=\"var(--primer-color-loader)\" ></primer-spinner></div>`}renderDeleteConfirmation(){if(!this.deletePaymentMethodId||!this.deleteAssetConfig)return y;let e=this.getPaymentMethodName(this.deletePaymentMethodId);return p`<div class=\"delete-confirmation-container\"><primer-button disabled variant=\"secondary\"><primer-payment-method-content .assetConfig=${this.deleteAssetConfig} ></primer-payment-method-content></primer-button><primer-vault-delete-confirmation .isDeleting=${this.isDeleting} .paymentMethodId=${this.deletePaymentMethodId} .paymentMethodName=${e} @confirm-delete=${this.handleConfirmDelete} @cancel-delete=${this.handleCancelDelete} ${Tt({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-delete-confirmation></div>`}renderPaymentMethodItem(e){return this.deletePaymentMethodId===e.id?y:p`<primer-vault-payment-method-item .paymentMethod=${e} .isEditMode=${this.isEditMode} @delete-payment-method=${this.handleDeletePaymentMethod} ${Tt({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-payment-method-item>`}renderPaymentMethodList(){let e=this.vaultManagerContext?.vaultedPaymentMethods||[],a=!this.isEditMode&&e.length>0&&!this.deletePaymentMethodId;return p`<div class=\"payment-methods-list\">${e.map(i=>this.renderPaymentMethodItem(i))} ${R(a,()=>p`<div class=\"submit-button-container\"><slot name=\"submit-button\" @slotchange=${this.handleSubmitSlotChange} ${Tt({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></slot>${R(!this.hasSlottedSubmit,()=>p`<primer-vault-payment-submit class=\"submit-button\" @primer-vault-payment-error=${this.handlePaymentError} ></primer-vault-payment-submit>`)}</div>`,()=>y)}</div>`}render(){if(!this.vaultManagerContext?.enabled||this.vaultManagerContext?.headless)return y;let e=this.vaultManagerContext.vaultedPaymentMethods.length>0,a=this.vaultManagerContext.isLoading,i=this.vaultManagerContext.isUpdating;return p` ${R(!this.vaultManagerContext?.showEmptyState&&!e,()=>y,()=>p`<slot name=\"vault-empty-state\"><div class=\"vault-manager ${i?\"is-updating\":\"\"}\"><primer-vault-manager-header .isEditMode=${this.isEditMode} .hasPaymentMethods=${e} @toggle-edit-mode=${this.handleToggleEditMode} ></primer-vault-manager-header>${R(this.errorMessage,()=>p`<primer-vault-error-message .errorMessage=${this.errorMessage} @close-error=${this.handleCloseError} ${Tt({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-error-message>`,()=>y)}<div class=\"vault-manager-content\">${R(!a&&!e,()=>p`<div class=\"content-container\"><primer-vault-empty-state ${Tt({...this.getAnimationConfig(),properties:[\"opacity\"],in:[{opacity:0},{opacity:1}],out:[{opacity:1},{opacity:0}]})} ></primer-vault-empty-state></div>`,()=>y)} ${R(!a&&e,()=>p`<div class=\"content-container\">${R(this.deletePaymentMethodId,()=>this.renderDeleteConfirmation(),()=>this.renderPaymentMethodList())}</div>`,()=>y)}</div>${R(i,()=>this.renderLoadingOverlay(),()=>y)}</div></slot>`)} `}}"
|
|
210
200
|
},
|
|
211
201
|
{
|
|
212
202
|
"kind": "variable",
|
|
213
203
|
"name": "Ee",
|
|
214
|
-
"default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new
|
|
204
|
+
"default": "class extends v{constructor(){super(...arguments);this.vaultManagerContext=null;this.vaultItemContext=null;this.headlessUtils=null;this.paymentMethod=null;this.isEditMode=!1;this._getAssetsTask=new O(this,{task:async([e,a,i])=>await Fr(e,a,i),args:()=>[this.paymentMethod,this.headlessUtils,this.vaultManagerContext]});this.handleClick=()=>{this.isEditMode||!this.vaultManagerContext||!this.paymentMethod||(this.isSelected()?this.vaultItemContext?.setSelectedVaultedPaymentMethod(null):this.vaultItemContext?.setSelectedVaultedPaymentMethod(this.paymentMethod))};this.handleDeleteClick=e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent(\"delete-payment-method\",{detail:this.paymentMethod?.id,bubbles:!0,composed:!0}))}}isSelected(){if(!this.vaultManagerContext||!this.paymentMethod)return!1;let e=this.vaultItemContext?.selectedVaultedPaymentMethod;return!!e&&e.id===this.paymentMethod.id}render(){return this._getAssetsTask.render({error:()=>y,complete:e=>{let a=this.isSelected()?\"checked\":\"default\",i=!1,n=e?.description;return p`<div class=\"payment-method-wrapper\"><div class=\"payment-method-container\"><primer-button variant=\"secondary\" class=\"payment-method-button ${e.shouldShowCVV?\"with-cvv\":\"\"}\" selectable ?disabled=${this.isEditMode} selectionState=${a} .flex=${i} @click=${this.handleClick} ><primer-payment-method-content .assetConfig=${e} ></primer-payment-method-content>${R(e.shouldShowCVV&&this.isSelected()&&!this.isEditMode,()=>p`<div class=\"payment-method-row mt-2\"><span class=\"flex-center\"><primer-icon name=\"lock\" size=\"sm\"></primer-icon><span class=\"payment-method-subtitle\"> Input the card CVV for a secure payment</span ></span><span class=\"cell-2\"><primer-vault-cvv-input .paymentMethod=\"${this.paymentMethod}\" ><span slot=\"label\"></span></primer-vault-cvv-input></span></div>`,()=>y)}</primer-button>${this.isEditMode?p`<primer-button variant=\"tertiary\" class=\"delete-button\" @click=${this.handleDeleteClick} aria-label=${`${b(\"delete\",{id:\"delete\"})} ${n}`} ><primer-icon name=\"close\" size=\"sm\"></primer-icon></primer-button>`:y}</div></div>`}})}}"
|
|
215
205
|
},
|
|
216
206
|
{
|
|
217
207
|
"kind": "variable",
|
|
@@ -220,7 +210,7 @@
|
|
|
220
210
|
},
|
|
221
211
|
{
|
|
222
212
|
"kind": "variable",
|
|
223
|
-
"name": "
|
|
213
|
+
"name": "Ie",
|
|
224
214
|
"default": "class extends v{constructor(){super(...arguments);this.isDeleting=!1;this.paymentMethodId=\"\";this.paymentMethodName=\"\";this.vaultManager=null;this.handleConfirmClick=()=>{this.dispatchEvent(new CustomEvent(\"confirm-delete\",{bubbles:!0,composed:!0}))};this.handleCancelClick=()=>{this.dispatchEvent(new CustomEvent(\"cancel-delete\",{bubbles:!0,composed:!0}))}}render(){return p`<div class=\"delete-confirmation\"><p class=\"delete-confirmation-text\"> Are you sure you want to delete this payment method? </p><div class=\"delete-actions\"><primer-button variant=\"secondary\" @click=${this.handleCancelClick} ?disabled=${this.isDeleting} >${b(\"cancel\",{id:\"cancel\"})}</primer-button><primer-button @click=${this.handleConfirmClick} ?disabled=${this.isDeleting} >${this.isDeleting?b(\"deleting\",{id:\"deleting\"}):b(\"confirmVaultedPaymentMethodDeletion\",{id:\"confirmVaultedPaymentMethodDeletion\"})}</primer-button></div></div>`}}"
|
|
225
215
|
},
|
|
226
216
|
{
|
|
@@ -241,7 +231,7 @@
|
|
|
241
231
|
{
|
|
242
232
|
"kind": "variable",
|
|
243
233
|
"name": "ee",
|
|
244
|
-
"default": "class extends v{constructor(){super();this.vaultManagerFormContext=null;this.vaultManagerCvvContext=null;this.computedStyles=null;this.paymentMethod=null;this.cvvError=null;this.cvvInputIsDirty=!1;this.cvvInputIsBlurred=!1;this.cvvInput=null;this.isFocused=!1;this._setupCVVIframe=new
|
|
234
|
+
"default": "class extends v{constructor(){super();this.vaultManagerFormContext=null;this.vaultManagerCvvContext=null;this.computedStyles=null;this.paymentMethod=null;this.cvvError=null;this.cvvInputIsDirty=!1;this.cvvInputIsBlurred=!1;this.cvvInput=null;this.isFocused=!1;this._setupCVVIframe=new O(this,{task:([e,a])=>!e||!a||e.paymentMethodType!==\"PAYMENT_CARD\"||!e.paymentInstrumentData?.network||a.createCvvInput===null?w:{network:e.paymentInstrumentData.network,createCvvInput:a.createCvvInput},args:()=>[this.paymentMethod,this.vaultManagerFormContext]});this.cvvContainerId=`cvv-container-${Math.random().toString(36).substring(2,9)}`,new O(this,{task:async([e])=>{if(!e)return w;await this.updateComplete;let a=this.renderRoot.querySelector(`#${this.cvvContainerId}`);if(!a)return;let i=$r(this.computedStyles),n=i?{input:{base:i}}:void 0,o={cardNetwork:e.network,container:a,name:\"cvv\",placeholder:\"123\",style:n,ariaLabel:b(\"CVV\",{id:\"cardCVV\"})};this.cvvInput=await e.createCvvInput?.(o)??null,this.cvvInput&&(this.cvvInput.focus(),this.cvvError=this.cvvInput.metadata.errorCode||null,this.vaultManagerCvvContext?.setCvvInput(this.cvvInput),this.cvvInput.addListener(\"change\",()=>{this.onCvvInputChange()}),this.cvvInput.addListener(\"blur\",()=>{this.onBlur()}),this.cvvInput.addListener(\"focus\",()=>{this.onFocus()}))},args:()=>[this._setupCVVIframe.value]})}disconnectedCallback(){super.disconnectedCallback(),this.cvvInput&&(this.cvvInput.remove(),this.cvvInput=null,this.cvvError=null,this.vaultManagerCvvContext?.setCvvInput(null))}onCvvInputChange(){!this.cvvInput||!this.vaultManagerCvvContext||(this.cvvInputIsDirty=!0,this.cvvError=this.cvvInput.metadata.errorCode||null)}onBlur(){this.cvvInput&&(this.cvvInputIsBlurred=!0,this.cvvError=this.cvvInput.metadata.errorCode||null,this.isFocused=!1)}onFocus(){this.isFocused=!0}render(){return this._setupCVVIframe.render({error:()=>y,complete:()=>p`<div class=\"cvv-input-container\"><primer-input-wrapper .focusWithin=${this.isFocused} .hasError=${!!this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred)} ><slot name=\"label\" slot=\"label\"><primer-input-label>CVV</primer-input-label></slot><div slot=\"input\" id=\"${this.cvvContainerId}\"></div>${R(this.cvvError&&(this.vaultManagerCvvContext?.formIsDirty||this.cvvInputIsDirty&&this.cvvInputIsBlurred),()=>p`<primer-input-error slot=\"error\">${b(this.cvvError,{id:this.cvvError})}</primer-input-error>`)}</primer-input-wrapper></div>`})}}"
|
|
245
235
|
},
|
|
246
236
|
{
|
|
247
237
|
"kind": "variable",
|
|
@@ -251,7 +241,7 @@
|
|
|
251
241
|
{
|
|
252
242
|
"kind": "variable",
|
|
253
243
|
"name": "ie",
|
|
254
|
-
"default": "class extends v{constructor(){super(...arguments);this.hideLabels=!1;this.disabled=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.formErrorMessage=null;this.paymentMethodSelectionSent=!1;this.paymentManagers=new Map;this.clientOptions=null;this.headlessUtils=null;this.analyticsUtils=null;this.contextEventsController=null;this.cardFormProvider=new W(this,{context:
|
|
244
|
+
"default": "class extends v{constructor(){super(...arguments);this.hideLabels=!1;this.disabled=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.formErrorMessage=null;this.paymentMethodSelectionSent=!1;this.paymentManagers=new Map;this.clientOptions=null;this.headlessUtils=null;this.analyticsUtils=null;this.contextEventsController=null;this.cardFormProvider=new W(this,{context:ia,initialValue:null});this.eventsController=new Zt(this);this._contextCardSubmitListener=null;this._isHandlingContextEvent=!1;this.inputControllers=new Map;this.setupCardFormTask=new O(this,{task:([e])=>{if(!e?.manager)return w;let{manager:a}=e,i=a.createHostedInputs(),{cardNumberInput:n,expiryInput:o,cvvInput:s}=i;return this.cardFormProvider.setValue({cardholderNameInput:i.cardholderNameInput,cardNumberInput:n,expiryInput:o,cvvInput:s,setCardholderName:l=>{a.setCardholderName(l),this.shouldRequireCardholderName&&a.validate?.().then(c=>{let g=c?.validationErrors?.find(T=>T.name===cd.cardholderName),h=this.inputControllers.get(\"cardholderName\");h&&h.updateMetaFromValidation({valid:!1,error:g?.message||g?.error||null,errorCode:g?.message||g?.error||null})})},setCardNetwork:l=>{this.selectedCardNetwork=l},validate:()=>a.validate(),submit:l=>a.submit(l),hideLabels:this.hideLabels,disabled:this.disabled,setSubmissionState:l=>{this.inputControllers.forEach(c=>{c.setSubmitted(l)})},propagateValidationErrors:l=>{l&&l.forEach(c=>{let m=c.field||c.name,g=c.message||c.error,h=cd[m];if(h){let T=this.inputControllers.get(h);if(T){let M={valid:!1,error:g,errorCode:g};T.updateMetaFromValidation(M)}}})},registerInputController:(l,c)=>{this.inputControllers.set(l,c)},unregisterInputController:l=>{this.inputControllers.delete(l)},onUserInteraction:()=>{this.sendPaymentMethodSelectionEvent(),this.checkAndSendPaymentDetailsEnteredEvent()}}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.paymentDetailsEnteredSent=!1;this.handleSlotButtonClick=e=>{let i=e.target.closest(\"button, primer-button\");if(!i)return;let n=i;this.isSubmitButton(n)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.handleContextCardSubmit=e=>{if(!this._isHandlingContextEvent){this._isHandlingContextEvent=!0;try{e.target!==this&&(e.stopPropagation(),this.submitCardPayment())}finally{this._isHandlingContextEvent=!1}}};this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}updated(e){if(super.updated(e),(e.has(\"hideLabels\")||e.has(\"disabled\"))&&this.cardFormProvider.value&&this.cardFormProvider.setValue({...this.cardFormProvider.value,hideLabels:this.hideLabels,disabled:this.disabled}),e.has(\"contextEventsController\")){let a=e.get(\"contextEventsController\");a?.host&&this._contextCardSubmitListener&&a.host.removeEventListener(\"primer:card-submit\",this._contextCardSubmitListener),this.setupContextEventListeners()}}get shouldShowCardholderName(){let e=this.clientOptions?.card?.cardholderName;return typeof e?.visible==\"boolean\"?e.visible:!0}get shouldRequireCardholderName(){if(!this.shouldShowCardholderName)return!1;let e=this.clientOptions?.card?.cardholderName;return typeof e?.required==\"boolean\"?e.required:!0}sendPaymentMethodSelectionEvent(){this.paymentMethodSelectionSent||(this.paymentMethodSelectionSent=!0,Q({eventName:\"PAYMENT_METHOD_SELECTION\",paymentMethod:\"PAYMENT_CARD\"}))}checkAndSendPaymentDetailsEnteredEvent(){if(this.paymentDetailsEnteredSent)return;let e=this.inputControllers.get(\"cardNumber\"),a=this.inputControllers.get(\"expire\"),i=this.inputControllers.get(\"cvv\"),n=e?.meta?.dirty===!0,o=a?.meta?.dirty===!0,s=i?.meta?.dirty===!0,l=!0;this.shouldRequireCardholderName&&(l=this.inputControllers.get(\"cardholderName\")?.meta?.dirty===!0),n&&o&&s&&l&&(this.sendPaymentDetailsEnteredEvent(),this.paymentDetailsEnteredSent=!0)}sendPaymentDetailsEnteredEvent(){Q({eventName:\"PAYMENT_DETAILS_ENTERED\",paymentMethod:\"PAYMENT_CARD\"})}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer:card-submit\",this.handleDirectSubmit),this._contextCardSubmitListener=e=>{this.handleContextCardSubmit(e)},this.setupContextEventListeners()}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer:card-submit\",this.handleDirectSubmit),this.cleanupContextEventListeners(),super.disconnectedCallback()}setupContextEventListeners(){this.contextEventsController?.host&&this._contextCardSubmitListener&&this.contextEventsController.host.addEventListener(\"primer:card-submit\",this._contextCardSubmitListener)}cleanupContextEventListeners(){this.contextEventsController?.host&&this._contextCardSubmitListener&&this.contextEventsController.host.removeEventListener(\"primer:card-submit\",this._contextCardSubmitListener)}isSubmitButton(e){let a=e.tagName.toLowerCase(),i=a===\"button\",n=a===\"primer-button\";return i&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||n&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e||this.disabled)return;this.formErrorMessage=null,e.setSubmissionState?.(!0);let a=this.querySelector(\"primer-billing-address\")||this.renderRoot.querySelector(\"primer-billing-address\"),i=!0;a&&(i=await a.validateForSubmission());let n=await e.validate?.();if(n?.valid&&i){if(a&&!await a.submitToSDK()){let c=b(\"tokenizationError\",{id:\"tokenizationError\"});this.formErrorMessage=c,this.eventsController.dispatchFormSubmitErrors([{field:\"billingAddress\",name:\"billingAddress\",error:\"BILLING_ADDRESS_SUBMISSION_FAILED\",message:c}]);return}let o=this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0;await e.submit?.(o);let s={success:!0};this.eventsController.dispatchFormSubmitSuccess(s)}else{let o=n?.validationErrors;e.propagateValidationErrors?.(o||[]),this.cardFormProvider.setValue({...e,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===vt.ERROR||this.setupCardFormTask.status===vt.INITIAL?y:p`<form @submit=${this.handleFormSubmit}><slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot>${this.setupCardFormTask.render({complete:()=>R(this.hasAssignedContent,()=>y,()=>p`<div class=\"card-form\"><primer-input-card-number></primer-input-card-number><div class=\"card-form-row\"><primer-input-card-expiry></primer-input-card-expiry><primer-input-cvv></primer-input-cvv></div>${R(this.shouldShowCardholderName,()=>p`<primer-input-card-holder-name></primer-input-card-holder-name>`,()=>y)}<primer-billing-address></primer-billing-address></div><primer-card-form-submit></primer-card-form-submit><primer-error-message message=\"${this.formErrorMessage||\"\"}\" ?visible=\"${!!this.formErrorMessage}\" ></primer-error-message>`)})}</form>`}}"
|
|
255
245
|
},
|
|
256
246
|
{
|
|
257
247
|
"kind": "variable",
|
|
@@ -281,7 +271,7 @@
|
|
|
281
271
|
{
|
|
282
272
|
"kind": "variable",
|
|
283
273
|
"name": "me",
|
|
284
|
-
"default": "class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=
|
|
274
|
+
"default": "class extends v{constructor(){super(...arguments);this.cardNetworks=null;this.headlessUtils=null;this.selectedCardNetwork=null;this.isDropdownOpen=!1;this.focusedNetworkIndex=0;this.isKeyboardNavigation=!1;this.buttonRef=Ft();this.dropdownRef=Ft();this.networkOptionRefs=[];this.toggleDropdown=e=>{this.isKeyboardNavigation=!1,e.stopPropagation(),this.getSelectableNetworks().length>1&&(this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))};this.handleClickOutside=e=>{this.isDropdownOpen&&(this.contains(e.target)||(this.isDropdownOpen=!1,this.isKeyboardNavigation=!1))};this.handleMouseMove=()=>{this.isKeyboardNavigation&&(this.isKeyboardNavigation=!1)};this.handleKeyDown=e=>{if(!(!(this.getSelectableNetworks().length>1)||!(this.contains(e.target)||this===e.target||this.isDropdownOpen&&e.target===document.body)))switch(this.isKeyboardNavigation=!0,e.key){case\"ArrowDown\":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex+1)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"ArrowUp\":e.preventDefault(),this.isDropdownOpen?(this.focusedNetworkIndex=(this.focusedNetworkIndex-1+this.getSelectableNetworks().length)%this.getSelectableNetworks().length,this.focusNetworkOption()):(this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"Enter\":case\" \":this.isDropdownOpen&&this.focusedNetworkIndex>=0?(e.preventDefault(),this.selectNetwork(e,this.getSelectableNetworks()[this.focusedNetworkIndex])):!this.isDropdownOpen&&this.buttonRef.value===document.activeElement&&(e.preventDefault(),this.isDropdownOpen=!0,this.focusedNetworkIndex=this.getSelectedNetworkIndex());break;case\"Escape\":this.isDropdownOpen&&(e.preventDefault(),this.isDropdownOpen=!1,this.buttonRef.value?.focus());break;case\"Tab\":this.isDropdownOpen&&(this.isDropdownOpen=!1);break}};this.handleDocumentKeyDown=e=>{this.isDropdownOpen&&this.handleKeyDown(e)}}getNetworkIconUrl(e){return this.headlessUtils?.getCardNetworkAsset(e.network)?.cardUrl}getSelectableNetworks(){return this.cardNetworks?.selectableCardNetworks||[]}getDetectedNetwork(){return this.selectedCardNetwork??(this.cardNetworks?.detectedCardNetwork||null)}getSelectedNetworkIndex(){let e=this.getDetectedNetwork();if(!e)return 0;let a=this.getSelectableNetworks().findIndex(i=>i.network===e.network);return a>=0?a:0}selectNetwork(e,a){e.stopPropagation(),this.selectedCardNetwork=a,this.isDropdownOpen=!1,this.buttonRef.value?.focus(),this.cardNetworks&&this.dispatchEvent(new CustomEvent(\"network-selected\",{detail:{network:a.network},bubbles:!0,composed:!0}))}focusNetworkOption(){requestAnimationFrame(()=>{this.networkOptionRefs[this.focusedNetworkIndex]&&this.networkOptionRefs[this.focusedNetworkIndex].focus()})}setNetworkOptionRef(e,a){this.networkOptionRefs[a]=e}connectedCallback(){super.connectedCallback(),setTimeout(()=>{document.addEventListener(\"click\",this.handleClickOutside),document.addEventListener(\"mousemove\",this.handleMouseMove),this.addEventListener(\"keydown\",this.handleKeyDown),document.addEventListener(\"keydown\",this.handleDocumentKeyDown)},0)}disconnectedCallback(){document.removeEventListener(\"click\",this.handleClickOutside),document.removeEventListener(\"keydown\",this.handleDocumentKeyDown),document.removeEventListener(\"mousemove\",this.handleMouseMove),this.removeEventListener(\"keydown\",this.handleKeyDown),super.disconnectedCallback()}render(){if(this.cardNetworks?.isLoading)return p`<primer-spinner size=\"small\" compact></primer-spinner>`;let e=this.getSelectableNetworks();if(!this.getDetectedNetwork()&&e.length===0)return p`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let a=this.getDetectedNetwork()||(e.length>0?e[0]:null);if(!a)return p`<primer-icon name=\"payment-card\" size=\"sm\"></primer-icon>`;let i=e.length>1;return p`<button ${Et(this.buttonRef)} class=\"network-selector\" @click=${this.toggleDropdown} @keydown=${n=>{(n.key===\" \"||n.key===\"Enter\")&&i&&(n.preventDefault(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen&&(this.focusedNetworkIndex=this.getSelectedNetworkIndex()))}} aria-label=${i?`Selected card network: ${a.displayName}. Click to change.`:`Card network: ${a.displayName}`} aria-expanded=${i?this.isDropdownOpen:y} aria-haspopup=${i?\"true\":y} aria-controls=${i?\"network-dropdown\":y} ><img class=\"network-icon\" src=${this.getNetworkIconUrl(a)} alt=${a.displayName} />${R(i,()=>p`<primer-icon class=\"caret ${this.isDropdownOpen?\"open\":\"\"}\" size=\"sm\" name=\"chevron-down\" ></primer-icon>`,()=>y)}</button>${R(this.isDropdownOpen,()=>p`<div ${Et(this.dropdownRef)} id=\"network-dropdown\" class=\"dropdown open\" role=\"listbox\" aria-label=\"Select card network\" >${e.map((n,o)=>p`<div ${Et(s=>this.setNetworkOptionRef(s,o))} class=\"network-option ${this.isKeyboardNavigation&&o===this.focusedNetworkIndex?\"focused\":\"\"}\" @click=${s=>this.selectNetwork(s,n)} @keydown=${s=>{(s.key===\"Enter\"||s.key===\" \")&&this.selectNetwork(s,n)}} role=\"option\" aria-selected=${n.network===a.network} tabindex=\"${o===this.focusedNetworkIndex?\"0\":\"-1\"}\" ><img class=\"network-option-icon\" src=${this.getNetworkIconUrl(n)} alt=${n.displayName} /><span class=\"network-name\">${n.displayName}</span>${R(n.network===a.network,()=>p`<primer-icon class=\"checkmark\" name=\"checkmark\" size=\"sm\" ></primer-icon>`,()=>y)}</div>`)}</div>`,()=>y)} `}}"
|
|
285
275
|
},
|
|
286
276
|
{
|
|
287
277
|
"kind": "variable",
|
|
@@ -290,12 +280,12 @@
|
|
|
290
280
|
},
|
|
291
281
|
{
|
|
292
282
|
"kind": "variable",
|
|
293
|
-
"name": "
|
|
283
|
+
"name": "na",
|
|
294
284
|
"default": "class extends v{render(){return p`<primer-checkout-state type=\"complete\"></primer-checkout-state>`}}"
|
|
295
285
|
},
|
|
296
286
|
{
|
|
297
287
|
"kind": "variable",
|
|
298
|
-
"name": "
|
|
288
|
+
"name": "Ut",
|
|
299
289
|
"default": "class extends v{constructor(){super(...arguments);this.sdkState=null}render(){return p`<primer-checkout-state type=\"failure\" description=${this.sdkState?.primerJsError?.message||\"\"} ></primer-checkout-state>`}}"
|
|
300
290
|
},
|
|
301
291
|
{
|
|
@@ -306,11 +296,11 @@
|
|
|
306
296
|
{
|
|
307
297
|
"kind": "variable",
|
|
308
298
|
"name": "et",
|
|
309
|
-
"default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null;this.clientOptions=null}render(){return this.sdkState?.isSuccessful?p`<slot name=\"checkout-complete\"><primer-checkout-complete></primer-checkout-complete></slot>`:p`<slot name=\"payments\" @slotchange=${this.onSlotChange}></slot>${R(this.hasAssignedContent,()=>y,()=>p`<div class=${oe({\"primer-is-processing\":!!this.sdkState?.isProcessing})} ><primer-vault-manager></primer-vault-manager><primer-show-other-payments><div slot=\"other-payments\" class=\"primer-main-list\">${this.paymentMethods?.
|
|
299
|
+
"default": "class extends v{constructor(){super(...arguments);this.hasAssignedContent=!1;this.onSlotChange=e=>{let i=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=i.length>0,this.requestUpdate()};this.paymentMethods=null;this.sdkState=null;this.clientOptions=null}render(){return this.sdkState?.isSuccessful?p`<slot name=\"checkout-complete\"><primer-checkout-complete></primer-checkout-complete></slot>`:p`<slot name=\"payments\" @slotchange=${this.onSlotChange}></slot>${R(this.hasAssignedContent,()=>y,()=>p`<div class=${oe({\"primer-is-processing\":!!this.sdkState?.isProcessing})} ><primer-vault-manager></primer-vault-manager><primer-show-other-payments><div slot=\"other-payments\" class=\"primer-main-list\">${this.paymentMethods?.map(e=>p`<primer-payment-method type=${e.type} ?disabled=${this.clientOptions?.disabledPayments===!0} ></primer-payment-method>`)}</div></primer-show-other-payments><primer-error-message-container></primer-error-message-container></div>`)} `}}"
|
|
310
300
|
},
|
|
311
301
|
{
|
|
312
302
|
"kind": "function",
|
|
313
|
-
"name": "
|
|
303
|
+
"name": "QD"
|
|
314
304
|
}
|
|
315
305
|
],
|
|
316
306
|
"exports": [
|
|
@@ -334,7 +324,7 @@
|
|
|
334
324
|
"kind": "js",
|
|
335
325
|
"name": "AchPayment",
|
|
336
326
|
"declaration": {
|
|
337
|
-
"name": "
|
|
327
|
+
"name": "Ne",
|
|
338
328
|
"module": "dist/primer-loader.js"
|
|
339
329
|
}
|
|
340
330
|
},
|
|
@@ -482,22 +472,6 @@
|
|
|
482
472
|
"module": "dist/primer-loader.js"
|
|
483
473
|
}
|
|
484
474
|
},
|
|
485
|
-
{
|
|
486
|
-
"kind": "js",
|
|
487
|
-
"name": "InitializedPayments",
|
|
488
|
-
"declaration": {
|
|
489
|
-
"name": "cr",
|
|
490
|
-
"module": "dist/primer-loader.js"
|
|
491
|
-
}
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
"kind": "js",
|
|
495
|
-
"name": "InitializedVaultedPayments",
|
|
496
|
-
"declaration": {
|
|
497
|
-
"name": "ur",
|
|
498
|
-
"module": "dist/primer-loader.js"
|
|
499
|
-
}
|
|
500
|
-
},
|
|
501
475
|
{
|
|
502
476
|
"kind": "js",
|
|
503
477
|
"name": "Input",
|
|
@@ -518,7 +492,7 @@
|
|
|
518
492
|
"kind": "js",
|
|
519
493
|
"name": "InputWrapper",
|
|
520
494
|
"declaration": {
|
|
521
|
-
"name": "
|
|
495
|
+
"name": "ze",
|
|
522
496
|
"module": "dist/primer-loader.js"
|
|
523
497
|
}
|
|
524
498
|
},
|
|
@@ -574,7 +548,7 @@
|
|
|
574
548
|
"kind": "js",
|
|
575
549
|
"name": "PrimerCheckoutComplete",
|
|
576
550
|
"declaration": {
|
|
577
|
-
"name": "
|
|
551
|
+
"name": "na",
|
|
578
552
|
"module": "dist/primer-loader.js"
|
|
579
553
|
}
|
|
580
554
|
},
|
|
@@ -590,7 +564,7 @@
|
|
|
590
564
|
"kind": "js",
|
|
591
565
|
"name": "PrimerCheckoutFailure",
|
|
592
566
|
"declaration": {
|
|
593
|
-
"name": "
|
|
567
|
+
"name": "Ut",
|
|
594
568
|
"module": "dist/primer-loader.js"
|
|
595
569
|
}
|
|
596
570
|
},
|
|
@@ -654,7 +628,7 @@
|
|
|
654
628
|
"kind": "js",
|
|
655
629
|
"name": "Spinner",
|
|
656
630
|
"declaration": {
|
|
657
|
-
"name": "
|
|
631
|
+
"name": "$e",
|
|
658
632
|
"module": "dist/primer-loader.js"
|
|
659
633
|
}
|
|
660
634
|
},
|
|
@@ -670,7 +644,7 @@
|
|
|
670
644
|
"kind": "js",
|
|
671
645
|
"name": "VaultDeleteConfirmation",
|
|
672
646
|
"declaration": {
|
|
673
|
-
"name": "
|
|
647
|
+
"name": "Ie",
|
|
674
648
|
"module": "dist/primer-loader.js"
|
|
675
649
|
}
|
|
676
650
|
},
|
|
@@ -726,7 +700,7 @@
|
|
|
726
700
|
"kind": "js",
|
|
727
701
|
"name": "injectDarkTheme",
|
|
728
702
|
"declaration": {
|
|
729
|
-
"name": "
|
|
703
|
+
"name": "Np",
|
|
730
704
|
"module": "dist/primer-loader.js"
|
|
731
705
|
}
|
|
732
706
|
},
|
|
@@ -734,7 +708,7 @@
|
|
|
734
708
|
"kind": "js",
|
|
735
709
|
"name": "injectLightTheme",
|
|
736
710
|
"declaration": {
|
|
737
|
-
"name": "
|
|
711
|
+
"name": "Pp",
|
|
738
712
|
"module": "dist/primer-loader.js"
|
|
739
713
|
}
|
|
740
714
|
},
|
|
@@ -742,7 +716,7 @@
|
|
|
742
716
|
"kind": "js",
|
|
743
717
|
"name": "injectLoaderStyles",
|
|
744
718
|
"declaration": {
|
|
745
|
-
"name": "
|
|
719
|
+
"name": "Es",
|
|
746
720
|
"module": "dist/primer-loader.js"
|
|
747
721
|
}
|
|
748
722
|
},
|
|
@@ -750,7 +724,7 @@
|
|
|
750
724
|
"kind": "js",
|
|
751
725
|
"name": "injectThemeStyles",
|
|
752
726
|
"declaration": {
|
|
753
|
-
"name": "
|
|
727
|
+
"name": "Ts",
|
|
754
728
|
"module": "dist/primer-loader.js"
|
|
755
729
|
}
|
|
756
730
|
},
|
|
@@ -758,7 +732,7 @@
|
|
|
758
732
|
"kind": "js",
|
|
759
733
|
"name": "loadPrimer",
|
|
760
734
|
"declaration": {
|
|
761
|
-
"name": "
|
|
735
|
+
"name": "QD",
|
|
762
736
|
"module": "dist/primer-loader.js"
|
|
763
737
|
}
|
|
764
738
|
}
|
|
@@ -3447,145 +3421,7 @@
|
|
|
3447
3421
|
{
|
|
3448
3422
|
"kind": "javascript-module",
|
|
3449
3423
|
"path": "src/contexts/payments-objects.ts",
|
|
3450
|
-
"declarations": [
|
|
3451
|
-
{
|
|
3452
|
-
"kind": "class",
|
|
3453
|
-
"description": "",
|
|
3454
|
-
"name": "InitializedPayments",
|
|
3455
|
-
"members": [
|
|
3456
|
-
{
|
|
3457
|
-
"kind": "field",
|
|
3458
|
-
"name": "_methods",
|
|
3459
|
-
"type": {
|
|
3460
|
-
"text": "InitializedPaymentMethodMap"
|
|
3461
|
-
},
|
|
3462
|
-
"privacy": "private",
|
|
3463
|
-
"readonly": true,
|
|
3464
|
-
"default": "map"
|
|
3465
|
-
},
|
|
3466
|
-
{
|
|
3467
|
-
"kind": "method",
|
|
3468
|
-
"name": "get",
|
|
3469
|
-
"return": {
|
|
3470
|
-
"type": {
|
|
3471
|
-
"text": "RedirectPaymentMethod | undefined"
|
|
3472
|
-
}
|
|
3473
|
-
},
|
|
3474
|
-
"parameters": [
|
|
3475
|
-
{
|
|
3476
|
-
"name": "type",
|
|
3477
|
-
"type": {
|
|
3478
|
-
"text": "T"
|
|
3479
|
-
}
|
|
3480
|
-
}
|
|
3481
|
-
]
|
|
3482
|
-
},
|
|
3483
|
-
{
|
|
3484
|
-
"kind": "method",
|
|
3485
|
-
"name": "get",
|
|
3486
|
-
"return": {
|
|
3487
|
-
"type": {
|
|
3488
|
-
"text": "PaymentMethodByType<T> | undefined"
|
|
3489
|
-
}
|
|
3490
|
-
},
|
|
3491
|
-
"parameters": [
|
|
3492
|
-
{
|
|
3493
|
-
"name": "type",
|
|
3494
|
-
"type": {
|
|
3495
|
-
"text": "T"
|
|
3496
|
-
}
|
|
3497
|
-
}
|
|
3498
|
-
]
|
|
3499
|
-
},
|
|
3500
|
-
{
|
|
3501
|
-
"kind": "method",
|
|
3502
|
-
"name": "get",
|
|
3503
|
-
"parameters": [
|
|
3504
|
-
{
|
|
3505
|
-
"name": "type",
|
|
3506
|
-
"type": {
|
|
3507
|
-
"text": "T"
|
|
3508
|
-
}
|
|
3509
|
-
}
|
|
3510
|
-
]
|
|
3511
|
-
},
|
|
3512
|
-
{
|
|
3513
|
-
"kind": "method",
|
|
3514
|
-
"name": "toArray",
|
|
3515
|
-
"return": {
|
|
3516
|
-
"type": {
|
|
3517
|
-
"text": "InitializedPaymentMethod[]"
|
|
3518
|
-
}
|
|
3519
|
-
}
|
|
3520
|
-
},
|
|
3521
|
-
{
|
|
3522
|
-
"kind": "method",
|
|
3523
|
-
"name": "size",
|
|
3524
|
-
"return": {
|
|
3525
|
-
"type": {
|
|
3526
|
-
"text": "number"
|
|
3527
|
-
}
|
|
3528
|
-
}
|
|
3529
|
-
}
|
|
3530
|
-
]
|
|
3531
|
-
},
|
|
3532
|
-
{
|
|
3533
|
-
"kind": "class",
|
|
3534
|
-
"description": "Wrapper class for vaulted payment methods that provides type-safe access\nto filtered vaulted payment method data.\n\nThis class mirrors the structure of InitializedPayments but for vault data,\nproviding a consistent API for merchants to access vaulted payment methods\nthrough events and callbacks.",
|
|
3535
|
-
"name": "InitializedVaultedPayments",
|
|
3536
|
-
"members": [
|
|
3537
|
-
{
|
|
3538
|
-
"kind": "field",
|
|
3539
|
-
"name": "_methods",
|
|
3540
|
-
"type": {
|
|
3541
|
-
"text": "VaultedPaymentMethodsMap"
|
|
3542
|
-
},
|
|
3543
|
-
"privacy": "private",
|
|
3544
|
-
"readonly": true,
|
|
3545
|
-
"default": "map"
|
|
3546
|
-
},
|
|
3547
|
-
{
|
|
3548
|
-
"kind": "method",
|
|
3549
|
-
"name": "get",
|
|
3550
|
-
"return": {
|
|
3551
|
-
"type": {
|
|
3552
|
-
"text": ""
|
|
3553
|
-
}
|
|
3554
|
-
},
|
|
3555
|
-
"parameters": [
|
|
3556
|
-
{
|
|
3557
|
-
"name": "id",
|
|
3558
|
-
"type": {
|
|
3559
|
-
"text": "string"
|
|
3560
|
-
},
|
|
3561
|
-
"description": "Payment method ID"
|
|
3562
|
-
}
|
|
3563
|
-
],
|
|
3564
|
-
"description": "Get a vaulted payment method by its ID"
|
|
3565
|
-
},
|
|
3566
|
-
{
|
|
3567
|
-
"kind": "method",
|
|
3568
|
-
"name": "toArray",
|
|
3569
|
-
"return": {
|
|
3570
|
-
"type": {
|
|
3571
|
-
"text": ""
|
|
3572
|
-
}
|
|
3573
|
-
},
|
|
3574
|
-
"description": "Get all vaulted payment methods as an array"
|
|
3575
|
-
},
|
|
3576
|
-
{
|
|
3577
|
-
"kind": "method",
|
|
3578
|
-
"name": "size",
|
|
3579
|
-
"return": {
|
|
3580
|
-
"type": {
|
|
3581
|
-
"text": ""
|
|
3582
|
-
}
|
|
3583
|
-
},
|
|
3584
|
-
"description": "Get the count of vaulted payment methods"
|
|
3585
|
-
}
|
|
3586
|
-
]
|
|
3587
|
-
}
|
|
3588
|
-
],
|
|
3424
|
+
"declarations": [],
|
|
3589
3425
|
"exports": [
|
|
3590
3426
|
{
|
|
3591
3427
|
"kind": "js",
|
|
@@ -3594,22 +3430,6 @@
|
|
|
3594
3430
|
"name": "VaultedPaymentMethodSummary",
|
|
3595
3431
|
"module": "src/contexts/payments-objects.ts"
|
|
3596
3432
|
}
|
|
3597
|
-
},
|
|
3598
|
-
{
|
|
3599
|
-
"kind": "js",
|
|
3600
|
-
"name": "InitializedPayments",
|
|
3601
|
-
"declaration": {
|
|
3602
|
-
"name": "InitializedPayments",
|
|
3603
|
-
"module": "src/contexts/payments-objects.ts"
|
|
3604
|
-
}
|
|
3605
|
-
},
|
|
3606
|
-
{
|
|
3607
|
-
"kind": "js",
|
|
3608
|
-
"name": "InitializedVaultedPayments",
|
|
3609
|
-
"declaration": {
|
|
3610
|
-
"name": "InitializedVaultedPayments",
|
|
3611
|
-
"module": "src/contexts/payments-objects.ts"
|
|
3612
|
-
}
|
|
3613
3433
|
}
|
|
3614
3434
|
]
|
|
3615
3435
|
},
|
|
@@ -3753,6 +3573,23 @@
|
|
|
3753
3573
|
}
|
|
3754
3574
|
],
|
|
3755
3575
|
"description": "Processes a card network change event"
|
|
3576
|
+
},
|
|
3577
|
+
{
|
|
3578
|
+
"kind": "method",
|
|
3579
|
+
"name": "processBinDataAvailableEvent",
|
|
3580
|
+
"return": {
|
|
3581
|
+
"type": {
|
|
3582
|
+
"text": "void"
|
|
3583
|
+
}
|
|
3584
|
+
},
|
|
3585
|
+
"parameters": [
|
|
3586
|
+
{
|
|
3587
|
+
"name": "event",
|
|
3588
|
+
"type": {
|
|
3589
|
+
"text": "BinDataAvailableEvent"
|
|
3590
|
+
}
|
|
3591
|
+
}
|
|
3592
|
+
]
|
|
3756
3593
|
}
|
|
3757
3594
|
]
|
|
3758
3595
|
}
|
|
@@ -3991,7 +3828,7 @@
|
|
|
3991
3828
|
"name": "handlePaymentStart",
|
|
3992
3829
|
"return": {
|
|
3993
3830
|
"type": {
|
|
3994
|
-
"text": "
|
|
3831
|
+
"text": ""
|
|
3995
3832
|
}
|
|
3996
3833
|
},
|
|
3997
3834
|
"parameters": [
|
|
@@ -4006,9 +3843,15 @@
|
|
|
4006
3843
|
"type": {
|
|
4007
3844
|
"text": "PaymentMethodType"
|
|
4008
3845
|
}
|
|
3846
|
+
},
|
|
3847
|
+
{
|
|
3848
|
+
"name": "handler",
|
|
3849
|
+
"type": {
|
|
3850
|
+
"text": "PrepareHandler"
|
|
3851
|
+
}
|
|
4009
3852
|
}
|
|
4010
3853
|
],
|
|
4011
|
-
"description": "Handle common payment start logic including reattempt tracking.\nCentralizes state updates and analytics for payment initiation."
|
|
3854
|
+
"description": "Handle common payment start logic including reattempt tracking.\nCentralizes state updates, event dispatching, and analytics for payment initiation."
|
|
4012
3855
|
},
|
|
4013
3856
|
{
|
|
4014
3857
|
"kind": "function",
|
|
@@ -4185,7 +4028,7 @@
|
|
|
4185
4028
|
{
|
|
4186
4029
|
"name": "paymentMethods",
|
|
4187
4030
|
"type": {
|
|
4188
|
-
"text": "
|
|
4031
|
+
"text": "InitializedPaymentMethod[]"
|
|
4189
4032
|
}
|
|
4190
4033
|
}
|
|
4191
4034
|
]
|
|
@@ -4224,6 +4067,40 @@
|
|
|
4224
4067
|
}
|
|
4225
4068
|
]
|
|
4226
4069
|
},
|
|
4070
|
+
{
|
|
4071
|
+
"kind": "method",
|
|
4072
|
+
"name": "dispatchBinDataAvailable",
|
|
4073
|
+
"return": {
|
|
4074
|
+
"type": {
|
|
4075
|
+
"text": "void"
|
|
4076
|
+
}
|
|
4077
|
+
},
|
|
4078
|
+
"parameters": [
|
|
4079
|
+
{
|
|
4080
|
+
"name": "data",
|
|
4081
|
+
"type": {
|
|
4082
|
+
"text": "BinDataAvailableEvent"
|
|
4083
|
+
}
|
|
4084
|
+
}
|
|
4085
|
+
]
|
|
4086
|
+
},
|
|
4087
|
+
{
|
|
4088
|
+
"kind": "method",
|
|
4089
|
+
"name": "dispatchBinDataLoadingChange",
|
|
4090
|
+
"return": {
|
|
4091
|
+
"type": {
|
|
4092
|
+
"text": "void"
|
|
4093
|
+
}
|
|
4094
|
+
},
|
|
4095
|
+
"parameters": [
|
|
4096
|
+
{
|
|
4097
|
+
"name": "loading",
|
|
4098
|
+
"type": {
|
|
4099
|
+
"text": "boolean"
|
|
4100
|
+
}
|
|
4101
|
+
}
|
|
4102
|
+
]
|
|
4103
|
+
},
|
|
4227
4104
|
{
|
|
4228
4105
|
"kind": "method",
|
|
4229
4106
|
"name": "dispatchCardSubmit",
|
|
@@ -4276,6 +4153,18 @@
|
|
|
4276
4153
|
}
|
|
4277
4154
|
]
|
|
4278
4155
|
},
|
|
4156
|
+
{
|
|
4157
|
+
"kind": "method",
|
|
4158
|
+
"name": "dispatchPaymentCancel",
|
|
4159
|
+
"parameters": [
|
|
4160
|
+
{
|
|
4161
|
+
"name": "data",
|
|
4162
|
+
"type": {
|
|
4163
|
+
"text": "{ paymentMethodType: PaymentMethodType | null }"
|
|
4164
|
+
}
|
|
4165
|
+
}
|
|
4166
|
+
]
|
|
4167
|
+
},
|
|
4279
4168
|
{
|
|
4280
4169
|
"kind": "method",
|
|
4281
4170
|
"name": "handleExternalCardSubmit",
|
|
@@ -4300,10 +4189,24 @@
|
|
|
4300
4189
|
"name": "dispatchPaymentStart",
|
|
4301
4190
|
"return": {
|
|
4302
4191
|
"type": {
|
|
4303
|
-
"text": "
|
|
4192
|
+
"text": ""
|
|
4304
4193
|
}
|
|
4305
4194
|
},
|
|
4306
|
-
"
|
|
4195
|
+
"parameters": [
|
|
4196
|
+
{
|
|
4197
|
+
"name": "paymentMethodType",
|
|
4198
|
+
"type": {
|
|
4199
|
+
"text": "PaymentMethodType"
|
|
4200
|
+
}
|
|
4201
|
+
},
|
|
4202
|
+
{
|
|
4203
|
+
"name": "handler",
|
|
4204
|
+
"type": {
|
|
4205
|
+
"text": "PrepareHandler"
|
|
4206
|
+
}
|
|
4207
|
+
}
|
|
4208
|
+
],
|
|
4209
|
+
"description": "Dispatch payment start event.\nCalled when payment flow begins, before payment creation.\n\nEvent detail includes handlers to control the payment flow:\n- abortPaymentCreation: Call to abort the payment\n- continuePaymentCreation: Call to continue (optionally with idempotencyKey)"
|
|
4307
4210
|
},
|
|
4308
4211
|
{
|
|
4309
4212
|
"kind": "method",
|
|
@@ -4372,9 +4275,16 @@
|
|
|
4372
4275
|
{
|
|
4373
4276
|
"name": "vaultedPayments",
|
|
4374
4277
|
"type": {
|
|
4375
|
-
"text": "
|
|
4278
|
+
"text": "VaultedPaymentMethodSummary[]"
|
|
4279
|
+
},
|
|
4280
|
+
"description": "Array of filtered vaulted payment method summaries"
|
|
4281
|
+
},
|
|
4282
|
+
{
|
|
4283
|
+
"name": "cvvRecapture",
|
|
4284
|
+
"type": {
|
|
4285
|
+
"text": "boolean"
|
|
4376
4286
|
},
|
|
4377
|
-
"description": "
|
|
4287
|
+
"description": "Whether CVV recapture is required for vaulted payments"
|
|
4378
4288
|
}
|
|
4379
4289
|
],
|
|
4380
4290
|
"description": "Dispatch vault methods update event.\nCalled when vaulted payment methods are loaded or updated."
|
|
@@ -4536,7 +4446,7 @@
|
|
|
4536
4446
|
"kind": "field",
|
|
4537
4447
|
"name": "paymentMethods",
|
|
4538
4448
|
"type": {
|
|
4539
|
-
"text": "
|
|
4449
|
+
"text": "InitializedPaymentMethod[] | null"
|
|
4540
4450
|
},
|
|
4541
4451
|
"privacy": "private",
|
|
4542
4452
|
"default": "null"
|
|
@@ -4577,7 +4487,7 @@
|
|
|
4577
4487
|
"text": "() => void | undefined"
|
|
4578
4488
|
},
|
|
4579
4489
|
"privacy": "public",
|
|
4580
|
-
"
|
|
4490
|
+
"deprecated": "Use the `primer:payment-start` event instead.\n\nListen to the event on the checkout element:\n```typescript\ncheckout.addEventListener('primer:payment-start', (e) => {\nanalytics.track('payment_started');\ndisablePaymentForm();\n});\n```"
|
|
4581
4491
|
},
|
|
4582
4492
|
{
|
|
4583
4493
|
"kind": "field",
|
|
@@ -4586,17 +4496,7 @@
|
|
|
4586
4496
|
"text": "(\n data: PaymentData,\n handler: PrepareHandler,\n ) => void | undefined"
|
|
4587
4497
|
},
|
|
4588
4498
|
"privacy": "public",
|
|
4589
|
-
"
|
|
4590
|
-
"parameters": [
|
|
4591
|
-
{
|
|
4592
|
-
"description": "Payment method information",
|
|
4593
|
-
"name": "data"
|
|
4594
|
-
},
|
|
4595
|
-
{
|
|
4596
|
-
"description": "Control flow handler (continue or abort)",
|
|
4597
|
-
"name": "handler"
|
|
4598
|
-
}
|
|
4599
|
-
]
|
|
4499
|
+
"deprecated": "Use the `primer:payment-start` event instead.\n\nListen to the event on the checkout element:\n```typescript\ncheckout.addEventListener('primer:payment-start', (e) => {\nconst { paymentMethodType, abortPaymentCreation, continuePaymentCreation } = e.detail;\n\nif (!validateBusinessRules(paymentMethodType)) {\nabortPaymentCreation();\nreturn;\n}\ncontinuePaymentCreation({ idempotencyKey: 'optional-key' });\n});\n```"
|
|
4600
4500
|
},
|
|
4601
4501
|
{
|
|
4602
4502
|
"kind": "field",
|
|
@@ -4605,13 +4505,7 @@
|
|
|
4605
4505
|
"text": "(data: PaymentSuccessData) => void | undefined"
|
|
4606
4506
|
},
|
|
4607
4507
|
"privacy": "public",
|
|
4608
|
-
"
|
|
4609
|
-
"parameters": [
|
|
4610
|
-
{
|
|
4611
|
-
"description": "Payment success data with PaymentSummary (ID, orderId, last4, brand)",
|
|
4612
|
-
"name": "data"
|
|
4613
|
-
}
|
|
4614
|
-
]
|
|
4508
|
+
"deprecated": "Use the `primer:payment-success` event instead.\n\nListen to the event on the checkout element:\n```typescript\ncheckout.addEventListener('primer:payment-success', (e) => {\nconst { payment, paymentMethodType } = e.detail;\n\n// Update backend\nawait fetch(`/api/orders/${payment.orderId}/complete`, {\nmethod: 'POST',\nbody: JSON.stringify({ paymentId: payment.id }),\n});\n\n// Redirect to success page\nwindow.location.href = `/order-success?id=${payment.orderId}`;\n});\n```"
|
|
4615
4509
|
},
|
|
4616
4510
|
{
|
|
4617
4511
|
"kind": "field",
|
|
@@ -4620,13 +4514,7 @@
|
|
|
4620
4514
|
"text": "(data: PaymentFailureData) => void | undefined"
|
|
4621
4515
|
},
|
|
4622
4516
|
"privacy": "public",
|
|
4623
|
-
"
|
|
4624
|
-
"parameters": [
|
|
4625
|
-
{
|
|
4626
|
-
"description": "Payment failure data with error details and optional PaymentSummary",
|
|
4627
|
-
"name": "data"
|
|
4628
|
-
}
|
|
4629
|
-
]
|
|
4517
|
+
"deprecated": "Use the `primer:payment-failure` event instead.\n\nListen to the event on the checkout element:\n```typescript\ncheckout.addEventListener('primer:payment-failure', (e) => {\nconst { error, payment } = e.detail;\nconsole.error('Payment failed:', error.code, error.message);\n\n// Log to error tracking\nSentry.captureException(new Error(error.message), {\nextra: {\ndiagnosticsId: error.diagnosticsId,\npaymentId: payment?.id,\n},\n});\n\n// Show user-friendly message\nshowErrorMessage(error.message);\n});\n```"
|
|
4630
4518
|
},
|
|
4631
4519
|
{
|
|
4632
4520
|
"kind": "field",
|
|
@@ -4635,13 +4523,7 @@
|
|
|
4635
4523
|
"text": "(data: VaultedMethodsUpdateData) => void | undefined"
|
|
4636
4524
|
},
|
|
4637
4525
|
"privacy": "public",
|
|
4638
|
-
"
|
|
4639
|
-
"parameters": [
|
|
4640
|
-
{
|
|
4641
|
-
"description": "Vault methods update data with filtered payment methods and cvvRecapture flag",
|
|
4642
|
-
"name": "data"
|
|
4643
|
-
}
|
|
4644
|
-
]
|
|
4526
|
+
"deprecated": "Use the `primer:vault-methods-update` event instead.\n\nListen to the event on the checkout element:\n```typescript\ncheckout.addEventListener('primer:vault-methods-update', (e) => {\nconst { vaultedPayments } = e.detail;\nconsole.log(`Vault contains ${vaultedPayments.length} methods`);\n\n// Display in custom UI\nvaultedPayments.forEach(method => {\ndisplayVaultedMethod({\nid: method.id,\ntype: method.paymentMethodType,\nlast4: method.paymentInstrumentData?.last4Digits,\nnetwork: method.paymentInstrumentData?.network,\n});\n});\n});\n```"
|
|
4645
4527
|
},
|
|
4646
4528
|
{
|
|
4647
4529
|
"kind": "method",
|
|
@@ -4912,7 +4794,7 @@
|
|
|
4912
4794
|
{
|
|
4913
4795
|
"name": "value",
|
|
4914
4796
|
"type": {
|
|
4915
|
-
"text": "
|
|
4797
|
+
"text": "InitializedPaymentMethod[]"
|
|
4916
4798
|
},
|
|
4917
4799
|
"description": "The new payment methods data."
|
|
4918
4800
|
}
|
|
@@ -10908,42 +10790,21 @@
|
|
|
10908
10790
|
},
|
|
10909
10791
|
{
|
|
10910
10792
|
"kind": "javascript-module",
|
|
10911
|
-
"path": "src/containers/
|
|
10912
|
-
"declarations": [
|
|
10913
|
-
{
|
|
10914
|
-
"kind": "variable",
|
|
10915
|
-
"name": "cardFormContext"
|
|
10916
|
-
}
|
|
10917
|
-
],
|
|
10918
|
-
"exports": [
|
|
10919
|
-
{
|
|
10920
|
-
"kind": "js",
|
|
10921
|
-
"name": "cardFormContext",
|
|
10922
|
-
"declaration": {
|
|
10923
|
-
"name": "cardFormContext",
|
|
10924
|
-
"module": "src/containers/card-form/card-form-context.ts"
|
|
10925
|
-
}
|
|
10926
|
-
}
|
|
10927
|
-
]
|
|
10928
|
-
},
|
|
10929
|
-
{
|
|
10930
|
-
"kind": "javascript-module",
|
|
10931
|
-
"path": "src/containers/card-form/card-form.component.ts",
|
|
10793
|
+
"path": "src/containers/blik/blik.component.ts",
|
|
10932
10794
|
"declarations": [
|
|
10933
10795
|
{
|
|
10934
10796
|
"kind": "class",
|
|
10935
|
-
"description": "
|
|
10936
|
-
"name": "
|
|
10797
|
+
"description": "BLIK Payment Component\n\nConsolidated component handling BLIK payment flow from button click through\npayment completion. Uses a 4-state machine for managing the user experience.",
|
|
10798
|
+
"name": "BlikComponent",
|
|
10937
10799
|
"members": [
|
|
10938
10800
|
{
|
|
10939
10801
|
"kind": "field",
|
|
10940
|
-
"name": "
|
|
10802
|
+
"name": "paymentMethod",
|
|
10941
10803
|
"type": {
|
|
10942
|
-
"text": "
|
|
10804
|
+
"text": "InitializedPaymentMethod"
|
|
10943
10805
|
},
|
|
10944
|
-
"
|
|
10945
|
-
"attribute": "
|
|
10946
|
-
"reflects": true
|
|
10806
|
+
"description": "Payment method configuration",
|
|
10807
|
+
"attribute": "paymentMethod"
|
|
10947
10808
|
},
|
|
10948
10809
|
{
|
|
10949
10810
|
"kind": "field",
|
|
@@ -10952,296 +10813,200 @@
|
|
|
10952
10813
|
"text": "boolean"
|
|
10953
10814
|
},
|
|
10954
10815
|
"default": "false",
|
|
10816
|
+
"description": "Disables component interaction when true",
|
|
10955
10817
|
"attribute": "disabled"
|
|
10956
10818
|
},
|
|
10957
10819
|
{
|
|
10958
10820
|
"kind": "field",
|
|
10959
|
-
"name": "
|
|
10821
|
+
"name": "paymentManagers",
|
|
10960
10822
|
"type": {
|
|
10961
|
-
"text": "
|
|
10823
|
+
"text": "InitializedManagersMap"
|
|
10962
10824
|
},
|
|
10963
|
-
"
|
|
10964
|
-
"default": "false",
|
|
10965
|
-
"description": "Tracks whether custom content has been provided via slot"
|
|
10825
|
+
"default": "new Map()"
|
|
10966
10826
|
},
|
|
10967
10827
|
{
|
|
10968
10828
|
"kind": "field",
|
|
10969
|
-
"name": "
|
|
10829
|
+
"name": "currentState",
|
|
10970
10830
|
"type": {
|
|
10971
|
-
"text": "
|
|
10831
|
+
"text": "BlikState"
|
|
10972
10832
|
},
|
|
10973
10833
|
"privacy": "private",
|
|
10974
|
-
"default": "
|
|
10834
|
+
"default": "'collapsed'"
|
|
10975
10835
|
},
|
|
10976
10836
|
{
|
|
10977
10837
|
"kind": "field",
|
|
10978
|
-
"name": "
|
|
10838
|
+
"name": "blikCode",
|
|
10979
10839
|
"type": {
|
|
10980
|
-
"text": "string
|
|
10840
|
+
"text": "string"
|
|
10981
10841
|
},
|
|
10982
10842
|
"privacy": "private",
|
|
10983
|
-
"default": "
|
|
10984
|
-
"description": "Form-level error message to display"
|
|
10843
|
+
"default": "''"
|
|
10985
10844
|
},
|
|
10986
10845
|
{
|
|
10987
10846
|
"kind": "field",
|
|
10988
|
-
"name": "
|
|
10847
|
+
"name": "errorMessage",
|
|
10989
10848
|
"type": {
|
|
10990
|
-
"text": "
|
|
10849
|
+
"text": "string"
|
|
10991
10850
|
},
|
|
10992
10851
|
"privacy": "private",
|
|
10993
|
-
"default": "
|
|
10994
|
-
"description": "Flag to track if PAYMENT_METHOD_SELECTION event has been sent"
|
|
10995
|
-
},
|
|
10996
|
-
{
|
|
10997
|
-
"kind": "field",
|
|
10998
|
-
"name": "paymentManagers",
|
|
10999
|
-
"type": {
|
|
11000
|
-
"text": "InitializedManagersMap"
|
|
11001
|
-
},
|
|
11002
|
-
"default": "new Map()",
|
|
11003
|
-
"description": "Payment managers injected from context",
|
|
11004
|
-
"attribute": "paymentManagers"
|
|
11005
|
-
},
|
|
11006
|
-
{
|
|
11007
|
-
"kind": "field",
|
|
11008
|
-
"name": "clientOptions",
|
|
11009
|
-
"type": {
|
|
11010
|
-
"text": "ClientOptionsContextType"
|
|
11011
|
-
},
|
|
11012
|
-
"default": "null",
|
|
11013
|
-
"description": "Client options for configuration"
|
|
11014
|
-
},
|
|
11015
|
-
{
|
|
11016
|
-
"kind": "field",
|
|
11017
|
-
"name": "headlessUtils",
|
|
11018
|
-
"type": {
|
|
11019
|
-
"text": "HeadlessUtilsContextType"
|
|
11020
|
-
},
|
|
11021
|
-
"default": "null",
|
|
11022
|
-
"description": "Headless utils for accessing server configuration"
|
|
11023
|
-
},
|
|
11024
|
-
{
|
|
11025
|
-
"kind": "field",
|
|
11026
|
-
"name": "analyticsUtils",
|
|
11027
|
-
"type": {
|
|
11028
|
-
"text": "AnalyticsContextType"
|
|
11029
|
-
},
|
|
11030
|
-
"default": "null",
|
|
11031
|
-
"description": "Analytics utils for sending analytics events"
|
|
10852
|
+
"default": "''"
|
|
11032
10853
|
},
|
|
11033
10854
|
{
|
|
11034
10855
|
"kind": "field",
|
|
11035
|
-
"name": "
|
|
10856
|
+
"name": "pollingDuration",
|
|
11036
10857
|
"type": {
|
|
11037
|
-
"text": "
|
|
10858
|
+
"text": "number"
|
|
11038
10859
|
},
|
|
11039
|
-
"default": "null",
|
|
11040
|
-
"description": "Events controller from context for receiving forwarded events"
|
|
11041
|
-
},
|
|
11042
|
-
{
|
|
11043
|
-
"kind": "field",
|
|
11044
|
-
"name": "cardFormProvider",
|
|
11045
10860
|
"privacy": "private",
|
|
11046
|
-
"
|
|
11047
|
-
"default": "new ContextProvider(this, { context: cardFormContext, initialValue: null, })",
|
|
11048
|
-
"description": "Context provider for card form data"
|
|
11049
|
-
},
|
|
11050
|
-
{
|
|
11051
|
-
"kind": "field",
|
|
11052
|
-
"name": "shouldShowCardholderName",
|
|
11053
|
-
"type": {
|
|
11054
|
-
"text": "boolean"
|
|
11055
|
-
},
|
|
11056
|
-
"description": "Determines whether to show the cardholder name field\nUses client configuration with fallback to default (true)",
|
|
11057
|
-
"readonly": true
|
|
10861
|
+
"default": "0"
|
|
11058
10862
|
},
|
|
11059
10863
|
{
|
|
11060
10864
|
"kind": "field",
|
|
11061
|
-
"name": "
|
|
10865
|
+
"name": "pollingTimer",
|
|
11062
10866
|
"type": {
|
|
11063
|
-
"text": "
|
|
10867
|
+
"text": "number | null"
|
|
11064
10868
|
},
|
|
11065
|
-
"
|
|
11066
|
-
"
|
|
10869
|
+
"privacy": "private",
|
|
10870
|
+
"default": "null"
|
|
11067
10871
|
},
|
|
11068
10872
|
{
|
|
11069
10873
|
"kind": "field",
|
|
11070
|
-
"name": "
|
|
10874
|
+
"name": "loadManagerTask",
|
|
11071
10875
|
"privacy": "private",
|
|
11072
|
-
"
|
|
11073
|
-
"
|
|
11074
|
-
"description": "Events controller for dispatching form events"
|
|
10876
|
+
"default": "new Task(this, { args: () => [this.paymentMethod?.type], task: ([type]) => { if (!type) { return initialState; } const managerEntry = this.paymentManagers.get(type); if (!managerEntry) { throw new Error('BLIK payment method manager not initialized'); } // TypeScript narrows the union type based on the payment method type check if (managerEntry.type !== 'ADYEN_BLIK') { throw new Error('Invalid payment method type for BLIK component'); } return managerEntry.manager; }, })",
|
|
10877
|
+
"description": "Manager loading task\nValidates BLIK manager exists before allowing payment flow\n\nThis Task provides reactive validation of manager availability:\n- Automatically re-runs when paymentMethod or paymentManagers change\n- Provides type-safe access to the BLIK manager\n- Enables early error detection before user interaction\n\nUnlike native payment methods (Apple Pay, Google Pay, PayPal) which use a\ntwo-task pattern (manager loading + button rendering), BLIK only needs the\nmanager loading task because it renders its own UI via Lit templates."
|
|
11075
10878
|
},
|
|
11076
10879
|
{
|
|
11077
10880
|
"kind": "field",
|
|
11078
|
-
"name": "
|
|
11079
|
-
"type": {
|
|
11080
|
-
"text": "((event: CustomEvent) => void) | null"
|
|
11081
|
-
},
|
|
10881
|
+
"name": "handleButtonClick",
|
|
11082
10882
|
"privacy": "private",
|
|
11083
|
-
"
|
|
11084
|
-
"description": "External event listener reference for cleanup"
|
|
10883
|
+
"description": "Handles button click to toggle between collapsed and expanded states"
|
|
11085
10884
|
},
|
|
11086
10885
|
{
|
|
11087
10886
|
"kind": "field",
|
|
11088
|
-
"name": "
|
|
11089
|
-
"type": {
|
|
11090
|
-
"text": "boolean"
|
|
11091
|
-
},
|
|
10887
|
+
"name": "handleCollapse",
|
|
11092
10888
|
"privacy": "private",
|
|
11093
|
-
"
|
|
11094
|
-
"description": "Flag to prevent circular event loop when handling events"
|
|
10889
|
+
"description": "Handles collapsing the form back to button-only view\nResets form state when user clicks button to collapse"
|
|
11095
10890
|
},
|
|
11096
10891
|
{
|
|
11097
10892
|
"kind": "field",
|
|
11098
|
-
"name": "
|
|
10893
|
+
"name": "handleInput",
|
|
11099
10894
|
"privacy": "private",
|
|
11100
|
-
"
|
|
11101
|
-
"default": "new Map< HostedInputType, IHostedInputController >()",
|
|
11102
|
-
"description": "Registry for input controllers to enable context-driven meta state management"
|
|
10895
|
+
"description": "Handles input changes, validates numeric input, and auto-submits on 6 digits"
|
|
11103
10896
|
},
|
|
11104
10897
|
{
|
|
11105
10898
|
"kind": "field",
|
|
11106
|
-
"name": "
|
|
10899
|
+
"name": "handleRetry",
|
|
11107
10900
|
"privacy": "private",
|
|
11108
|
-
"
|
|
11109
|
-
"default": "new Task(this, { task: ([cardManager]) => { if (!cardManager?.manager) return initialState; const { manager } = cardManager; const hostedInputs = manager.createHostedInputs(); const { cardNumberInput, expiryInput, cvvInput } = hostedInputs; this.cardFormProvider.setValue({ // Temporarily set any so we can toggle between sdk v2 and new sdk core cardholderNameInput: ( hostedInputs as { cardholderNameInput?: IHeadlessHostedInput } ).cardholderNameInput, cardNumberInput, expiryInput, cvvInput, setCardholderName: (val: string) => { manager.setCardholderName(val); if (this.shouldRequireCardholderName) { manager.validate?.().then((validationResult) => { const errors = validationResult?.validationErrors; const cardholderNameError = errors?.find( (error) => error.name === fieldToInputType.cardholderName, ); const controller = this.inputControllers.get( HostedInputType.CARD_HOLDER_NAME, ); if (controller) { controller.updateMetaFromValidation({ valid: false, error: cardholderNameError?.message || cardholderNameError?.error || null, errorCode: cardholderNameError?.message || cardholderNameError?.error || null, }); } }); } }, setCardNetwork: (val: string) => { this.selectedCardNetwork = val; }, validate: () => manager.validate(), submit: (args) => manager.submit(args), hideLabels: this.hideLabels, disabled: this.disabled, // New meta state management methods setSubmissionState: (submitted: boolean) => { this.inputControllers.forEach((controller) => { controller.setSubmitted(submitted); }); }, propagateValidationErrors: (errors: InputValidationError[]) => { if (!errors) return; errors.forEach((error) => { const fieldName = error.field || error.name; const errorMessage = error.message || error.error; const inputType = fieldToInputType[fieldName]; if (inputType) { const controller = this.inputControllers.get(inputType); if (controller) { const updateData = { valid: false, error: errorMessage, errorCode: errorMessage, // Use error message (localization key) instead of field name }; controller.updateMetaFromValidation(updateData); } } }); }, registerInputController: ( inputType: HostedInputType, controller: IHostedInputController, ) => { this.inputControllers.set(inputType, controller); }, unregisterInputController: (inputType: HostedInputType) => { this.inputControllers.delete(inputType); }, onUserInteraction: () => { this.sendPaymentMethodSelectionEvent(); this.checkAndSendPaymentDetailsEnteredEvent(); }, }); return true; }, args: () => [this.paymentManagers.get('PAYMENT_CARD')], })",
|
|
11110
|
-
"description": "Task to set up the card form with hosted inputs"
|
|
10901
|
+
"description": "Handles retry button click"
|
|
11111
10902
|
},
|
|
11112
10903
|
{
|
|
11113
10904
|
"kind": "method",
|
|
11114
|
-
"name": "
|
|
10905
|
+
"name": "startPollingTimer",
|
|
11115
10906
|
"privacy": "private",
|
|
11116
10907
|
"return": {
|
|
11117
10908
|
"type": {
|
|
11118
10909
|
"text": "void"
|
|
11119
10910
|
}
|
|
11120
10911
|
},
|
|
11121
|
-
"description": "
|
|
10912
|
+
"description": "Starts polling timer to track payment duration"
|
|
11122
10913
|
},
|
|
11123
10914
|
{
|
|
11124
10915
|
"kind": "method",
|
|
11125
|
-
"name": "
|
|
10916
|
+
"name": "stopPollingTimer",
|
|
11126
10917
|
"privacy": "private",
|
|
11127
10918
|
"return": {
|
|
11128
10919
|
"type": {
|
|
11129
10920
|
"text": "void"
|
|
11130
10921
|
}
|
|
11131
10922
|
},
|
|
11132
|
-
"description": "
|
|
11133
|
-
},
|
|
11134
|
-
{
|
|
11135
|
-
"kind": "field",
|
|
11136
|
-
"name": "paymentDetailsEnteredSent",
|
|
11137
|
-
"type": {
|
|
11138
|
-
"text": "boolean"
|
|
11139
|
-
},
|
|
11140
|
-
"privacy": "private",
|
|
11141
|
-
"default": "false"
|
|
10923
|
+
"description": "Stops and resets polling timer"
|
|
11142
10924
|
},
|
|
11143
10925
|
{
|
|
11144
10926
|
"kind": "method",
|
|
11145
|
-
"name": "
|
|
10927
|
+
"name": "submitBlikCode",
|
|
11146
10928
|
"privacy": "private",
|
|
11147
10929
|
"return": {
|
|
11148
10930
|
"type": {
|
|
11149
|
-
"text": "void"
|
|
10931
|
+
"text": "Promise<void>"
|
|
11150
10932
|
}
|
|
11151
10933
|
},
|
|
11152
|
-
"description": "
|
|
11153
|
-
},
|
|
11154
|
-
{
|
|
11155
|
-
"kind": "field",
|
|
11156
|
-
"name": "handleSlotButtonClick",
|
|
11157
|
-
"privacy": "private",
|
|
11158
|
-
"description": "Handles click events from slotted content.\nSupports both native <button> and custom <primer-button> elements."
|
|
11159
|
-
},
|
|
11160
|
-
{
|
|
11161
|
-
"kind": "field",
|
|
11162
|
-
"name": "handleDirectSubmit",
|
|
11163
|
-
"privacy": "private",
|
|
11164
|
-
"description": "Handles direct submit events from child components\nThis is a backup method to catch all possible submission events"
|
|
10934
|
+
"description": "Validates and submits the BLIK code"
|
|
11165
10935
|
},
|
|
11166
10936
|
{
|
|
11167
10937
|
"kind": "method",
|
|
11168
|
-
"name": "
|
|
10938
|
+
"name": "renderCollapsed",
|
|
11169
10939
|
"privacy": "private",
|
|
11170
10940
|
"return": {
|
|
11171
10941
|
"type": {
|
|
11172
|
-
"text": "
|
|
10942
|
+
"text": "TemplateResult"
|
|
11173
10943
|
}
|
|
11174
10944
|
},
|
|
11175
|
-
"description": "
|
|
10945
|
+
"description": "Renders the collapsed button state"
|
|
11176
10946
|
},
|
|
11177
10947
|
{
|
|
11178
10948
|
"kind": "method",
|
|
11179
|
-
"name": "
|
|
10949
|
+
"name": "renderExpandedInput",
|
|
11180
10950
|
"privacy": "private",
|
|
11181
10951
|
"return": {
|
|
11182
10952
|
"type": {
|
|
11183
|
-
"text": "
|
|
10953
|
+
"text": "TemplateResult"
|
|
11184
10954
|
}
|
|
11185
10955
|
},
|
|
11186
|
-
"description": "
|
|
11187
|
-
},
|
|
11188
|
-
{
|
|
11189
|
-
"kind": "field",
|
|
11190
|
-
"name": "handleContextCardSubmit",
|
|
11191
|
-
"privacy": "private",
|
|
11192
|
-
"description": "Handles primer:card-submit events received from the events context\nThis allows the card form to respond to external submit triggers"
|
|
10956
|
+
"description": "Renders the expanded input state"
|
|
11193
10957
|
},
|
|
11194
10958
|
{
|
|
11195
10959
|
"kind": "method",
|
|
11196
|
-
"name": "
|
|
10960
|
+
"name": "renderLoading",
|
|
11197
10961
|
"privacy": "private",
|
|
11198
10962
|
"return": {
|
|
11199
10963
|
"type": {
|
|
11200
|
-
"text": "
|
|
10964
|
+
"text": "TemplateResult"
|
|
11201
10965
|
}
|
|
11202
10966
|
},
|
|
11203
|
-
"
|
|
11204
|
-
{
|
|
11205
|
-
"name": "button",
|
|
11206
|
-
"type": {
|
|
11207
|
-
"text": "HTMLElement"
|
|
11208
|
-
}
|
|
11209
|
-
}
|
|
11210
|
-
],
|
|
11211
|
-
"description": "Determines if a button is a submit button based on its attributes"
|
|
11212
|
-
},
|
|
11213
|
-
{
|
|
11214
|
-
"kind": "field",
|
|
11215
|
-
"name": "onSlotChange",
|
|
11216
|
-
"privacy": "private",
|
|
11217
|
-
"description": "Handles slot change events to detect custom content"
|
|
10967
|
+
"description": "Renders the loading state"
|
|
11218
10968
|
},
|
|
11219
10969
|
{
|
|
11220
10970
|
"kind": "method",
|
|
11221
|
-
"name": "
|
|
10971
|
+
"name": "renderError",
|
|
11222
10972
|
"privacy": "private",
|
|
11223
10973
|
"return": {
|
|
11224
10974
|
"type": {
|
|
11225
|
-
"text": "
|
|
10975
|
+
"text": "TemplateResult"
|
|
11226
10976
|
}
|
|
11227
10977
|
},
|
|
11228
|
-
"description": "
|
|
10978
|
+
"description": "Renders the error state"
|
|
11229
10979
|
},
|
|
11230
10980
|
{
|
|
11231
|
-
"kind": "
|
|
11232
|
-
"name": "
|
|
10981
|
+
"kind": "method",
|
|
10982
|
+
"name": "renderExpandedState",
|
|
11233
10983
|
"privacy": "private",
|
|
11234
|
-
"
|
|
10984
|
+
"return": {
|
|
10985
|
+
"type": {
|
|
10986
|
+
"text": "TemplateResult | typeof nothing"
|
|
10987
|
+
}
|
|
10988
|
+
},
|
|
10989
|
+
"description": "Renders the appropriate expanded state based on current state"
|
|
10990
|
+
}
|
|
10991
|
+
],
|
|
10992
|
+
"events": [
|
|
10993
|
+
{
|
|
10994
|
+
"description": "Dispatched on successful payment",
|
|
10995
|
+
"name": "primer-payment-success"
|
|
10996
|
+
},
|
|
10997
|
+
{
|
|
10998
|
+
"description": "Dispatched on payment error",
|
|
10999
|
+
"name": "primer-payment-error"
|
|
11235
11000
|
}
|
|
11236
11001
|
],
|
|
11237
11002
|
"attributes": [
|
|
11238
11003
|
{
|
|
11239
|
-
"name": "
|
|
11004
|
+
"name": "paymentMethod",
|
|
11240
11005
|
"type": {
|
|
11241
|
-
"text": "
|
|
11006
|
+
"text": "InitializedPaymentMethod"
|
|
11242
11007
|
},
|
|
11243
|
-
"
|
|
11244
|
-
"fieldName": "
|
|
11008
|
+
"description": "Payment method configuration",
|
|
11009
|
+
"fieldName": "paymentMethod"
|
|
11245
11010
|
},
|
|
11246
11011
|
{
|
|
11247
11012
|
"name": "disabled",
|
|
@@ -11249,145 +11014,111 @@
|
|
|
11249
11014
|
"text": "boolean"
|
|
11250
11015
|
},
|
|
11251
11016
|
"default": "false",
|
|
11017
|
+
"description": "Disables component interaction when true",
|
|
11252
11018
|
"fieldName": "disabled"
|
|
11253
|
-
},
|
|
11254
|
-
{
|
|
11255
|
-
"name": "paymentManagers",
|
|
11256
|
-
"type": {
|
|
11257
|
-
"text": "InitializedManagersMap"
|
|
11258
|
-
},
|
|
11259
|
-
"default": "new Map()",
|
|
11260
|
-
"description": "Payment managers injected from context",
|
|
11261
|
-
"fieldName": "paymentManagers"
|
|
11262
11019
|
}
|
|
11263
11020
|
],
|
|
11264
11021
|
"superclass": {
|
|
11265
11022
|
"name": "LitElement",
|
|
11266
11023
|
"package": "lit"
|
|
11267
11024
|
},
|
|
11268
|
-
"tagName": "primer-
|
|
11025
|
+
"tagName": "primer-blik",
|
|
11269
11026
|
"customElement": true
|
|
11270
11027
|
}
|
|
11271
11028
|
],
|
|
11272
11029
|
"exports": [
|
|
11273
11030
|
{
|
|
11274
11031
|
"kind": "js",
|
|
11275
|
-
"name": "
|
|
11032
|
+
"name": "BlikComponent",
|
|
11276
11033
|
"declaration": {
|
|
11277
|
-
"name": "
|
|
11278
|
-
"module": "src/containers/
|
|
11034
|
+
"name": "BlikComponent",
|
|
11035
|
+
"module": "src/containers/blik/blik.component.ts"
|
|
11279
11036
|
}
|
|
11280
11037
|
},
|
|
11281
11038
|
{
|
|
11282
11039
|
"kind": "custom-element-definition",
|
|
11283
|
-
"name": "primer-
|
|
11040
|
+
"name": "primer-blik",
|
|
11284
11041
|
"declaration": {
|
|
11285
|
-
"name": "
|
|
11286
|
-
"module": "src/containers/
|
|
11042
|
+
"name": "BlikComponent",
|
|
11043
|
+
"module": "src/containers/blik/blik.component.ts"
|
|
11287
11044
|
}
|
|
11288
11045
|
}
|
|
11289
11046
|
]
|
|
11290
11047
|
},
|
|
11291
11048
|
{
|
|
11292
11049
|
"kind": "javascript-module",
|
|
11293
|
-
"path": "src/containers/
|
|
11294
|
-
"declarations": [
|
|
11050
|
+
"path": "src/containers/blik/blik.styles.ts",
|
|
11051
|
+
"declarations": [
|
|
11052
|
+
{
|
|
11053
|
+
"kind": "variable",
|
|
11054
|
+
"name": "styles",
|
|
11055
|
+
"default": "css` :host { display: flex; width: 100%; } .blik-container { width: 100%; display: flex; flex-direction: column; transition: all var(--primer-animation-duration) var(--primer-animation-easing); } .blik-container.expanded { border-radius: var(--primer-radius-medium); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); padding: var(--primer-space-large); } /* Button styles (collapsed state) */ primer-button.blik-button { width: 100%; } /* Override primer-button part styles for BLIK branding */ primer-button.blik-button::part(button) { /* BLIK brand requirement: Black background (#000000) with white logo */ background-color: #000000; border: none; color: var(--primer-color-text-primary); padding: 2px; display: flex; align-items: center; justify-content: center; gap: var(--primer-space-small); /* Fixed height for button - matches redirect payment method calculation */ height: calc( ${unsafeCSS(PAYMENT_METHOD_LINE_HEIGHT)} + calc(2 * var(--primer-space-medium)) ); flex-shrink: 0; /* Prevent button from shrinking when form appears */ } /* Image container for button logo */ .image-container { display: flex; justify-content: center; align-items: center; min-width: 100px; height: 100%; flex-shrink: 0; flex-grow: 1; } /* Button logo */ img { max-width: 100px; width: 100%; height: auto; object-fit: cover; max-height: 98%; } /* Expanded content (form, loading, error states) */ .blik-expanded-content { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); overflow: hidden; margin-top: var(--primer-space-medium); } .blik-container.expanded .blik-expanded-content { grid-template-rows: 1fr; } .blik-content-wrapper { overflow: hidden; } /* Input wrapper */ .blik-input-wrapper { display: flex; flex-direction: column; gap: var(--primer-space-small); } /* Input label */ .blik-label { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); } /* Input field */ .blik-input { width: 100%; padding: var(--primer-space-medium); font-family: var(--primer-typography-body-large-font); font-size: var(--primer-typography-body-large-size); font-weight: var(--primer-typography-body-large-weight); line-height: var(--primer-typography-body-large-line-height); /* Increase spacing between digits for better 6-digit code readability */ letter-spacing: 0.25em; text-align: center; color: var(--primer-color-text-primary); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); border-radius: var(--primer-radius-medium); outline: none; transition: border-color var(--primer-animation-duration) var(--primer-animation-easing); } .blik-input::placeholder { color: var(--primer-color-text-secondary); /* Reduce placeholder visibility to emphasize user input */ opacity: 0.5; } .blik-input:focus { border-color: var(--primer-color-border-outlined-focus); } .blik-input:disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Loading state */ .blik-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primer-space-large); padding: var(--primer-space-xlarge) var(--primer-space-medium); } /* Timeout warning */ .blik-timeout-warning { margin-top: var(--primer-space-medium); padding: var(--primer-space-small); font-size: var(--primer-typography-body-small-size); color: var(--primer-color-text-warning); text-align: center; border-radius: var(--primer-radius-small); background-color: var(--primer-color-surface-warning); } /* Error state */ .blik-error { display: flex; flex-direction: column; align-items: center; gap: var(--primer-space-medium); } .blik-error-message { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); text-align: center; } /* Retry button */ .blik-retry-button { padding: var(--primer-space-medium) var(--primer-space-large); font-family: var(--primer-typography-title-large-font); font-size: var(--primer-typography-title-large-size); font-weight: var(--primer-typography-title-large-weight); line-height: var(--primer-typography-title-large-line-height); color: var(--primer-color-background-outlined-default); background-color: var(--primer-color-brand); border: none; border-radius: var(--primer-radius-medium); cursor: pointer; outline: none; transition: filter var(--primer-animation-duration) var(--primer-animation-easing); } .blik-retry-button:hover:not(:disabled) { filter: brightness(105%); } .blik-retry-button:active:not(:disabled) { filter: brightness(98%); } .blik-retry-button:focus-visible { outline: 2px solid var(--primer-color-brand); outline-offset: 2px; } .blik-retry-button:disabled { background-color: var(--primer-color-background-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Disabled state styling */ :host([disabled]) { opacity: 0.6; cursor: not-allowed; } :host([disabled]) primer-button::part(button) { pointer-events: none; cursor: not-allowed; } :host([disabled]) img { filter: grayscale(100%); } /* Responsive typography for larger screens */ @media (min-width: 768px) { .blik-input { font-size: var(--primer-typography-title-large-size); } } `"
|
|
11056
|
+
}
|
|
11057
|
+
],
|
|
11295
11058
|
"exports": [
|
|
11296
11059
|
{
|
|
11297
11060
|
"kind": "js",
|
|
11298
|
-
"name": "
|
|
11061
|
+
"name": "styles",
|
|
11299
11062
|
"declaration": {
|
|
11300
|
-
"
|
|
11063
|
+
"name": "styles",
|
|
11064
|
+
"module": "src/containers/blik/blik.styles.ts"
|
|
11301
11065
|
}
|
|
11302
11066
|
}
|
|
11303
11067
|
]
|
|
11304
11068
|
},
|
|
11305
11069
|
{
|
|
11306
11070
|
"kind": "javascript-module",
|
|
11307
|
-
"path": "src/containers/
|
|
11071
|
+
"path": "src/containers/blik/blik.ts",
|
|
11308
11072
|
"declarations": [],
|
|
11309
11073
|
"exports": [
|
|
11310
11074
|
{
|
|
11311
11075
|
"kind": "js",
|
|
11312
|
-
"name": "
|
|
11313
|
-
"declaration": {
|
|
11314
|
-
"name": "CardFormCardNumber",
|
|
11315
|
-
"module": "./components"
|
|
11316
|
-
}
|
|
11317
|
-
},
|
|
11318
|
-
{
|
|
11319
|
-
"kind": "js",
|
|
11320
|
-
"name": "CardFormCVV",
|
|
11321
|
-
"declaration": {
|
|
11322
|
-
"name": "CardFormCVV",
|
|
11323
|
-
"module": "./components"
|
|
11324
|
-
}
|
|
11325
|
-
},
|
|
11326
|
-
{
|
|
11327
|
-
"kind": "js",
|
|
11328
|
-
"name": "CardFormExpiry",
|
|
11329
|
-
"declaration": {
|
|
11330
|
-
"name": "CardFormExpiry",
|
|
11331
|
-
"module": "./components"
|
|
11332
|
-
}
|
|
11333
|
-
},
|
|
11334
|
-
{
|
|
11335
|
-
"kind": "js",
|
|
11336
|
-
"name": "CardFormName",
|
|
11337
|
-
"declaration": {
|
|
11338
|
-
"name": "CardFormName",
|
|
11339
|
-
"module": "./components"
|
|
11340
|
-
}
|
|
11341
|
-
},
|
|
11342
|
-
{
|
|
11343
|
-
"kind": "js",
|
|
11344
|
-
"name": "CardFormSubmit",
|
|
11076
|
+
"name": "Blik",
|
|
11345
11077
|
"declaration": {
|
|
11346
|
-
"name": "
|
|
11347
|
-
"module": "
|
|
11078
|
+
"name": "BlikComponent",
|
|
11079
|
+
"module": "src/containers/blik/blik.ts"
|
|
11348
11080
|
}
|
|
11349
|
-
}
|
|
11081
|
+
}
|
|
11082
|
+
]
|
|
11083
|
+
},
|
|
11084
|
+
{
|
|
11085
|
+
"kind": "javascript-module",
|
|
11086
|
+
"path": "src/containers/card-form/card-form-context.ts",
|
|
11087
|
+
"declarations": [
|
|
11350
11088
|
{
|
|
11351
|
-
"kind": "
|
|
11352
|
-
"name": "
|
|
11353
|
-
|
|
11354
|
-
|
|
11355
|
-
|
|
11356
|
-
}
|
|
11357
|
-
},
|
|
11089
|
+
"kind": "variable",
|
|
11090
|
+
"name": "cardFormContext"
|
|
11091
|
+
}
|
|
11092
|
+
],
|
|
11093
|
+
"exports": [
|
|
11358
11094
|
{
|
|
11359
11095
|
"kind": "js",
|
|
11360
|
-
"name": "
|
|
11096
|
+
"name": "cardFormContext",
|
|
11361
11097
|
"declaration": {
|
|
11362
|
-
"name": "
|
|
11363
|
-
"module": "src/containers/card-form/card-form.ts"
|
|
11098
|
+
"name": "cardFormContext",
|
|
11099
|
+
"module": "src/containers/card-form/card-form-context.ts"
|
|
11364
11100
|
}
|
|
11365
11101
|
}
|
|
11366
11102
|
]
|
|
11367
11103
|
},
|
|
11368
11104
|
{
|
|
11369
11105
|
"kind": "javascript-module",
|
|
11370
|
-
"path": "src/containers/card-form/
|
|
11371
|
-
"declarations": [],
|
|
11372
|
-
"exports": []
|
|
11373
|
-
},
|
|
11374
|
-
{
|
|
11375
|
-
"kind": "javascript-module",
|
|
11376
|
-
"path": "src/containers/blik/blik.component.ts",
|
|
11106
|
+
"path": "src/containers/card-form/card-form.component.ts",
|
|
11377
11107
|
"declarations": [
|
|
11378
11108
|
{
|
|
11379
11109
|
"kind": "class",
|
|
11380
|
-
"description": "
|
|
11381
|
-
"name": "
|
|
11110
|
+
"description": "CardFormComponent serves as a container for card input components.\nIt handles form submission, validation, and provides context to child components.",
|
|
11111
|
+
"name": "CardFormComponent",
|
|
11382
11112
|
"members": [
|
|
11383
11113
|
{
|
|
11384
11114
|
"kind": "field",
|
|
11385
|
-
"name": "
|
|
11115
|
+
"name": "hideLabels",
|
|
11386
11116
|
"type": {
|
|
11387
|
-
"text": "
|
|
11117
|
+
"text": "boolean"
|
|
11388
11118
|
},
|
|
11389
|
-
"
|
|
11390
|
-
"attribute": "
|
|
11119
|
+
"default": "false",
|
|
11120
|
+
"attribute": "hide-labels",
|
|
11121
|
+
"reflects": true
|
|
11391
11122
|
},
|
|
11392
11123
|
{
|
|
11393
11124
|
"kind": "field",
|
|
@@ -11396,200 +11127,296 @@
|
|
|
11396
11127
|
"text": "boolean"
|
|
11397
11128
|
},
|
|
11398
11129
|
"default": "false",
|
|
11399
|
-
"description": "Disables component interaction when true",
|
|
11400
11130
|
"attribute": "disabled"
|
|
11401
11131
|
},
|
|
11402
11132
|
{
|
|
11403
11133
|
"kind": "field",
|
|
11404
|
-
"name": "
|
|
11134
|
+
"name": "hasAssignedContent",
|
|
11405
11135
|
"type": {
|
|
11406
|
-
"text": "
|
|
11136
|
+
"text": "boolean"
|
|
11407
11137
|
},
|
|
11408
|
-
"
|
|
11138
|
+
"privacy": "private",
|
|
11139
|
+
"default": "false",
|
|
11140
|
+
"description": "Tracks whether custom content has been provided via slot"
|
|
11409
11141
|
},
|
|
11410
11142
|
{
|
|
11411
11143
|
"kind": "field",
|
|
11412
|
-
"name": "
|
|
11144
|
+
"name": "selectedCardNetwork",
|
|
11413
11145
|
"type": {
|
|
11414
|
-
"text": "
|
|
11146
|
+
"text": "string | null"
|
|
11415
11147
|
},
|
|
11416
11148
|
"privacy": "private",
|
|
11417
|
-
"default": "
|
|
11149
|
+
"default": "null"
|
|
11418
11150
|
},
|
|
11419
11151
|
{
|
|
11420
11152
|
"kind": "field",
|
|
11421
|
-
"name": "
|
|
11153
|
+
"name": "formErrorMessage",
|
|
11422
11154
|
"type": {
|
|
11423
|
-
"text": "string"
|
|
11155
|
+
"text": "string | null"
|
|
11424
11156
|
},
|
|
11425
11157
|
"privacy": "private",
|
|
11426
|
-
"default": "
|
|
11158
|
+
"default": "null",
|
|
11159
|
+
"description": "Form-level error message to display"
|
|
11427
11160
|
},
|
|
11428
11161
|
{
|
|
11429
11162
|
"kind": "field",
|
|
11430
|
-
"name": "
|
|
11163
|
+
"name": "paymentMethodSelectionSent",
|
|
11431
11164
|
"type": {
|
|
11432
|
-
"text": "
|
|
11165
|
+
"text": "boolean"
|
|
11433
11166
|
},
|
|
11434
11167
|
"privacy": "private",
|
|
11435
|
-
"default": "
|
|
11168
|
+
"default": "false",
|
|
11169
|
+
"description": "Flag to track if PAYMENT_METHOD_SELECTION event has been sent"
|
|
11436
11170
|
},
|
|
11437
11171
|
{
|
|
11438
11172
|
"kind": "field",
|
|
11439
|
-
"name": "
|
|
11173
|
+
"name": "paymentManagers",
|
|
11440
11174
|
"type": {
|
|
11441
|
-
"text": "
|
|
11175
|
+
"text": "InitializedManagersMap"
|
|
11442
11176
|
},
|
|
11443
|
-
"
|
|
11444
|
-
"
|
|
11177
|
+
"default": "new Map()",
|
|
11178
|
+
"description": "Payment managers injected from context",
|
|
11179
|
+
"attribute": "paymentManagers"
|
|
11445
11180
|
},
|
|
11446
11181
|
{
|
|
11447
11182
|
"kind": "field",
|
|
11448
|
-
"name": "
|
|
11183
|
+
"name": "clientOptions",
|
|
11449
11184
|
"type": {
|
|
11450
|
-
"text": "
|
|
11185
|
+
"text": "ClientOptionsContextType"
|
|
11451
11186
|
},
|
|
11187
|
+
"default": "null",
|
|
11188
|
+
"description": "Client options for configuration"
|
|
11189
|
+
},
|
|
11190
|
+
{
|
|
11191
|
+
"kind": "field",
|
|
11192
|
+
"name": "headlessUtils",
|
|
11193
|
+
"type": {
|
|
11194
|
+
"text": "HeadlessUtilsContextType"
|
|
11195
|
+
},
|
|
11196
|
+
"default": "null",
|
|
11197
|
+
"description": "Headless utils for accessing server configuration"
|
|
11198
|
+
},
|
|
11199
|
+
{
|
|
11200
|
+
"kind": "field",
|
|
11201
|
+
"name": "analyticsUtils",
|
|
11202
|
+
"type": {
|
|
11203
|
+
"text": "AnalyticsContextType"
|
|
11204
|
+
},
|
|
11205
|
+
"default": "null",
|
|
11206
|
+
"description": "Analytics utils for sending analytics events"
|
|
11207
|
+
},
|
|
11208
|
+
{
|
|
11209
|
+
"kind": "field",
|
|
11210
|
+
"name": "contextEventsController",
|
|
11211
|
+
"type": {
|
|
11212
|
+
"text": "EventsContextType"
|
|
11213
|
+
},
|
|
11214
|
+
"default": "null",
|
|
11215
|
+
"description": "Events controller from context for receiving forwarded events"
|
|
11216
|
+
},
|
|
11217
|
+
{
|
|
11218
|
+
"kind": "field",
|
|
11219
|
+
"name": "cardFormProvider",
|
|
11452
11220
|
"privacy": "private",
|
|
11453
|
-
"
|
|
11221
|
+
"readonly": true,
|
|
11222
|
+
"default": "new ContextProvider(this, { context: cardFormContext, initialValue: null, })",
|
|
11223
|
+
"description": "Context provider for card form data"
|
|
11454
11224
|
},
|
|
11455
11225
|
{
|
|
11456
11226
|
"kind": "field",
|
|
11457
|
-
"name": "
|
|
11227
|
+
"name": "shouldShowCardholderName",
|
|
11228
|
+
"type": {
|
|
11229
|
+
"text": "boolean"
|
|
11230
|
+
},
|
|
11231
|
+
"description": "Determines whether to show the cardholder name field\nUses client configuration with fallback to default (true)",
|
|
11232
|
+
"readonly": true
|
|
11233
|
+
},
|
|
11234
|
+
{
|
|
11235
|
+
"kind": "field",
|
|
11236
|
+
"name": "shouldRequireCardholderName",
|
|
11237
|
+
"type": {
|
|
11238
|
+
"text": "boolean"
|
|
11239
|
+
},
|
|
11240
|
+
"description": "Determines whether the cardholder name field is required\nUses client configuration with fallback to default (false)",
|
|
11241
|
+
"readonly": true
|
|
11242
|
+
},
|
|
11243
|
+
{
|
|
11244
|
+
"kind": "field",
|
|
11245
|
+
"name": "eventsController",
|
|
11458
11246
|
"privacy": "private",
|
|
11459
|
-
"
|
|
11460
|
-
"
|
|
11247
|
+
"readonly": true,
|
|
11248
|
+
"default": "new PrimerEventsController(this)",
|
|
11249
|
+
"description": "Events controller for dispatching form events"
|
|
11461
11250
|
},
|
|
11462
11251
|
{
|
|
11463
11252
|
"kind": "field",
|
|
11464
|
-
"name": "
|
|
11253
|
+
"name": "_contextCardSubmitListener",
|
|
11254
|
+
"type": {
|
|
11255
|
+
"text": "((event: CustomEvent) => void) | null"
|
|
11256
|
+
},
|
|
11465
11257
|
"privacy": "private",
|
|
11466
|
-
"
|
|
11258
|
+
"default": "null",
|
|
11259
|
+
"description": "External event listener reference for cleanup"
|
|
11467
11260
|
},
|
|
11468
11261
|
{
|
|
11469
11262
|
"kind": "field",
|
|
11470
|
-
"name": "
|
|
11263
|
+
"name": "_isHandlingContextEvent",
|
|
11264
|
+
"type": {
|
|
11265
|
+
"text": "boolean"
|
|
11266
|
+
},
|
|
11471
11267
|
"privacy": "private",
|
|
11472
|
-
"
|
|
11268
|
+
"default": "false",
|
|
11269
|
+
"description": "Flag to prevent circular event loop when handling events"
|
|
11473
11270
|
},
|
|
11474
11271
|
{
|
|
11475
11272
|
"kind": "field",
|
|
11476
|
-
"name": "
|
|
11273
|
+
"name": "inputControllers",
|
|
11477
11274
|
"privacy": "private",
|
|
11478
|
-
"
|
|
11275
|
+
"readonly": true,
|
|
11276
|
+
"default": "new Map< HostedInputType, IHostedInputController >()",
|
|
11277
|
+
"description": "Registry for input controllers to enable context-driven meta state management"
|
|
11479
11278
|
},
|
|
11480
11279
|
{
|
|
11481
11280
|
"kind": "field",
|
|
11482
|
-
"name": "
|
|
11281
|
+
"name": "setupCardFormTask",
|
|
11483
11282
|
"privacy": "private",
|
|
11484
|
-
"
|
|
11283
|
+
"readonly": true,
|
|
11284
|
+
"default": "new Task(this, { task: ([cardManager]) => { if (!cardManager?.manager) return initialState; const { manager } = cardManager; const hostedInputs = manager.createHostedInputs(); const { cardNumberInput, expiryInput, cvvInput } = hostedInputs; this.cardFormProvider.setValue({ // Temporarily set any so we can toggle between sdk v2 and new sdk core cardholderNameInput: ( hostedInputs as { cardholderNameInput?: IHeadlessHostedInput } ).cardholderNameInput, cardNumberInput, expiryInput, cvvInput, setCardholderName: (val: string) => { manager.setCardholderName(val); if (this.shouldRequireCardholderName) { manager.validate?.().then((validationResult) => { const errors = validationResult?.validationErrors; const cardholderNameError = errors?.find( (error) => error.name === fieldToInputType.cardholderName, ); const controller = this.inputControllers.get( HostedInputType.CARD_HOLDER_NAME, ); if (controller) { controller.updateMetaFromValidation({ valid: false, error: cardholderNameError?.message || cardholderNameError?.error || null, errorCode: cardholderNameError?.message || cardholderNameError?.error || null, }); } }); } }, setCardNetwork: (val: string) => { this.selectedCardNetwork = val; }, validate: () => manager.validate(), submit: (args) => manager.submit(args), hideLabels: this.hideLabels, disabled: this.disabled, // New meta state management methods setSubmissionState: (submitted: boolean) => { this.inputControllers.forEach((controller) => { controller.setSubmitted(submitted); }); }, propagateValidationErrors: (errors: InputValidationError[]) => { if (!errors) return; errors.forEach((error) => { const fieldName = error.field || error.name; const errorMessage = error.message || error.error; const inputType = fieldToInputType[fieldName]; if (inputType) { const controller = this.inputControllers.get(inputType); if (controller) { const updateData = { valid: false, error: errorMessage, errorCode: errorMessage, // Use error message (localization key) instead of field name }; controller.updateMetaFromValidation(updateData); } } }); }, registerInputController: ( inputType: HostedInputType, controller: IHostedInputController, ) => { this.inputControllers.set(inputType, controller); }, unregisterInputController: (inputType: HostedInputType) => { this.inputControllers.delete(inputType); }, onUserInteraction: () => { this.sendPaymentMethodSelectionEvent(); this.checkAndSendPaymentDetailsEnteredEvent(); }, }); return true; }, args: () => [this.paymentManagers.get('PAYMENT_CARD')], })",
|
|
11285
|
+
"description": "Task to set up the card form with hosted inputs"
|
|
11485
11286
|
},
|
|
11486
11287
|
{
|
|
11487
11288
|
"kind": "method",
|
|
11488
|
-
"name": "
|
|
11289
|
+
"name": "sendPaymentMethodSelectionEvent",
|
|
11489
11290
|
"privacy": "private",
|
|
11490
11291
|
"return": {
|
|
11491
11292
|
"type": {
|
|
11492
11293
|
"text": "void"
|
|
11493
11294
|
}
|
|
11494
11295
|
},
|
|
11495
|
-
"description": "
|
|
11296
|
+
"description": "Sends PAYMENT_METHOD_SELECTION analytics event when user first interacts with card form"
|
|
11496
11297
|
},
|
|
11497
11298
|
{
|
|
11498
11299
|
"kind": "method",
|
|
11499
|
-
"name": "
|
|
11300
|
+
"name": "checkAndSendPaymentDetailsEnteredEvent",
|
|
11500
11301
|
"privacy": "private",
|
|
11501
11302
|
"return": {
|
|
11502
11303
|
"type": {
|
|
11503
11304
|
"text": "void"
|
|
11504
11305
|
}
|
|
11505
11306
|
},
|
|
11506
|
-
"description": "
|
|
11307
|
+
"description": "Checks if all required fields are filled and sends PAYMENT_DETAILS_ENTERED event"
|
|
11507
11308
|
},
|
|
11508
11309
|
{
|
|
11509
|
-
"kind": "
|
|
11510
|
-
"name": "
|
|
11511
|
-
"
|
|
11512
|
-
|
|
11513
|
-
"type": {
|
|
11514
|
-
"text": "Promise<void>"
|
|
11515
|
-
}
|
|
11310
|
+
"kind": "field",
|
|
11311
|
+
"name": "paymentDetailsEnteredSent",
|
|
11312
|
+
"type": {
|
|
11313
|
+
"text": "boolean"
|
|
11516
11314
|
},
|
|
11517
|
-
"
|
|
11315
|
+
"privacy": "private",
|
|
11316
|
+
"default": "false"
|
|
11518
11317
|
},
|
|
11519
11318
|
{
|
|
11520
11319
|
"kind": "method",
|
|
11521
|
-
"name": "
|
|
11320
|
+
"name": "sendPaymentDetailsEnteredEvent",
|
|
11522
11321
|
"privacy": "private",
|
|
11523
11322
|
"return": {
|
|
11524
11323
|
"type": {
|
|
11525
|
-
"text": "
|
|
11324
|
+
"text": "void"
|
|
11526
11325
|
}
|
|
11527
11326
|
},
|
|
11528
|
-
"description": "
|
|
11327
|
+
"description": "Sends PAYMENT_DETAILS_ENTERED analytics event when all payment details are complete and valid"
|
|
11328
|
+
},
|
|
11329
|
+
{
|
|
11330
|
+
"kind": "field",
|
|
11331
|
+
"name": "handleSlotButtonClick",
|
|
11332
|
+
"privacy": "private",
|
|
11333
|
+
"description": "Handles click events from slotted content.\nSupports both native <button> and custom <primer-button> elements."
|
|
11334
|
+
},
|
|
11335
|
+
{
|
|
11336
|
+
"kind": "field",
|
|
11337
|
+
"name": "handleDirectSubmit",
|
|
11338
|
+
"privacy": "private",
|
|
11339
|
+
"description": "Handles direct submit events from child components\nThis is a backup method to catch all possible submission events"
|
|
11529
11340
|
},
|
|
11530
11341
|
{
|
|
11531
11342
|
"kind": "method",
|
|
11532
|
-
"name": "
|
|
11343
|
+
"name": "setupContextEventListeners",
|
|
11533
11344
|
"privacy": "private",
|
|
11534
11345
|
"return": {
|
|
11535
11346
|
"type": {
|
|
11536
|
-
"text": "
|
|
11347
|
+
"text": "void"
|
|
11537
11348
|
}
|
|
11538
11349
|
},
|
|
11539
|
-
"description": "
|
|
11350
|
+
"description": "Sets up event listeners for context-forwarded events"
|
|
11540
11351
|
},
|
|
11541
11352
|
{
|
|
11542
11353
|
"kind": "method",
|
|
11543
|
-
"name": "
|
|
11354
|
+
"name": "cleanupContextEventListeners",
|
|
11544
11355
|
"privacy": "private",
|
|
11545
11356
|
"return": {
|
|
11546
11357
|
"type": {
|
|
11547
|
-
"text": "
|
|
11358
|
+
"text": "void"
|
|
11548
11359
|
}
|
|
11549
11360
|
},
|
|
11550
|
-
"description": "
|
|
11361
|
+
"description": "Cleans up context event listeners"
|
|
11362
|
+
},
|
|
11363
|
+
{
|
|
11364
|
+
"kind": "field",
|
|
11365
|
+
"name": "handleContextCardSubmit",
|
|
11366
|
+
"privacy": "private",
|
|
11367
|
+
"description": "Handles primer:card-submit events received from the events context\nThis allows the card form to respond to external submit triggers"
|
|
11551
11368
|
},
|
|
11552
11369
|
{
|
|
11553
11370
|
"kind": "method",
|
|
11554
|
-
"name": "
|
|
11371
|
+
"name": "isSubmitButton",
|
|
11555
11372
|
"privacy": "private",
|
|
11556
11373
|
"return": {
|
|
11557
11374
|
"type": {
|
|
11558
|
-
"text": "
|
|
11375
|
+
"text": "boolean"
|
|
11559
11376
|
}
|
|
11560
11377
|
},
|
|
11561
|
-
"
|
|
11378
|
+
"parameters": [
|
|
11379
|
+
{
|
|
11380
|
+
"name": "button",
|
|
11381
|
+
"type": {
|
|
11382
|
+
"text": "HTMLElement"
|
|
11383
|
+
}
|
|
11384
|
+
}
|
|
11385
|
+
],
|
|
11386
|
+
"description": "Determines if a button is a submit button based on its attributes"
|
|
11387
|
+
},
|
|
11388
|
+
{
|
|
11389
|
+
"kind": "field",
|
|
11390
|
+
"name": "onSlotChange",
|
|
11391
|
+
"privacy": "private",
|
|
11392
|
+
"description": "Handles slot change events to detect custom content"
|
|
11562
11393
|
},
|
|
11563
11394
|
{
|
|
11564
11395
|
"kind": "method",
|
|
11565
|
-
"name": "
|
|
11396
|
+
"name": "submitCardPayment",
|
|
11566
11397
|
"privacy": "private",
|
|
11567
11398
|
"return": {
|
|
11568
11399
|
"type": {
|
|
11569
|
-
"text": "
|
|
11400
|
+
"text": "Promise<void>"
|
|
11570
11401
|
}
|
|
11571
11402
|
},
|
|
11572
|
-
"description": "
|
|
11573
|
-
}
|
|
11574
|
-
],
|
|
11575
|
-
"events": [
|
|
11576
|
-
{
|
|
11577
|
-
"description": "Dispatched on successful payment",
|
|
11578
|
-
"name": "primer-payment-success"
|
|
11403
|
+
"description": "Handles the card form submission.\nValidates the form and dispatches either a submit success or errors event."
|
|
11579
11404
|
},
|
|
11580
11405
|
{
|
|
11581
|
-
"
|
|
11582
|
-
"name": "
|
|
11406
|
+
"kind": "field",
|
|
11407
|
+
"name": "handleFormSubmit",
|
|
11408
|
+
"privacy": "private",
|
|
11409
|
+
"description": "Event handler for form submission\nHandles both native form submissions and custom events"
|
|
11583
11410
|
}
|
|
11584
11411
|
],
|
|
11585
11412
|
"attributes": [
|
|
11586
11413
|
{
|
|
11587
|
-
"name": "
|
|
11414
|
+
"name": "hide-labels",
|
|
11588
11415
|
"type": {
|
|
11589
|
-
"text": "
|
|
11416
|
+
"text": "boolean"
|
|
11590
11417
|
},
|
|
11591
|
-
"
|
|
11592
|
-
"fieldName": "
|
|
11418
|
+
"default": "false",
|
|
11419
|
+
"fieldName": "hideLabels"
|
|
11593
11420
|
},
|
|
11594
11421
|
{
|
|
11595
11422
|
"name": "disabled",
|
|
@@ -11597,73 +11424,128 @@
|
|
|
11597
11424
|
"text": "boolean"
|
|
11598
11425
|
},
|
|
11599
11426
|
"default": "false",
|
|
11600
|
-
"description": "Disables component interaction when true",
|
|
11601
11427
|
"fieldName": "disabled"
|
|
11428
|
+
},
|
|
11429
|
+
{
|
|
11430
|
+
"name": "paymentManagers",
|
|
11431
|
+
"type": {
|
|
11432
|
+
"text": "InitializedManagersMap"
|
|
11433
|
+
},
|
|
11434
|
+
"default": "new Map()",
|
|
11435
|
+
"description": "Payment managers injected from context",
|
|
11436
|
+
"fieldName": "paymentManagers"
|
|
11602
11437
|
}
|
|
11603
11438
|
],
|
|
11604
11439
|
"superclass": {
|
|
11605
11440
|
"name": "LitElement",
|
|
11606
11441
|
"package": "lit"
|
|
11607
11442
|
},
|
|
11608
|
-
"tagName": "primer-
|
|
11443
|
+
"tagName": "primer-card-form",
|
|
11609
11444
|
"customElement": true
|
|
11610
11445
|
}
|
|
11611
11446
|
],
|
|
11612
11447
|
"exports": [
|
|
11613
11448
|
{
|
|
11614
11449
|
"kind": "js",
|
|
11615
|
-
"name": "
|
|
11450
|
+
"name": "CardFormComponent",
|
|
11616
11451
|
"declaration": {
|
|
11617
|
-
"name": "
|
|
11618
|
-
"module": "src/containers/
|
|
11452
|
+
"name": "CardFormComponent",
|
|
11453
|
+
"module": "src/containers/card-form/card-form.component.ts"
|
|
11619
11454
|
}
|
|
11620
11455
|
},
|
|
11621
11456
|
{
|
|
11622
11457
|
"kind": "custom-element-definition",
|
|
11623
|
-
"name": "primer-
|
|
11458
|
+
"name": "primer-card-form",
|
|
11624
11459
|
"declaration": {
|
|
11625
|
-
"name": "
|
|
11626
|
-
"module": "src/containers/
|
|
11460
|
+
"name": "CardFormComponent",
|
|
11461
|
+
"module": "src/containers/card-form/card-form.component.ts"
|
|
11627
11462
|
}
|
|
11628
11463
|
}
|
|
11629
11464
|
]
|
|
11630
11465
|
},
|
|
11631
11466
|
{
|
|
11632
11467
|
"kind": "javascript-module",
|
|
11633
|
-
"path": "src/containers/
|
|
11634
|
-
"declarations": [
|
|
11635
|
-
{
|
|
11636
|
-
"kind": "variable",
|
|
11637
|
-
"name": "styles",
|
|
11638
|
-
"default": "css` :host { display: flex; width: 100%; } .blik-container { width: 100%; display: flex; flex-direction: column; transition: all var(--primer-animation-duration) var(--primer-animation-easing); } .blik-container.expanded { border-radius: var(--primer-radius-medium); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); padding: var(--primer-space-large); } /* Button styles (collapsed state) */ primer-button.blik-button { width: 100%; } /* Override primer-button part styles for BLIK branding */ primer-button.blik-button::part(button) { /* BLIK brand requirement: Black background (#000000) with white logo */ background-color: #000000; border: none; color: var(--primer-color-text-primary); padding: 2px; display: flex; align-items: center; justify-content: center; gap: var(--primer-space-small); /* Fixed height for button - matches redirect payment method calculation */ height: calc( ${unsafeCSS(PAYMENT_METHOD_LINE_HEIGHT)} + calc(2 * var(--primer-space-medium)) ); flex-shrink: 0; /* Prevent button from shrinking when form appears */ } /* Image container for button logo */ .image-container { display: flex; justify-content: center; align-items: center; min-width: 100px; height: 100%; flex-shrink: 0; flex-grow: 1; } /* Button logo */ img { max-width: 100px; width: 100%; height: auto; object-fit: cover; max-height: 98%; } /* Expanded content (form, loading, error states) */ .blik-expanded-content { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); overflow: hidden; margin-top: var(--primer-space-medium); } .blik-container.expanded .blik-expanded-content { grid-template-rows: 1fr; } .blik-content-wrapper { overflow: hidden; } /* Input wrapper */ .blik-input-wrapper { display: flex; flex-direction: column; gap: var(--primer-space-small); } /* Input label */ .blik-label { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); } /* Input field */ .blik-input { width: 100%; padding: var(--primer-space-medium); font-family: var(--primer-typography-body-large-font); font-size: var(--primer-typography-body-large-size); font-weight: var(--primer-typography-body-large-weight); line-height: var(--primer-typography-body-large-line-height); /* Increase spacing between digits for better 6-digit code readability */ letter-spacing: 0.25em; text-align: center; color: var(--primer-color-text-primary); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); border-radius: var(--primer-radius-medium); outline: none; transition: border-color var(--primer-animation-duration) var(--primer-animation-easing); } .blik-input::placeholder { color: var(--primer-color-text-secondary); /* Reduce placeholder visibility to emphasize user input */ opacity: 0.5; } .blik-input:focus { border-color: var(--primer-color-border-outlined-focus); } .blik-input:disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Loading state */ .blik-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primer-space-large); padding: var(--primer-space-xlarge) var(--primer-space-medium); } /* Timeout warning */ .blik-timeout-warning { margin-top: var(--primer-space-medium); padding: var(--primer-space-small); font-size: var(--primer-typography-body-small-size); color: var(--primer-color-text-warning); text-align: center; border-radius: var(--primer-radius-small); background-color: var(--primer-color-surface-warning); } /* Error state */ .blik-error { display: flex; flex-direction: column; align-items: center; gap: var(--primer-space-medium); } .blik-error-message { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); text-align: center; } /* Retry button */ .blik-retry-button { padding: var(--primer-space-medium) var(--primer-space-large); font-family: var(--primer-typography-title-large-font); font-size: var(--primer-typography-title-large-size); font-weight: var(--primer-typography-title-large-weight); line-height: var(--primer-typography-title-large-line-height); color: var(--primer-color-background-outlined-default); background-color: var(--primer-color-brand); border: none; border-radius: var(--primer-radius-medium); cursor: pointer; outline: none; transition: filter var(--primer-animation-duration) var(--primer-animation-easing); } .blik-retry-button:hover:not(:disabled) { filter: brightness(105%); } .blik-retry-button:active:not(:disabled) { filter: brightness(98%); } .blik-retry-button:focus-visible { outline: 2px solid var(--primer-color-brand); outline-offset: 2px; } .blik-retry-button:disabled { background-color: var(--primer-color-background-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Disabled state styling */ :host([disabled]) { opacity: 0.6; cursor: not-allowed; } :host([disabled]) primer-button::part(button) { pointer-events: none; cursor: not-allowed; } :host([disabled]) img { filter: grayscale(100%); } /* Responsive typography for larger screens */ @media (min-width: 768px) { .blik-input { font-size: var(--primer-typography-title-large-size); } } `"
|
|
11639
|
-
}
|
|
11640
|
-
],
|
|
11468
|
+
"path": "src/containers/card-form/card-form.styles.ts",
|
|
11469
|
+
"declarations": [],
|
|
11641
11470
|
"exports": [
|
|
11642
11471
|
{
|
|
11643
11472
|
"kind": "js",
|
|
11644
|
-
"name": "
|
|
11473
|
+
"name": "default",
|
|
11645
11474
|
"declaration": {
|
|
11646
|
-
"
|
|
11647
|
-
"module": "src/containers/blik/blik.styles.ts"
|
|
11475
|
+
"module": "src/containers/card-form/card-form.styles.ts"
|
|
11648
11476
|
}
|
|
11649
11477
|
}
|
|
11650
11478
|
]
|
|
11651
11479
|
},
|
|
11652
11480
|
{
|
|
11653
11481
|
"kind": "javascript-module",
|
|
11654
|
-
"path": "src/containers/
|
|
11482
|
+
"path": "src/containers/card-form/card-form.ts",
|
|
11655
11483
|
"declarations": [],
|
|
11656
11484
|
"exports": [
|
|
11657
11485
|
{
|
|
11658
11486
|
"kind": "js",
|
|
11659
|
-
"name": "
|
|
11487
|
+
"name": "CardFormCardNumber",
|
|
11660
11488
|
"declaration": {
|
|
11661
|
-
"name": "
|
|
11662
|
-
"module": "
|
|
11489
|
+
"name": "CardFormCardNumber",
|
|
11490
|
+
"module": "./components"
|
|
11491
|
+
}
|
|
11492
|
+
},
|
|
11493
|
+
{
|
|
11494
|
+
"kind": "js",
|
|
11495
|
+
"name": "CardFormCVV",
|
|
11496
|
+
"declaration": {
|
|
11497
|
+
"name": "CardFormCVV",
|
|
11498
|
+
"module": "./components"
|
|
11499
|
+
}
|
|
11500
|
+
},
|
|
11501
|
+
{
|
|
11502
|
+
"kind": "js",
|
|
11503
|
+
"name": "CardFormExpiry",
|
|
11504
|
+
"declaration": {
|
|
11505
|
+
"name": "CardFormExpiry",
|
|
11506
|
+
"module": "./components"
|
|
11507
|
+
}
|
|
11508
|
+
},
|
|
11509
|
+
{
|
|
11510
|
+
"kind": "js",
|
|
11511
|
+
"name": "CardFormName",
|
|
11512
|
+
"declaration": {
|
|
11513
|
+
"name": "CardFormName",
|
|
11514
|
+
"module": "./components"
|
|
11515
|
+
}
|
|
11516
|
+
},
|
|
11517
|
+
{
|
|
11518
|
+
"kind": "js",
|
|
11519
|
+
"name": "CardFormSubmit",
|
|
11520
|
+
"declaration": {
|
|
11521
|
+
"name": "CardFormSubmit",
|
|
11522
|
+
"module": "./components"
|
|
11523
|
+
}
|
|
11524
|
+
},
|
|
11525
|
+
{
|
|
11526
|
+
"kind": "js",
|
|
11527
|
+
"name": "CardFormCardNetworkSelector",
|
|
11528
|
+
"declaration": {
|
|
11529
|
+
"name": "CardFormCardNetworkSelector",
|
|
11530
|
+
"module": "./components"
|
|
11531
|
+
}
|
|
11532
|
+
},
|
|
11533
|
+
{
|
|
11534
|
+
"kind": "js",
|
|
11535
|
+
"name": "CardForm",
|
|
11536
|
+
"declaration": {
|
|
11537
|
+
"name": "CardFormComponent",
|
|
11538
|
+
"module": "src/containers/card-form/card-form.ts"
|
|
11663
11539
|
}
|
|
11664
11540
|
}
|
|
11665
11541
|
]
|
|
11666
11542
|
},
|
|
11543
|
+
{
|
|
11544
|
+
"kind": "javascript-module",
|
|
11545
|
+
"path": "src/containers/card-form/types.ts",
|
|
11546
|
+
"declarations": [],
|
|
11547
|
+
"exports": []
|
|
11548
|
+
},
|
|
11667
11549
|
{
|
|
11668
11550
|
"kind": "javascript-module",
|
|
11669
11551
|
"path": "src/containers/dynamic-payment/dynamic-payment.component.ts",
|
|
@@ -14328,7 +14210,7 @@
|
|
|
14328
14210
|
},
|
|
14329
14211
|
{
|
|
14330
14212
|
"kind": "method",
|
|
14331
|
-
"name": "
|
|
14213
|
+
"name": "createVaultedPaymentsArray",
|
|
14332
14214
|
"privacy": "private",
|
|
14333
14215
|
"return": {
|
|
14334
14216
|
"type": {
|