@spot-flow/checkout-inline-js 0.1.33-dev.2 → 0.1.33-dev.3

package/dist/checkout-inline.es.js

@@ -395,6 +395,7 @@ const qt = [
     name: "GHS",
     dialCode: "+233",
     length: "9",
+    cardTypes: ["Visa", "MasterCard", "Gh-link"],
     icon: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gh" viewBox="0 0 512 512">
   <path fill="#006b3f" d="M0 0h512v512H0z"/>
   <path fill="#fcd116" d="M0 0h512v341.3H0z"/>
@@ -407,6 +408,7 @@ const qt = [
     name: "KES",
     dialCode: "+254",
     length: "9",
+    cardTypes: ["Visa", "MasterCard"],
     icon: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-ke" viewBox="0 0 512 512">
   <defs>
     <path id="ke-a" stroke-miterlimit="10" d="m-28.6 47.5 1.8 1 46.7-81c2.7-.6 4.2-3.2 5.7-5.8 1-1.8 5-8.7 6.7-17.7a58 58 0 0 0-11.9 14.7c-1.5 2.6-3 5.2-2.3 7.9z"/>
@@ -436,6 +438,7 @@ const qt = [
     name: "ZAR",
     dialCode: "+27",
     length: "9",
+    cardTypes: ["Visa", "MasterCard", "Amex", "Diners Club"],
     icon: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-za" viewBox="0 0 512 512">
   <defs>
     <clipPath id="za-a">
@@ -453,6 +456,19 @@ const qt = [
     </g>
   </g>
 </svg>
+`
+  },
+  {
+    name: "NGN",
+    dialCode: "+234",
+    length: "10",
+    cardTypes: ["Visa", "MasterCard", "Verve", "AfriGo"],
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ng" viewBox="0 0 512 512">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h512v512H0z"/>
+    <path fill="#008753" d="M341.3 0H512v512H341.3zM0 0h170.7v512H0z"/>
+  </g>
+</svg>
 `
   }
 ], Cr = `<div>
@@ -34534,7 +34550,7 @@ class su {
       l.value = l.value.replace(/\D/g, ""), this.validateForm();
     }), s.addEventListener("change", () => this.validateForm())), i && i.classList.add("hidden"), !(!s || !t || !o) && e && e.addEventListener("submit", (r) => {
       r.preventDefault();
-      const l = t.value, u = s.value;
+      const l = `0${t.value}`, u = s.value;
       this.onAction(r)({
         code: u,
         // "mtn-gh",

package/dist/checkout-inline.js

@@ -123,13 +123,13 @@
 <path d="M10.0163 6.41102L11.366 0.60263H13.5249L12.1742 6.41102H10.0163ZM19.974 0.727841C19.5464 0.610166 18.8761 0.483887 18.0392 0.483887C15.9058 0.483887 14.4033 1.27168 14.3904 2.40075C14.3784 3.23536 15.4632 3.70099 16.2821 3.9788C17.1225 4.26358 17.4049 4.44511 17.4009 4.6993C17.3955 5.08867 16.7298 5.26646 16.1092 5.26646C15.2452 5.26646 14.7861 5.17842 14.0771 4.96165L13.7988 4.86934L13.4959 6.16958C14.0002 6.33179 14.9326 6.4722 15.9008 6.4795C18.1702 6.4795 19.6435 5.70069 19.6602 4.49495C19.6683 3.83418 19.0931 3.33141 17.8475 2.91682C17.0929 2.64812 16.6308 2.46881 16.6357 2.19673C16.6357 1.9553 17.0269 1.69713 17.8722 1.69713C18.578 1.68909 19.0895 1.80199 19.488 1.91966L19.6814 1.98669L19.974 0.727841ZM25.5296 0.602541H23.8614C23.3447 0.602541 22.9579 0.705974 22.731 1.08422L19.5247 6.40719H21.7917C21.7917 6.40719 22.1623 5.69149 22.2461 5.53433C22.4939 5.53433 24.6962 5.53682 25.011 5.53682C25.0756 5.74018 25.2737 6.40719 25.2737 6.40719H27.277L25.5296 0.602363V0.602541ZM22.8828 4.35325C23.0614 4.01859 23.743 2.72953 23.743 2.72953C23.7303 2.74499 23.9203 2.39324 24.0292 2.17516L24.1751 2.67595C24.1751 2.67595 24.5885 4.06244 24.6749 4.35316H22.8828V4.35325ZM8.18357 0.602541L6.06996 4.56361L5.8448 3.75867C5.45128 2.83074 4.22537 1.8254 2.85486 1.32209L4.78753 6.40176L7.07172 6.39989L10.4706 0.602481L8.18357 0.602452" fill="#0E4595"/>
 <path d="M4.09771 0.602448H0.616461L0.588867 0.723297C3.29725 1.20409 5.08928 2.36597 5.83334 3.7622L5.07637 1.093C4.94572 0.725196 4.56669 0.615413 4.09779 0.602596" fill="#F2AE14"/>
 </svg>
-`}],Tt=[{name:"GHS",dialCode:"+233",length:"9",icon:`<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gh" viewBox="0 0 512 512">
+`}],Tt=[{name:"GHS",dialCode:"+233",length:"9",cardTypes:["Visa","MasterCard","Gh-link"],icon:`<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gh" viewBox="0 0 512 512">
   <path fill="#006b3f" d="M0 0h512v512H0z"/>
   <path fill="#fcd116" d="M0 0h512v341.3H0z"/>
   <path fill="#ce1126" d="M0 0h512v170.7H0z"/>
   <path fill="#000001" d="m256 170.7 55.5 170.6L166.3 236h179.4L200.6 341.3z"/>
 </svg>
-`},{name:"KES",dialCode:"+254",length:"9",icon:`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-ke" viewBox="0 0 512 512">
+`},{name:"KES",dialCode:"+254",length:"9",cardTypes:["Visa","MasterCard"],icon:`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-ke" viewBox="0 0 512 512">
   <defs>
     <path id="ke-a" stroke-miterlimit="10" d="m-28.6 47.5 1.8 1 46.7-81c2.7-.6 4.2-3.2 5.7-5.8 1-1.8 5-8.7 6.7-17.7a58 58 0 0 0-11.9 14.7c-1.5 2.6-3 5.2-2.3 7.9z"/>
   </defs>
@@ -152,7 +152,7 @@
     <use xlink:href="#ke-d" width="100%" height="100%" transform="scale(1 -1)"/>
   </g>
 </svg>
-`},{name:"ZAR",dialCode:"+27",length:"9",icon:`<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-za" viewBox="0 0 512 512">
+`},{name:"ZAR",dialCode:"+27",length:"9",cardTypes:["Visa","MasterCard","Amex","Diners Club"],icon:`<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-za" viewBox="0 0 512 512">
   <defs>
     <clipPath id="za-a">
       <path fill-opacity=".7" d="M70.1 0h499.6v499.6H70.1z"/>
@@ -169,6 +169,12 @@
     </g>
   </g>
 </svg>
+`},{name:"NGN",dialCode:"+234",length:"10",cardTypes:["Visa","MasterCard","Verve","AfriGo"],icon:`<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ng" viewBox="0 0 512 512">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h512v512H0z"/>
+    <path fill="#008753" d="M341.3 0H512v512H341.3zM0 0h170.7v512H0z"/>
+  </g>
+</svg>
 `}],_s=`<div>
   <form id="checkoutcard">
     <div>
@@ -1346,7 +1352,7 @@ or you can use record.mirror to access the mirror instance during recording.`;le
       Ghana Revenue Authority (GRA).
     </div>
   </div>
