@spot-flow/checkout-inline-js 0.1.46-dev.1 → 0.1.46-dev.2

package/dist/checkout-inline.es.js

@@ -977,7 +977,7 @@ b(Yn, "removeToast", (t) => {
 });
 let _r = Yn;
 function Ja(n) {
-  return typeof n != "string" ? "invalid" : n.startsWith("sk_test_") ? "test" : n.startsWith("sk_live_") ? "live" : "unknown";
+  return typeof n != "string" ? null : n.startsWith("sk_test_") ? "test" : n.startsWith("sk_live_") ? "live" : null;
 }
 class Ya {
   constructor(t) {
@@ -43633,7 +43633,7 @@ class H2 {
       testCardContainer: document.getElementById(
         "test-container"
       ),
-      keyEnvironment: a || this.mode,
+      keyEnvironment: a || (this.mode ? this.mode : null),
       isVisible: o
     }), document.addEventListener("DOMContentLoaded", () => {
       const d = document.getElementById(
@@ -43644,7 +43644,7 @@ class H2 {
       new Su({
         container: d,
         testCardContainer: h,
-        keyEnvironment: a || this.mode,
+        keyEnvironment: a || (this.mode ? this.mode : null),
         isVisible: o
       }).renderComponent();
     }), this.mainFooter.renderComponent(), this.setupPaymentMethodButtons(), this.selectedChannel && (this.currentPaymentMethod = this.selectedChannel), this.updatePaymentMethodView(

package/dist/checkout-inline.js

@@ -478,7 +478,7 @@
     d="M2.80944 12.6864L7.40177 4.11968C8.13226 2.75698 10.1359 2.75698 10.8664 4.11968L15.4587 12.6864C16.1374 13.9525 15.1936 15.4677 13.7264 15.4677H4.54174C3.0745 15.4677 2.13075 13.9525 2.80944 12.6864ZM9.13406 5.28061C9.53593 5.28061 9.86171 5.60639 9.86171 6.00826V11.1018C9.86171 11.5037 9.53593 11.8295 9.13406 11.8295C8.73219 11.8295 8.40641 11.5037 8.40641 11.1018V6.00826C8.40641 5.60639 8.73219 5.28061 9.13406 5.28061ZM8.2245 13.1029C8.2245 13.6052 8.63172 14.0124 9.13406 14.0124C9.6364 14.0124 10.0436 13.6052 10.0436 13.1029C10.0436 12.6005 9.6364 12.1933 9.13406 12.1933C8.63172 12.1933 8.2245 12.6005 8.2245 13.1029Z"
     fill="white" />
 </svg>
-<span id="custom-toast-msg">${t}</span>`:t,e.appendChild(i);const o=document.createElement("span");return o.textContent="×",o.classList.add("close-btn","opacity-0"),o.onclick=()=>ht.removeToast(e),e.appendChild(o),e}),b(ht,"showToast",(t,r,e=3e3)=>{const i=document.getElementById("toast-container");if(i){const o=ht.createToast(t,r);i.appendChild(o),o.offsetHeight,o.classList.add("show"),setTimeout(()=>ht.removeToast(o),e)}}),b(ht,"removeToast",t=>{t.classList.remove("show"),t.addEventListener("transitionend",()=>{t.parentElement&&t.parentElement.removeChild(t)})});let Gi=ht;function Oa(n){return typeof n!="string"?"invalid":n.startsWith("sk_test_")?"test":n.startsWith("sk_live_")?"live":"unknown"}class Na{constructor(t){b(this,"container");b(this,"onAction");b(this,"cardDetailsValues");b(this,"creditCardTypes");b(this,"merchantName");b(this,"currency");this.container=t.container,this.onAction=t.onAction,this.creditCardTypes=[...Ra],this.cardDetailsValues={number:"",expiry:"",cvv:"",name:""},this.merchantName=t.merchantName,this.currency=t.currency}attachListener(){const t=document.querySelector("#pci-dss");t&&t.classList.remove("hidden");const r=document.querySelector('input[name="number"]'),e=document.querySelector('input[name="expiry"]'),i=document.querySelector('input[name="cvv"]'),o=document.querySelector('input[name="name"]'),s=document.querySelector(".details-form-button"),a=document.querySelector("#checkoutcard");r&&r.addEventListener("input",l=>this.handleInputChange(l,s)),e&&e.addEventListener("input",l=>this.handleInputChange(l,s)),i&&i.addEventListener("input",l=>this.handleInputChange(l,s)),o&&o.addEventListener("input",l=>this.handleInputChange(l,s)),a&&a.addEventListener("submit",l=>{var c,d,h;l.preventDefault(),this.onAction(l)({pan:Mh(this.cardDetailsValues.number),cvv:this.cardDetailsValues.cvv,expiryMonth:(c=this.cardDetailsValues)==null?void 0:c.expiry.split("/")[0].trim(),expiryYear:(d=this.cardDetailsValues)==null?void 0:d.expiry.split("/")[1].trim(),...this.currency==="ZAR"&&{cardHolderName:(h=this.cardDetailsValues)==null?void 0:h.name}})})}validateCreditCard(t){if(t=t.replace(/\D/g,""),!t||t.length===0||t.length<13||t.length>19)return!1;const r=t.split("").map(i=>parseInt(i,10));for(let i=r.length-2;i>=0;i-=2){let o=r[i]*2;o>9&&(o-=9),r[i]=o}return r.reduce((i,o)=>i+o,0)%10===0}handleInputChange(t,r){var a,l,c;const e=t.target,{name:i,value:o}=e;let s=o;if(o.trim()===""){this.emptyCardState(e,i);return}if(i==="number"){s=Lh(o);const d=s.replace(/\s+/g,""),h=this.validateCreditCard(d);this.filterCreditCardType(o);const f=(a=this.creditCardTypes[0])==null?void 0:a.name;f&&Tt.map(y=>{if(y.name===this.currency)if(y.cardTypes.includes(f)){const w=Ph[f];if(w.length>1){const S=w.some(g=>d.length===g);this.checkInputValidity(h,e,"Your card number is invalid",S)}else d.length===w[0]&&this.checkInputValidity(h,e,"Your card number is invalid",d.length>=14&&d.length<=19)}else this.checkInputValidity(!1,e,"Invalid card. Only locally issued cards are accepted.",o.trim().length>=14&&o.trim().length<=19)})}else if(i==="expiry"){const d=new Date;s=Th(o);const h=s.split("/"),f=(l=h[0])==null?void 0:l.trim(),y=(c=h[1])==null?void 0:c.trim(),w=new Date().getFullYear()%100,S=d.getMonth()+1;let g=!0;(parseInt(y)===w&&parseInt(f)<S||parseInt(y)<w)&&(g=!1),(y==null?void 0:y.length)===2&&this.checkInputValidity(g,e,"Your card has expired",h.join("").length===4)}else i==="cvv"?s=Eh(o):i==="name"&&(s=o);if(this.cardDetailsValues={...this.cardDetailsValues,[i]:s},e.value=s,this.validateCard())r&&r.removeAttribute("disabled");else if(r){if(r.disabled)return;r.setAttribute("disabled","")}}hideCardHolderInput(){const t=document.querySelector("#card-name");this.currency==="ZAR"?t&&(t.style.display="block"):t&&(t.style.display="none")}validateCard(){if(this.cardDetailsValues.expiry.split("/").length===2){const t=this.cardDetailsValues.expiry.split("/")[1].trim();return!!this.cardDetailsValues.number&&this.cardDetailsValues.number.length>15&&!!this.cardDetailsValues.expiry&&this.cardDetailsValues.expiry.length>3&&!!this.cardDetailsValues.cvv&&this.cardDetailsValues.cvv.length>2&&t.length===2&&(this.currency==="ZAR"?this.cardDetailsValues.name.trim()!=="":!0)}}displayCardTypes(){requestAnimationFrame(()=>{const t=this.container.querySelector("#card-type");t.innerHTML="",this.creditCardTypes.length>0?this.creditCardTypes.forEach(r=>{const e=document.createElement("div");e.classList.add("card-type"),e.innerHTML=r.icon,t.appendChild(e)}):t.innerHTML=`<svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<span id="custom-toast-msg">${t}</span>`:t,e.appendChild(i);const o=document.createElement("span");return o.textContent="×",o.classList.add("close-btn","opacity-0"),o.onclick=()=>ht.removeToast(e),e.appendChild(o),e}),b(ht,"showToast",(t,r,e=3e3)=>{const i=document.getElementById("toast-container");if(i){const o=ht.createToast(t,r);i.appendChild(o),o.offsetHeight,o.classList.add("show"),setTimeout(()=>ht.removeToast(o),e)}}),b(ht,"removeToast",t=>{t.classList.remove("show"),t.addEventListener("transitionend",()=>{t.parentElement&&t.parentElement.removeChild(t)})});let Gi=ht;function Oa(n){return typeof n!="string"?null:n.startsWith("sk_test_")?"test":n.startsWith("sk_live_")?"live":null}class Na{constructor(t){b(this,"container");b(this,"onAction");b(this,"cardDetailsValues");b(this,"creditCardTypes");b(this,"merchantName");b(this,"currency");this.container=t.container,this.onAction=t.onAction,this.creditCardTypes=[...Ra],this.cardDetailsValues={number:"",expiry:"",cvv:"",name:""},this.merchantName=t.merchantName,this.currency=t.currency}attachListener(){const t=document.querySelector("#pci-dss");t&&t.classList.remove("hidden");const r=document.querySelector('input[name="number"]'),e=document.querySelector('input[name="expiry"]'),i=document.querySelector('input[name="cvv"]'),o=document.querySelector('input[name="name"]'),s=document.querySelector(".details-form-button"),a=document.querySelector("#checkoutcard");r&&r.addEventListener("input",l=>this.handleInputChange(l,s)),e&&e.addEventListener("input",l=>this.handleInputChange(l,s)),i&&i.addEventListener("input",l=>this.handleInputChange(l,s)),o&&o.addEventListener("input",l=>this.handleInputChange(l,s)),a&&a.addEventListener("submit",l=>{var c,d,h;l.preventDefault(),this.onAction(l)({pan:Mh(this.cardDetailsValues.number),cvv:this.cardDetailsValues.cvv,expiryMonth:(c=this.cardDetailsValues)==null?void 0:c.expiry.split("/")[0].trim(),expiryYear:(d=this.cardDetailsValues)==null?void 0:d.expiry.split("/")[1].trim(),...this.currency==="ZAR"&&{cardHolderName:(h=this.cardDetailsValues)==null?void 0:h.name}})})}validateCreditCard(t){if(t=t.replace(/\D/g,""),!t||t.length===0||t.length<13||t.length>19)return!1;const r=t.split("").map(i=>parseInt(i,10));for(let i=r.length-2;i>=0;i-=2){let o=r[i]*2;o>9&&(o-=9),r[i]=o}return r.reduce((i,o)=>i+o,0)%10===0}handleInputChange(t,r){var a,l,c;const e=t.target,{name:i,value:o}=e;let s=o;if(o.trim()===""){this.emptyCardState(e,i);return}if(i==="number"){s=Lh(o);const d=s.replace(/\s+/g,""),h=this.validateCreditCard(d);this.filterCreditCardType(o);const f=(a=this.creditCardTypes[0])==null?void 0:a.name;f&&Tt.map(y=>{if(y.name===this.currency)if(y.cardTypes.includes(f)){const w=Ph[f];if(w.length>1){const S=w.some(g=>d.length===g);this.checkInputValidity(h,e,"Your card number is invalid",S)}else d.length===w[0]&&this.checkInputValidity(h,e,"Your card number is invalid",d.length>=14&&d.length<=19)}else this.checkInputValidity(!1,e,"Invalid card. Only locally issued cards are accepted.",o.trim().length>=14&&o.trim().length<=19)})}else if(i==="expiry"){const d=new Date;s=Th(o);const h=s.split("/"),f=(l=h[0])==null?void 0:l.trim(),y=(c=h[1])==null?void 0:c.trim(),w=new Date().getFullYear()%100,S=d.getMonth()+1;let g=!0;(parseInt(y)===w&&parseInt(f)<S||parseInt(y)<w)&&(g=!1),(y==null?void 0:y.length)===2&&this.checkInputValidity(g,e,"Your card has expired",h.join("").length===4)}else i==="cvv"?s=Eh(o):i==="name"&&(s=o);if(this.cardDetailsValues={...this.cardDetailsValues,[i]:s},e.value=s,this.validateCard())r&&r.removeAttribute("disabled");else if(r){if(r.disabled)return;r.setAttribute("disabled","")}}hideCardHolderInput(){const t=document.querySelector("#card-name");this.currency==="ZAR"?t&&(t.style.display="block"):t&&(t.style.display="none")}validateCard(){if(this.cardDetailsValues.expiry.split("/").length===2){const t=this.cardDetailsValues.expiry.split("/")[1].trim();return!!this.cardDetailsValues.number&&this.cardDetailsValues.number.length>15&&!!this.cardDetailsValues.expiry&&this.cardDetailsValues.expiry.length>3&&!!this.cardDetailsValues.cvv&&this.cardDetailsValues.cvv.length>2&&t.length===2&&(this.currency==="ZAR"?this.cardDetailsValues.name.trim()!=="":!0)}}displayCardTypes(){requestAnimationFrame(()=>{const t=this.container.querySelector("#card-type");t.innerHTML="",this.creditCardTypes.length>0?this.creditCardTypes.forEach(r=>{const e=document.createElement("div");e.classList.add("card-type"),e.innerHTML=r.icon,t.appendChild(e)}):t.innerHTML=`<svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M24.5827 6.33333V14.6667C24.5827 14.8877 24.4554 15.0996 24.2288 15.2559C24.0022 15.4122 23.6948 15.5 23.3743 15.5H1.62435C1.30388 15.5 0.996535 15.4122 0.769928 15.2559C0.543322 15.0996 0.416016 14.8877 0.416016 14.6667V6.33333H24.5827ZM24.5827 4.66667H0.416016V1.33333C0.416016 1.11232 0.543322 0.900358 0.769928 0.744078C0.996535 0.587797 1.30388 0.5 1.62435 0.5H23.3743C23.6948 0.5 24.0022 0.587797 24.2288 0.744078C24.4554 0.900358 24.5827 1.11232 24.5827 1.33333V4.66667ZM16.1243 11.3333V13H20.9577V11.3333H16.1243Z"
           fill="#B6B4B9" />
@@ -2046,7 +2046,7 @@ or you can use record.mirror to access the mirror instance during recording.`,tc
         </div>\r
     </div>\r
 \r
-</div>`;class Zd{constructor(t){b(this,"container");b(this,"payment");b(this,"warningError");b(this,"pageLoader");b(this,"onAction");b(this,"restartTransactionProcess");this.container=t.container,this.onAction=t.onAction,this.restartTransactionProcess=t.restartTransactionProcess,this.warningError=new pt({container:this.container,onAction:this.restartTransactionProcess.bind(this)})}attachListener(){const t=this.container.querySelector("#authenticate-btn");t&&t.addEventListener("click",()=>{this.onAction(),O.track("start_payment",{payment_method:"EFT"})})}renderComponent(){this.container.innerHTML=this.render(),this.attachListener()}render(){return t0}}class i0{constructor({amount:t,totalAmount:r,container:e,customer:i,token:o,currency:s,rdtCode:a,url:l,reference:c,callBackUrl:d,metadata:h,localCurrency:f,hidePaymentMethods:y,showPaymentMethods:w,restartTransactionProcess:S,retryingPayment:g}){b(this,"contents");b(this,"eftAuthenticate");b(this,"successScreen");b(this,"pageLoader");b(this,"warningScreen");b(this,"transactionIssuesScreen");b(this,"container");b(this,"customer");b(this,"token");b(this,"amount");b(this,"totalAmount");b(this,"currency");b(this,"_currentStep");b(this,"rdtCode");b(this,"url");b(this,"reference");b(this,"callBackUrl");b(this,"metadata");b(this,"localCurrency");b(this,"hidePaymentMethods");b(this,"showPaymentMethods");b(this,"merchantPlanDetail",{});b(this,"restartTransactionProcess");b(this,"retryingPayment");b(this,"isMaxRetriesReached");b(this,"isMobile",!1);b(this,"paymentResponse");b(this,"paymentResponseHeaders");this.currency=s,this.container=e,this.token=o,this.customer=i,this.amount=t,this.totalAmount=r,this.rdtCode=a,this.url=l,this.reference=c,this.callBackUrl=d,this.metadata=h,this.localCurrency=f,this._currentStep=1,this.contents=this.container.querySelector("#payment-content-view"),this.hidePaymentMethods=y,this.showPaymentMethods=w,this.restartTransactionProcess=S,this.retryingPayment=g,this.isMaxRetriesReached=!1,this.paymentResponse={},this.paymentResponseHeaders={},this.renderEftContent(),O.track("eft_opens",{payment_method:"EFT"}),this.isMobile=window.matchMedia("(max-width: 767px)").matches}get currentStep(){return this._currentStep}set currentStep(t){this._currentStep=t,this.renderEftContent()}showLoader(){this.pageLoader=new cn(this.contents),this.pageLoader.mountLoader(),this.pageLoader.updateMessage("Verifying Payment")}setPaymentError(t){const r=this.container.querySelector("#payment-warning-text");r&&(r.textContent=t)}goBackToMerchant(){Vn(this.paymentResponse,this.paymentResponseHeaders,this.callBackUrl)}async createEftPayment(){const t=this.container.querySelector(".spinner"),r=this.container.querySelector("#authenticate-button-text");t&&r&&(t.classList.remove("hidden"),r.classList.add("hidden")),(()=>{var i,o;if(this.retryingPayment){const s={channel:"eft",reference:this.reference};return Fi(this.token,s,this.rdtCode,this.url)}else{const s={amount:this.amount,channel:"eft",currency:this.currency,customer:this.customer,reference:this.reference,callBackUrl:this.callBackUrl,metadata:this.metadata,...this.localCurrency&&{localCurrency:this.localCurrency},isCheckout:!0,...((i=this.merchantPlanDetail)==null?void 0:i.taxQuoteId)&&{taxQuoteId:(o=this.merchantPlanDetail)==null?void 0:o.taxQuoteId}};return Pa(this.token,s,this.rdtCode,this.url)}})().then(({data:i,headers:o})=>{var s,a,l;if(this.paymentResponse=i,this.paymentResponseHeaders=o,i.status==="failed"){this.currentStep=4,i.providerMessage?this.warningScreen.setPaymentError(i.providerMessage):this.warningScreen.setPaymentError("Payment failed"),O.track("start_payment",{payment_method:"EFT",verification_status:"Failed"});return}else if(((s=i==null?void 0:i.authorization)==null?void 0:s.mode)==="redirect"){(a=i==null?void 0:i.authorization)!=null&&a.redirectUrl&&this.redirectToOzow((l=i==null?void 0:i.authorization)==null?void 0:l.redirectUrl);return}else this.currentStep=4,i!=null&&i.providerMessage?this.warningScreen.setPaymentError(i==null?void 0:i.providerMessage):this.warningScreen.setPaymentError("Unable to get redirect URL")}).catch(i=>{i.code==="payment_max_retry_attempts"?(this.isMaxRetriesReached=!0,this.verifyPaymentProcess(),this.currentStep=4,this.warningScreen.setPaymentError("Maximum retries","You have reached the maximum number of retries allowed. Go back to merchant website to start the payment process again.","Go back to Merchant")):(this.currentStep=4,i.message?this.warningScreen.setPaymentError(i.message):this.warningScreen.setPaymentError("Payment failed"))}).finally(()=>{t&&r&&(t.classList.add("hidden"),r.classList.remove("hidden"))})}redirectToOzow(t){const r=window.open(t,"_blank");if(r){O.track("auth_redirect",{payment_method:"EFT",authentication_type:"Redirect",verification_status:"In Progress"}),this.currentStep=3,this.showLoader();const e=setInterval(()=>{r.closed&&(clearInterval(e),this.verifyPaymentProcess())},2e3)}}async verifyPaymentProcess(){try{const t=await Jn(this.token,this.reference,void 0,this.rdtCode,this.url);this.paymentResponse=t.data,this.paymentResponseHeaders=t.headers;const r=this.paymentResponse.status;r==="successful"?(this.currentStep=2,O.track("verify_payment",{payment_method:"EFT",verification_status:"Success"}),Vn(this.paymentResponse,this.paymentResponseHeaders,"success")):r==="failed"?(this.currentStep=4,O.track("verify_payment",{payment_method:"EFT",verification_status:"Failed"}),this.paymentResponse.providerMessage?this.warningScreen.setPaymentError(this.paymentResponse.providerMessage):this.warningScreen.setPaymentError("Payment failed")):r==="cancelled"&&(this.isMaxRetriesReached=!0,this.currentStep=4,this.warningScreen.setPaymentError("Payment Cancelled","You have cancelled the payment. Go back to merchant website to start the payment process again.","Go back to Merchant"))}catch{this.currentStep=4,this.warningScreen.setPaymentError("Payment failed")}}renderEftContent(t){var e;t&&(this.merchantPlanDetail=t);const r=document.getElementById("go-back");if(this.currentStep!==1?(this.hidePaymentMethods(),r==null||r.classList.add("hidden")):this.showPaymentMethods(),this.isMobile&&this.hidePaymentMethods(),this.contents){switch(this.currentStep){case 1:this.eftAuthenticate=new Zd({container:this.contents,onAction:this.createEftPayment.bind(this),restartTransactionProcess:this.restartTransactionProcess.bind(this)}),this.eftAuthenticate.renderComponent();break;case 2:this.successScreen=new ii({container:this.contents,amount:this.totalAmount,currency:this.currency,localCurrency:this.localCurrency,rate:(e=this.merchantPlanDetail)==null?void 0:e.rate.rate}),this.successScreen.renderComponent();break;case 3:this.pageLoader=new cn(this.contents),this.pageLoader.mountLoader(),this.pageLoader.updateMessage("Verifying Payment");break;case 4:this.warningScreen=new pt({container:this.contents,onAction:this.isMaxRetriesReached?this.goBackToMerchant.bind(this):this.restartTransactionProcess.bind(this),onReportIssue:()=>this.currentStep=5}),this.contents.innerHTML=this.warningScreen.render(),this.warningScreen.attachListener();break;case 5:this.transactionIssuesScreen=new Ki({container:this.contents,onAction:()=>{var o;this.currentStep=4,this.warningScreen.setPaymentError(((o=this.paymentResponse)==null?void 0:o.providerMessage)||"Payment failed")},url:this.url,rdtCode:this.rdtCode,token:this.token,paymentChannel:"eft",callBackUrl:this.callBackUrl,paymentResponse:this.paymentResponse,paymentResponseHeaders:this.paymentResponseHeaders}),this.transactionIssuesScreen.renderTransactionIssuesComponent();break;default:this.eftAuthenticate=new Zd({container:this.contents,onAction:this.createEftPayment.bind(this),restartTransactionProcess:this.restartTransactionProcess.bind(this)}),this.eftAuthenticate.renderComponent();break}const i=this.container.querySelector("#card-currency");i&&(i.textContent=`${this.localCurrency?this.localCurrency:this.currency} Card`)}}}class r0{constructor({container:t,customerDetails:r,code:e,encryption:i,merchantKey:o,modalContainer:s,amount:a,planId:l,rdtCode:c,url:d,reference:h,callBackUrl:f,metadata:y,localCurrency:w,closePayment:S,countryCode:g,mode:k}){b(this,"validChannels",[]);b(this,"disabledChannels",[]);b(this,"selectedChannel");b(this,"modalContainer");b(this,"currentPaymentMethod");b(this,"mainLayout");b(this,"mainHeader");b(this,"mainFooter");b(this,"testCard");b(this,"merchantPlanDetail",{});b(this,"mainScreen");b(this,"currency");b(this,"card");b(this,"transfer");b(this,"ussd");b(this,"mobileMoney");b(this,"eft");b(this,"encryption");b(this,"merchantKey");b(this,"planId");b(this,"customerDetails");b(this,"code");b(this,"amount",0);b(this,"rdtCode");b(this,"url");b(this,"reference");b(this,"isMobile",!1);b(this,"callBackUrl");b(this,"metadata");b(this,"localCurrency");b(this,"closePayment");b(this,"retryingPayment");b(this,"totalAmount");b(this,"countryCode");b(this,"mode");this.validChannels=[],this.disabledChannels=[],this.selectedChannel="",this.modalContainer=s,this.encryption=i,this.planId=l||"",this.merchantKey=o,this.code=e,this.amount=a||0,this.rdtCode=c||"",this.url=d||"",this.reference=h,this.mainLayout=t,this.callBackUrl=f,this.metadata=y||{},this.localCurrency=w||"",this.isMobile=window.matchMedia("(max-width: 767px)").matches,this.currentPaymentMethod="",this.currency="",this.closePayment=S,this.retryingPayment=!1,this.totalAmount=0,this.countryCode=g||"",this.customerDetails=r,this.mode=k}mountScreen(t,r,e,i){var l,c;e&&(this.validChannels=e),i&&(this.disabledChannels=i),this.mainLayout.innerHTML=this.render(),this.merchantPlanDetail=t,this.currency=r;const o=(c=(l=this.merchantPlanDetail.plan)==null?void 0:l.pricingOptions)==null?void 0:c.find(d=>d.currency===this.currency);this.amount=(o==null?void 0:o.amount)||this.amount,this.totalAmount=this.merchantPlanDetail.totalAmount||this.amount,this.mainHeader=new W3({container:document.getElementById("main-header"),email:this.customerDetails.email,amount:this.amount,metadata:this.metadata,currency:this.currency,localCurrency:this.localCurrency,merchantDetail:t,onAction:this.switchTab.bind(this),isMobile:this.isMobile,onClose:d=>{this.closeBTN.bind(this)(d)},currentPaymentMethod:this.currentPaymentMethod}),this.mainHeader.renderComponent(),this.testCard=new Fd({container:document.getElementById("test-container"),closeCallback:()=>{const d=document.getElementById("test-container");d&&(d.innerHTML="",d.classList.add("hidden"))}});const s=!1,a=Oa(this.merchantKey);this.mainFooter=new jd({container:document.getElementById("main-footer"),testCardContainer:document.getElementById("test-container"),keyEnvironment:a||this.mode,isVisible:s}),document.addEventListener("DOMContentLoaded",()=>{const d=document.getElementById("main-footer"),h=document.getElementById("test-container");new jd({container:d,testCardContainer:h,keyEnvironment:a||this.mode,isVisible:s}).renderComponent()}),this.mainFooter.renderComponent(),this.setupPaymentMethodButtons(),this.selectedChannel&&(this.currentPaymentMethod=this.selectedChannel),this.updatePaymentMethodView(this.merchantKey,this.customerDetails,this.amount,this.totalAmount,this.currency),this.renderPaymentMethodContent(),this.setCurrentPaymentMethod(this.currentPaymentMethod)}setupPaymentMethodButtons(){const t=document.querySelectorAll(".tab-button");t.forEach(e=>{e.removeAttribute("disabled"),e.classList.remove("hidden","disabled","limit-exceeded");const i=e.querySelector(".disabled-indicator");i&&e.removeChild(i)});const r=[...this.validChannels,...this.disabledChannels];t.forEach(e=>{const i=e.getAttribute("data-name");i&&!r.includes(i)&&e.classList.add("hidden")}),this.disabledChannels.forEach(e=>{const i=Array.from(t).find(o=>o.getAttribute("data-name")===e);if(i){i.setAttribute("disabled","true"),i.classList.add("disabled","limit-exceeded"),i.setAttribute("title","Transaction amount exceeds limit for this payment method");const o=document.createElement("span");o.classList.add("disabled-indicator"),o.style.fontSize="10px",o.style.color="#FF5733",o.style.display="block",i.appendChild(o)}})}attachListeners(){const t=document.getElementById("go-back"),r=document.getElementById("select-payment-method-text");this.isMobile&&(this.currentPaymentMethod?(t&&(t.classList.add("flex","items-center","gap-2","mb-2"),t.innerHTML=` <svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+</div>`;class Zd{constructor(t){b(this,"container");b(this,"payment");b(this,"warningError");b(this,"pageLoader");b(this,"onAction");b(this,"restartTransactionProcess");this.container=t.container,this.onAction=t.onAction,this.restartTransactionProcess=t.restartTransactionProcess,this.warningError=new pt({container:this.container,onAction:this.restartTransactionProcess.bind(this)})}attachListener(){const t=this.container.querySelector("#authenticate-btn");t&&t.addEventListener("click",()=>{this.onAction(),O.track("start_payment",{payment_method:"EFT"})})}renderComponent(){this.container.innerHTML=this.render(),this.attachListener()}render(){return t0}}class i0{constructor({amount:t,totalAmount:r,container:e,customer:i,token:o,currency:s,rdtCode:a,url:l,reference:c,callBackUrl:d,metadata:h,localCurrency:f,hidePaymentMethods:y,showPaymentMethods:w,restartTransactionProcess:S,retryingPayment:g}){b(this,"contents");b(this,"eftAuthenticate");b(this,"successScreen");b(this,"pageLoader");b(this,"warningScreen");b(this,"transactionIssuesScreen");b(this,"container");b(this,"customer");b(this,"token");b(this,"amount");b(this,"totalAmount");b(this,"currency");b(this,"_currentStep");b(this,"rdtCode");b(this,"url");b(this,"reference");b(this,"callBackUrl");b(this,"metadata");b(this,"localCurrency");b(this,"hidePaymentMethods");b(this,"showPaymentMethods");b(this,"merchantPlanDetail",{});b(this,"restartTransactionProcess");b(this,"retryingPayment");b(this,"isMaxRetriesReached");b(this,"isMobile",!1);b(this,"paymentResponse");b(this,"paymentResponseHeaders");this.currency=s,this.container=e,this.token=o,this.customer=i,this.amount=t,this.totalAmount=r,this.rdtCode=a,this.url=l,this.reference=c,this.callBackUrl=d,this.metadata=h,this.localCurrency=f,this._currentStep=1,this.contents=this.container.querySelector("#payment-content-view"),this.hidePaymentMethods=y,this.showPaymentMethods=w,this.restartTransactionProcess=S,this.retryingPayment=g,this.isMaxRetriesReached=!1,this.paymentResponse={},this.paymentResponseHeaders={},this.renderEftContent(),O.track("eft_opens",{payment_method:"EFT"}),this.isMobile=window.matchMedia("(max-width: 767px)").matches}get currentStep(){return this._currentStep}set currentStep(t){this._currentStep=t,this.renderEftContent()}showLoader(){this.pageLoader=new cn(this.contents),this.pageLoader.mountLoader(),this.pageLoader.updateMessage("Verifying Payment")}setPaymentError(t){const r=this.container.querySelector("#payment-warning-text");r&&(r.textContent=t)}goBackToMerchant(){Vn(this.paymentResponse,this.paymentResponseHeaders,this.callBackUrl)}async createEftPayment(){const t=this.container.querySelector(".spinner"),r=this.container.querySelector("#authenticate-button-text");t&&r&&(t.classList.remove("hidden"),r.classList.add("hidden")),(()=>{var i,o;if(this.retryingPayment){const s={channel:"eft",reference:this.reference};return Fi(this.token,s,this.rdtCode,this.url)}else{const s={amount:this.amount,channel:"eft",currency:this.currency,customer:this.customer,reference:this.reference,callBackUrl:this.callBackUrl,metadata:this.metadata,...this.localCurrency&&{localCurrency:this.localCurrency},isCheckout:!0,...((i=this.merchantPlanDetail)==null?void 0:i.taxQuoteId)&&{taxQuoteId:(o=this.merchantPlanDetail)==null?void 0:o.taxQuoteId}};return Pa(this.token,s,this.rdtCode,this.url)}})().then(({data:i,headers:o})=>{var s,a,l;if(this.paymentResponse=i,this.paymentResponseHeaders=o,i.status==="failed"){this.currentStep=4,i.providerMessage?this.warningScreen.setPaymentError(i.providerMessage):this.warningScreen.setPaymentError("Payment failed"),O.track("start_payment",{payment_method:"EFT",verification_status:"Failed"});return}else if(((s=i==null?void 0:i.authorization)==null?void 0:s.mode)==="redirect"){(a=i==null?void 0:i.authorization)!=null&&a.redirectUrl&&this.redirectToOzow((l=i==null?void 0:i.authorization)==null?void 0:l.redirectUrl);return}else this.currentStep=4,i!=null&&i.providerMessage?this.warningScreen.setPaymentError(i==null?void 0:i.providerMessage):this.warningScreen.setPaymentError("Unable to get redirect URL")}).catch(i=>{i.code==="payment_max_retry_attempts"?(this.isMaxRetriesReached=!0,this.verifyPaymentProcess(),this.currentStep=4,this.warningScreen.setPaymentError("Maximum retries","You have reached the maximum number of retries allowed. Go back to merchant website to start the payment process again.","Go back to Merchant")):(this.currentStep=4,i.message?this.warningScreen.setPaymentError(i.message):this.warningScreen.setPaymentError("Payment failed"))}).finally(()=>{t&&r&&(t.classList.add("hidden"),r.classList.remove("hidden"))})}redirectToOzow(t){const r=window.open(t,"_blank");if(r){O.track("auth_redirect",{payment_method:"EFT",authentication_type:"Redirect",verification_status:"In Progress"}),this.currentStep=3,this.showLoader();const e=setInterval(()=>{r.closed&&(clearInterval(e),this.verifyPaymentProcess())},2e3)}}async verifyPaymentProcess(){try{const t=await Jn(this.token,this.reference,void 0,this.rdtCode,this.url);this.paymentResponse=t.data,this.paymentResponseHeaders=t.headers;const r=this.paymentResponse.status;r==="successful"?(this.currentStep=2,O.track("verify_payment",{payment_method:"EFT",verification_status:"Success"}),Vn(this.paymentResponse,this.paymentResponseHeaders,"success")):r==="failed"?(this.currentStep=4,O.track("verify_payment",{payment_method:"EFT",verification_status:"Failed"}),this.paymentResponse.providerMessage?this.warningScreen.setPaymentError(this.paymentResponse.providerMessage):this.warningScreen.setPaymentError("Payment failed")):r==="cancelled"&&(this.isMaxRetriesReached=!0,this.currentStep=4,this.warningScreen.setPaymentError("Payment Cancelled","You have cancelled the payment. Go back to merchant website to start the payment process again.","Go back to Merchant"))}catch{this.currentStep=4,this.warningScreen.setPaymentError("Payment failed")}}renderEftContent(t){var e;t&&(this.merchantPlanDetail=t);const r=document.getElementById("go-back");if(this.currentStep!==1?(this.hidePaymentMethods(),r==null||r.classList.add("hidden")):this.showPaymentMethods(),this.isMobile&&this.hidePaymentMethods(),this.contents){switch(this.currentStep){case 1:this.eftAuthenticate=new Zd({container:this.contents,onAction:this.createEftPayment.bind(this),restartTransactionProcess:this.restartTransactionProcess.bind(this)}),this.eftAuthenticate.renderComponent();break;case 2:this.successScreen=new ii({container:this.contents,amount:this.totalAmount,currency:this.currency,localCurrency:this.localCurrency,rate:(e=this.merchantPlanDetail)==null?void 0:e.rate.rate}),this.successScreen.renderComponent();break;case 3:this.pageLoader=new cn(this.contents),this.pageLoader.mountLoader(),this.pageLoader.updateMessage("Verifying Payment");break;case 4:this.warningScreen=new pt({container:this.contents,onAction:this.isMaxRetriesReached?this.goBackToMerchant.bind(this):this.restartTransactionProcess.bind(this),onReportIssue:()=>this.currentStep=5}),this.contents.innerHTML=this.warningScreen.render(),this.warningScreen.attachListener();break;case 5:this.transactionIssuesScreen=new Ki({container:this.contents,onAction:()=>{var o;this.currentStep=4,this.warningScreen.setPaymentError(((o=this.paymentResponse)==null?void 0:o.providerMessage)||"Payment failed")},url:this.url,rdtCode:this.rdtCode,token:this.token,paymentChannel:"eft",callBackUrl:this.callBackUrl,paymentResponse:this.paymentResponse,paymentResponseHeaders:this.paymentResponseHeaders}),this.transactionIssuesScreen.renderTransactionIssuesComponent();break;default:this.eftAuthenticate=new Zd({container:this.contents,onAction:this.createEftPayment.bind(this),restartTransactionProcess:this.restartTransactionProcess.bind(this)}),this.eftAuthenticate.renderComponent();break}const i=this.container.querySelector("#card-currency");i&&(i.textContent=`${this.localCurrency?this.localCurrency:this.currency} Card`)}}}class r0{constructor({container:t,customerDetails:r,code:e,encryption:i,merchantKey:o,modalContainer:s,amount:a,planId:l,rdtCode:c,url:d,reference:h,callBackUrl:f,metadata:y,localCurrency:w,closePayment:S,countryCode:g,mode:k}){b(this,"validChannels",[]);b(this,"disabledChannels",[]);b(this,"selectedChannel");b(this,"modalContainer");b(this,"currentPaymentMethod");b(this,"mainLayout");b(this,"mainHeader");b(this,"mainFooter");b(this,"testCard");b(this,"merchantPlanDetail",{});b(this,"mainScreen");b(this,"currency");b(this,"card");b(this,"transfer");b(this,"ussd");b(this,"mobileMoney");b(this,"eft");b(this,"encryption");b(this,"merchantKey");b(this,"planId");b(this,"customerDetails");b(this,"code");b(this,"amount",0);b(this,"rdtCode");b(this,"url");b(this,"reference");b(this,"isMobile",!1);b(this,"callBackUrl");b(this,"metadata");b(this,"localCurrency");b(this,"closePayment");b(this,"retryingPayment");b(this,"totalAmount");b(this,"countryCode");b(this,"mode");this.validChannels=[],this.disabledChannels=[],this.selectedChannel="",this.modalContainer=s,this.encryption=i,this.planId=l||"",this.merchantKey=o,this.code=e,this.amount=a||0,this.rdtCode=c||"",this.url=d||"",this.reference=h,this.mainLayout=t,this.callBackUrl=f,this.metadata=y||{},this.localCurrency=w||"",this.isMobile=window.matchMedia("(max-width: 767px)").matches,this.currentPaymentMethod="",this.currency="",this.closePayment=S,this.retryingPayment=!1,this.totalAmount=0,this.countryCode=g||"",this.customerDetails=r,this.mode=k}mountScreen(t,r,e,i){var l,c;e&&(this.validChannels=e),i&&(this.disabledChannels=i),this.mainLayout.innerHTML=this.render(),this.merchantPlanDetail=t,this.currency=r;const o=(c=(l=this.merchantPlanDetail.plan)==null?void 0:l.pricingOptions)==null?void 0:c.find(d=>d.currency===this.currency);this.amount=(o==null?void 0:o.amount)||this.amount,this.totalAmount=this.merchantPlanDetail.totalAmount||this.amount,this.mainHeader=new W3({container:document.getElementById("main-header"),email:this.customerDetails.email,amount:this.amount,metadata:this.metadata,currency:this.currency,localCurrency:this.localCurrency,merchantDetail:t,onAction:this.switchTab.bind(this),isMobile:this.isMobile,onClose:d=>{this.closeBTN.bind(this)(d)},currentPaymentMethod:this.currentPaymentMethod}),this.mainHeader.renderComponent(),this.testCard=new Fd({container:document.getElementById("test-container"),closeCallback:()=>{const d=document.getElementById("test-container");d&&(d.innerHTML="",d.classList.add("hidden"))}});const s=!1,a=Oa(this.merchantKey);this.mainFooter=new jd({container:document.getElementById("main-footer"),testCardContainer:document.getElementById("test-container"),keyEnvironment:a||(this.mode?this.mode:null),isVisible:s}),document.addEventListener("DOMContentLoaded",()=>{const d=document.getElementById("main-footer"),h=document.getElementById("test-container");new jd({container:d,testCardContainer:h,keyEnvironment:a||(this.mode?this.mode:null),isVisible:s}).renderComponent()}),this.mainFooter.renderComponent(),this.setupPaymentMethodButtons(),this.selectedChannel&&(this.currentPaymentMethod=this.selectedChannel),this.updatePaymentMethodView(this.merchantKey,this.customerDetails,this.amount,this.totalAmount,this.currency),this.renderPaymentMethodContent(),this.setCurrentPaymentMethod(this.currentPaymentMethod)}setupPaymentMethodButtons(){const t=document.querySelectorAll(".tab-button");t.forEach(e=>{e.removeAttribute("disabled"),e.classList.remove("hidden","disabled","limit-exceeded");const i=e.querySelector(".disabled-indicator");i&&e.removeChild(i)});const r=[...this.validChannels,...this.disabledChannels];t.forEach(e=>{const i=e.getAttribute("data-name");i&&!r.includes(i)&&e.classList.add("hidden")}),this.disabledChannels.forEach(e=>{const i=Array.from(t).find(o=>o.getAttribute("data-name")===e);if(i){i.setAttribute("disabled","true"),i.classList.add("disabled","limit-exceeded"),i.setAttribute("title","Transaction amount exceeds limit for this payment method");const o=document.createElement("span");o.classList.add("disabled-indicator"),o.style.fontSize="10px",o.style.color="#FF5733",o.style.display="block",i.appendChild(o)}})}attachListeners(){const t=document.getElementById("go-back"),r=document.getElementById("select-payment-method-text");this.isMobile&&(this.currentPaymentMethod?(t&&(t.classList.add("flex","items-center","gap-2","mb-2"),t.innerHTML=` <svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.99984 16.9201L1.47984 10.4001C0.709844 9.63008 0.709844 8.37008 1.47984 7.60008L7.99984 1.08008" stroke="#0D0716" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
     <span class="text-tone-100 font-semibold">

package/dist/modules/Card.d.ts

@@ -24,7 +24,7 @@ type Props = {
     onClose: (notClosePayment: boolean) => void;
     restartTransactionProcess: () => void;
     retryingPayment: boolean;
-    keys: string;
+    keys: string | null;
     testcardIsVisible: boolean;
 };
 declare class Card {
@@ -67,7 +67,7 @@ declare class Card {
     isMaxRetriesReached: boolean;
     isCancelledPlan: boolean;
     isMobile: boolean;
-    keys: string;
+    keys: string | null;
     testcardIsVisible: boolean;
     constructor({ amount, totalAmount, container, customer, encryption, planId, token, currency, rdtCode, url, reference, onSuccess, callBackUrl, metadata, localCurrency, hidePaymentMethods, showPaymentMethods, onClose, restartTransactionProcess, retryingPayment, keys, testcardIsVisible, }: Props);
     get currentStep(): number;

package/dist/utils.d.ts

@@ -22,4 +22,4 @@ export declare class Toast {
     static showToast: (message: string, theme: "success" | "error" | "info" | "warning", duration?: number) => void;
     static removeToast: (toast: HTMLDivElement) => void;
 }
-export declare function getKeyEnvironment(apiKey: string): "test" | "live" | "unknown" | "invalid";
+export declare function getKeyEnvironment(apiKey: string): "test" | "live" | null;

package/dist/views/shared/main-footer.d.ts

@@ -3,7 +3,7 @@ import { TestCard } from './test-card';
 type Props = {
     container: HTMLDivElement;
     testCardContainer: HTMLDivElement;
-    keyEnvironment: string;
+    keyEnvironment: string | null;
     isVisible?: boolean;
 };
 export declare function hideTestContainer(container: HTMLElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spot-flow/checkout-inline-js",
-  "version": "0.1.46-dev.1",
+  "version": "0.1.46-dev.2",
   "description": "",
   "main": "dist/checkout-inline.js",
   "module": "dist/checkout-inline.es.js",