@paynext/sdk 0.0.95 → 0.0.96
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/README.md +40 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +6 -6
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -52,7 +52,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
52
52
|
|
|
53
53
|
💡 Note:
|
|
54
54
|
If "Actual parallel execution time" ≈ "Longest button init" → buttons load in parallel ✅
|
|
55
|
-
If "Actual parallel execution time" ≈ "Sum of durations" → buttons load sequentially ⚠️`,"color: #666;"),console.groupEnd()}init(){return Y(this,null,function*(){this.config.state.transaction.subscribe(()=>{this.config.service.ev.isReady&&this.initPaymentMethods().catch(console.error)}),this.config.state.checkout.subscribe(()=>{this.config.service.ev.isReady&&this.initPaymentMethods().catch(console.error)}),this.config.service.ev.addEventListener("ready",()=>{this.initPaymentMethods().catch(console.error)})})}initApple(t){return Y(this,null,function*(){const e=performance.now(),r="Apple Pay";if(!this.applePay){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isAppleReady=!1;try{if(yield this.applePay.init({onError:i=>{this.events.error.emit(i),t==null||t.remove(),this.attempted.delete(K.APPLE_PAY)},onCancel:()=>{this.events.cancel.emit(),this.attempted.delete(K.APPLE_PAY)},onSuccess:i=>{this.events.success.emit(J(H({},i),{type:"apple"})),this.attempted.delete(K.APPLE_PAY)}})){const i=this.applePay.render();t==null||t.appendChild(i);const s=()=>{this.attempted.has(K.APPLE_PAY)||(this.attempted.add(K.APPLE_PAY),this.events.onPaymentAttempt.emit(K.APPLE_PAY))};i.addEventListener("pointerdown",s,{capture:!0}),i.addEventListener("click",s,{capture:!0}),i.addEventListener("keydown",c=>{((c==null?void 0:c.key)==="Enter"||(c==null?void 0:c.key)===" ")&&s()},{capture:!0}),i.addEventListener("focusin",s,{capture:!0}),t==null||t.addEventListener("pointerdown",s,{capture:!0}),t==null||t.addEventListener("click",s,{capture:!0}),t==null||t.addEventListener("focusin",s,{capture:!0});const o=performance.now();this.performanceMetrics.set(r,{start:e,end:o,duration:o-e,status:"✓ Rendered"})}else{t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Not supported"})}}catch(a){console.error(a),t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isAppleReady=!0}})}initGoogle(t){return Y(this,null,function*(){const e=performance.now(),r="Google Pay";if(!this.googlePay){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isGoogleReady=!1;try{if(yield this.googlePay.init({onError:i=>{this.events.error.emit(i),t==null||t.remove(),this.attempted.delete(K.GOOGLE_PAY)},onCancel:()=>{this.events.cancel.emit(),this.attempted.delete(K.GOOGLE_PAY)},onSuccess:i=>{this.events.success.emit(J(H({},i),{type:"google"})),this.attempted.delete(K.GOOGLE_PAY)}})){const i=this.googlePay.render();t==null||t.appendChild(i);const s=()=>{this.attempted.has(K.GOOGLE_PAY)||(this.attempted.add(K.GOOGLE_PAY),this.events.onPaymentAttempt.emit(K.GOOGLE_PAY))};i.addEventListener("pointerdown",s,{capture:!0}),i.addEventListener("click",s,{capture:!0}),i.addEventListener("keydown",c=>{((c==null?void 0:c.key)==="Enter"||(c==null?void 0:c.key)===" ")&&s()},{capture:!0}),i.addEventListener("focusin",s,{capture:!0}),t==null||t.addEventListener("pointerdown",s,{capture:!0}),t==null||t.addEventListener("click",s,{capture:!0}),t==null||t.addEventListener("focusin",s,{capture:!0});const o=performance.now();this.performanceMetrics.set(r,{start:e,end:o,duration:o-e,status:"✓ Rendered"})}else{t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Not supported"})}}catch(a){console.error(a),t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isGoogleReady=!0}})}initPayPal(t){return Y(this,null,function*(){const e=performance.now(),r="PayPal";if(!this.paypal){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isPayPalReady=!1;try{const a=this.paypal.render();if(t==null||t.appendChild(a),yield this.paypal.init({onError:s=>{this.events.error.emit(s),this.attempted.delete(K.PAYPAL)},onCancel:()=>{this.events.cancel.emit(),this.attempted.delete(K.PAYPAL)},onSuccess:s=>{this.events.success.emit({paypalId:s,type:"paypal"}),this.attempted.delete(K.PAYPAL)}})){const s=performance.now();this.performanceMetrics.set(r,{start:e,end:s,duration:s-e,status:"✓ Rendered"})}else{t==null||t.remove();const s=performance.now();this.performanceMetrics.set(r,{start:e,end:s,duration:s-e,status:"✗ Not supported"})}}catch(a){t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isPayPalReady=!0}})}initBraintreeVenmo(t){return Y(this,null,function*(){const e=performance.now(),r="Venmo";if(!this.braintree){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isBraintreeReady=!1;try{if(yield this.braintree.init({onError:i=>{this.events.error.emit(i),t==null||t.remove()},onCancel:()=>this.events.cancel.emit(),onSuccess:i=>{this.events.success.emit({nonce:i==null?void 0:i.nonce,type:"venmo"})}})){const i=this.braintree.render();t==null||t.appendChild(i);const s=performance.now();this.performanceMetrics.set(r,{start:e,end:s,duration:s-e,status:"✓ Rendered"})}else{t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Not supported"})}}catch(a){console.error(a),t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isBraintreeReady=!0}})}initCard(t){return Y(this,null,function*(){const e=performance.now(),r="Card";if(!this.card){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}t==null||t.appendChild(this.card.render());const a=performance.now();this.performanceMetrics.set(r,{start:e,end:a,duration:a-e,status:"✓ Rendered"})})}waitForElementVisible(t,e=150){return!t||!(t instanceof HTMLElement)?Promise.resolve():new Promise(r=>{const a=performance.now(),i=()=>{const s=t.getBoundingClientRect();if(s.width>0&&s.height>0||performance.now()-a>=e)return r();requestAnimationFrame(i)};requestAnimationFrame(i)})}initPaymentMethods(){return Y(this,null,function*(){const t=this.config.state.transaction.getState(),e=Vc(Rc,(t==null?void 0:t.checkout_config)||[],(h,p)=>h.type===p.type),r=this.config.state.checkout.getState();let a=e.filter(({is_active:h})=>h);(r==null?void 0:r.variant)==="default"&&(a=a.filter(({type:h})=>h!==K.CARD)),this.initializeButtonInstances(a),this.buttons.innerHTML="";const i=a.sort((h,p)=>h.order-p.order),s=new Map;for(const{type:h}of i){const p=document.createElement("div");this.buttons.appendChild(p),s.set(h,p)}const o=performance.now(),c=i.map(({type:h})=>{const p=s.get(h);switch(h){case K.APPLE_PAY:return this.initApple(p);case K.GOOGLE_PAY:return this.initGoogle(p);case K.PAYPAL:return this.initPayPal(p);case K.VENMO:return this.initBraintreeVenmo(p);case K.CARD:return this.initCard(p);default:throw new Error("Unknown button type")}});yield Promise.all(c);const l=performance.now(),d=l-o;this.performanceMetrics.set("__parallel_total__",{start:o,end:l,duration:d,status:"Parallel execution"});const u=[];for(const h of s.values()){const p=h.firstElementChild;p&&u.push(this.waitForElementVisible(p))}yield Promise.all(u),this.handleReady()})}initializeButtonInstances(t){const e=t.map(({type:r})=>r);e.includes(K.APPLE_PAY)&&!this.applePay&&(this.applePay=new Pc(this.config)),e.includes(K.GOOGLE_PAY)&&!this.googlePay&&(this.googlePay=new kc(this.config)),e.includes(K.PAYPAL)&&!this.paypal&&(this.paypal=new Sc(this.config),this.paypal.addEventListener("onPaymentAttempt",r=>this.events.onPaymentAttempt.emit(r))),e.includes(K.VENMO)&&!this.braintree&&(this.braintree=new Bc(this.config),this.braintree.addEventListener("onPaymentAttempt",r=>this.events.onPaymentAttempt.emit(r))),e.includes(K.CARD)&&!this.card&&(this.card=new Dc(this.config),this.card.addEventListener(()=>{this.events.open.emit()}))}handleReady(){this.isAppleReady&&this.isGoogleReady&&this.isPayPalReady&&this.isBraintreeReady&&(this.logPerformanceMetrics(),this.events.ready.emit())}addEventListener(t,e){return this.events[t].addListener(e)}showButton(){this.buttons.classList.remove(yn.hidden)}render(){return this.buttons}}class jc{constructor(){C(this,"template",`
|
|
55
|
+
If "Actual parallel execution time" ≈ "Sum of durations" → buttons load sequentially ⚠️`,"color: #666;"),console.groupEnd()}init(){return Y(this,null,function*(){this.config.state.transaction.subscribe(()=>{this.config.service.ev.isReady&&this.initPaymentMethods().catch(console.error)}),this.config.state.checkout.subscribe(()=>{this.config.service.ev.isReady&&this.initPaymentMethods().catch(console.error)}),this.config.service.ev.addEventListener("ready",()=>{this.initPaymentMethods().catch(console.error)})})}initApple(t){return Y(this,null,function*(){const e=performance.now(),r="Apple Pay";if(!this.applePay){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isAppleReady=!1;try{if(yield this.applePay.init({onError:i=>{this.events.error.emit(i),t==null||t.remove(),this.attempted.delete(K.APPLE_PAY)},onCancel:()=>{this.events.cancel.emit(),this.attempted.delete(K.APPLE_PAY)},onSuccess:i=>{this.events.success.emit(J(H({},i),{type:"apple"})),this.attempted.delete(K.APPLE_PAY)}})){const i=this.applePay.render();t==null||t.appendChild(i);const s=()=>{this.attempted.has(K.APPLE_PAY)||(this.attempted.add(K.APPLE_PAY),this.events.onPaymentAttempt.emit(K.APPLE_PAY))};i.addEventListener("pointerdown",s,{capture:!0}),i.addEventListener("click",s,{capture:!0}),i.addEventListener("keydown",c=>{((c==null?void 0:c.key)==="Enter"||(c==null?void 0:c.key)===" ")&&s()},{capture:!0}),i.addEventListener("focusin",s,{capture:!0}),t==null||t.addEventListener("pointerdown",s,{capture:!0}),t==null||t.addEventListener("click",s,{capture:!0}),t==null||t.addEventListener("focusin",s,{capture:!0});const o=performance.now();this.performanceMetrics.set(r,{start:e,end:o,duration:o-e,status:"✓ Rendered"})}else{t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Not supported"})}}catch(a){console.error(a),t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isAppleReady=!0}})}initGoogle(t){return Y(this,null,function*(){const e=performance.now(),r="Google Pay";if(!this.googlePay){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isGoogleReady=!1;try{if(yield this.googlePay.init({onError:i=>{this.events.error.emit(i),t==null||t.remove(),this.attempted.delete(K.GOOGLE_PAY)},onCancel:()=>{this.events.cancel.emit(),this.attempted.delete(K.GOOGLE_PAY)},onSuccess:i=>{this.events.success.emit(J(H({},i),{type:"google"})),this.attempted.delete(K.GOOGLE_PAY)}})){const i=this.googlePay.render();t==null||t.appendChild(i);const s=()=>{this.attempted.has(K.GOOGLE_PAY)||(this.attempted.add(K.GOOGLE_PAY),this.events.onPaymentAttempt.emit(K.GOOGLE_PAY))};i.addEventListener("pointerdown",s,{capture:!0}),i.addEventListener("click",s,{capture:!0}),i.addEventListener("keydown",c=>{((c==null?void 0:c.key)==="Enter"||(c==null?void 0:c.key)===" ")&&s()},{capture:!0}),i.addEventListener("focusin",s,{capture:!0}),t==null||t.addEventListener("pointerdown",s,{capture:!0}),t==null||t.addEventListener("click",s,{capture:!0}),t==null||t.addEventListener("focusin",s,{capture:!0});const o=performance.now();this.performanceMetrics.set(r,{start:e,end:o,duration:o-e,status:"✓ Rendered"})}else{t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Not supported"})}}catch(a){console.error(a),t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isGoogleReady=!0}})}initPayPal(t){return Y(this,null,function*(){const e=performance.now(),r="PayPal";if(!this.paypal){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isPayPalReady=!1;try{const a=this.paypal.render();if(t==null||t.appendChild(a),yield this.paypal.init({onError:s=>{this.events.error.emit(s),this.attempted.delete(K.PAYPAL)},onCancel:()=>{this.events.cancel.emit(),this.attempted.delete(K.PAYPAL)},onSuccess:s=>{this.events.success.emit({paypalId:s,type:"paypal"}),this.attempted.delete(K.PAYPAL)}})){const s=performance.now();this.performanceMetrics.set(r,{start:e,end:s,duration:s-e,status:"✓ Rendered"})}else{t==null||t.remove();const s=performance.now();this.performanceMetrics.set(r,{start:e,end:s,duration:s-e,status:"✗ Not supported"})}}catch(a){t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isPayPalReady=!0}})}initBraintreeVenmo(t){return Y(this,null,function*(){const e=performance.now(),r="Venmo";if(!this.braintree){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}this.isBraintreeReady=!1;try{if(yield this.braintree.init({onError:i=>{this.events.error.emit(i),t==null||t.remove()},onCancel:()=>this.events.cancel.emit(),onSuccess:i=>{this.events.success.emit({nonce:i==null?void 0:i.nonce,type:"venmo"})}})){const i=this.braintree.render();t==null||t.appendChild(i);const s=performance.now();this.performanceMetrics.set(r,{start:e,end:s,duration:s-e,status:"✓ Rendered"})}else{t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Not supported"})}}catch(a){console.error(a),t==null||t.remove();const i=performance.now();this.performanceMetrics.set(r,{start:e,end:i,duration:i-e,status:"✗ Error"})}finally{this.isBraintreeReady=!0}})}initCard(t){return Y(this,null,function*(){const e=performance.now(),r="Card";if(!this.card){t==null||t.remove(),this.performanceMetrics.set(r,{start:e,end:performance.now(),duration:performance.now()-e,status:"Skipped (not configured)"});return}t==null||t.appendChild(this.card.render());const a=performance.now();this.performanceMetrics.set(r,{start:e,end:a,duration:a-e,status:"✓ Rendered"})})}waitForElementVisible(t,e=150){return!t||!(t instanceof HTMLElement)?Promise.resolve():new Promise(r=>{const a=performance.now(),i=()=>{const s=t.getBoundingClientRect();if(s.width>0&&s.height>0||performance.now()-a>=e)return r();requestAnimationFrame(i)};requestAnimationFrame(i)})}initPaymentMethods(){return Y(this,null,function*(){const t=this.config.state.transaction.getState(),e=Vc(Rc,(t==null?void 0:t.checkout_config)||[],(h,p)=>h.type===p.type),r=this.config.state.checkout.getState();let a=e.filter(({is_active:h})=>h);(r==null?void 0:r.variant)==="default"&&(a=a.filter(({type:h})=>h!==K.CARD)),this.initializeButtonInstances(a),this.buttons.innerHTML="";const i=a.sort((h,p)=>h.order-p.order),s=new Map;for(const{type:h}of i){const p=document.createElement("div");this.buttons.appendChild(p),s.set(h,p)}const o=performance.now(),c=i.map(({type:h})=>{const p=s.get(h);switch(h){case K.APPLE_PAY:return this.initApple(p);case K.GOOGLE_PAY:return this.initGoogle(p);case K.PAYPAL:return this.initPayPal(p);case K.VENMO:return this.initBraintreeVenmo(p);case K.CARD:return this.initCard(p);default:throw new Error("Unknown button type")}});yield Promise.all(c);const l=performance.now(),d=l-o;this.performanceMetrics.set("__parallel_total__",{start:o,end:l,duration:d,status:"Parallel execution"});const u=[];for(const h of s.values()){const p=h.firstElementChild;p&&u.push(this.waitForElementVisible(p))}yield Promise.all(u),this.handleReady()})}initializeButtonInstances(t){const e=t.map(({type:r})=>r);e.includes(K.APPLE_PAY)&&!this.applePay&&(this.applePay=new Pc(this.config)),e.includes(K.GOOGLE_PAY)&&!this.googlePay&&(this.googlePay=new kc(this.config)),e.includes(K.PAYPAL)&&!this.paypal&&(this.paypal=new Sc(this.config),this.paypal.addEventListener("onPaymentAttempt",r=>this.events.onPaymentAttempt.emit(r))),e.includes(K.VENMO)&&!this.braintree&&(this.braintree=new Bc(this.config),this.braintree.addEventListener("onPaymentAttempt",r=>this.events.onPaymentAttempt.emit(r))),e.includes(K.CARD)&&!this.card&&(this.card=new Dc(this.config),this.card.addEventListener(()=>{this.events.open.emit()}))}handleReady(){this.isAppleReady&&this.isGoogleReady&&this.isPayPalReady&&this.isBraintreeReady&&(this.logPerformanceMetrics(),this.events.ready.emit())}addEventListener(t,e){return this.events[t].addListener(e)}showButton(){this.buttons.classList.remove(yn.hidden)}render(){return this.buttons}}class jc{constructor(t){C(this,"template",`
|
|
56
56
|
<svg
|
|
57
57
|
xmlns='http://www.w3.org/2000/svg'
|
|
58
58
|
width='24'
|
|
@@ -68,7 +68,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
68
68
|
<polyline points='15 18 9 12 15 6'></polyline>
|
|
69
69
|
</svg>
|
|
70
70
|
<span class="${te.srOnly}">Back</span>
|
|
71
|
-
`);C(this,"element",document.createElement("div"));this.element.classList.add(te.backButton),this.element.innerHTML=this.template}render(){return this.element}}const Hc={button:"_button_125my_1"};class Kc{constructor(){C(this,"element");C(this,"icon"
|
|
71
|
+
`);C(this,"element",document.createElement("div"));this.element.classList.add(te.backButton),t!=null&&t.className&&this.element.classList.add(t.className),t!=null&&t.styles&&Object.assign(this.element.style,t.styles),this.element.innerHTML=this.template}render(){return this.element}}const Hc={button:"_button_125my_1"};class Kc{constructor(t){C(this,"element");C(this,"icon");this.element=document.createElement("div"),this.element.classList.add(Hc.button),this.icon=new jc(t),this.element.appendChild(this.icon.render())}addEventListener(t){return this.element.addEventListener("click",t)}render(){return this.element}}const Te={button:"_button_1lwej_1",disabled:"_disabled_1lwej_18",press:"_press_1lwej_28",hidden:"_hidden_1lwej_32",spinner:"_spinner_1lwej_36"};class Wc{constructor(t,e){C(this,"element");C(this,"spinner",new ui);C(this,"message",document.createElement("span"));C(this,"iconElement");this.element=document.createElement("button"),this.element.setAttribute("type","button"),this.element.classList.add(Te.button,Te.press),e!=null&&e.className&&this.element.classList.add(e.className),e!=null&&e.styles&&Object.assign(this.element.style,e.styles),e!=null&&e.iconSvg&&(this.iconElement=document.createElement("div"),this.iconElement.classList.add(te.card),this.iconElement.innerHTML=e.iconSvg),this.spinner.addClass(Te.spinner),this.spinner.addClass(Te.hidden),this.message.textContent=t.messages().card.pay.button,this.element.append(this.spinner.render()),this.iconElement&&this.element.append(this.iconElement),this.element.append(this.message),t.subscribe(r=>{this.message.textContent=r.messages.card.pay.button})}addEventListener(t){return this.element.addEventListener("click",t)}disable(t){t?(this.element.setAttribute("disabled","true"),this.element.classList.add(Te.disabled),this.spinner.removeClass(Te.hidden),this.iconElement&&this.iconElement.classList.add(Te.hidden)):(this.element.removeAttribute("disabled"),this.element.classList.remove(Te.disabled),this.spinner.addClass(Te.hidden),this.iconElement&&this.iconElement.classList.remove(Te.hidden))}render(){return this.element}}const Fe={cardForm:"_cardForm_ydw03_1",hidden:"_hidden_ydw03_5",topOffset:"_topOffset_ydw03_9"},le={wrapper:"_wrapper_1gvzd_1",inputContainer:"_inputContainer_1gvzd_5",errorInput:"_errorInput_1gvzd_23",disabled:"_disabled_1gvzd_23",input:"_input_1gvzd_5",label:"_label_1gvzd_40",labelError:"_labelError_1gvzd_44",disabledInput:"_disabledInput_1gvzd_52",hidden:"_hidden_1gvzd_59"};class Ot{constructor(){C(this,"template",`
|
|
72
72
|
<svg focusable='false' fill='#dc2626' color='#dc2626' height='12' viewBox='0 0 12 12' width='12'>
|
|
73
73
|
<g fill='none' fill-rule='evenodd' transform='matrix(1 0 0 -1 0 12)'>
|
|
74
74
|
<circle cx='6' cy='3.2' fill='currentColor' r='1'></circle>
|
|
@@ -275,7 +275,7 @@ ${m}::-ms-input-placeholder{${f}}
|
|
|
275
275
|
</g>
|
|
276
276
|
</svg>
|
|
277
277
|
<span class="${te.srOnly}">Card CVC</span>
|
|
278
|
-
`);C(this,"element",document.createElement("div"));this.element.classList.add(te.container),this.element.innerHTML=this.template}render(){return this.element}}class tl{constructor(t,e){C(this,"cvcId","paynext-card-input-cvc");C(this,"expiryId","paynext-card-input-expiry");C(this,"element");C(this,"expiryWarning",new Ot);C(this,"cvcWarning",new Ot);C(this,"cardCvc",new el);C(this,"expiryInputContainer",document.createElement("div"));C(this,"expiryInput",document.createElement("input"));C(this,"expiryLabel",document.createElement("label"));C(this,"expiryLabelText",document.createElement("span"));C(this,"expiryLabelError",document.createElement("span"));C(this,"expiryEndContent",document.createElement("div"));C(this,"expiryError",document.createElement("p"));C(this,"cvcInputContainer",document.createElement("div"));C(this,"cvcInput",document.createElement("input"));C(this,"cvcLabel",document.createElement("label"));C(this,"cvcLabelText",document.createElement("span"));C(this,"cvcLabelError",document.createElement("span"));C(this,"cvcEndContent",document.createElement("div"));C(this,"cvcError",document.createElement("p"));C(this,"placeholderStyle",document.createElement("style"));C(this,"cardType",null);C(this,"isTouchSubmit",!1);C(this,"isDisabled",!1);C(this,"expiryErrorMessage","");C(this,"isExpiryRequired",!1);C(this,"isExpiryChanged",!1);C(this,"cvcErrorMessage","");C(this,"isCvcRequired",!1);C(this,"isCvcChanged",!1);C(this,"events",{expiryChange:new de,cvcChange:new de});var s,o,c,l,d,u,h,p,f,m,v,b,A,x,N,I,P;this.translate=t;const r=t.messages();this.element=document.createElement("div"),this.element.classList.add(Q.securityContent),this.expiryInputContainer.classList.add(Q.inputContainer),(s=e==null?void 0:e.container)!=null&&s.className&&this.expiryInputContainer.classList.add(e.container.className),(o=e==null?void 0:e.container)!=null&&o.styles&&Object.assign(this.expiryInputContainer.style,e.container.styles),this.expiryInput.setAttribute("id",this.expiryId),this.expiryInput.setAttribute("autocomplete","cc-exp"),this.expiryInput.setAttribute("placeholder",r.card.expiry.placeholder),this.expiryInput.setAttribute("inputmode","numeric"),this.expiryInput.setAttribute("pattern","[0-9]*"),this.expiryInput.setAttribute("enterkeyhint","next"),this.expiryInput.classList.add(Q.input),(c=e==null?void 0:e.field)!=null&&c.className&&this.expiryInput.classList.add(e.field.className),(l=e==null?void 0:e.field)!=null&&l.styles&&Object.assign(this.expiryInput.style,e.field.styles),this.expiryEndContent.classList.add(Q.endContent),this.expiryEndContent.appendChild(this.expiryWarning.render()),this.expiryInputContainer.append(this.expiryInput,this.expiryEndContent),this.expiryLabel.setAttribute("for",this.expiryId),this.expiryLabel.classList.add(Q.label),(d=e==null?void 0:e.label)!=null&&d.className&&this.expiryLabel.classList.add(e.label.className),(u=e==null?void 0:e.label)!=null&&u.styles&&Object.assign(this.expiryLabel.style,e.label.styles),this.expiryLabelText.contentEditable="false",this.expiryLabelText.textContent=r.card.expiry.label,this.expiryLabelError.textContent=r.card.required,this.expiryLabelError.classList.add(Q.labelError,Q.hidden),this.expiryLabel.append(this.expiryLabelText,this.expiryLabelError),this.expiryError.classList.add(Q.error,Q.hidden),(h=e==null?void 0:e.error)!=null&&h.className&&this.expiryError.classList.add(e.error.className),(p=e==null?void 0:e.error)!=null&&p.styles&&Object.assign(this.expiryError.style,e.error.styles);const a=document.createElement("div");if(a.appendChild(this.expiryError),this.cvcInputContainer.classList.add(Q.inputContainer),(f=e==null?void 0:e.container)!=null&&f.className&&this.cvcInputContainer.classList.add(e.container.className),(m=e==null?void 0:e.container)!=null&&m.styles&&Object.assign(this.cvcInputContainer.style,e.container.styles),this.cvcInput.setAttribute("id",this.cvcId),this.cvcInput.setAttribute("autocomplete","cc-csc"),this.cvcInput.setAttribute("placeholder",r.card.cvc.placeholder),this.cvcInput.setAttribute("inputmode","numeric"),this.cvcInput.setAttribute("pattern","[0-9]*"),this.cvcInput.setAttribute("enterkeyhint","done"),this.cvcInput.classList.add(Q.input),(v=e==null?void 0:e.field)!=null&&v.className&&this.cvcInput.classList.add(e.field.className),(b=e==null?void 0:e.field)!=null&&b.styles&&Object.assign(this.cvcInput.style,e.field.styles),(A=e==null?void 0:e.placeholder)!=null&&A.styles&&Object.keys(e.placeholder.styles).length){const O=U=>U.replace(/[A-Z]/g,$=>"-"+$.toLowerCase()),S=Object.entries(e.placeholder.styles).map(([U,$])=>`${O(U)}:${$};`).join("");this.placeholderStyle.textContent=`#${this.expiryId}::placeholder{${S}}#${this.cvcId}::placeholder{${S}}`,this.element.appendChild(this.placeholderStyle)}this.cvcEndContent.classList.add(Q.endContent),this.cvcEndContent.appendChild(this.cardCvc.render()),this.cvcInputContainer.append(this.cvcInput,this.cvcEndContent),this.cvcLabel.setAttribute("for",this.cvcId),this.cvcLabel.classList.add(Q.label),(x=e==null?void 0:e.label)!=null&&x.className&&this.cvcLabel.classList.add(e.label.className),(N=e==null?void 0:e.label)!=null&&N.styles&&Object.assign(this.cvcLabel.style,e.label.styles),this.cvcLabelText.textContent=r.card.cvc.label,this.cvcLabelError.textContent=r.card.required,this.cvcLabelError.classList.add(Q.labelError,Q.hidden),(I=e==null?void 0:e.error)!=null&&I.className&&this.cvcLabel.classList.add(e.error.className),(P=e==null?void 0:e.error)!=null&&P.styles&&Object.assign(this.cvcLabelError.style,e.error.styles),this.cvcLabel.append(this.cvcLabelText,this.cvcLabelError),this.cvcError.classList.add(Q.error,Q.hidden);const i=document.createElement("div");i.appendChild(this.cvcError),this.element.append(this.expiryLabel,this.cvcLabel,this.expiryInputContainer,this.cvcInputContainer,a,i),this.expiryInput.addEventListener("input",O=>{O.preventDefault();const U=this.expiryInput.value.replace(/\D/g,"");this.handleExpiryChange(U)}),this.expiryInput.addEventListener("paste",O=>{var $;O.preventDefault();const U=((($=O.clipboardData)==null?void 0:$.getData("text"))||"").replace(/\D/g,"");this.handleExpiryChange(U)}),this.expiryInput.addEventListener("keydown",O=>{this.isDisabled||["Backspace","Delete","Tab","ArrowLeft","ArrowRight","Home","End"].includes(O.key)||O.ctrlKey||O.metaKey||/^\d$/.test(O.key)||O.preventDefault()}),this.expiryInput.addEventListener("blur",()=>this.validateExpiry(this.expiryInput.value)),this.cvcInput.addEventListener("input",O=>{O.preventDefault();const U=this.cvcInput.value.replace(/\D/g,"");this.handleCvcChange(U)}),this.cvcInput.addEventListener("paste",O=>{var $;O.preventDefault();const U=((($=O.clipboardData)==null?void 0:$.getData("text"))||"").replace(/\D/g,"");this.handleCvcChange(U)}),this.cvcInput.addEventListener("keydown",O=>{this.isDisabled||["Backspace","Delete","Tab","ArrowLeft","ArrowRight","Home","End"].includes(O.key)||O.ctrlKey||O.metaKey||/^\d$/.test(O.key)||O.preventDefault()}),this.cvcInput.addEventListener("blur",()=>this.validateCvc(this.cvcInput.value)),this.translate.subscribe(({messages:O})=>{this.cvcInput.setAttribute("placeholder",O.card.cvc.placeholder),this.expiryInput.setAttribute("placeholder",O.card.expiry.placeholder),this.expiryLabelText.textContent=O.card.expiry.label,this.cvcLabelText.textContent=O.card.cvc.label,this.expiryLabelError.textContent=O.card.required,this.cvcLabelError.textContent=O.card.required,this.render()})}cvcValidator(t){const e=$e.getTypeInfo(this.cardType||""),r=!t,a=t.length<((e==null?void 0:e.code.size)||3);return!r&&!a?null:r?pe.Empty:pe.Incomplete}validateCvc(t){const e=this.translate.messages(),r=this.cvcValidator(t);return r?(r===pe.Empty?(this.cvcErrorMessage="",this.isCvcRequired=!0):(this.cvcErrorMessage=e.card.cvc.error.incomplete,this.isCvcRequired=!1),this.render(),!r):(this.isCvcRequired=!1,this.cvcErrorMessage="",this.render(),!r)}handleCvcChange(t){if(this.isDisabled)return;this.isCvcRequired=!1,this.cvcErrorMessage="",this.isCvcChanged||(this.isCvcChanged=!0);const e=mc(t,this.cardType||""),r=$e.getTypeInfo(this.cardType||"");e.length===(r==null?void 0:r.code.size)&&this.validateCvc(e),this.events.cvcChange.emit({value:e,isValid:this.cvcValidator(e)===null}),this.cvcInput.value=e,this.render()}toggleCvcLabelError(t){return Y(this,null,function*(){if(t){this.cvcInputContainer.classList.add(Q.errorInput),this.cvcLabelError.classList.remove(Q.hidden),yield ue(this.cvcLabelError,me.open,me.transition);return}yield ue(this.cvcLabelError,me.close,me.transition),this.cvcLabelError.classList.add(Q.hidden)})}toggleCvcErrorMessage(t){return Y(this,null,function*(){if(t){this.cvcInputContainer.classList.add(Q.errorInput),this.cvcError.textContent=this.cvcErrorMessage,this.cvcError.classList.remove(Q.hidden),yield ue(this.cvcError,_e.open,_e.transition);return}yield ue(this.cvcError,_e.close,_e.transition),this.cvcError.classList.add(Q.hidden)})}expiryValidator(t){const e=!t,r=t.length<7,a=new Date,[i,s]=t.split(" / ");a.setFullYear(2e3+parseInt(s),parseInt(i)-1,31);const o=a.getTime()<Date.now(),c=new Date,l=new Date;l.setFullYear(c.getFullYear()+50);const d=a.getTime()>l.getTime()||a.getFullYear()<c.getFullYear();return!e&&!r&&!o&&!d?null:e?pe.Empty:r?pe.Incomplete:d?"tooFarInFuture":a.getFullYear()===new Date().getFullYear()?"dateExpired":"expired"}validateExpiry(t){const e=this.translate.messages(),r=this.expiryValidator(t);if(r){if(r===pe.Empty)this.expiryErrorMessage="",this.isExpiryRequired=!0;else{let a=e.card.expiry.error.invalid;r==="expired"?a=e.card.expiry.error.expired.replace("{date}","year"):r==="dateExpired"?a=e.card.expiry.error.expired.replace("{date}",t.replace(/ /g,"")):r==="tooFarInFuture"?a=e.card.expiry.error.tooFarInFuture:r===pe.Incomplete&&(a=e.card.expiry.error.incomplete),this.isExpiryRequired=!1,this.expiryErrorMessage=a}return this.render(),!r}return this.isExpiryRequired=!1,this.expiryErrorMessage="",this.render(),!r}handleExpiryChange(t){if(this.isDisabled)return;this.isExpiryRequired=!1,this.expiryErrorMessage="",this.isExpiryChanged||(this.isExpiryChanged=!0);const e=vc(t);e.length===7&&this.validateExpiry(e),this.events.expiryChange.emit({value:e,isValid:this.expiryValidator(e)===null}),this.expiryInput.value=e,this.render()}toggleExpiryLabelError(t){return Y(this,null,function*(){if(t){this.expiryInputContainer.classList.add(Q.errorInput),this.expiryLabelError.classList.remove(Q.hidden),yield ue(this.expiryLabelError,me.open,me.transition);return}yield ue(this.expiryLabelError,me.close,me.transition),this.expiryLabelError.classList.add(Q.hidden)})}toggleExpiryErrorMessage(t){return Y(this,null,function*(){if(t){this.expiryInputContainer.classList.add(Q.errorInput),this.expiryError.textContent=this.expiryErrorMessage,this.expiryError.classList.remove(Q.hidden),yield ue(this.expiryError,_e.open,_e.transition);return}yield ue(this.expiryError,_e.close,_e.transition),this.expiryError.classList.add(Q.hidden)})}addEventListener(t,e){return this.events[t].addListener(e)}disable(t){t?(this.expiryInput.setAttribute("disabled","true"),this.expiryInput.classList.add(Q.disabledInput),this.expiryInputContainer.classList.add(Q.disabled),this.cvcInput.setAttribute("disabled","true"),this.cvcInput.classList.add(Q.disabledInput),this.cvcInputContainer.classList.add(Q.disabled)):(this.expiryInput.removeAttribute("disabled"),this.expiryInput.classList.remove(Q.disabledInput),this.expiryInputContainer.classList.remove(Q.disabled),this.cvcInput.removeAttribute("disabled"),this.cvcInput.classList.remove(Q.disabledInput),this.cvcInputContainer.classList.remove(Q.disabled))}touchSubmit(){this.isTouchSubmit=!0,this.render()}value(){return{expiry:this.expiryInput.value,cvc:this.cvcInput.value}}validate({expiry:t,cvc:e}){const r=this.validateExpiry(t),a=this.validateCvc(e);return r&&a}updateCardType(t){this.cardType=t,this.handleCvcChange(this.cvcInput.value)}render(){const t=this.isTouchSubmit||this.isExpiryChanged,e=t&&!this.isDisabled&&this.isExpiryRequired,r=t&&!this.isDisabled&&!!this.expiryErrorMessage;this.toggleExpiryLabelError(e),this.toggleExpiryErrorMessage(r),!e&&!r?(this.expiryInputContainer.classList.remove(Q.errorInput),this.expiryEndContent.classList.add(Q.hidden)):this.expiryEndContent.classList.remove(Q.hidden);const a=this.isTouchSubmit||this.isCvcChanged,i=a&&!this.isDisabled&&this.isCvcRequired,s=a&&!this.isDisabled&&!!this.cvcErrorMessage;return this.toggleCvcLabelError(i),this.toggleCvcErrorMessage(s),!i&&!s?(this.cvcInputContainer.classList.remove(Q.errorInput),this.cvcEndContent.innerHTML="",this.cvcEndContent.appendChild(this.cardCvc.render())):(this.cvcEndContent.innerHTML="",this.cvcEndContent.appendChild(this.cvcWarning.render())),this.isDisabled?(this.expiryInputContainer.classList.add(Q.disabled),this.expiryInput.classList.add(Q.disabledInput),this.cvcInputContainer.classList.add(Q.disabled),this.cvcInput.classList.add(Q.disabledInput)):(this.expiryInputContainer.classList.remove(Q.disabled),this.expiryInput.classList.remove(Q.disabledInput),this.cvcInputContainer.classList.remove(Q.disabled),this.cvcInput.classList.remove(Q.disabledInput)),this.element}}class nl{constructor({translate:t,className:e,stylesState:r,isDefaultVariant:a,onPaymentAttempt:i}){C(this,"element");C(this,"submit");C(this,"back");C(this,"number");C(this,"name");C(this,"cardSecurity");C(this,"onPaymentAttempt");C(this,"isBackVisible",!0);C(this,"events",{submit:new de,close:new de});const s=r.getState();this.element=document.createElement("form"),this.onPaymentAttempt=i,this.submit=new Wc(t,s.SubmitButton),this.back=new Kc,this.number=new Jc(t,s.Input),this.name=new Yc(t,s.Input),this.cardSecurity=new tl(t,s.Input),this.element.classList.add(Fe.cardForm,e||"");const o=this.back.render();a&&(this.isBackVisible=!1,o.classList.add(Fe.hidden),this.element.classList.add(Fe.topOffset)),this.element.append(o,this.number.render(),this.cardSecurity.render(),this.name.render(),this.submit.render()),requestAnimationFrame(()=>{const c=this.submit.render(),d=window.getComputedStyle(c).backgroundColor||"#5A67D8";this.element.style.setProperty("--input-focus-shadow-color",d)}),this.back.addEventListener(()=>this.events.close.emit()),this.number.addEventListener("change",({cardType:c})=>this.cardSecurity.updateCardType(c||null)),this.submit.addEventListener(c=>{var p;c.preventDefault();const{cvc:l,expiry:d}=this.cardSecurity.value(),{value:u,cardType:h}=this.number.value();this.touchSubmit(),this.validate()&&((p=this.onPaymentAttempt)==null||p.call(this,{paymentMethod:K.CARD}),this.events.submit.emit({number:u,expiry:d,cvc:l,name:this.name.value(),cardBrand:h}))})}addEventListener(t,e){return this.events[t].addListener(e)}setLoading(t){this.cardSecurity.disable(t),this.name.disable(t),this.number.disable(t),this.submit.disable(t)}touchSubmit(){this.cardSecurity.touchSubmit(),this.name.touchSubmit(),this.number.touchSubmit()}validate(){const t=this.number.validate(this.number.value().value),e=this.name.validate(this.name.value()),r=this.cardSecurity.validate(this.cardSecurity.value());return t&&e&&r}setDefaultVariant(t){const e=this.back.render();if(t&&this.isBackVisible){e.classList.add(Fe.hidden),this.element.classList.add(Fe.topOffset),this.isBackVisible=!1;return}!t&&!this.isBackVisible&&(e.classList.remove(Fe.hidden),this.element.classList.remove(Fe.topOffset),this.isBackVisible=!0)}render(){return this.element}}class rl{constructor(){C(this,"template",`
|
|
278
|
+
`);C(this,"element",document.createElement("div"));this.element.classList.add(te.container),this.element.innerHTML=this.template}render(){return this.element}}class tl{constructor(t,e){C(this,"cvcId","paynext-card-input-cvc");C(this,"expiryId","paynext-card-input-expiry");C(this,"element");C(this,"expiryWarning",new Ot);C(this,"cvcWarning",new Ot);C(this,"cardCvc",new el);C(this,"expiryInputContainer",document.createElement("div"));C(this,"expiryInput",document.createElement("input"));C(this,"expiryLabel",document.createElement("label"));C(this,"expiryLabelText",document.createElement("span"));C(this,"expiryLabelError",document.createElement("span"));C(this,"expiryEndContent",document.createElement("div"));C(this,"expiryError",document.createElement("p"));C(this,"cvcInputContainer",document.createElement("div"));C(this,"cvcInput",document.createElement("input"));C(this,"cvcLabel",document.createElement("label"));C(this,"cvcLabelText",document.createElement("span"));C(this,"cvcLabelError",document.createElement("span"));C(this,"cvcEndContent",document.createElement("div"));C(this,"cvcError",document.createElement("p"));C(this,"placeholderStyle",document.createElement("style"));C(this,"cardType",null);C(this,"isTouchSubmit",!1);C(this,"isDisabled",!1);C(this,"expiryErrorMessage","");C(this,"isExpiryRequired",!1);C(this,"isExpiryChanged",!1);C(this,"cvcErrorMessage","");C(this,"isCvcRequired",!1);C(this,"isCvcChanged",!1);C(this,"events",{expiryChange:new de,cvcChange:new de});var s,o,c,l,d,u,h,p,f,m,v,b,A,x,N,I,P;this.translate=t;const r=t.messages();this.element=document.createElement("div"),this.element.classList.add(Q.securityContent),this.expiryInputContainer.classList.add(Q.inputContainer),(s=e==null?void 0:e.container)!=null&&s.className&&this.expiryInputContainer.classList.add(e.container.className),(o=e==null?void 0:e.container)!=null&&o.styles&&Object.assign(this.expiryInputContainer.style,e.container.styles),this.expiryInput.setAttribute("id",this.expiryId),this.expiryInput.setAttribute("autocomplete","cc-exp"),this.expiryInput.setAttribute("placeholder",r.card.expiry.placeholder),this.expiryInput.setAttribute("inputmode","numeric"),this.expiryInput.setAttribute("pattern","[0-9]*"),this.expiryInput.setAttribute("enterkeyhint","next"),this.expiryInput.classList.add(Q.input),(c=e==null?void 0:e.field)!=null&&c.className&&this.expiryInput.classList.add(e.field.className),(l=e==null?void 0:e.field)!=null&&l.styles&&Object.assign(this.expiryInput.style,e.field.styles),this.expiryEndContent.classList.add(Q.endContent),this.expiryEndContent.appendChild(this.expiryWarning.render()),this.expiryInputContainer.append(this.expiryInput,this.expiryEndContent),this.expiryLabel.setAttribute("for",this.expiryId),this.expiryLabel.classList.add(Q.label),(d=e==null?void 0:e.label)!=null&&d.className&&this.expiryLabel.classList.add(e.label.className),(u=e==null?void 0:e.label)!=null&&u.styles&&Object.assign(this.expiryLabel.style,e.label.styles),this.expiryLabelText.contentEditable="false",this.expiryLabelText.textContent=r.card.expiry.label,this.expiryLabelError.textContent=r.card.required,this.expiryLabelError.classList.add(Q.labelError,Q.hidden),this.expiryLabel.append(this.expiryLabelText,this.expiryLabelError),this.expiryError.classList.add(Q.error,Q.hidden),(h=e==null?void 0:e.error)!=null&&h.className&&this.expiryError.classList.add(e.error.className),(p=e==null?void 0:e.error)!=null&&p.styles&&Object.assign(this.expiryError.style,e.error.styles);const a=document.createElement("div");if(a.appendChild(this.expiryError),this.cvcInputContainer.classList.add(Q.inputContainer),(f=e==null?void 0:e.container)!=null&&f.className&&this.cvcInputContainer.classList.add(e.container.className),(m=e==null?void 0:e.container)!=null&&m.styles&&Object.assign(this.cvcInputContainer.style,e.container.styles),this.cvcInput.setAttribute("id",this.cvcId),this.cvcInput.setAttribute("autocomplete","cc-csc"),this.cvcInput.setAttribute("placeholder",r.card.cvc.placeholder),this.cvcInput.setAttribute("inputmode","numeric"),this.cvcInput.setAttribute("pattern","[0-9]*"),this.cvcInput.setAttribute("enterkeyhint","done"),this.cvcInput.classList.add(Q.input),(v=e==null?void 0:e.field)!=null&&v.className&&this.cvcInput.classList.add(e.field.className),(b=e==null?void 0:e.field)!=null&&b.styles&&Object.assign(this.cvcInput.style,e.field.styles),(A=e==null?void 0:e.placeholder)!=null&&A.styles&&Object.keys(e.placeholder.styles).length){const O=U=>U.replace(/[A-Z]/g,$=>"-"+$.toLowerCase()),S=Object.entries(e.placeholder.styles).map(([U,$])=>`${O(U)}:${$};`).join("");this.placeholderStyle.textContent=`#${this.expiryId}::placeholder{${S}}#${this.cvcId}::placeholder{${S}}`,this.element.appendChild(this.placeholderStyle)}this.cvcEndContent.classList.add(Q.endContent),this.cvcEndContent.appendChild(this.cardCvc.render()),this.cvcInputContainer.append(this.cvcInput,this.cvcEndContent),this.cvcLabel.setAttribute("for",this.cvcId),this.cvcLabel.classList.add(Q.label),(x=e==null?void 0:e.label)!=null&&x.className&&this.cvcLabel.classList.add(e.label.className),(N=e==null?void 0:e.label)!=null&&N.styles&&Object.assign(this.cvcLabel.style,e.label.styles),this.cvcLabelText.textContent=r.card.cvc.label,this.cvcLabelError.textContent=r.card.required,this.cvcLabelError.classList.add(Q.labelError,Q.hidden),(I=e==null?void 0:e.error)!=null&&I.className&&this.cvcLabel.classList.add(e.error.className),(P=e==null?void 0:e.error)!=null&&P.styles&&Object.assign(this.cvcLabelError.style,e.error.styles),this.cvcLabel.append(this.cvcLabelText,this.cvcLabelError),this.cvcError.classList.add(Q.error,Q.hidden);const i=document.createElement("div");i.appendChild(this.cvcError),this.element.append(this.expiryLabel,this.cvcLabel,this.expiryInputContainer,this.cvcInputContainer,a,i),this.expiryInput.addEventListener("input",O=>{O.preventDefault();const U=this.expiryInput.value.replace(/\D/g,"");this.handleExpiryChange(U)}),this.expiryInput.addEventListener("paste",O=>{var $;O.preventDefault();const U=((($=O.clipboardData)==null?void 0:$.getData("text"))||"").replace(/\D/g,"");this.handleExpiryChange(U)}),this.expiryInput.addEventListener("keydown",O=>{this.isDisabled||["Backspace","Delete","Tab","ArrowLeft","ArrowRight","Home","End"].includes(O.key)||O.ctrlKey||O.metaKey||/^\d$/.test(O.key)||O.preventDefault()}),this.expiryInput.addEventListener("blur",()=>this.validateExpiry(this.expiryInput.value)),this.cvcInput.addEventListener("input",O=>{O.preventDefault();const U=this.cvcInput.value.replace(/\D/g,"");this.handleCvcChange(U)}),this.cvcInput.addEventListener("paste",O=>{var $;O.preventDefault();const U=((($=O.clipboardData)==null?void 0:$.getData("text"))||"").replace(/\D/g,"");this.handleCvcChange(U)}),this.cvcInput.addEventListener("keydown",O=>{this.isDisabled||["Backspace","Delete","Tab","ArrowLeft","ArrowRight","Home","End"].includes(O.key)||O.ctrlKey||O.metaKey||/^\d$/.test(O.key)||O.preventDefault()}),this.cvcInput.addEventListener("blur",()=>this.validateCvc(this.cvcInput.value)),this.translate.subscribe(({messages:O})=>{this.cvcInput.setAttribute("placeholder",O.card.cvc.placeholder),this.expiryInput.setAttribute("placeholder",O.card.expiry.placeholder),this.expiryLabelText.textContent=O.card.expiry.label,this.cvcLabelText.textContent=O.card.cvc.label,this.expiryLabelError.textContent=O.card.required,this.cvcLabelError.textContent=O.card.required,this.render()})}cvcValidator(t){const e=$e.getTypeInfo(this.cardType||""),r=!t,a=t.length<((e==null?void 0:e.code.size)||3);return!r&&!a?null:r?pe.Empty:pe.Incomplete}validateCvc(t){const e=this.translate.messages(),r=this.cvcValidator(t);return r?(r===pe.Empty?(this.cvcErrorMessage="",this.isCvcRequired=!0):(this.cvcErrorMessage=e.card.cvc.error.incomplete,this.isCvcRequired=!1),this.render(),!r):(this.isCvcRequired=!1,this.cvcErrorMessage="",this.render(),!r)}handleCvcChange(t){if(this.isDisabled)return;this.isCvcRequired=!1,this.cvcErrorMessage="",this.isCvcChanged||(this.isCvcChanged=!0);const e=mc(t,this.cardType||""),r=$e.getTypeInfo(this.cardType||"");e.length===(r==null?void 0:r.code.size)&&this.validateCvc(e),this.events.cvcChange.emit({value:e,isValid:this.cvcValidator(e)===null}),this.cvcInput.value=e,this.render()}toggleCvcLabelError(t){return Y(this,null,function*(){if(t){this.cvcInputContainer.classList.add(Q.errorInput),this.cvcLabelError.classList.remove(Q.hidden),yield ue(this.cvcLabelError,me.open,me.transition);return}yield ue(this.cvcLabelError,me.close,me.transition),this.cvcLabelError.classList.add(Q.hidden)})}toggleCvcErrorMessage(t){return Y(this,null,function*(){if(t){this.cvcInputContainer.classList.add(Q.errorInput),this.cvcError.textContent=this.cvcErrorMessage,this.cvcError.classList.remove(Q.hidden),yield ue(this.cvcError,_e.open,_e.transition);return}yield ue(this.cvcError,_e.close,_e.transition),this.cvcError.classList.add(Q.hidden)})}expiryValidator(t){const e=!t,r=t.length<7,a=new Date,[i,s]=t.split(" / ");a.setFullYear(2e3+parseInt(s),parseInt(i)-1,31);const o=a.getTime()<Date.now(),c=new Date,l=new Date;l.setFullYear(c.getFullYear()+50);const d=a.getTime()>l.getTime()||a.getFullYear()<c.getFullYear();return!e&&!r&&!o&&!d?null:e?pe.Empty:r?pe.Incomplete:d?"tooFarInFuture":a.getFullYear()===new Date().getFullYear()?"dateExpired":"expired"}validateExpiry(t){const e=this.translate.messages(),r=this.expiryValidator(t);if(r){if(r===pe.Empty)this.expiryErrorMessage="",this.isExpiryRequired=!0;else{let a=e.card.expiry.error.invalid;r==="expired"?a=e.card.expiry.error.expired.replace("{date}","year"):r==="dateExpired"?a=e.card.expiry.error.expired.replace("{date}",t.replace(/ /g,"")):r==="tooFarInFuture"?a=e.card.expiry.error.tooFarInFuture:r===pe.Incomplete&&(a=e.card.expiry.error.incomplete),this.isExpiryRequired=!1,this.expiryErrorMessage=a}return this.render(),!r}return this.isExpiryRequired=!1,this.expiryErrorMessage="",this.render(),!r}handleExpiryChange(t){if(this.isDisabled)return;this.isExpiryRequired=!1,this.expiryErrorMessage="",this.isExpiryChanged||(this.isExpiryChanged=!0);const e=vc(t);e.length===7&&this.validateExpiry(e),this.events.expiryChange.emit({value:e,isValid:this.expiryValidator(e)===null}),this.expiryInput.value=e,this.render()}toggleExpiryLabelError(t){return Y(this,null,function*(){if(t){this.expiryInputContainer.classList.add(Q.errorInput),this.expiryLabelError.classList.remove(Q.hidden),yield ue(this.expiryLabelError,me.open,me.transition);return}yield ue(this.expiryLabelError,me.close,me.transition),this.expiryLabelError.classList.add(Q.hidden)})}toggleExpiryErrorMessage(t){return Y(this,null,function*(){if(t){this.expiryInputContainer.classList.add(Q.errorInput),this.expiryError.textContent=this.expiryErrorMessage,this.expiryError.classList.remove(Q.hidden),yield ue(this.expiryError,_e.open,_e.transition);return}yield ue(this.expiryError,_e.close,_e.transition),this.expiryError.classList.add(Q.hidden)})}addEventListener(t,e){return this.events[t].addListener(e)}disable(t){t?(this.expiryInput.setAttribute("disabled","true"),this.expiryInput.classList.add(Q.disabledInput),this.expiryInputContainer.classList.add(Q.disabled),this.cvcInput.setAttribute("disabled","true"),this.cvcInput.classList.add(Q.disabledInput),this.cvcInputContainer.classList.add(Q.disabled)):(this.expiryInput.removeAttribute("disabled"),this.expiryInput.classList.remove(Q.disabledInput),this.expiryInputContainer.classList.remove(Q.disabled),this.cvcInput.removeAttribute("disabled"),this.cvcInput.classList.remove(Q.disabledInput),this.cvcInputContainer.classList.remove(Q.disabled))}touchSubmit(){this.isTouchSubmit=!0,this.render()}value(){return{expiry:this.expiryInput.value,cvc:this.cvcInput.value}}validate({expiry:t,cvc:e}){const r=this.validateExpiry(t),a=this.validateCvc(e);return r&&a}updateCardType(t){this.cardType=t,this.handleCvcChange(this.cvcInput.value)}render(){const t=this.isTouchSubmit||this.isExpiryChanged,e=t&&!this.isDisabled&&this.isExpiryRequired,r=t&&!this.isDisabled&&!!this.expiryErrorMessage;this.toggleExpiryLabelError(e),this.toggleExpiryErrorMessage(r),!e&&!r?(this.expiryInputContainer.classList.remove(Q.errorInput),this.expiryEndContent.classList.add(Q.hidden)):this.expiryEndContent.classList.remove(Q.hidden);const a=this.isTouchSubmit||this.isCvcChanged,i=a&&!this.isDisabled&&this.isCvcRequired,s=a&&!this.isDisabled&&!!this.cvcErrorMessage;return this.toggleCvcLabelError(i),this.toggleCvcErrorMessage(s),!i&&!s?(this.cvcInputContainer.classList.remove(Q.errorInput),this.cvcEndContent.innerHTML="",this.cvcEndContent.appendChild(this.cardCvc.render())):(this.cvcEndContent.innerHTML="",this.cvcEndContent.appendChild(this.cvcWarning.render())),this.isDisabled?(this.expiryInputContainer.classList.add(Q.disabled),this.expiryInput.classList.add(Q.disabledInput),this.cvcInputContainer.classList.add(Q.disabled),this.cvcInput.classList.add(Q.disabledInput)):(this.expiryInputContainer.classList.remove(Q.disabled),this.expiryInput.classList.remove(Q.disabledInput),this.cvcInputContainer.classList.remove(Q.disabled),this.cvcInput.classList.remove(Q.disabledInput)),this.element}}class nl{constructor({translate:t,className:e,stylesState:r,isDefaultVariant:a,onPaymentAttempt:i}){C(this,"element");C(this,"submit");C(this,"back");C(this,"number");C(this,"name");C(this,"cardSecurity");C(this,"onPaymentAttempt");C(this,"isBackVisible",!0);C(this,"events",{submit:new de,close:new de});const s=r.getState();this.element=document.createElement("form"),this.onPaymentAttempt=i,this.submit=new Wc(t,s.SubmitButton),this.back=new Kc(s.BackButton),this.number=new Jc(t,s.Input),this.name=new Yc(t,s.Input),this.cardSecurity=new tl(t,s.Input),this.element.classList.add(Fe.cardForm,e||"");const o=this.back.render();a&&(this.isBackVisible=!1,o.classList.add(Fe.hidden),this.element.classList.add(Fe.topOffset)),this.element.append(o,this.number.render(),this.cardSecurity.render(),this.name.render(),this.submit.render()),requestAnimationFrame(()=>{const c=this.submit.render(),d=window.getComputedStyle(c).backgroundColor||"#5A67D8";this.element.style.setProperty("--input-focus-shadow-color",d)}),this.back.addEventListener(()=>this.events.close.emit()),this.number.addEventListener("change",({cardType:c})=>this.cardSecurity.updateCardType(c||null)),this.submit.addEventListener(c=>{var p;c.preventDefault();const{cvc:l,expiry:d}=this.cardSecurity.value(),{value:u,cardType:h}=this.number.value();this.touchSubmit(),this.validate()&&((p=this.onPaymentAttempt)==null||p.call(this,{paymentMethod:K.CARD}),this.events.submit.emit({number:u,expiry:d,cvc:l,name:this.name.value(),cardBrand:h}))})}addEventListener(t,e){return this.events[t].addListener(e)}setLoading(t){this.cardSecurity.disable(t),this.name.disable(t),this.number.disable(t),this.submit.disable(t)}touchSubmit(){this.cardSecurity.touchSubmit(),this.name.touchSubmit(),this.number.touchSubmit()}validate(){const t=this.number.validate(this.number.value().value),e=this.name.validate(this.name.value()),r=this.cardSecurity.validate(this.cardSecurity.value());return t&&e&&r}setDefaultVariant(t){const e=this.back.render();if(t&&this.isBackVisible){e.classList.add(Fe.hidden),this.element.classList.add(Fe.topOffset),this.isBackVisible=!1;return}!t&&!this.isBackVisible&&(e.classList.remove(Fe.hidden),this.element.classList.remove(Fe.topOffset),this.isBackVisible=!0)}render(){return this.element}}class rl{constructor(){C(this,"template",`
|
|
279
279
|
<svg
|
|
280
280
|
fill='none'
|
|
281
281
|
height='24'
|