-</form>`;class rl{constructor(e){h(this,"container");h(this,"payment");h(this,"warningError");h(this,"pageLoader");h(this,"localCurrency");h(this,"rate");h(this,"amount");h(this,"onAction");h(this,"switchScreen");h(this,"merchantKey");h(this,"rdtCode");h(this,"url");h(this,"currency");h(this,"restartTransactionProcess");this.container=e.container,this.onAction=e.onAction,this.switchScreen=e.switchScreen,this.url=e.url,this.merchantKey=e.merchantKey,this.rdtCode=e.rdtCode,this.currency=e.currency,this.localCurrency=e.localCurrency,this.rate=e.rate,this.amount=e.amount,this.restartTransactionProcess=e.restartTransactionProcess,this.warningError=new fn({container:this.container,onAction:this.restartTransactionProcess.bind(this)})}validateForm(){const e=this.container.querySelector("#phone-number-input"),i=this.container.querySelector("#network-search-input"),t=this.container.querySelector(".details-form-button"),o=this.container.querySelector("#phone-number-container"),s=this.container.querySelector("#phone-number-error");if(!e||!i||!t)return;const r=this.localCurrency?this.localCurrency:this.currency,l=Tt.find(c=>c.name===r);e.value.length>Number((l==null?void 0:l.length)||"9")?(o&&(o.classList.remove("border-tone-40"),o.classList.add("border-[#D62020]"),e.classList.remove("text-tone-100"),e.classList.add("text-[#D62020]")),s&&(s.classList.remove("hidden"),s.classList.add("block"),s.innerHTML="Please enter a valid Ghana Mobile Money number.")):(o&&(o.classList.remove("border-[#D62020]"),o.classList.add("border-tone-40"),e.classList.remove("text-[#D62020]"),e.classList.add("text-tone-100")),s&&(s.classList.remove("block"),s.classList.add("hidden"))),e.value.length>0&&e.value.length===Number((l==null?void 0:l.length)||"9")&&i.value?t.disabled=!1:t.disabled=!0}attachListener(){const e=document.querySelector("#mobile-money-form"),i=document.querySelector("#pci-dss"),t=this.container.querySelector("#phone-number-input"),o=this.container.querySelector("#network-search-input"),s=this.container.querySelector(".details-form-button");s&&(s.disabled=!0),t&&o&&(t.addEventListener("input",r=>{const l=r.target;l.value=l.value.replace(/\D/g,""),this.validateForm()}),o.addEventListener("change",()=>this.validateForm())),i&&i.classList.add("hidden"),!(!o||!t||!s)&&e&&e.addEventListener("submit",r=>{r.preventDefault();const l=t.value,c=o.value;this.onAction(r)({code:c,phoneNumber:l}),P.track("start_payment",{payment_method:"Mobile Money"})})}displayButtonText(e){const i=this.container.querySelector("#mobile-money-button-text");i&&(this.localCurrency&&this.localCurrency!==this.currency?i.textContent=`Continue to pay ${this.localCurrency} ${ke((this.amount||0)*(this.rate||1),2)}`:i.textContent=`Continue to to pay ${this.currency} ${ke(this.amount||0,2)}`)}renderComponent(e){this.container.innerHTML=this.render();const i=this.container.querySelector("#network-search-input");if(i){const r=new Option("Select your network","",!0,!0);r.disabled=!0,i.appendChild(r),i.classList.remove("text-tone-100"),i.classList.add("text-tone-50"),i&&e.forEach(l=>{const c=new Option(l.name,l.code);i.appendChild(c),i.classList.remove("text-tone-50"),i.classList.add("text-tone-100")})}const t=this.container.querySelector("#region-code"),o=this.localCurrency?this.localCurrency:this.currency,s=Tt.find(r=>r.name===o);if(t){t.innerHTML=`
+</form>`;class rl{constructor(e){h(this,"container");h(this,"payment");h(this,"warningError");h(this,"pageLoader");h(this,"localCurrency");h(this,"rate");h(this,"amount");h(this,"onAction");h(this,"switchScreen");h(this,"merchantKey");h(this,"rdtCode");h(this,"url");h(this,"currency");h(this,"restartTransactionProcess");this.container=e.container,this.onAction=e.onAction,this.switchScreen=e.switchScreen,this.url=e.url,this.merchantKey=e.merchantKey,this.rdtCode=e.rdtCode,this.currency=e.currency,this.localCurrency=e.localCurrency,this.rate=e.rate,this.amount=e.amount,this.restartTransactionProcess=e.restartTransactionProcess,this.warningError=new fn({container:this.container,onAction:this.restartTransactionProcess.bind(this)})}validateForm(){const e=this.container.querySelector("#phone-number-input"),i=this.container.querySelector("#network-search-input"),t=this.container.querySelector(".details-form-button"),o=this.container.querySelector("#phone-number-container"),s=this.container.querySelector("#phone-number-error");if(!e||!i||!t)return;const r=this.localCurrency?this.localCurrency:this.currency,l=Tt.find(c=>c.name===r);e.value.length>Number((l==null?void 0:l.length)||"9")?(o&&(o.classList.remove("border-tone-40"),o.classList.add("border-[#D62020]"),e.classList.remove("text-tone-100"),e.classList.add("text-[#D62020]")),s&&(s.classList.remove("hidden"),s.classList.add("block"),s.innerHTML="Please enter a valid Ghana Mobile Money number.")):(o&&(o.classList.remove("border-[#D62020]"),o.classList.add("border-tone-40"),e.classList.remove("text-[#D62020]"),e.classList.add("text-tone-100")),s&&(s.classList.remove("block"),s.classList.add("hidden"))),e.value.length>0&&e.value.length===Number((l==null?void 0:l.length)||"9")&&i.value?t.disabled=!1:t.disabled=!0}attachListener(){const e=document.querySelector("#mobile-money-form"),i=document.querySelector("#pci-dss"),t=this.container.querySelector("#phone-number-input"),o=this.container.querySelector("#network-search-input"),s=this.container.querySelector(".details-form-button");s&&(s.disabled=!0),t&&o&&(t.addEventListener("input",r=>{const l=r.target;l.value=l.value.replace(/\D/g,""),this.validateForm()}),o.addEventListener("change",()=>this.validateForm())),i&&i.classList.add("hidden"),!(!o||!t||!s)&&e&&e.addEventListener("submit",r=>{r.preventDefault();const l=`0${t.value}`,c=o.value;this.onAction(r)({code:c,phoneNumber:l}),P.track("start_payment",{payment_method:"Mobile Money"})})}displayButtonText(e){const i=this.container.querySelector("#mobile-money-button-text");i&&(this.localCurrency&&this.localCurrency!==this.currency?i.textContent=`Continue to pay ${this.localCurrency} ${ke((this.amount||0)*(this.rate||1),2)}`:i.textContent=`Continue to to pay ${this.currency} ${ke(this.amount||0,2)}`)}renderComponent(e){this.container.innerHTML=this.render();const i=this.container.querySelector("#network-search-input");if(i){const r=new Option("Select your network","",!0,!0);r.disabled=!0,i.appendChild(r),i.classList.remove("text-tone-100"),i.classList.add("text-tone-50"),i&&e.forEach(l=>{const c=new Option(l.name,l.code);i.appendChild(c),i.classList.remove("text-tone-50"),i.classList.add("text-tone-100")})}const t=this.container.querySelector("#region-code"),o=this.localCurrency?this.localCurrency:this.currency,s=Tt.find(r=>r.name===o);if(t){t.innerHTML=`
       ${s==null?void 0:s.icon}
       <span class="text-tone-100 text-sm font-semibold">${s==null?void 0:s.dialCode}</span>
       `;const r=t.querySelector("svg");r&&(r.setAttribute("width","20"),r.setAttribute("height","20"))}this.displayButtonText(),this.attachListener()}renderContent(){this.switchScreen(2),ks(this.merchantKey,this.currency,this.rdtCode,this.url,this.localCurrency).then(e=>{this.renderComponent(e)}).catch(e=>{this.switchScreen(5),e.message?this.warningError.setPaymentError(e.message):this.warningError.setPaymentError("Unable to fetch network providers at this time.")})}render(){return al}}const ll=`<div id="checkoutMobileOtp">

package/dist/data.d.ts

@@ -42,5 +42,6 @@ export declare const regionFlags: {
     name: string;
     dialCode: string;
     length: string;
+    cardTypes: string[];
     icon: string;
 }[];

package/package.json

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