@spot-flow/checkout-inline-js 0.1.30 → 0.1.31-dev.1
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/dist/checkout-inline.es.js +61 -59
- package/dist/checkout-inline.js +36 -34
- package/dist/modules/Card.d.ts +0 -1
- package/package.json +1 -1
|
@@ -342,10 +342,11 @@ const Oi = [
|
|
|
342
342
|
], uo = `<div>
|
|
343
343
|
<form id="checkoutcard">
|
|
344
344
|
<div>
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
345
|
+
<div class="container-between">
|
|
346
|
+
<h5 class="text-grey-400 font-semibold text-sm">Enter your card details</h5>
|
|
347
|
+
<div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2 md:hidden"> <span
|
|
348
|
+
id="card-currency"></span> </div>
|
|
349
|
+
</div>
|
|
349
350
|
<div class="mt-3 mb-3 md:mb-5">
|
|
350
351
|
<div id="card-details" class="flex border border-grey-100 rounded-lg p-4">
|
|
351
352
|
<div class="grow relative flex gap-2">
|
|
@@ -366,15 +367,15 @@ const Oi = [
|
|
|
366
367
|
|
|
367
368
|
<div class="relative w-14 md:w-20">
|
|
368
369
|
<div class="w-4/5 md:w-3/5 ml-auto">
|
|
369
|
-
<input class="details-input-container" type="tel" id="card-expiry" name="expiry"
|
|
370
|
-
|
|
370
|
+
<input class="details-input-container" type="tel" id="card-expiry" name="expiry" placeholder="MM/YY"
|
|
371
|
+
required minlength="5" />
|
|
371
372
|
</div>
|
|
372
373
|
</div>
|
|
373
374
|
|
|
374
375
|
<div class="relative w-12 md:w-16">
|
|
375
376
|
<div class="w-4/5 md:w-3/5 ml-auto">
|
|
376
|
-
<input class="details-input-container" type="tel" id="card-cvv" name="cvv" placeholder="CVV"
|
|
377
|
-
|
|
377
|
+
<input class="details-input-container" type="tel" id="card-cvv" name="cvv" placeholder="CVV" required
|
|
378
|
+
minlength="3" />
|
|
378
379
|
</div>
|
|
379
380
|
</div>
|
|
380
381
|
</div>
|
|
@@ -407,7 +408,8 @@ const Oi = [
|
|
|
407
408
|
</div>
|
|
408
409
|
<div class="text-xs text-grey-400 mt-4">
|
|
409
410
|
<p>
|
|
410
|
-
By confirming this payment, you allow <span id="merchant-name">-</span> to charge your card for this payment and
|
|
411
|
+
By confirming this payment, you allow <span id="merchant-name">-</span> to charge your card for this payment and
|
|
412
|
+
future payments in
|
|
411
413
|
accordance with their terms.
|
|
412
414
|
</p>
|
|
413
415
|
</div>
|
|
@@ -29047,7 +29049,7 @@ class ka {
|
|
|
29047
29049
|
"#payment-content-view"
|
|
29048
29050
|
), this.cardResponse = {}, this.cardResponseHeader = {}, this.hidePaymentMethods = p, this.showPaymentMethods = y, this.onClose = k, this.restartTransactionProcess = S, this.retryingPayment = C, this.isMaxRetriesReached = !1, this.renderCardContent(), M.track("card_opens", {
|
|
29049
29051
|
payment_method: "Card"
|
|
29050
|
-
}), this.isMobile = window.matchMedia("(max-width: 767px)").matches
|
|
29052
|
+
}), this.isMobile = window.matchMedia("(max-width: 767px)").matches;
|
|
29051
29053
|
}
|
|
29052
29054
|
get currentStep() {
|
|
29053
29055
|
return this._currentStep;
|
|
@@ -29055,8 +29057,6 @@ class ka {
|
|
|
29055
29057
|
set currentStep(e) {
|
|
29056
29058
|
this._currentStep = e, this.renderCardContent();
|
|
29057
29059
|
}
|
|
29058
|
-
attachInputListeners() {
|
|
29059
|
-
}
|
|
29060
29060
|
async submitCardDetails(e, i) {
|
|
29061
29061
|
e.preventDefault(), M.track("input_cardDetails", {
|
|
29062
29062
|
payment_method: "Card",
|
|
@@ -29234,7 +29234,7 @@ class ka {
|
|
|
29234
29234
|
r.textContent = a, r.setAttribute("id", s), r.classList.add("warning-button");
|
|
29235
29235
|
const d = document.createElement("div");
|
|
29236
29236
|
d.appendChild(r), t.appendChild(d);
|
|
29237
|
-
})
|
|
29237
|
+
});
|
|
29238
29238
|
}
|
|
29239
29239
|
validatedAVS(e, i) {
|
|
29240
29240
|
e.stopPropagation(), e.preventDefault();
|
|
@@ -29433,7 +29433,7 @@ class ka {
|
|
|
29433
29433
|
case 1:
|
|
29434
29434
|
this.cardDetailForm = new Ri({
|
|
29435
29435
|
container: this.contents,
|
|
29436
|
-
onAction: (
|
|
29436
|
+
onAction: (a) => (r) => this.submitCardDetails.bind(this)(a, r),
|
|
29437
29437
|
merchantName: this.merchantPlanDetail.merchantName
|
|
29438
29438
|
}), this.cardDetailForm.renderContent();
|
|
29439
29439
|
break;
|
|
@@ -29441,14 +29441,14 @@ class ka {
|
|
|
29441
29441
|
this.cardPinForm = new _o({
|
|
29442
29442
|
container: this.contents,
|
|
29443
29443
|
onClose: this.onClose,
|
|
29444
|
-
onAction: (
|
|
29444
|
+
onAction: (a) => this.handlePinRequest.bind(this)(a)
|
|
29445
29445
|
}), this.cardPinForm.renderComponent();
|
|
29446
29446
|
break;
|
|
29447
29447
|
case 3:
|
|
29448
29448
|
this.cardOtpValidationForm = new So({
|
|
29449
29449
|
container: this.contents,
|
|
29450
29450
|
onClose: this.onClose,
|
|
29451
|
-
onAction: (
|
|
29451
|
+
onAction: (a) => (r) => this.submitOtp.bind(this)(a, r),
|
|
29452
29452
|
otpMessage: ((t = this.cardResponse) == null ? void 0 : t.providerMessage) || "Please enter your OTP sent to your phone"
|
|
29453
29453
|
}), this.cardOtpValidationForm.renderComponent();
|
|
29454
29454
|
break;
|
|
@@ -29474,7 +29474,7 @@ class ka {
|
|
|
29474
29474
|
case 7:
|
|
29475
29475
|
this.avsForm = new Lo({
|
|
29476
29476
|
container: this.contents,
|
|
29477
|
-
onAction: (
|
|
29477
|
+
onAction: (a) => (r) => this.validatedAVS.bind(this)(a, r)
|
|
29478
29478
|
}), this.avsForm.renderComponent();
|
|
29479
29479
|
break;
|
|
29480
29480
|
case 8:
|
|
@@ -29486,8 +29486,8 @@ class ka {
|
|
|
29486
29486
|
case 9:
|
|
29487
29487
|
this.confirmationEnd = new Yt({
|
|
29488
29488
|
container: this.contents,
|
|
29489
|
-
onAction: (
|
|
29490
|
-
this.currentStep =
|
|
29489
|
+
onAction: (a) => {
|
|
29490
|
+
this.currentStep = a;
|
|
29491
29491
|
},
|
|
29492
29492
|
ref: this.reference,
|
|
29493
29493
|
token: this.token,
|
|
@@ -29501,12 +29501,14 @@ class ka {
|
|
|
29501
29501
|
default:
|
|
29502
29502
|
this.cardDetailForm = new Ri({
|
|
29503
29503
|
container: this.contents,
|
|
29504
|
-
onAction: (
|
|
29504
|
+
onAction: (a) => (r) => this.submitCardDetails.bind(this)(a, r),
|
|
29505
29505
|
merchantName: this.merchantPlanDetail.merchantName
|
|
29506
29506
|
}), this.cardDetailForm.renderContent();
|
|
29507
29507
|
break;
|
|
29508
29508
|
}
|
|
29509
|
-
this.
|
|
29509
|
+
this.displayButtonText();
|
|
29510
|
+
const s = this.container.querySelector("#card-currency");
|
|
29511
|
+
s && (s.textContent = `${this.localCurrency ? this.localCurrency : this.currency} Card`);
|
|
29510
29512
|
}
|
|
29511
29513
|
}
|
|
29512
29514
|
redirectTo(e, i, t) {
|
|
@@ -31082,71 +31084,71 @@ class Ua {
|
|
|
31082
31084
|
k && this.localCurrency && (k.innerHTML = C ? `${C} (${this.localCurrency})` : this.localCurrency), S && this.localCurrency && (S.innerHTML = C ? `${C} (${this.localCurrency})` : this.localCurrency), this.renderPaymentOptions(this.container), this.attachListeners();
|
|
31083
31085
|
}
|
|
31084
31086
|
renderPaymentOptions(e) {
|
|
31085
|
-
const i = e.querySelector(".payment-options");
|
|
31087
|
+
const i = e.querySelector(".payment-options"), t = this.localCurrency ? this.localCurrency : this.currency;
|
|
31086
31088
|
if (i) {
|
|
31087
|
-
const
|
|
31089
|
+
const o = this.merchantDetail.plan ? [Y.card] : this.merchantDetail.paymentMethods.filter((s) => s !== "ussd").map((s) => Y[s]);
|
|
31088
31090
|
if (this.isMobile) {
|
|
31089
|
-
let
|
|
31090
|
-
|
|
31091
|
-
|
|
31092
|
-
<div key=${
|
|
31093
|
-
<button class="tab-button gap-2 mb-4 group" data-name="${
|
|
31094
|
-
<div class="lg:block">${
|
|
31091
|
+
let s = '<div class="">';
|
|
31092
|
+
o.forEach((a) => {
|
|
31093
|
+
s += `
|
|
31094
|
+
<div key=${a.key}>
|
|
31095
|
+
<button class="tab-button gap-2 mb-4 group" data-name="${a.key}">
|
|
31096
|
+
<div class="lg:block">${a.icon}</div>
|
|
31095
31097
|
<div class="flex items-center gap-2">
|
|
31096
|
-
<span>${
|
|
31097
|
-
${
|
|
31098
|
+
<span>${a.label} </span>
|
|
31099
|
+
${a.key === "card" ? ` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>` : ""}
|
|
31098
31100
|
</div>
|
|
31099
31101
|
</button>
|
|
31100
31102
|
</div>
|
|
31101
31103
|
`;
|
|
31102
|
-
}),
|
|
31104
|
+
}), s += "</div>", i.innerHTML = s;
|
|
31103
31105
|
} else {
|
|
31104
|
-
const
|
|
31105
|
-
let
|
|
31106
|
-
if (
|
|
31107
|
-
|
|
31108
|
-
|
|
31109
|
-
<div key=${
|
|
31110
|
-
<button class="tab-button gap-2 group" data-name="${
|
|
31111
|
-
<div class="md:container-center lg:block">${
|
|
31106
|
+
const s = o.length % 2 === 0;
|
|
31107
|
+
let a = '<div class="grid gap-2">';
|
|
31108
|
+
if (s)
|
|
31109
|
+
a += '<div class="grid grid-cols-2 gap-2">', o.forEach((r) => {
|
|
31110
|
+
a += `
|
|
31111
|
+
<div key=${r.key}>
|
|
31112
|
+
<button class="tab-button gap-2 group" data-name="${r.key}">
|
|
31113
|
+
<div class="md:container-center lg:block">${r.icon}</div>
|
|
31112
31114
|
<div class="flex items-center gap-2">
|
|
31113
|
-
<span>${
|
|
31114
|
-
${
|
|
31115
|
+
<span>${r.label} </span>
|
|
31116
|
+
${r.key === "card" ? ` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>` : ""}
|
|
31115
31117
|
</div>
|
|
31116
31118
|
</button>
|
|
31117
31119
|
</div>
|
|
31118
31120
|
`;
|
|
31119
|
-
}),
|
|
31121
|
+
}), a += "</div>";
|
|
31120
31122
|
else {
|
|
31121
|
-
if (
|
|
31123
|
+
if (a += `
|
|
31122
31124
|
<div>
|
|
31123
|
-
<button class="tab-button gap-2 group" data-name="${
|
|
31124
|
-
<div class="md:container-center lg:block"> ${
|
|
31125
|
+
<button class="tab-button gap-2 group" data-name="${o[0].key}">
|
|
31126
|
+
<div class="md:container-center lg:block"> ${o[0].icon}</div>
|
|
31125
31127
|
<div class="flex items-center gap-2">
|
|
31126
|
-
<span>${
|
|
31127
|
-
${
|
|
31128
|
+
<span>${o[0].label} </span>
|
|
31129
|
+
${o[0].key === "card" ? ` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>` : ""}
|
|
31128
31130
|
</div>
|
|
31129
31131
|
</button>
|
|
31130
31132
|
</div>
|
|
31131
|
-
`,
|
|
31132
|
-
|
|
31133
|
-
for (let
|
|
31134
|
-
|
|
31133
|
+
`, o.length > 1) {
|
|
31134
|
+
a += '<div class="grid grid-cols-2 gap-2">';
|
|
31135
|
+
for (let r = 1; r < o.length; r++)
|
|
31136
|
+
a += `
|
|
31135
31137
|
<div>
|
|
31136
|
-
<button class="tab-button gap-2 group" data-name="${
|
|
31137
|
-
<div class="md:container-center lg:block">${
|
|
31138
|
+
<button class="tab-button gap-2 group" data-name="${o[r].key}">
|
|
31139
|
+
<div class="md:container-center lg:block">${o[r].icon}</div>
|
|
31138
31140
|
<div class="flex items-center gap-2">
|
|
31139
|
-
<span>${
|
|
31140
|
-
${
|
|
31141
|
+
<span>${o[r].label} </span>
|
|
31142
|
+
${o[r].key === "card" ? ` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>` : ""}
|
|
31141
31143
|
</div>
|
|
31142
31144
|
</button>
|
|
31143
31145
|
</div>
|
|
31144
31146
|
`;
|
|
31145
|
-
|
|
31147
|
+
a += "</div>";
|
|
31146
31148
|
}
|
|
31147
|
-
|
|
31149
|
+
a += "</div>";
|
|
31148
31150
|
}
|
|
31149
|
-
|
|
31151
|
+
a += "</div>", i.innerHTML = a;
|
|
31150
31152
|
}
|
|
31151
31153
|
}
|
|
31152
31154
|
}
|
package/dist/checkout-inline.js
CHANGED
|
@@ -116,10 +116,11 @@
|
|
|
116
116
|
`}],uo=`<div>
|
|
117
117
|
<form id="checkoutcard">
|
|
118
118
|
<div>
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
119
|
+
<div class="container-between">
|
|
120
|
+
<h5 class="text-grey-400 font-semibold text-sm">Enter your card details</h5>
|
|
121
|
+
<div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2 md:hidden"> <span
|
|
122
|
+
id="card-currency"></span> </div>
|
|
123
|
+
</div>
|
|
123
124
|
<div class="mt-3 mb-3 md:mb-5">
|
|
124
125
|
<div id="card-details" class="flex border border-grey-100 rounded-lg p-4">
|
|
125
126
|
<div class="grow relative flex gap-2">
|
|
@@ -140,15 +141,15 @@
|
|
|
140
141
|
|
|
141
142
|
<div class="relative w-14 md:w-20">
|
|
142
143
|
<div class="w-4/5 md:w-3/5 ml-auto">
|
|
143
|
-
<input class="details-input-container" type="tel" id="card-expiry" name="expiry"
|
|
144
|
-
|
|
144
|
+
<input class="details-input-container" type="tel" id="card-expiry" name="expiry" placeholder="MM/YY"
|
|
145
|
+
required minlength="5" />
|
|
145
146
|
</div>
|
|
146
147
|
</div>
|
|
147
148
|
|
|
148
149
|
<div class="relative w-12 md:w-16">
|
|
149
150
|
<div class="w-4/5 md:w-3/5 ml-auto">
|
|
150
|
-
<input class="details-input-container" type="tel" id="card-cvv" name="cvv" placeholder="CVV"
|
|
151
|
-
|
|
151
|
+
<input class="details-input-container" type="tel" id="card-cvv" name="cvv" placeholder="CVV" required
|
|
152
|
+
minlength="3" />
|
|
152
153
|
</div>
|
|
153
154
|
</div>
|
|
154
155
|
</div>
|
|
@@ -181,7 +182,8 @@
|
|
|
181
182
|
</div>
|
|
182
183
|
<div class="text-xs text-grey-400 mt-4">
|
|
183
184
|
<p>
|
|
184
|
-
By confirming this payment, you allow <span id="merchant-name">-</span> to charge your card for this payment and
|
|
185
|
+
By confirming this payment, you allow <span id="merchant-name">-</span> to charge your card for this payment and
|
|
186
|
+
future payments in
|
|
185
187
|
accordance with their terms.
|
|
186
188
|
</p>
|
|
187
189
|
</div>
|
|
@@ -650,11 +652,11 @@ or you can use record.mirror to access the mirror instance during recording.`;le
|
|
|
650
652
|
</div>
|
|
651
653
|
</div>
|
|
652
654
|
</div>
|
|
653
|
-
</div>`;class Jt{constructor(e){u(this,"container");u(this,"onAction");u(this,"callBackUrl");u(this,"paymentResponse");u(this,"paymentResponseHeaders");this.container=e.container,this.onAction=e.onAction,this.callBackUrl=e.callBackUrl,this.paymentResponse=e.paymentResponse,this.paymentResponseHeaders=e.paymentResponseHeaders}attachListeners(){const e=this.container.querySelector("#goback-to-merchant");e&&e.addEventListener("click",()=>{ai(this.paymentResponse,this.paymentResponseHeaders,this.callBackUrl)})}renderComponent(){this.container.innerHTML=this.render(),this.attachListeners()}render(){return $t}}class ws{constructor({amount:e,container:i,email:t,encryption:o,planId:a,token:s,currency:r,rdtCode:l,url:c,reference:m,onSuccess:b,callBackUrl:h,metadata:v,localCurrency:f,hidePaymentMethods:p,showPaymentMethods:y,onClose:C,restartTransactionProcess:w,retryingPayment:k}){u(this,"contents");u(this,"cardDetailForm");u(this,"cardOtpValidationForm");u(this,"merchantPlanDetail",{});u(this,"cardPinForm");u(this,"avsForm");u(this,"successScreen");u(this,"pageLoader");u(this,"warningScreen");u(this,"transactionIssuesScreen");u(this,"container");u(this,"onSuccess");u(this,"planId","");u(this,"email");u(this,"token");u(this,"amount");u(this,"encryption");u(this,"currency");u(this,"_currentStep");u(this,"activeRef");u(this,"rdtCode");u(this,"url");u(this,"reference");u(this,"callBackUrl");u(this,"metadata");u(this,"localCurrency");u(this,"hidePaymentMethods");u(this,"showPaymentMethods");u(this,"onClose");u(this,"cardResponse");u(this,"cardResponseHeader");u(this,"confirmationEnd");u(this,"restartTransactionProcess");u(this,"retryingPayment");u(this,"isMaxRetriesReached");u(this,"isMobile",!1);this.currency=r,this.onSuccess=b||(()=>null),this.container=i,this.encryption=o,this.token=s,this.email=t,this.planId=a,this.amount=e,this.rdtCode=l,this.url=c,this.reference=m,this.callBackUrl=h,this.metadata=v,this.localCurrency=f,this._currentStep=1,this.activeRef="",this.contents=this.container.querySelector("#payment-content-view"),this.cardResponse={},this.cardResponseHeader={},this.hidePaymentMethods=p,this.showPaymentMethods=y,this.onClose=C,this.restartTransactionProcess=w,this.retryingPayment=k,this.isMaxRetriesReached=!1,this.renderCardContent(),S.track("card_opens",{payment_method:"Card"}),this.isMobile=window.matchMedia("(max-width: 767px)").matches
|
|
655
|
+
</div>`;class Jt{constructor(e){u(this,"container");u(this,"onAction");u(this,"callBackUrl");u(this,"paymentResponse");u(this,"paymentResponseHeaders");this.container=e.container,this.onAction=e.onAction,this.callBackUrl=e.callBackUrl,this.paymentResponse=e.paymentResponse,this.paymentResponseHeaders=e.paymentResponseHeaders}attachListeners(){const e=this.container.querySelector("#goback-to-merchant");e&&e.addEventListener("click",()=>{ai(this.paymentResponse,this.paymentResponseHeaders,this.callBackUrl)})}renderComponent(){this.container.innerHTML=this.render(),this.attachListeners()}render(){return $t}}class ws{constructor({amount:e,container:i,email:t,encryption:o,planId:a,token:s,currency:r,rdtCode:l,url:c,reference:m,onSuccess:b,callBackUrl:h,metadata:v,localCurrency:f,hidePaymentMethods:p,showPaymentMethods:y,onClose:C,restartTransactionProcess:w,retryingPayment:k}){u(this,"contents");u(this,"cardDetailForm");u(this,"cardOtpValidationForm");u(this,"merchantPlanDetail",{});u(this,"cardPinForm");u(this,"avsForm");u(this,"successScreen");u(this,"pageLoader");u(this,"warningScreen");u(this,"transactionIssuesScreen");u(this,"container");u(this,"onSuccess");u(this,"planId","");u(this,"email");u(this,"token");u(this,"amount");u(this,"encryption");u(this,"currency");u(this,"_currentStep");u(this,"activeRef");u(this,"rdtCode");u(this,"url");u(this,"reference");u(this,"callBackUrl");u(this,"metadata");u(this,"localCurrency");u(this,"hidePaymentMethods");u(this,"showPaymentMethods");u(this,"onClose");u(this,"cardResponse");u(this,"cardResponseHeader");u(this,"confirmationEnd");u(this,"restartTransactionProcess");u(this,"retryingPayment");u(this,"isMaxRetriesReached");u(this,"isMobile",!1);this.currency=r,this.onSuccess=b||(()=>null),this.container=i,this.encryption=o,this.token=s,this.email=t,this.planId=a,this.amount=e,this.rdtCode=l,this.url=c,this.reference=m,this.callBackUrl=h,this.metadata=v,this.localCurrency=f,this._currentStep=1,this.activeRef="",this.contents=this.container.querySelector("#payment-content-view"),this.cardResponse={},this.cardResponseHeader={},this.hidePaymentMethods=p,this.showPaymentMethods=y,this.onClose=C,this.restartTransactionProcess=w,this.retryingPayment=k,this.isMaxRetriesReached=!1,this.renderCardContent(),S.track("card_opens",{payment_method:"Card"}),this.isMobile=window.matchMedia("(max-width: 767px)").matches}get currentStep(){return this._currentStep}set currentStep(e){this._currentStep=e,this.renderCardContent()}async submitCardDetails(e,i){e.preventDefault(),S.track("input_cardDetails",{payment_method:"Card",authentication_type:"PIN"});const t=this.container.querySelector(".spinner"),o=this.container.querySelector("#details-form-button-text"),a=await go(JSON.stringify(i),this.encryption);t&&o&&(t.classList.remove("hidden"),o.classList.add("hidden")),(()=>{if(this.retryingPayment){const r={channel:"card",reference:this.reference,encryptedCard:a};return li(this.token,r,this.rdtCode,this.url)}else{const r={amount:this.amount,channel:"card",currency:this.currency||"USD",planId:this.planId,customer:{email:this.email},reference:this.reference,encryptedCard:a,callBackUrl:this.callBackUrl,metadata:this.metadata,...this.localCurrency&&{localCurrency:this.localCurrency},isCheckout:!0};return oo(this.token,r,this.rdtCode,this.url)}})().then(({data:r,headers:l})=>{var c,m,b,h,v,f;if(r.status==="failed")this.currentStep=4,this.reference=r.reference,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN"}),this.cardResponse=r,this.cardResponseHeader=l,r.providerMessage?this.warningScreen.setPaymentError(r.providerMessage):this.warningScreen.setPaymentError("Payment failed");else if(!["success","successful"].includes(r.status)&&r.status!=="failed")if(this.cardResponse=r,this.cardResponseHeader=l,r!=null&&r.authorization){if(this.activeRef=r.reference,((c=r==null?void 0:r.authorization)==null?void 0:c.mode)==="pin"){this.currentStep=2;return}if(((m=r==null?void 0:r.authorization)==null?void 0:m.mode)==="3DS"){(b=r==null?void 0:r.authorization)!=null&&b.redirectUrl&&this.redirectTo3DS((h=r==null?void 0:r.authorization)==null?void 0:h.redirectUrl);return}if(((v=r==null?void 0:r.authorization)==null?void 0:v.mode)==="otp"){this.cardResponse=r,this.currentStep=3;return}if(((f=r==null?void 0:r.authorization)==null?void 0:f.mode)==="avs"){this.currentStep=7;return}}else this.currentStep=4,r.providerMessage?this.warningScreen.setPaymentError(r.providerMessage):this.warningScreen.setPaymentError("Error with Payment");else["success","successful"].includes(r.status)&&(this.currentStep=5,this.cardResponse=r,this.cardResponseHeader=l,S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"PIN"}),this.redirectTo(r,l,"success"))}).catch(r=>{S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN"}),r.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,r.message?this.warningScreen.setPaymentError(r.message):this.warningScreen.setPaymentError("Payment failed"))}).finally(()=>{t&&o&&(t.classList.add("hidden"),o.classList.remove("hidden"))})}handlePinRequest(e){if(e.length===4){const i={authorization:{pin:e},reference:this.activeRef};S.track("input_cardPin",{payment_method:"Card",authentication_type:"PIN"}),setTimeout(()=>{const t=this.container.querySelector("#pin-loader"),o=this.container.querySelector("#cancel-payment");t&&(t.innerHTML=`<svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
654
656
|
<path
|
|
655
657
|
d="M62 32C62 38.6156 59.8132 45.0457 55.78 50.2897C51.7468 55.5336 46.0932 59.2974 39.6992 60.9952C33.3052 62.693 26.5293 62.2297 20.4258 59.6774C14.3224 57.1251 9.2338 52.6268 5.95186 46.8827C2.66993 41.1385 1.37873 34.4707 2.2792 27.9166C3.17967 21.3626 6.22129 15.29 10.9308 10.6438C15.6402 5.9976 21.7534 3.0384 28.3191 2.22668C34.8847 1.41496 41.5345 2.79623 47.2337 6.15557"
|
|
656
658
|
stroke="black" stroke-width="4" stroke-linejoin="round" />
|
|
657
|
-
</svg>`),o&&o.classList.add("hidden"),Pn(this.token,i,this.rdtCode,this.url).then(({data:s,headers:r})=>{var l,c,m,b,h;if(s.status==="failed")S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN"}),this.currentStep=4,s.providerMessage?this.warningScreen.setPaymentError(s.providerMessage):this.warningScreen.setPaymentError("Payment failed");else if(["success","successful","failed"].includes(s.status))this.currentStep=5,this.redirectTo(s,r,"success"),S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"PIN"});else{if(((l=s==null?void 0:s.authorization)==null?void 0:l.mode)==="3DS"){(c=s==null?void 0:s.authorization)!=null&&c.redirectUrl&&this.redirectTo3DS((m=s==null?void 0:s.authorization)==null?void 0:m.redirectUrl);return}if(((b=s==null?void 0:s.authorization)==null?void 0:b.mode)==="otp"){this.cardResponse=s,this.currentStep=3;return}if(((h=s==null?void 0:s.authorization)==null?void 0:h.mode)==="avs"){this.currentStep=7;return}}}).catch(s=>{S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN"}),this.currentStep=4,s.message?this.warningScreen.setPaymentError(s.message):this.warningScreen.setPaymentError("Payment failed")})},300)}}showLoader(){this.pageLoader=new fe(this.contents),this.pageLoader.mountLoader()}pinErrorStates(e,i,t){const o=this.container.querySelector("#pin-error");o&&(o.innerHTML=e||"Payment Failed"),t&&t.classList.remove("hidden"),i&&(i.innerHTML="")}setPaymentError(e){const i=this.container.querySelector("#payment-warning-text"),t=this.container.querySelector(".warning-list");i&&(i.textContent=e),t&&[{text:"Try again with your card",action:"go-to-card"},{text:"Try again with transfer",action:"go-to-transfer"}].forEach(({action:a,text:s})=>{const r=document.createElement("button");r.textContent=s,r.setAttribute("id",a),r.classList.add("warning-button");const l=document.createElement("div");l.appendChild(r),t.appendChild(l)}),this.attachInputListeners()}validatedAVS(e,i){e.stopPropagation(),e.preventDefault();const t=this.container.querySelector(".spinner"),o=this.container.querySelector("#avs-form-button-text"),a={authorization:{avs:{state:i==null?void 0:i.state,city:i==null?void 0:i.city,country:i==null?void 0:i.country,address:i==null?void 0:i.address,zipCode:(i==null?void 0:i.code)||"-"}},reference:this.activeRef};S.track("input_address",{payment_method:"Card",authentication_type:"AVS"}),t&&o&&(t.classList.remove("hidden"),o.classList.add("hidden")),Pn(this.token,a,this.rdtCode,this.url).then(({data:r,headers:l})=>{var c,m,b,h,v;if(r.status==="failed")this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"AVS"}),r.providerMessage?this.warningScreen.setPaymentError(r.providerMessage):this.warningScreen.setPaymentError("Payment failed");else if(["success","successful","failed"].includes(r.status))["success","successful"].includes(r.status)&&(this.currentStep=5,this.redirectTo(r,l,"success"),S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"AVS"}));else{if(((c=r==null?void 0:r.authorization)==null?void 0:c.mode)==="pin"){this.currentStep=2;return}if(((m=r==null?void 0:r.authorization)==null?void 0:m.mode)==="3DS"){(b=r==null?void 0:r.authorization)!=null&&b.redirectUrl&&this.redirectTo3DS((h=r==null?void 0:r.authorization)==null?void 0:h.redirectUrl),this.currentStep=6;return}if(((v=r==null?void 0:r.authorization)==null?void 0:v.mode)==="otp"){this.cardResponse=r,this.currentStep=3;return}}}).catch(r=>{this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"AVS"}),r.message?this.warningScreen.setPaymentError(r.message):this.warningScreen.setPaymentError("Payment failed")}).finally(()=>{t&&o&&(t.classList.add("hidden"),o.classList.remove("hidden"))})}submitOtp(e,i){e.preventDefault();const t={authorization:{otp:i},reference:this.activeRef};this.currentStep=6,this.showLoader(),S.track("input_cardOTP",{payment_method:"Card",authentication_type:"PIN+0TP"}),Pn(this.token,t,this.rdtCode,this.url).then(({data:a,headers:s})=>{var r,l,c,m,b,h;if(a.status==="failed")this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN+0TP"}),a.providerMessage?this.warningScreen.setPaymentError(a.providerMessage):this.warningScreen.setPaymentError("Payment failed");else if(["success","successful","failed"].includes(a.status))["success","successful"].includes(a.status)&&(this.currentStep=5,this.redirectTo(a,s,"success"),S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"PIN+0TP"}));else{if(this.activeRef=a.reference,((r=a==null?void 0:a.authorization)==null?void 0:r.mode)==="pin"){this.currentStep=2;return}if(((l=a==null?void 0:a.authorization)==null?void 0:l.mode)==="3DS"){(c=a==null?void 0:a.authorization)!=null&&c.redirectUrl&&this.redirectTo3DS((m=a==null?void 0:a.authorization)==null?void 0:m.redirectUrl);return}if(((b=a==null?void 0:a.authorization)==null?void 0:b.mode)==="otp"){this.cardResponse=a,this.currentStep=3;return}if(((h=a==null?void 0:a.authorization)==null?void 0:h.mode)==="avs"){this.currentStep=7;return}this.currentStep=9}}).catch(a=>{this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN+0TP"}),a.message?this.warningScreen.setPaymentError(a.message):this.warningScreen.setPaymentError("Payment failed")})}redirectTo3DS(e){const i=window.open(e,"_blank");if(i){S.track("auth_redirect",{payment_method:"Card",authentication_type:"3DS"}),this.currentStep=6,this.showLoader();const t=setInterval(()=>{i.closed&&(clearInterval(t),this.verifyPayment(({data:o,headers:a})=>{this.currentStep=5,S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"3DS"}),this.redirectTo(o,a,"success")},({data:o})=>{this.currentStep=4,o.providerMessage?this.warningScreen.setPaymentError(o.providerMessage):this.warningScreen.setPaymentError("Payment transaction failed"),S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"3DS"})}))},2e3)}else alert("Please enable popups for this site to complete the authentication.")}async verifyPayment(e,i){try{const t=await Je(this.token,this.activeRef,void 0,this.rdtCode,this.url);t.data.status==="failed"?i(t):["success","successful"].includes(t.data.status)&&e(t)}catch(t){console.error(t),this.currentStep=4,this.warningScreen.setPaymentError("Payment transaction failed"),S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"3DS"})}}async verifyPaymentProcess(){try{const e=await Je(this.token,this.reference,void 0,this.rdtCode,this.url);this.cardResponse=e.data,this.cardResponseHeader=e.headers}catch{this.currentStep=4}}goBackToMerchant(){this.redirectTo(this.cardResponse,this.cardResponseHeader,this.callBackUrl)}renderCardContent(e){var t,o;e&&(this.merchantPlanDetail=e);const i=document.getElementById("go-back");if(this.currentStep!==1?(this.hidePaymentMethods(),i==null||i.classList.add("hidden")):this.showPaymentMethods(),this.isMobile&&this.hidePaymentMethods(),this.contents){switch(this.currentStep){case 1:this.cardDetailForm=new Ui({container:this.contents,onAction:a=>s=>this.submitCardDetails.bind(this)(a,s),merchantName:this.merchantPlanDetail.merchantName}),this.cardDetailForm.renderContent();break;case 2:this.cardPinForm=new So({container:this.contents,onClose:this.onClose,onAction:a=>this.handlePinRequest.bind(this)(a)}),this.cardPinForm.renderComponent();break;case 3:this.cardOtpValidationForm=new wo({container:this.contents,onClose:this.onClose,onAction:a=>s=>this.submitOtp.bind(this)(a,s),otpMessage:((t=this.cardResponse)==null?void 0:t.providerMessage)||"Please enter your OTP sent to your phone"}),this.cardOtpValidationForm.renderComponent();break;case 4:this.warningScreen=new bn({container:this.contents,onAction:this.isMaxRetriesReached?this.goBackToMerchant.bind(this):this.restartTransactionProcess.bind(this),onReportIssue:()=>this.currentStep=8}),this.contents.innerHTML=this.warningScreen.render(),this.warningScreen.attachListener();break;case 5:this.successScreen=new Dn({container:this.contents,amount:this.amount,currency:this.currency,localCurrency:this.localCurrency,rate:(o=this.merchantPlanDetail)==null?void 0:o.rate.rate}),this.successScreen.renderComponent();break;case 6:this.pageLoader=new fe(this.contents),this.pageLoader.mountLoader(),this.pageLoader.updateMessage("Verifying Payment");break;case 7:this.avsForm=new Ao({container:this.contents,onAction:a=>s=>this.validatedAVS.bind(this)(a,s)}),this.avsForm.renderComponent();break;case 8:this.transactionIssuesScreen=new To({container:this.contents,onAction:()=>this.currentStep=2}),this.transactionIssuesScreen.renderTransactionIssuesComponent();break;case 9:this.confirmationEnd=new Jt({container:this.contents,onAction:a=>{this.currentStep=a},ref:this.reference,token:this.token,rdtCode:this.rdtCode,url:this.url,callBackUrl:this.callBackUrl,paymentResponse:this.cardResponse,paymentResponseHeaders:this.cardResponseHeader}),this.confirmationEnd.renderComponent();break;default:this.cardDetailForm=new Ui({container:this.contents,onAction:a=>s=>this.submitCardDetails.bind(this)(a,s),merchantName:this.merchantPlanDetail.merchantName}),this.cardDetailForm.renderContent();break}this.attachInputListeners(),this.displayButtonText()}}redirectTo(e,i,t){const o=i.get("spf-redirect-url");this.callBackUrl=o||this.callBackUrl,this.callBackUrl?setTimeout(()=>{const a=new URL(this.callBackUrl);a.searchParams.append("status",e.status),a.searchParams.append("reference",e.reference),window.location.href=a.toString()},1800):t==="success"&&this.onSuccess(e)}displayButtonText(e){var t,o,a,s;const i=this.container.querySelector("#details-form-button-text");if(i){const r=this.currency,l=r==="USD"?(o=(t=this.merchantPlanDetail)==null?void 0:t.rate)==null?void 0:o.from:r;e?i.textContent=e:i.textContent=`Continue to pay ${l} ${Q((this.amount||0)*(r==="USD"?(s=(a=this.merchantPlanDetail)==null?void 0:a.rate)==null?void 0:s.rate:1),2)}`}}}const Cs=`<div>
|
|
659
|
+
</svg>`),o&&o.classList.add("hidden"),Pn(this.token,i,this.rdtCode,this.url).then(({data:s,headers:r})=>{var l,c,m,b,h;if(s.status==="failed")S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN"}),this.currentStep=4,s.providerMessage?this.warningScreen.setPaymentError(s.providerMessage):this.warningScreen.setPaymentError("Payment failed");else if(["success","successful","failed"].includes(s.status))this.currentStep=5,this.redirectTo(s,r,"success"),S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"PIN"});else{if(((l=s==null?void 0:s.authorization)==null?void 0:l.mode)==="3DS"){(c=s==null?void 0:s.authorization)!=null&&c.redirectUrl&&this.redirectTo3DS((m=s==null?void 0:s.authorization)==null?void 0:m.redirectUrl);return}if(((b=s==null?void 0:s.authorization)==null?void 0:b.mode)==="otp"){this.cardResponse=s,this.currentStep=3;return}if(((h=s==null?void 0:s.authorization)==null?void 0:h.mode)==="avs"){this.currentStep=7;return}}}).catch(s=>{S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN"}),this.currentStep=4,s.message?this.warningScreen.setPaymentError(s.message):this.warningScreen.setPaymentError("Payment failed")})},300)}}showLoader(){this.pageLoader=new fe(this.contents),this.pageLoader.mountLoader()}pinErrorStates(e,i,t){const o=this.container.querySelector("#pin-error");o&&(o.innerHTML=e||"Payment Failed"),t&&t.classList.remove("hidden"),i&&(i.innerHTML="")}setPaymentError(e){const i=this.container.querySelector("#payment-warning-text"),t=this.container.querySelector(".warning-list");i&&(i.textContent=e),t&&[{text:"Try again with your card",action:"go-to-card"},{text:"Try again with transfer",action:"go-to-transfer"}].forEach(({action:a,text:s})=>{const r=document.createElement("button");r.textContent=s,r.setAttribute("id",a),r.classList.add("warning-button");const l=document.createElement("div");l.appendChild(r),t.appendChild(l)})}validatedAVS(e,i){e.stopPropagation(),e.preventDefault();const t=this.container.querySelector(".spinner"),o=this.container.querySelector("#avs-form-button-text"),a={authorization:{avs:{state:i==null?void 0:i.state,city:i==null?void 0:i.city,country:i==null?void 0:i.country,address:i==null?void 0:i.address,zipCode:(i==null?void 0:i.code)||"-"}},reference:this.activeRef};S.track("input_address",{payment_method:"Card",authentication_type:"AVS"}),t&&o&&(t.classList.remove("hidden"),o.classList.add("hidden")),Pn(this.token,a,this.rdtCode,this.url).then(({data:r,headers:l})=>{var c,m,b,h,v;if(r.status==="failed")this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"AVS"}),r.providerMessage?this.warningScreen.setPaymentError(r.providerMessage):this.warningScreen.setPaymentError("Payment failed");else if(["success","successful","failed"].includes(r.status))["success","successful"].includes(r.status)&&(this.currentStep=5,this.redirectTo(r,l,"success"),S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"AVS"}));else{if(((c=r==null?void 0:r.authorization)==null?void 0:c.mode)==="pin"){this.currentStep=2;return}if(((m=r==null?void 0:r.authorization)==null?void 0:m.mode)==="3DS"){(b=r==null?void 0:r.authorization)!=null&&b.redirectUrl&&this.redirectTo3DS((h=r==null?void 0:r.authorization)==null?void 0:h.redirectUrl),this.currentStep=6;return}if(((v=r==null?void 0:r.authorization)==null?void 0:v.mode)==="otp"){this.cardResponse=r,this.currentStep=3;return}}}).catch(r=>{this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"AVS"}),r.message?this.warningScreen.setPaymentError(r.message):this.warningScreen.setPaymentError("Payment failed")}).finally(()=>{t&&o&&(t.classList.add("hidden"),o.classList.remove("hidden"))})}submitOtp(e,i){e.preventDefault();const t={authorization:{otp:i},reference:this.activeRef};this.currentStep=6,this.showLoader(),S.track("input_cardOTP",{payment_method:"Card",authentication_type:"PIN+0TP"}),Pn(this.token,t,this.rdtCode,this.url).then(({data:a,headers:s})=>{var r,l,c,m,b,h;if(a.status==="failed")this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN+0TP"}),a.providerMessage?this.warningScreen.setPaymentError(a.providerMessage):this.warningScreen.setPaymentError("Payment failed");else if(["success","successful","failed"].includes(a.status))["success","successful"].includes(a.status)&&(this.currentStep=5,this.redirectTo(a,s,"success"),S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"PIN+0TP"}));else{if(this.activeRef=a.reference,((r=a==null?void 0:a.authorization)==null?void 0:r.mode)==="pin"){this.currentStep=2;return}if(((l=a==null?void 0:a.authorization)==null?void 0:l.mode)==="3DS"){(c=a==null?void 0:a.authorization)!=null&&c.redirectUrl&&this.redirectTo3DS((m=a==null?void 0:a.authorization)==null?void 0:m.redirectUrl);return}if(((b=a==null?void 0:a.authorization)==null?void 0:b.mode)==="otp"){this.cardResponse=a,this.currentStep=3;return}if(((h=a==null?void 0:a.authorization)==null?void 0:h.mode)==="avs"){this.currentStep=7;return}this.currentStep=9}}).catch(a=>{this.currentStep=4,S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"PIN+0TP"}),a.message?this.warningScreen.setPaymentError(a.message):this.warningScreen.setPaymentError("Payment failed")})}redirectTo3DS(e){const i=window.open(e,"_blank");if(i){S.track("auth_redirect",{payment_method:"Card",authentication_type:"3DS"}),this.currentStep=6,this.showLoader();const t=setInterval(()=>{i.closed&&(clearInterval(t),this.verifyPayment(({data:o,headers:a})=>{this.currentStep=5,S.track("verify_payment",{payment_method:"Card",verification_status:"Success",authentication_type:"3DS"}),this.redirectTo(o,a,"success")},({data:o})=>{this.currentStep=4,o.providerMessage?this.warningScreen.setPaymentError(o.providerMessage):this.warningScreen.setPaymentError("Payment transaction failed"),S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"3DS"})}))},2e3)}else alert("Please enable popups for this site to complete the authentication.")}async verifyPayment(e,i){try{const t=await Je(this.token,this.activeRef,void 0,this.rdtCode,this.url);t.data.status==="failed"?i(t):["success","successful"].includes(t.data.status)&&e(t)}catch(t){console.error(t),this.currentStep=4,this.warningScreen.setPaymentError("Payment transaction failed"),S.track("verify_payment",{payment_method:"Card",verification_status:"Failed",authentication_type:"3DS"})}}async verifyPaymentProcess(){try{const e=await Je(this.token,this.reference,void 0,this.rdtCode,this.url);this.cardResponse=e.data,this.cardResponseHeader=e.headers}catch{this.currentStep=4}}goBackToMerchant(){this.redirectTo(this.cardResponse,this.cardResponseHeader,this.callBackUrl)}renderCardContent(e){var t,o;e&&(this.merchantPlanDetail=e);const i=document.getElementById("go-back");if(this.currentStep!==1?(this.hidePaymentMethods(),i==null||i.classList.add("hidden")):this.showPaymentMethods(),this.isMobile&&this.hidePaymentMethods(),this.contents){switch(this.currentStep){case 1:this.cardDetailForm=new Ui({container:this.contents,onAction:s=>r=>this.submitCardDetails.bind(this)(s,r),merchantName:this.merchantPlanDetail.merchantName}),this.cardDetailForm.renderContent();break;case 2:this.cardPinForm=new So({container:this.contents,onClose:this.onClose,onAction:s=>this.handlePinRequest.bind(this)(s)}),this.cardPinForm.renderComponent();break;case 3:this.cardOtpValidationForm=new wo({container:this.contents,onClose:this.onClose,onAction:s=>r=>this.submitOtp.bind(this)(s,r),otpMessage:((t=this.cardResponse)==null?void 0:t.providerMessage)||"Please enter your OTP sent to your phone"}),this.cardOtpValidationForm.renderComponent();break;case 4:this.warningScreen=new bn({container:this.contents,onAction:this.isMaxRetriesReached?this.goBackToMerchant.bind(this):this.restartTransactionProcess.bind(this),onReportIssue:()=>this.currentStep=8}),this.contents.innerHTML=this.warningScreen.render(),this.warningScreen.attachListener();break;case 5:this.successScreen=new Dn({container:this.contents,amount:this.amount,currency:this.currency,localCurrency:this.localCurrency,rate:(o=this.merchantPlanDetail)==null?void 0:o.rate.rate}),this.successScreen.renderComponent();break;case 6:this.pageLoader=new fe(this.contents),this.pageLoader.mountLoader(),this.pageLoader.updateMessage("Verifying Payment");break;case 7:this.avsForm=new Ao({container:this.contents,onAction:s=>r=>this.validatedAVS.bind(this)(s,r)}),this.avsForm.renderComponent();break;case 8:this.transactionIssuesScreen=new To({container:this.contents,onAction:()=>this.currentStep=2}),this.transactionIssuesScreen.renderTransactionIssuesComponent();break;case 9:this.confirmationEnd=new Jt({container:this.contents,onAction:s=>{this.currentStep=s},ref:this.reference,token:this.token,rdtCode:this.rdtCode,url:this.url,callBackUrl:this.callBackUrl,paymentResponse:this.cardResponse,paymentResponseHeaders:this.cardResponseHeader}),this.confirmationEnd.renderComponent();break;default:this.cardDetailForm=new Ui({container:this.contents,onAction:s=>r=>this.submitCardDetails.bind(this)(s,r),merchantName:this.merchantPlanDetail.merchantName}),this.cardDetailForm.renderContent();break}this.displayButtonText();const a=this.container.querySelector("#card-currency");a&&(a.textContent=`${this.localCurrency?this.localCurrency:this.currency} Card`)}}redirectTo(e,i,t){const o=i.get("spf-redirect-url");this.callBackUrl=o||this.callBackUrl,this.callBackUrl?setTimeout(()=>{const a=new URL(this.callBackUrl);a.searchParams.append("status",e.status),a.searchParams.append("reference",e.reference),window.location.href=a.toString()},1800):t==="success"&&this.onSuccess(e)}displayButtonText(e){var t,o,a,s;const i=this.container.querySelector("#details-form-button-text");if(i){const r=this.currency,l=r==="USD"?(o=(t=this.merchantPlanDetail)==null?void 0:t.rate)==null?void 0:o.from:r;e?i.textContent=e:i.textContent=`Continue to pay ${l} ${Q((this.amount||0)*(r==="USD"?(s=(a=this.merchantPlanDetail)==null?void 0:a.rate)==null?void 0:s.rate:1),2)}`}}}const Cs=`<div>
|
|
658
660
|
<div class="container-center h-[40vh] hidden" id="loader">
|
|
659
661
|
<img src="" alt="loader gif" />
|
|
660
662
|
</div>
|
|
@@ -1049,47 +1051,47 @@ or you can use record.mirror to access the mirror instance during recording.`;le
|
|
|
1049
1051
|
|
|
1050
1052
|
<!-- Tab options -->
|
|
1051
1053
|
</div>
|
|
1052
|
-
</div>`;class Ks{constructor(e){u(this,"container");u(this,"email");u(this,"amount",0);u(this,"metadata");u(this,"currency");u(this,"localCurrency");u(this,"merchantDetail");u(this,"onAction");u(this,"isMobile");u(this,"onClose");u(this,"currentPaymentMethod");this.container=e.container,this.email=e.email,this.amount=e.amount||0,this.metadata=e.metadata,this.currency=e.currency,this.localCurrency=e.localCurrency,this.merchantDetail=e.merchantDetail,this.onAction=e.onAction,this.isMobile=e.isMobile,this.onClose=e.onClose,this.currentPaymentMethod=e.currentPaymentMethod}attachListeners(){const e=this.container.querySelectorAll(".tab-button");Array.from(e).forEach(a=>{const s=a.dataset.name||"",r=a.querySelector(".tab-button-icon"),l=a.querySelector(".tab-button-label");r&&(r.innerHTML=X[s].icon),l&&(l.textContent=X[s].label),a.addEventListener("click",c=>{c.preventDefault(),this.onAction(s)})});const t=this.container.querySelector("#close-btn");t&&t.addEventListener("click",()=>{this.onClose(!0)});const o=document.getElementById("go-back");o==null||o.addEventListener("click",()=>{this.onAction("")})}renderComponent(){var _,x,z,j,D,O,te,oe,N,we,J,pe,de,ze,un,cn,xn,mn,Ln,qe,En,Tn,ri,Ce,Se,hn,We,L,le;this.container.innerHTML=this.render(),this.amount=this.amount;const e=this.container.querySelector("#merchant-logo-container"),i=this.container.querySelector("#merchant-logo"),t=this.container.querySelector("#merchant-email"),o=this.container.querySelector("#merchant-email-mob"),a=this.container.querySelector("#plan-name"),s=this.container.querySelector("#plan-name-mob"),r=this.container.querySelector("#payment-fees"),l=this.container.querySelector("#currency-cursor"),c=this.container.querySelector("#currency-cursor-mob"),m=this.container.querySelector("#payment-rate-display"),b=this.container.querySelector("#payment-rate-display-mob"),h=this.container.querySelector("#designated-rate"),v=this.container.querySelector("#designated-rate-mob"),f=this.container.querySelector("#designated-rate-no-plan"),p=this.container.querySelector("#source-rate"),y=this.container.querySelector("#source-rate-mob"),C=this.container.querySelector("#tooltip-localCurrency"),w=this.container.querySelector("#tooltip-localCurrency-mob");if((_=this.merchantDetail)!=null&&_.merchantLogo?i&&i.setAttribute("src",(x=this.merchantDetail)==null?void 0:x.merchantLogo):e&&(i==null||i.remove(),e.innerHTML=`<div class="font-semibold text-tone-100 rounded-2xl w-8 h-8 bg-tone-10 container-center uppercase">${this.merchantDetail.merchantName[0]}</div>`),t&&(t.innerHTML=this.email),o&&(o.innerHTML=this.email),a){if((j=(z=this.merchantDetail)==null?void 0:z.plan)!=null&&j.title){const H=((O=(D=this.merchantDetail)==null?void 0:D.plan)==null?void 0:O.title)||"";a.textContent=si(H)}(te=this.metadata)!=null&&te.productName&&(a.textContent=si(this.metadata.productName))}if(s){if((N=(oe=this.merchantDetail)==null?void 0:oe.plan)!=null&&N.title){const H=((J=(we=this.merchantDetail)==null?void 0:we.plan)==null?void 0:J.title)||"";s.textContent=si(H)}(pe=this.metadata)!=null&&pe.productName&&(s.textContent=si(this.metadata.productName))}l&&(this.currency==="USD"?m&&(m.innerHTML=`1 ${((ze=(de=this.merchantDetail)==null?void 0:de.rate)==null?void 0:ze.to)||"-"} = ${((cn=(un=this.merchantDetail)==null?void 0:un.rate)==null?void 0:cn.from)||"-"} ${Q(((xn=this.merchantDetail.rate)==null?void 0:xn.rate)||1,2)} `):l.innerHTML=""),c&&(this.currency==="USD"?b&&(b.innerHTML=`1 ${((Ln=(mn=this.merchantDetail)==null?void 0:mn.rate)==null?void 0:Ln.to)||"-"} = ${((En=(qe=this.merchantDetail)==null?void 0:qe.rate)==null?void 0:En.from)||"-"} ${Q(((Tn=this.merchantDetail.rate)==null?void 0:Tn.rate)||1,2)} `):c.innerHTML=""),(Ce=(ri=this.merchantDetail)==null?void 0:ri.plan)!=null&&Ce.title||(Se=this.metadata)!=null&&Se.productName?h&&(h.innerHTML=`${this.currency} ${Q(this.amount,2)}`):(f&&(f.innerHTML=`<span> ${this.currency} ${Q(this.amount,2)} </span>`),a&&s&&(a.remove(),s==null||s.remove()),this.localCurrency?h==null||h.remove():r&&r.remove()),v&&(v.innerHTML=`${this.currency} ${Q(this.amount,2)}`),p&&(this.localCurrency&&this.localCurrency!==this.currency?p.children[1].innerHTML=`${this.localCurrency} ${Q(this.amount*(((We=(hn=this.merchantDetail)==null?void 0:hn.rate)==null?void 0:We.rate)||1),2)}`:p.remove()),y&&(this.localCurrency&&this.localCurrency!==this.currency?y.children[1].innerHTML=`${this.localCurrency} ${Q(this.amount*(((le=(L=this.merchantDetail)==null?void 0:L.rate)==null?void 0:le.rate)||1),2)}`:y.remove());const k=Ds[this.localCurrency];C&&this.localCurrency&&(C.innerHTML=k?`${k} (${this.localCurrency})`:this.localCurrency),w&&this.localCurrency&&(w.innerHTML=k?`${k} (${this.localCurrency})`:this.localCurrency),this.renderPaymentOptions(this.container),this.attachListeners()}renderPaymentOptions(e){const i=e.querySelector(".payment-options");if(i){const
|
|
1053
|
-
<div key=${
|
|
1054
|
-
<button class="tab-button gap-2 mb-4 group" data-name="${
|
|
1055
|
-
<div class="lg:block">${
|
|
1054
|
+
</div>`;class Ks{constructor(e){u(this,"container");u(this,"email");u(this,"amount",0);u(this,"metadata");u(this,"currency");u(this,"localCurrency");u(this,"merchantDetail");u(this,"onAction");u(this,"isMobile");u(this,"onClose");u(this,"currentPaymentMethod");this.container=e.container,this.email=e.email,this.amount=e.amount||0,this.metadata=e.metadata,this.currency=e.currency,this.localCurrency=e.localCurrency,this.merchantDetail=e.merchantDetail,this.onAction=e.onAction,this.isMobile=e.isMobile,this.onClose=e.onClose,this.currentPaymentMethod=e.currentPaymentMethod}attachListeners(){const e=this.container.querySelectorAll(".tab-button");Array.from(e).forEach(a=>{const s=a.dataset.name||"",r=a.querySelector(".tab-button-icon"),l=a.querySelector(".tab-button-label");r&&(r.innerHTML=X[s].icon),l&&(l.textContent=X[s].label),a.addEventListener("click",c=>{c.preventDefault(),this.onAction(s)})});const t=this.container.querySelector("#close-btn");t&&t.addEventListener("click",()=>{this.onClose(!0)});const o=document.getElementById("go-back");o==null||o.addEventListener("click",()=>{this.onAction("")})}renderComponent(){var _,x,z,j,D,O,te,oe,N,we,J,pe,de,ze,un,cn,xn,mn,Ln,qe,En,Tn,ri,Ce,Se,hn,We,L,le;this.container.innerHTML=this.render(),this.amount=this.amount;const e=this.container.querySelector("#merchant-logo-container"),i=this.container.querySelector("#merchant-logo"),t=this.container.querySelector("#merchant-email"),o=this.container.querySelector("#merchant-email-mob"),a=this.container.querySelector("#plan-name"),s=this.container.querySelector("#plan-name-mob"),r=this.container.querySelector("#payment-fees"),l=this.container.querySelector("#currency-cursor"),c=this.container.querySelector("#currency-cursor-mob"),m=this.container.querySelector("#payment-rate-display"),b=this.container.querySelector("#payment-rate-display-mob"),h=this.container.querySelector("#designated-rate"),v=this.container.querySelector("#designated-rate-mob"),f=this.container.querySelector("#designated-rate-no-plan"),p=this.container.querySelector("#source-rate"),y=this.container.querySelector("#source-rate-mob"),C=this.container.querySelector("#tooltip-localCurrency"),w=this.container.querySelector("#tooltip-localCurrency-mob");if((_=this.merchantDetail)!=null&&_.merchantLogo?i&&i.setAttribute("src",(x=this.merchantDetail)==null?void 0:x.merchantLogo):e&&(i==null||i.remove(),e.innerHTML=`<div class="font-semibold text-tone-100 rounded-2xl w-8 h-8 bg-tone-10 container-center uppercase">${this.merchantDetail.merchantName[0]}</div>`),t&&(t.innerHTML=this.email),o&&(o.innerHTML=this.email),a){if((j=(z=this.merchantDetail)==null?void 0:z.plan)!=null&&j.title){const H=((O=(D=this.merchantDetail)==null?void 0:D.plan)==null?void 0:O.title)||"";a.textContent=si(H)}(te=this.metadata)!=null&&te.productName&&(a.textContent=si(this.metadata.productName))}if(s){if((N=(oe=this.merchantDetail)==null?void 0:oe.plan)!=null&&N.title){const H=((J=(we=this.merchantDetail)==null?void 0:we.plan)==null?void 0:J.title)||"";s.textContent=si(H)}(pe=this.metadata)!=null&&pe.productName&&(s.textContent=si(this.metadata.productName))}l&&(this.currency==="USD"?m&&(m.innerHTML=`1 ${((ze=(de=this.merchantDetail)==null?void 0:de.rate)==null?void 0:ze.to)||"-"} = ${((cn=(un=this.merchantDetail)==null?void 0:un.rate)==null?void 0:cn.from)||"-"} ${Q(((xn=this.merchantDetail.rate)==null?void 0:xn.rate)||1,2)} `):l.innerHTML=""),c&&(this.currency==="USD"?b&&(b.innerHTML=`1 ${((Ln=(mn=this.merchantDetail)==null?void 0:mn.rate)==null?void 0:Ln.to)||"-"} = ${((En=(qe=this.merchantDetail)==null?void 0:qe.rate)==null?void 0:En.from)||"-"} ${Q(((Tn=this.merchantDetail.rate)==null?void 0:Tn.rate)||1,2)} `):c.innerHTML=""),(Ce=(ri=this.merchantDetail)==null?void 0:ri.plan)!=null&&Ce.title||(Se=this.metadata)!=null&&Se.productName?h&&(h.innerHTML=`${this.currency} ${Q(this.amount,2)}`):(f&&(f.innerHTML=`<span> ${this.currency} ${Q(this.amount,2)} </span>`),a&&s&&(a.remove(),s==null||s.remove()),this.localCurrency?h==null||h.remove():r&&r.remove()),v&&(v.innerHTML=`${this.currency} ${Q(this.amount,2)}`),p&&(this.localCurrency&&this.localCurrency!==this.currency?p.children[1].innerHTML=`${this.localCurrency} ${Q(this.amount*(((We=(hn=this.merchantDetail)==null?void 0:hn.rate)==null?void 0:We.rate)||1),2)}`:p.remove()),y&&(this.localCurrency&&this.localCurrency!==this.currency?y.children[1].innerHTML=`${this.localCurrency} ${Q(this.amount*(((le=(L=this.merchantDetail)==null?void 0:L.rate)==null?void 0:le.rate)||1),2)}`:y.remove());const k=Ds[this.localCurrency];C&&this.localCurrency&&(C.innerHTML=k?`${k} (${this.localCurrency})`:this.localCurrency),w&&this.localCurrency&&(w.innerHTML=k?`${k} (${this.localCurrency})`:this.localCurrency),this.renderPaymentOptions(this.container),this.attachListeners()}renderPaymentOptions(e){const i=e.querySelector(".payment-options"),t=this.localCurrency?this.localCurrency:this.currency;if(i){const o=this.merchantDetail.plan?[X.card]:this.merchantDetail.paymentMethods.filter(a=>a!=="ussd").map(a=>X[a]);if(this.isMobile){let a='<div class="">';o.forEach(s=>{a+=`
|
|
1055
|
+
<div key=${s.key}>
|
|
1056
|
+
<button class="tab-button gap-2 mb-4 group" data-name="${s.key}">
|
|
1057
|
+
<div class="lg:block">${s.icon}</div>
|
|
1056
1058
|
<div class="flex items-center gap-2">
|
|
1057
|
-
<span>${
|
|
1058
|
-
${
|
|
1059
|
+
<span>${s.label} </span>
|
|
1060
|
+
${s.key==="card"?` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>`:""}
|
|
1059
1061
|
</div>
|
|
1060
1062
|
</button>
|
|
1061
1063
|
</div>
|
|
1062
|
-
`}),
|
|
1063
|
-
<div key=${
|
|
1064
|
-
<button class="tab-button gap-2 group" data-name="${
|
|
1065
|
-
<div class="md:container-center lg:block">${
|
|
1064
|
+
`}),a+="</div>",i.innerHTML=a}else{const a=o.length%2===0;let s='<div class="grid gap-2">';if(a)s+='<div class="grid grid-cols-2 gap-2">',o.forEach(r=>{s+=`
|
|
1065
|
+
<div key=${r.key}>
|
|
1066
|
+
<button class="tab-button gap-2 group" data-name="${r.key}">
|
|
1067
|
+
<div class="md:container-center lg:block">${r.icon}</div>
|
|
1066
1068
|
<div class="flex items-center gap-2">
|
|
1067
|
-
<span>${
|
|
1068
|
-
${
|
|
1069
|
+
<span>${r.label} </span>
|
|
1070
|
+
${r.key==="card"?` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>`:""}
|
|
1069
1071
|
</div>
|
|
1070
1072
|
</button>
|
|
1071
1073
|
</div>
|
|
1072
|
-
`}),
|
|
1074
|
+
`}),s+="</div>";else{if(s+=`
|
|
1073
1075
|
<div>
|
|
1074
|
-
<button class="tab-button gap-2 group" data-name="${
|
|
1075
|
-
<div class="md:container-center lg:block"> ${
|
|
1076
|
+
<button class="tab-button gap-2 group" data-name="${o[0].key}">
|
|
1077
|
+
<div class="md:container-center lg:block"> ${o[0].icon}</div>
|
|
1076
1078
|
<div class="flex items-center gap-2">
|
|
1077
|
-
<span>${
|
|
1078
|
-
${
|
|
1079
|
+
<span>${o[0].label} </span>
|
|
1080
|
+
${o[0].key==="card"?` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>`:""}
|
|
1079
1081
|
</div>
|
|
1080
1082
|
</button>
|
|
1081
1083
|
</div>
|
|
1082
|
-
`,
|
|
1084
|
+
`,o.length>1){s+='<div class="grid grid-cols-2 gap-2">';for(let r=1;r<o.length;r++)s+=`
|
|
1083
1085
|
<div>
|
|
1084
|
-
<button class="tab-button gap-2 group" data-name="${
|
|
1085
|
-
<div class="md:container-center lg:block">${
|
|
1086
|
+
<button class="tab-button gap-2 group" data-name="${o[r].key}">
|
|
1087
|
+
<div class="md:container-center lg:block">${o[r].icon}</div>
|
|
1086
1088
|
<div class="flex items-center gap-2">
|
|
1087
|
-
<span>${
|
|
1088
|
-
${
|
|
1089
|
+
<span>${o[r].label} </span>
|
|
1090
|
+
${o[r].key==="card"?` <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2"> ${t} Card </div>`:""}
|
|
1089
1091
|
</div>
|
|
1090
1092
|
</button>
|
|
1091
1093
|
</div>
|
|
1092
|
-
`;
|
|
1094
|
+
`;s+="</div>"}s+="</div>"}s+="</div>",i.innerHTML=s}}}render(){return Hs}}const Us=`<div class="flex items-center justify-center md:justify-between w-full text-xxs mt-5">
|
|
1093
1095
|
<div class="text-tone-60"><span>Powered by</span> <span class="font-bold">Spotflow</span></div>
|
|
1094
1096
|
<div class="align-center text-tone-60 hidden md:flex gap-4">
|
|
1095
1097
|
<a href="https://ribbon-scowl-35f.notion.site/Terms-Conditions-940742f0a1b144498ffc1786c5bc6a08?pvs=4" target="_blank" class="hover:font-bold">Terms</a>
|
package/dist/modules/Card.d.ts
CHANGED
|
@@ -63,7 +63,6 @@ declare class Card {
|
|
|
63
63
|
constructor({ amount, container, email, encryption, planId, token, currency, rdtCode, url, reference, onSuccess, callBackUrl, metadata, localCurrency, hidePaymentMethods, showPaymentMethods, onClose, restartTransactionProcess, retryingPayment, }: Props);
|
|
64
64
|
get currentStep(): number;
|
|
65
65
|
set currentStep(step: number);
|
|
66
|
-
attachInputListeners(): void;
|
|
67
66
|
submitCardDetails(e: Event, _values: {
|
|
68
67
|
pan: string;
|
|
69
68
|
cvv: string;
|