@spot-flow/checkout-inline-js 0.1.49 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,53 +1,53 @@
1
1
  import './index.css';var br = Object.defineProperty;
2
2
  var fr = (n, e, i) => e in n ? br(n, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[e] = i;
3
3
  var h = (n, e, i) => fr(n, typeof e != "symbol" ? e + "" : e, i);
4
- const gr = `<div id="checkout-modal">\r
5
- <div role="dialog" class="relative z-50" aria-labelledby="modal-title" aria-modal="true">\r
6
- <div class="fixed inset-0 bg-black bg-opacity-30 transition-opacity" aria-hidden="true"></div>\r
7
- \r
8
- <div class="fixed top-0 left-0 w-full z-50 max-h-screen hide-scrollbar overflow-y-auto">\r
9
- <div\r
10
- class="relative flex min-h-full items-end justify-center text-center sm:items-center p-0 transition-transform duration-700 transform">\r
11
- <div id="main-layout-container-screen"\r
12
- class="relative transform overflow-hidden md:rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full md:max-w-[600px] min-h-screen md:min-h-[70%] flex">\r
13
- \r
14
- </div>\r
15
- </div>\r
16
- </div>\r
17
- </div>\r
18
- </div>`, yr = `<div class="relative flex flex-1 flex-col gap-3 pb-5" id="main">\r
19
- \r
20
- <div class="relative px-4 md:px-7 lg:px-8 py-4 flex flex-col gap-1 flex-1">\r
21
- <!-- header -->\r
22
- <div id="main-header" class="header-container py-3 md:py-4 px-0 md:px-5 lg:px-7">\r
23
- \r
24
- </div>\r
25
- <!-- error container -->\r
26
- \r
27
- <div id="toast-container"></div>\r
28
- \r
29
- <div id="error-container-main" class=" hidden"></div>\r
30
- <!-- end of error container -->\r
31
- \r
32
- <!-- body -->\r
33
- <div class="box-container pt-0 pb-0 flex-1" id="main-content">\r
34
- <div id="payment-content-view" class="grid"></div>\r
35
- </div>\r
36
- \r
37
- <!-- Test Container -->\r
38
- <div class="hidden opacity-0 scale-95 transition-all duration-200 transform" id="test-container"></div>\r
39
- \r
40
- <!-- End Test Container -->\r
41
- <div id="mob-container" class="md:hidden">\r
42
- \r
43
- </div>\r
44
- <!-- end of body -->\r
45
- \r
46
- <!-- footer -->\r
47
- <div class="gap-2 py-4 px-3 md:px-7" id="main-footer">\r
48
- </div>\r
49
- <!-- end of footer -->\r
50
- </div>\r
4
+ const gr = `<div id="checkout-modal">
5
+ <div role="dialog" class="relative z-50" aria-labelledby="modal-title" aria-modal="true">
6
+ <div class="fixed inset-0 bg-black bg-opacity-30 transition-opacity" aria-hidden="true"></div>
7
+
8
+ <div class="fixed top-0 left-0 w-full z-50 max-h-screen hide-scrollbar overflow-y-auto">
9
+ <div
10
+ class="relative flex min-h-full items-end justify-center text-center sm:items-center p-0 transition-transform duration-700 transform">
11
+ <div id="main-layout-container-screen"
12
+ class="relative transform overflow-hidden md:rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full md:max-w-[600px] min-h-screen md:min-h-[70%] flex">
13
+
14
+ </div>
15
+ </div>
16
+ </div>
17
+ </div>
18
+ </div>`, yr = `<div class="relative flex flex-1 flex-col gap-3 pb-5" id="main">
19
+
20
+ <div class="relative px-4 md:px-7 lg:px-8 py-4 flex flex-col gap-1 flex-1">
21
+ <!-- header -->
22
+ <div id="main-header" class="header-container py-3 md:py-4 px-0 md:px-5 lg:px-7">
23
+
24
+ </div>
25
+ <!-- error container -->
26
+
27
+ <div id="toast-container"></div>
28
+
29
+ <div id="error-container-main" class=" hidden"></div>
30
+ <!-- end of error container -->
31
+
32
+ <!-- body -->
33
+ <div class="box-container pt-0 pb-0 flex-1" id="main-content">
34
+ <div id="payment-content-view" class="grid"></div>
35
+ </div>
36
+
37
+ <!-- Test Container -->
38
+ <div class="hidden opacity-0 scale-95 transition-all duration-200 transform" id="test-container"></div>
39
+
40
+ <!-- End Test Container -->
41
+ <div id="mob-container" class="md:hidden">
42
+
43
+ </div>
44
+ <!-- end of body -->
45
+
46
+ <!-- footer -->
47
+ <div class="gap-2 py-4 px-3 md:px-7" id="main-footer">
48
+ </div>
49
+ <!-- end of footer -->
50
+ </div>
51
51
  </div>`, pe = (n, e) => e || n;
52
52
  let J = class extends Error {
53
53
  constructor(e, i) {
@@ -846,92 +846,92 @@ const ns = [
846
846
 
847
847
  `
848
848
  }
849
- ], xr = `<div>\r
850
- <form id="checkoutcard">\r
851
- <div>\r
852
- <div class="container-between">\r
853
- <h5 class="text-grey-400 font-semibold text-sm">Enter your card details</h5>\r
854
- <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2 md:hidden"> <span\r
855
- id="card-currency"></span> </div>\r
856
- </div>\r
857
- <div class="mt-3 mb-3 md:mb-5">\r
858
- <div>\r
859
- <div id="card-details" class="flex border border-grey-100 rounded-lg p-4">\r
860
- <div class="grow relative flex gap-2">\r
861
- <div class="relative flex w-full">\r
862
- <div class="absolute left-0 top-1/2 -translate-y-2/4">\r
863
- <div id="card-type" class="align-center gap-2">\r
864
- <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">\r
865
- <path\r
866
- 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"\r
867
- fill="#B6B4B9" />\r
868
- </svg>\r
869
- </div>\r
870
- </div>\r
871
- <input class="details-input-container ml-9 grow" type="tel" id="card-number" name="number"\r
872
- placeholder="Card number" required minlength="17" maxlength="23" />\r
873
- </div>\r
874
- </div>\r
875
- \r
876
- <div class="relative w-16 md:w-20">\r
877
- <div class="w-4/5 md:w-3/5">\r
878
- <input class="details-input-container" type="tel" id="card-expiry" name="expiry" placeholder="MM/YY"\r
879
- required minlength="5" />\r
880
- </div>\r
881
- </div>\r
882
- \r
883
- <div class="relative w-14 md:w-16">\r
884
- <div class="w-4/5 md:w-3/5 ml-auto">\r
885
- <input class="details-input-container" type="tel" id="card-cvv" name="cvv" placeholder="CVV" required\r
886
- minlength="3" />\r
887
- </div>\r
888
- </div>\r
889
- </div>\r
890
- <div id="card-error" class="text-sm text-error font-semibold mt-2 hidden"></div>\r
891
- \r
892
- </div>\r
893
- \r
894
- \r
895
- <div>\r
896
- <div id="card-name" class="flex border border-grey-100 rounded-lg p-4 mt-3">\r
897
- <div class="relative flex w-full">\r
898
- <input class="details-input-container" id="card-name" name="name" placeholder="Card holder name" />\r
899
- </div>\r
900
- </div>\r
901
- \r
902
- </div>\r
903
- \r
904
- <div class="mt-4 md:mt-8">\r
905
- <button type="submit" disabled="true" class="details-form-button">\r
906
- <svg class="spinner hidden" viewBox="0 0 24 24">\r
907
- <path\r
908
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
909
- </path>\r
910
- </svg>\r
911
- <span id="details-form-button-text"> Pay </span>\r
912
- </button>\r
913
- </div>\r
914
- </div>\r
915
- </div>\r
916
- </form>\r
917
- \r
918
- <div class="container-center mt-4 gap-1">\r
919
- <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">\r
920
- <path\r
921
- d="M4.884 0.68L1.384 2.235C1.024 2.395 0.789001 2.755 0.789001 3.15V5.5C0.789001 8.275 2.709 10.87 5.289 11.5C7.869 10.87 9.789 8.275 9.789 5.5V3.15C9.789 2.755 9.554 2.395 9.194 2.235L5.694 0.68C5.439 0.565 5.139 0.565 4.884 0.68ZM5.289 5.995H8.789C8.524 8.055 7.149 9.89 5.289 10.465V6H1.789V3.15L5.289 1.595V5.995Z"\r
922
- fill="#6D6A73" />\r
923
- </svg>\r
924
- <p class="text-xxs text-grey-100">\r
925
- PCI DSS Certified\r
926
- </p>\r
927
- </div>\r
928
- <div class="text-xs text-grey-400 mt-4">\r
929
- <p>\r
930
- By confirming this payment, you allow <span id="merchant-name">-</span> to charge your card for this payment and\r
931
- future payments in\r
932
- accordance with their terms.\r
933
- </p>\r
934
- </div>\r
849
+ ], xr = `<div>
850
+ <form id="checkoutcard">
851
+ <div>
852
+ <div class="container-between">
853
+ <h5 class="text-grey-400 font-semibold text-sm">Enter your card details</h5>
854
+ <div class="bg-tone-100 rounded-[40px] h-[22px] text-xxs text-white align-center px-2 md:hidden"> <span
855
+ id="card-currency"></span> </div>
856
+ </div>
857
+ <div class="mt-3 mb-3 md:mb-5">
858
+ <div>
859
+ <div id="card-details" class="flex border border-grey-100 rounded-lg p-4">
860
+ <div class="grow relative flex gap-2">
861
+ <div class="relative flex w-full">
862
+ <div class="absolute left-0 top-1/2 -translate-y-2/4">
863
+ <div id="card-type" class="align-center gap-2">
864
+ <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
865
+ <path
866
+ 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"
867
+ fill="#B6B4B9" />
868
+ </svg>
869
+ </div>
870
+ </div>
871
+ <input class="details-input-container ml-9 grow" type="tel" id="card-number" name="number"
872
+ placeholder="Card number" required minlength="17" maxlength="23" />
873
+ </div>
874
+ </div>
875
+
876
+ <div class="relative w-16 md:w-20">
877
+ <div class="w-4/5 md:w-3/5">
878
+ <input class="details-input-container" type="tel" id="card-expiry" name="expiry" placeholder="MM/YY"
879
+ required minlength="5" />
880
+ </div>
881
+ </div>
882
+
883
+ <div class="relative w-14 md:w-16">
884
+ <div class="w-4/5 md:w-3/5 ml-auto">
885
+ <input class="details-input-container" type="tel" id="card-cvv" name="cvv" placeholder="CVV" required
886
+ minlength="3" />
887
+ </div>
888
+ </div>
889
+ </div>
890
+ <div id="card-error" class="text-sm text-error font-semibold mt-2 hidden"></div>
891
+
892
+ </div>
893
+
894
+
895
+ <div>
896
+ <div id="card-name" class="flex border border-grey-100 rounded-lg p-4 mt-3">
897
+ <div class="relative flex w-full">
898
+ <input class="details-input-container" id="card-name" name="name" placeholder="Card holder name" />
899
+ </div>
900
+ </div>
901
+
902
+ </div>
903
+
904
+ <div class="mt-4 md:mt-8">
905
+ <button type="submit" disabled="true" class="details-form-button">
906
+ <svg class="spinner hidden" viewBox="0 0 24 24">
907
+ <path
908
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
909
+ </path>
910
+ </svg>
911
+ <span id="details-form-button-text"> Pay </span>
912
+ </button>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </form>
917
+
918
+ <div class="container-center mt-4 gap-1">
919
+ <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
920
+ <path
921
+ d="M4.884 0.68L1.384 2.235C1.024 2.395 0.789001 2.755 0.789001 3.15V5.5C0.789001 8.275 2.709 10.87 5.289 11.5C7.869 10.87 9.789 8.275 9.789 5.5V3.15C9.789 2.755 9.554 2.395 9.194 2.235L5.694 0.68C5.439 0.565 5.139 0.565 4.884 0.68ZM5.289 5.995H8.789C8.524 8.055 7.149 9.89 5.289 10.465V6H1.789V3.15L5.289 1.595V5.995Z"
922
+ fill="#6D6A73" />
923
+ </svg>
924
+ <p class="text-xxs text-grey-100">
925
+ PCI DSS Certified
926
+ </p>
927
+ </div>
928
+ <div class="text-xs text-grey-400 mt-4">
929
+ <p>
930
+ By confirming this payment, you allow <span id="merchant-name">-</span> to charge your card for this payment and
931
+ future payments in
932
+ accordance with their terms.
933
+ </p>
934
+ </div>
935
935
  </div>`, Tr = () => {
936
936
  const n = Date.now().toString(36), e = "xxxx-xxxx-xxx-xxxx".replace(/[x]/g, () => Math.floor(Math.random() * 16).toString(16));
937
937
  return `SPF-${n}-${e}`.toUpperCase();
@@ -1214,24 +1214,24 @@ async function Hr(n, e) {
1214
1214
  const i = Uint8Array.from(atob(e), (l) => l.charCodeAt(0)), t = crypto.getRandomValues(new Uint8Array(12)), s = new TextEncoder().encode(n), o = await crypto.subtle.importKey("raw", i, { name: "AES-GCM" }, !1, ["encrypt"]), r = await crypto.subtle.encrypt({ name: "AES-GCM", iv: t }, o, s), d = new Uint8Array(t.length + r.byteLength);
1215
1215
  return d.set(t), d.set(new Uint8Array(r), t.length), btoa(String.fromCharCode.apply(null, d));
1216
1216
  }
1217
- const Rr = `<div id="paymentSuccess">\r
1218
- <div class="container-center min-h-[30dvh]">\r
1219
- <div>\r
1220
- <div class="container-center mb-5">\r
1221
- <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">\r
1222
- <path\r
1223
- d="M16.9987 33.6666C7.79814 33.6565 0.342135 26.2005 0.332031 17V16.6666C0.51525 7.5075 8.05634 0.213209 17.2165 0.334749C26.3766 0.456289 33.7215 7.94809 33.6617 17.1088C33.6018 26.2696 26.1596 33.6648 16.9987 33.6666ZM10.5248 17.4882C9.8749 16.8408 8.82351 16.8418 8.17484 17.4905C7.52527 18.14 7.52527 19.1932 8.17484 19.8428L11.8664 23.5343C12.86 24.5279 14.4708 24.5279 15.4643 23.5343L25.8237 13.175C26.4733 12.5253 26.4752 11.4727 25.8279 10.8208C25.1773 10.1656 24.1182 10.1638 23.4654 10.8166L14.0493 20.2327C13.8371 20.4449 13.4933 20.4452 13.2807 20.2334L10.5248 17.4882Z"\r
1224
- fill="#0D0716" />\r
1225
- </svg>\r
1226
- </div>\r
1227
- <h5 class="text-tone-100 font-semibold text-xl text-center mb-1" id="payment-success-text">\r
1228
- Payment successful\r
1229
- </h5>\r
1230
- <p class="text-tone-100 text-sm">We've processed your\r
1231
- <span id="success-amount" class="font-semibold"></span> <span class="font-semibold">charge</span>.\r
1232
- </p>\r
1233
- </div>\r
1234
- </div>\r
1217
+ const Rr = `<div id="paymentSuccess">
1218
+ <div class="container-center min-h-[30dvh]">
1219
+ <div>
1220
+ <div class="container-center mb-5">
1221
+ <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
1222
+ <path
1223
+ d="M16.9987 33.6666C7.79814 33.6565 0.342135 26.2005 0.332031 17V16.6666C0.51525 7.5075 8.05634 0.213209 17.2165 0.334749C26.3766 0.456289 33.7215 7.94809 33.6617 17.1088C33.6018 26.2696 26.1596 33.6648 16.9987 33.6666ZM10.5248 17.4882C9.8749 16.8408 8.82351 16.8418 8.17484 17.4905C7.52527 18.14 7.52527 19.1932 8.17484 19.8428L11.8664 23.5343C12.86 24.5279 14.4708 24.5279 15.4643 23.5343L25.8237 13.175C26.4733 12.5253 26.4752 11.4727 25.8279 10.8208C25.1773 10.1656 24.1182 10.1638 23.4654 10.8166L14.0493 20.2327C13.8371 20.4449 13.4933 20.4452 13.2807 20.2334L10.5248 17.4882Z"
1224
+ fill="#0D0716" />
1225
+ </svg>
1226
+ </div>
1227
+ <h5 class="text-tone-100 font-semibold text-xl text-center mb-1" id="payment-success-text">
1228
+ Payment successful
1229
+ </h5>
1230
+ <p class="text-tone-100 text-sm">We've processed your
1231
+ <span id="success-amount" class="font-semibold"></span> <span class="font-semibold">charge</span>.
1232
+ </p>
1233
+ </div>
1234
+ </div>
1235
1235
  </div>`;
1236
1236
  class ti {
1237
1237
  constructor({
@@ -1261,37 +1261,37 @@ class ti {
1261
1261
  return Rr;
1262
1262
  }
1263
1263
  }
1264
- const Is = `<div id="paymentWarning">\r
1265
- <div class="container-center min-h-[30dvh]">\r
1266
- <div>\r
1267
- <div class="container-center mb-5">\r
1268
- <svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">\r
1269
- <path\r
1270
- d="M17.4936 33.6666C13.0734 33.6706 8.8332 31.916 5.7077 28.7897C2.58219 25.6634 0.828061 21.4221 0.832038 17.0009V16.6676C0.968309 9.98833 5.07706 4.03524 11.2728 1.54023C17.4684 -0.954785 24.5548 0.490009 29.2799 5.21158C34.0492 9.9781 35.4766 17.1498 32.896 23.3799C30.3155 29.61 24.2356 33.6705 17.4936 33.6666ZM17.4936 19.3507L21.8089 23.6672L24.1582 21.3173L19.8428 17.0009L24.1582 12.6845L21.8089 10.3346L17.4936 14.651L13.1782 10.3346L10.829 12.6845L15.1443 17.0009L10.829 21.3173L13.1782 23.6672L17.4936 19.3524V19.3507Z"\r
1271
- fill="#D62020" />\r
1272
- </svg>\r
1273
- </div>\r
1274
- \r
1275
- \r
1276
- <h5 class="text-tone-100 font-semibold text-xl text-center mb-1" id="payment-warning-text">\r
1277
- Payment failed\r
1278
- </h5>\r
1279
- <p class="text-tone-100 text-sm text-center mb-5" id="payment-warning-desc">\r
1280
- </p>\r
1281
- \r
1282
- <div class="mt-8 container-center">\r
1283
- <button class="button-fill w-60" id="try-again">Try again</button>\r
1284
- </div>\r
1285
- \r
1286
- <!-- <div class="mt-8">\r
1287
- <button class="button-outline w-60" id="try-again">I have made the payment</button>\r
1288
- </div> -->\r
1289
- \r
1290
- <!-- <div class="mt-10 text-center" id="report">\r
1291
- <button id="report-issue" class="text-error-dark font-semibold hover:underline">Report transaction</button>\r
1292
- </div> -->\r
1293
- </div>\r
1294
- </div>\r
1264
+ const Is = `<div id="paymentWarning">
1265
+ <div class="container-center min-h-[30dvh]">
1266
+ <div>
1267
+ <div class="container-center mb-5">
1268
+ <svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
1269
+ <path
1270
+ d="M17.4936 33.6666C13.0734 33.6706 8.8332 31.916 5.7077 28.7897C2.58219 25.6634 0.828061 21.4221 0.832038 17.0009V16.6676C0.968309 9.98833 5.07706 4.03524 11.2728 1.54023C17.4684 -0.954785 24.5548 0.490009 29.2799 5.21158C34.0492 9.9781 35.4766 17.1498 32.896 23.3799C30.3155 29.61 24.2356 33.6705 17.4936 33.6666ZM17.4936 19.3507L21.8089 23.6672L24.1582 21.3173L19.8428 17.0009L24.1582 12.6845L21.8089 10.3346L17.4936 14.651L13.1782 10.3346L10.829 12.6845L15.1443 17.0009L10.829 21.3173L13.1782 23.6672L17.4936 19.3524V19.3507Z"
1271
+ fill="#D62020" />
1272
+ </svg>
1273
+ </div>
1274
+
1275
+
1276
+ <h5 class="text-tone-100 font-semibold text-xl text-center mb-1" id="payment-warning-text">
1277
+ Payment failed
1278
+ </h5>
1279
+ <p class="text-tone-100 text-sm text-center mb-5" id="payment-warning-desc">
1280
+ </p>
1281
+
1282
+ <div class="mt-8 container-center">
1283
+ <button class="button-fill w-60" id="try-again">Try again</button>
1284
+ </div>
1285
+
1286
+ <!-- <div class="mt-8">
1287
+ <button class="button-outline w-60" id="try-again">I have made the payment</button>
1288
+ </div> -->
1289
+
1290
+ <!-- <div class="mt-10 text-center" id="report">
1291
+ <button id="report-issue" class="text-error-dark font-semibold hover:underline">Report transaction</button>
1292
+ </div> -->
1293
+ </div>
1294
+ </div>
1295
1295
  </div>`;
1296
1296
  class xn {
1297
1297
  constructor({ container: e, onAction: i, onReportIssue: t }) {
@@ -1325,38 +1325,38 @@ class xn {
1325
1325
  return Is;
1326
1326
  }
1327
1327
  }
1328
- const Or = `<div id="checkoutcardotp">\r
1329
- <div class="w-full">\r
1330
- <div id="otp-content" class=" grid gap-4">\r
1331
- <h5 class="text-black" id="otp-message">\r
1332
- \r
1333
- </h5>\r
1334
- \r
1335
- <div class="">\r
1336
- <div class="relative w-full">\r
1337
- <input class="otp-input text-center" type="tel" id="card-otp" name="otp" required />\r
1338
- <div class="mt-4 md:mt-6">\r
1339
- <button type="button" class="otp-button" disabled="true">\r
1340
- <svg class="spinner hidden" viewBox="0 0 24 24">\r
1341
- <path\r
1342
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
1343
- </path>\r
1344
- </svg>\r
1345
- <span>Authorize</span>\r
1346
- </button>\r
1347
- </div>\r
1348
- \r
1349
- </div>\r
1350
- \r
1351
- <div class="py-5">\r
1352
- <div class="container-center">\r
1353
- <div id="otp-loader"></div>\r
1354
- <button type="button" id="cancel-payment" class="text-sm text-tone-100 font-semibold">Cancel\r
1355
- payment</button>\r
1356
- </div>\r
1357
- </div>\r
1358
- </div>\r
1359
- </div>\r
1328
+ const Or = `<div id="checkoutcardotp">
1329
+ <div class="w-full">
1330
+ <div id="otp-content" class=" grid gap-4">
1331
+ <h5 class="text-black" id="otp-message">
1332
+
1333
+ </h5>
1334
+
1335
+ <div class="">
1336
+ <div class="relative w-full">
1337
+ <input class="otp-input text-center" type="tel" id="card-otp" name="otp" required />
1338
+ <div class="mt-4 md:mt-6">
1339
+ <button type="button" class="otp-button" disabled="true">
1340
+ <svg class="spinner hidden" viewBox="0 0 24 24">
1341
+ <path
1342
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
1343
+ </path>
1344
+ </svg>
1345
+ <span>Authorize</span>
1346
+ </button>
1347
+ </div>
1348
+
1349
+ </div>
1350
+
1351
+ <div class="py-5">
1352
+ <div class="container-center">
1353
+ <div id="otp-loader"></div>
1354
+ <button type="button" id="cancel-payment" class="text-sm text-tone-100 font-semibold">Cancel
1355
+ payment</button>
1356
+ </div>
1357
+ </div>
1358
+ </div>
1359
+ </div>
1360
1360
  </div>`;
1361
1361
  class Vr {
1362
1362
  constructor(e) {
@@ -1402,34 +1402,34 @@ class Vr {
1402
1402
  return Or;
1403
1403
  }
1404
1404
  }
1405
- const Ur = `<div id="checkoutcardpin">\r
1406
- <div>\r
1407
- <div id="pin-content" class="grid gap-4">\r
1408
- <h5>\r
1409
- Please enter your 4-digit card pin to authorize this payment\r
1410
- </h5>\r
1411
- \r
1412
- <div>\r
1413
- <div class="container-between gap-4 md:gap-6">\r
1414
- <input type="tel" class="pin-input" maxlength="1" id="pin1" />\r
1415
- <input type="tel" class="pin-input" maxlength="1" id="pin2" />\r
1416
- <input type="tel" class="pin-input" maxlength="1" id="pin3" />\r
1417
- <input type="tel" class="pin-input" maxlength="1" id="pin4" />\r
1418
- </div>\r
1419
- \r
1420
- <div id="pin-error-container" class="mt-2">\r
1421
- <p id="pin-error" class="text-sm font-semibold text-error"></p>\r
1422
- </div>\r
1423
- \r
1424
- \r
1425
- \r
1426
- <div class="container-center mt-8">\r
1427
- <div id="pin-loader"></div>\r
1428
- <button type="button" id="cancel-payment" class="text-sm text-tone-100 font-semibold">Cancel payment</button>\r
1429
- </div>\r
1430
- </div>\r
1431
- </div>\r
1432
- </div>\r
1405
+ const Ur = `<div id="checkoutcardpin">
1406
+ <div>
1407
+ <div id="pin-content" class="grid gap-4">
1408
+ <h5>
1409
+ Please enter your 4-digit card pin to authorize this payment
1410
+ </h5>
1411
+
1412
+ <div>
1413
+ <div class="container-between gap-4 md:gap-6">
1414
+ <input type="tel" class="pin-input" maxlength="1" id="pin1" />
1415
+ <input type="tel" class="pin-input" maxlength="1" id="pin2" />
1416
+ <input type="tel" class="pin-input" maxlength="1" id="pin3" />
1417
+ <input type="tel" class="pin-input" maxlength="1" id="pin4" />
1418
+ </div>
1419
+
1420
+ <div id="pin-error-container" class="mt-2">
1421
+ <p id="pin-error" class="text-sm font-semibold text-error"></p>
1422
+ </div>
1423
+
1424
+
1425
+
1426
+ <div class="container-center mt-8">
1427
+ <div id="pin-loader"></div>
1428
+ <button type="button" id="cancel-payment" class="text-sm text-tone-100 font-semibold">Cancel payment</button>
1429
+ </div>
1430
+ </div>
1431
+ </div>
1432
+ </div>
1433
1433
  </div>`;
1434
1434
  class Kr {
1435
1435
  constructor(e) {
@@ -1491,86 +1491,86 @@ class Kr {
1491
1491
  return Ur;
1492
1492
  }
1493
1493
  }
1494
- const jr = `<form id="card-avs-form">\r
1495
- <div>\r
1496
- <h5 class="text-grey-400 font-semibold text-sm">Billing address</h5>\r
1497
- <div class="mt-2 mb-3 md:mb-5 border border-grey-100 rounded-lg p-3 grid grid-rows-1 gap-3">\r
1498
- <div class="relative w-full">\r
1499
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Address</span>\r
1500
- <div>\r
1501
- <input class="avs-input-container" type="text" id="avs-address-input" name="address" required />\r
1502
- </div>\r
1503
- </div>\r
1504
- <div class="grid grid-cols-1 md:grid-cols-2 gap-3">\r
1505
- <div class="relative w-full">\r
1506
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Country</span>\r
1507
- <div>\r
1508
- <select class="avs-input-container appearance-none pr-7" id="avs-country-select" name="country" required>\r
1509
- </select>\r
1510
- </div>\r
1511
- <div class="absolute right-4 top-1/2 -translate-y-2/4">\r
1512
- <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">\r
1513
- <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"\r
1514
- stroke-linejoin="round" />\r
1515
- </svg>\r
1516
- </div>\r
1517
- </div>\r
1518
- <div class="relative w-full">\r
1519
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">State</span>\r
1520
- <div>\r
1521
- <select class="avs-input-container appearance-none pr-7" id="avs-state-input" name="state"\r
1522
- required></select>\r
1523
- </div>\r
1524
- <div class="absolute right-4 top-1/2 -translate-y-2/4">\r
1525
- <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">\r
1526
- <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"\r
1527
- stroke-linejoin="round" />\r
1528
- </svg>\r
1529
- </div>\r
1530
- </div>\r
1531
- </div>\r
1532
- \r
1533
- <div class="grid grid-cols-1 md:grid-cols-2 gap-3">\r
1534
- <div class="relative w-full">\r
1535
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">City</span>\r
1536
- <div>\r
1537
- <input class="avs-input-container" type="text" id="avs-city-input" name="city" required />\r
1538
- </div>\r
1539
- </div>\r
1540
- \r
1541
- \r
1542
- \r
1543
- <div class="relative w-full">\r
1544
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Zip code\r
1545
- </span>\r
1546
- <div>\r
1547
- <input class="avs-input-container" type="text" id="avs-zipcode-input" name="code" inputmode="numeric" />\r
1548
- </div>\r
1549
- </div>\r
1550
- </div>\r
1551
- </div>\r
1552
- <div class="mt-4">\r
1553
- <button type="submit" disabled="true" class="details-form-button" id="avs-form-button">\r
1554
- <svg class="spinner hidden" viewBox="0 0 24 24">\r
1555
- <path\r
1556
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
1557
- </path>\r
1558
- </svg>\r
1559
- <span id="avs-form-button-text">Submit</span>\r
1560
- </button>\r
1561
- </div>\r
1562
- </div>\r
1563
- </form>\r
1564
- \r
1565
- <div class="container-center mt-4 gap-1">\r
1566
- <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">\r
1567
- <path\r
1568
- d="M4.884 0.68L1.384 2.235C1.024 2.395 0.789001 2.755 0.789001 3.15V5.5C0.789001 8.275 2.709 10.87 5.289 11.5C7.869 10.87 9.789 8.275 9.789 5.5V3.15C9.789 2.755 9.554 2.395 9.194 2.235L5.694 0.68C5.439 0.565 5.139 0.565 4.884 0.68ZM5.289 5.995H8.789C8.524 8.055 7.149 9.89 5.289 10.465V6H1.789V3.15L5.289 1.595V5.995Z"\r
1569
- fill="#6D6A73" />\r
1570
- </svg>\r
1571
- <p class="text-xxs text-grey-100">\r
1572
- PCI DSS Certified\r
1573
- </p>\r
1494
+ const jr = `<form id="card-avs-form">
1495
+ <div>
1496
+ <h5 class="text-grey-400 font-semibold text-sm">Billing address</h5>
1497
+ <div class="mt-2 mb-3 md:mb-5 border border-grey-100 rounded-lg p-3 grid grid-rows-1 gap-3">
1498
+ <div class="relative w-full">
1499
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Address</span>
1500
+ <div>
1501
+ <input class="avs-input-container" type="text" id="avs-address-input" name="address" required />
1502
+ </div>
1503
+ </div>
1504
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
1505
+ <div class="relative w-full">
1506
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Country</span>
1507
+ <div>
1508
+ <select class="avs-input-container appearance-none pr-7" id="avs-country-select" name="country" required>
1509
+ </select>
1510
+ </div>
1511
+ <div class="absolute right-4 top-1/2 -translate-y-2/4">
1512
+ <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
1513
+ <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"
1514
+ stroke-linejoin="round" />
1515
+ </svg>
1516
+ </div>
1517
+ </div>
1518
+ <div class="relative w-full">
1519
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">State</span>
1520
+ <div>
1521
+ <select class="avs-input-container appearance-none pr-7" id="avs-state-input" name="state"
1522
+ required></select>
1523
+ </div>
1524
+ <div class="absolute right-4 top-1/2 -translate-y-2/4">
1525
+ <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
1526
+ <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"
1527
+ stroke-linejoin="round" />
1528
+ </svg>
1529
+ </div>
1530
+ </div>
1531
+ </div>
1532
+
1533
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
1534
+ <div class="relative w-full">
1535
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">City</span>
1536
+ <div>
1537
+ <input class="avs-input-container" type="text" id="avs-city-input" name="city" required />
1538
+ </div>
1539
+ </div>
1540
+
1541
+
1542
+
1543
+ <div class="relative w-full">
1544
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Zip code
1545
+ </span>
1546
+ <div>
1547
+ <input class="avs-input-container" type="text" id="avs-zipcode-input" name="code" inputmode="numeric" />
1548
+ </div>
1549
+ </div>
1550
+ </div>
1551
+ </div>
1552
+ <div class="mt-4">
1553
+ <button type="submit" disabled="true" class="details-form-button" id="avs-form-button">
1554
+ <svg class="spinner hidden" viewBox="0 0 24 24">
1555
+ <path
1556
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
1557
+ </path>
1558
+ </svg>
1559
+ <span id="avs-form-button-text">Submit</span>
1560
+ </button>
1561
+ </div>
1562
+ </div>
1563
+ </form>
1564
+
1565
+ <div class="container-center mt-4 gap-1">
1566
+ <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1567
+ <path
1568
+ d="M4.884 0.68L1.384 2.235C1.024 2.395 0.789001 2.755 0.789001 3.15V5.5C0.789001 8.275 2.709 10.87 5.289 11.5C7.869 10.87 9.789 8.275 9.789 5.5V3.15C9.789 2.755 9.554 2.395 9.194 2.235L5.694 0.68C5.439 0.565 5.139 0.565 4.884 0.68ZM5.289 5.995H8.789C8.524 8.055 7.149 9.89 5.289 10.465V6H1.789V3.15L5.289 1.595V5.995Z"
1569
+ fill="#6D6A73" />
1570
+ </svg>
1571
+ <p class="text-xxs text-grey-100">
1572
+ PCI DSS Certified
1573
+ </p>
1574
1574
  </div>`, Fr = [
1575
1575
  {
1576
1576
  code2: "AF",
@@ -23750,20 +23750,20 @@ class zr {
23750
23750
  `, this.attachListener();
23751
23751
  }
23752
23752
  }
23753
- const Wr = `<div class="py-3 w-full">\r
23754
- <div class="container-center flex-col gap-4 h-[40dvh]" id="loader-container">\r
23755
- <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">\r
23756
- <path\r
23757
- 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"\r
23758
- stroke="black" stroke-width="4" stroke-linejoin="round" />\r
23759
- </svg>\r
23760
- <div class="text-grey-400 text-sm container-center">\r
23761
- <div class="text-center">\r
23762
- <div id="loader-message" class="hidden"></div>\r
23763
- <div id="loader-sub-message" class="font-bold hidden"></div>\r
23764
- </div>\r
23765
- </div>\r
23766
- </div>\r
23753
+ const Wr = `<div class="py-3 w-full">
23754
+ <div class="container-center flex-col gap-4 h-[40dvh]" id="loader-container">
23755
+ <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
23756
+ <path
23757
+ 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"
23758
+ stroke="black" stroke-width="4" stroke-linejoin="round" />
23759
+ </svg>
23760
+ <div class="text-grey-400 text-sm container-center">
23761
+ <div class="text-center">
23762
+ <div id="loader-message" class="hidden"></div>
23763
+ <div id="loader-sub-message" class="font-bold hidden"></div>
23764
+ </div>
23765
+ </div>
23766
+ </div>
23767
23767
  </div>`;
23768
23768
  class Ne {
23769
23769
  constructor(e) {
@@ -23798,193 +23798,193 @@ class Ne {
23798
23798
  return Wr;
23799
23799
  }
23800
23800
  }
23801
- const Zr = `<div class="relative gap-3 pb-5" id="transaction-issues-form">\r
23802
- <div class="border-b border-tone-70 pb-3 container-center">\r
23803
- \r
23804
- <svg width="84" height="24" viewBox="0 0 84 24" fill="none" xmlns="http://www.w3.org/2000/svg">\r
23805
- <path\r
23806
- d="M66.4434 5.99093H69.0572C69.107 6.16312 69.1648 6.3407 69.2092 6.52231C69.9747 9.642 70.7294 12.7644 71.5097 15.88C71.6267 16.3482 71.811 16.8137 72.0424 17.2374C72.3303 17.7675 72.711 17.7971 73.1469 17.3841C73.2854 17.2536 73.4065 17.0989 73.5128 16.9415C74.0724 16.1155 74.4168 15.198 74.5096 14.2132C74.5554 13.7384 74.476 13.2379 74.3738 12.7657C73.8895 10.5326 73.3783 8.3048 72.8697 6.04474C73.3123 5.886 73.7469 5.98555 74.1693 5.96806C74.5863 5.95057 75.006 5.96402 75.4607 5.96402C75.5132 6.12411 75.5697 6.26537 75.6033 6.412C76.128 8.69089 76.6325 10.9752 77.1786 13.25C77.4316 14.302 77.7517 15.3379 78.0719 16.3711C78.1782 16.7168 78.3463 17.0545 78.5454 17.3558C78.7957 17.7338 79.1387 17.7715 79.4844 17.4728C79.6916 17.2939 79.8679 17.0639 80.0091 16.8271C80.4921 16.0253 80.7571 15.1361 80.9831 14.2375C81.3261 12.8801 81.5925 11.5133 81.5616 10.1021C81.5266 8.48372 80.9373 7.14786 79.6069 6.17792C79.5383 6.12815 79.4764 6.06626 79.3553 5.96133C79.6768 5.7703 79.9647 5.59676 80.2566 5.42591C80.5728 5.24027 80.9051 5.07614 81.2051 4.86763C81.4741 4.67929 81.6813 4.74252 81.9127 4.91875C82.7494 5.5591 83.1315 6.42142 83.1718 7.45593C83.2176 8.60345 82.9822 9.71465 82.7333 10.8218C82.3674 12.4442 81.8763 14.0263 81.1526 15.5289C80.7947 16.2715 80.3575 16.9576 79.8235 17.5926C78.6679 18.9661 76.4118 18.6096 75.7163 17.0235C75.4513 16.4195 75.2361 15.7926 74.9737 15.1092C74.885 15.2612 74.8069 15.3823 74.7424 15.5087C74.3428 16.2877 73.8948 17.0262 73.3056 17.6894C72.2092 18.9217 70.0151 18.5719 69.3532 17.1379C69.1353 16.663 68.9362 16.176 68.7761 15.6796C68.0631 13.4841 67.5828 11.2294 67.0999 8.97609C66.8913 8.00481 66.6734 7.03621 66.4447 5.99227L66.4434 5.99093Z"\r
23807
- fill="#0D0716" />\r
23808
- <path\r
23809
- d="M14.0253 18.268V24.0002H11.3912C11.3912 23.7782 11.3912 23.5737 11.3912 23.3679C11.3912 18.4361 11.3912 13.5043 11.3912 8.57257C11.3912 8.38019 11.3966 8.18647 11.3778 7.99544C11.3293 7.50038 11.176 7.34837 10.6634 7.24478C10.5141 7.21518 10.3675 7.17617 10.2168 7.10487C11.5244 6.84792 12.7688 6.43089 14.0037 5.80265V8.847L14.0845 8.87122C14.1315 8.7757 14.1894 8.68557 14.2257 8.58602C14.4652 7.92011 14.7988 7.31204 15.2979 6.80353C16.7871 5.28741 19.1037 5.43539 20.383 7.13178C20.9413 7.87302 21.2682 8.72189 21.4162 9.62726C21.7485 11.668 21.505 13.6375 20.527 15.4752C20.2593 15.9783 19.9095 16.4545 19.518 16.8702C18.6234 17.8227 17.4893 18.2653 16.1831 18.2666C15.4862 18.2666 14.7907 18.2666 14.0253 18.2666V18.268ZM14.0253 17.9249C15.2696 18.0298 16.358 17.8361 17.258 17.0128C17.9104 16.4155 18.271 15.642 18.5064 14.8052C18.8992 13.4102 18.9732 11.9815 18.8952 10.5474C18.8575 9.85461 18.7203 9.16852 18.423 8.51875C17.714 6.97303 15.7997 6.88559 14.8876 8.19454C14.5943 8.61561 14.3589 9.11202 14.2378 9.60708C14.0898 10.2111 14.0414 10.8501 14.0333 11.4743C14.0091 13.4142 14.0239 15.3554 14.0239 17.2953C14.0239 17.485 14.0239 17.676 14.0239 17.9249H14.0253Z"\r
23810
- fill="#0D0716" />\r
23811
- <path\r
23812
- d="M0.00403582 16.4884C0.458739 15.4202 0.899988 14.3857 1.37487 13.2691C1.5242 13.5099 1.62375 13.6673 1.71926 13.8261C2.50221 15.1216 3.50175 16.1978 4.8524 16.9175C5.68647 17.3615 6.57032 17.5942 7.52008 17.5565C8.27882 17.5269 8.712 17.0372 8.63397 16.2866C8.5963 15.926 8.47523 15.5884 8.19541 15.361C7.80528 15.0435 7.40977 14.7059 6.96179 14.492C5.93804 14.0023 4.87124 13.6054 3.84345 13.1252C3.16543 12.809 2.4901 12.4633 1.87397 12.0409C0.971288 11.4207 0.403582 10.5638 0.348426 9.42299C0.286543 8.12345 0.830034 7.16562 1.94796 6.51989C2.65692 6.10958 3.43718 5.91451 4.23761 5.82169C6.01338 5.61586 7.67882 5.97236 9.22051 6.88311C9.29315 6.92616 9.35773 6.98535 9.46804 7.06741C9.02006 7.95799 8.57478 8.84049 8.10124 9.78218C7.93577 9.6194 7.80259 9.49429 7.67748 9.36245C6.8757 8.52435 6.01741 7.76023 4.97751 7.22347C4.24972 6.84813 3.48022 6.64096 2.66095 6.6598C1.78652 6.67863 1.31164 7.31494 1.47846 8.1813C1.57128 8.65887 1.81208 9.04228 2.19414 9.30057C2.69727 9.64092 3.22597 9.95975 3.77753 10.21C4.61967 10.5907 5.4941 10.9014 6.35238 11.2485C7.13399 11.5647 7.88062 11.9454 8.52769 12.4929C9.56355 13.37 9.96848 14.4785 9.70481 15.8184C9.54607 16.6229 9.07387 17.2054 8.40124 17.6413C7.80259 18.0287 7.13533 18.2345 6.43848 18.3327C5.00173 18.5359 3.57977 18.4915 2.20356 17.9682C1.37622 17.6534 0.648422 17.1839 0 16.4897L0.00403582 16.4884Z"\r
23813
- fill="#0D0716" />\r
23814
- <path\r
23815
- d="M33.5785 12.155C33.5866 12.6164 33.561 13.0778 33.4938 13.5352C33.1722 15.7321 31.8377 17.8576 29.5481 18.3217C27.3042 18.7764 25.0939 17.9531 23.9894 15.6177C23.6262 14.8496 23.4405 14.033 23.3706 13.1962C23.263 11.9209 23.2926 10.6442 23.6733 9.40928C24.2316 7.59719 25.3387 6.30439 27.2625 5.9008C28.7974 5.57794 30.4346 5.87659 31.6359 6.92052C33.0579 8.15548 33.4911 10.0981 33.5704 11.9088C33.5745 11.9922 33.5772 12.0743 33.5785 12.1577V12.155ZM25.406 10.0779C25.4248 11.5294 25.8297 13.0254 26.2912 14.2859C26.6598 15.2935 27.1414 16.2487 27.8867 17.0316C28.1934 17.3531 28.5687 17.6383 28.9629 17.8428C30.2328 18.4966 30.9848 16.9495 31.196 15.9419C31.6454 13.7935 31.2983 11.6693 30.5113 9.64605C30.2059 8.86041 29.8158 8.1205 29.2884 7.45863C28.9481 7.03218 28.5687 6.64743 28.0723 6.40124C27.362 6.05147 26.6705 6.21022 26.236 6.87209C25.6145 7.8232 25.3898 8.93709 25.4046 10.0792L25.406 10.0779Z"\r
23816
- fill="#0D0716" />\r
23817
- <path\r
23818
- d="M65.2348 12.155C65.2428 12.6164 65.2173 13.0778 65.15 13.5352C64.8285 15.7321 63.494 17.8576 61.2043 18.3217C58.9604 18.7764 56.7501 17.9531 55.6457 15.6177C55.2824 14.8496 55.0968 14.033 55.0268 13.1962C54.9192 11.9209 54.9488 10.6442 55.3295 9.40928C55.8878 7.59719 56.995 6.30439 58.9187 5.9008C60.4537 5.57794 62.0909 5.87659 63.2922 6.92052C64.7141 8.15548 65.1473 10.0981 65.2267 11.9088C65.2307 11.9922 65.2334 12.0743 65.2348 12.1577V12.155ZM57.0636 10.0779C57.0824 11.5294 57.4873 13.0254 57.9488 14.2859C58.3174 15.2935 58.799 16.2487 59.5443 17.0316C59.851 17.3531 60.2263 17.6383 60.6205 17.8428C61.8904 18.4966 62.6424 16.9495 62.8536 15.9419C63.303 13.7935 62.9559 11.6693 62.1689 9.64605C61.8635 8.86041 61.4734 8.1205 60.946 7.45863C60.6057 7.03218 60.2263 6.64743 59.7299 6.40124C59.0196 6.05147 58.3281 6.21022 57.8936 6.87209C57.2721 7.8232 57.0474 8.93709 57.0622 10.0792L57.0636 10.0779Z"\r
23819
- fill="#0D0716" />\r
23820
- <path\r
23821
- d="M49.0959 0.6918C48.586 1.7317 48.0842 2.75411 47.5838 3.77651C47.5542 3.7671 47.5246 3.75768 47.495 3.74692C47.456 3.42674 47.4546 3.09581 47.3685 2.78908C47.2273 2.28864 47.0511 1.79627 46.8479 1.3187C46.7632 1.11825 46.595 0.937985 46.4255 0.794041C45.8982 0.34472 45.1973 0.452341 44.869 1.05906C44.6888 1.39134 44.5542 1.76398 44.4802 2.13528C44.2314 3.37697 44.3215 4.63615 44.3215 5.96393C44.8018 5.96393 45.2511 5.94644 45.6991 5.96931C46.1147 5.98949 46.5466 5.86842 46.9488 6.11326C46.5358 6.31639 46.0932 6.22088 45.6641 6.23837C45.2322 6.25585 44.8004 6.2424 44.3215 6.2424V18.2584C43.4323 18.2799 42.5901 18.2678 41.7117 18.2678C41.7009 18.0458 41.6848 17.8763 41.6848 17.7068C41.6834 13.9845 41.6713 10.2634 41.6901 6.54105C41.6969 5.12448 42.009 3.7671 42.7354 2.53214C43.778 0.753683 45.3627 -0.0561722 47.4049 0.00301982C48.1569 0.0245442 48.6775 0.242479 49.0959 0.690455V0.6918Z"\r
23822
- fill="#0D0716" />\r
23823
- <path\r
23824
- d="M49.1816 1.37912C50.4879 1.08046 51.7484 0.647286 52.9941 0.019043V18.2341H50.4112C50.3991 18.0228 50.3776 17.8049 50.3776 17.587C50.3762 12.7117 50.3776 7.83643 50.3736 2.96116C50.3736 2.70017 50.3574 2.43785 50.3238 2.17821C50.2605 1.6966 50.1449 1.57956 49.6888 1.48001C49.5206 1.44369 49.3511 1.41275 49.1816 1.37912Z"\r
23825
- fill="#0D0716" />\r
23826
- <path\r
23827
- d="M38.585 2.23364V5.93718C39.2092 5.95467 39.8213 5.97081 40.4348 5.9883C40.4429 6.02462 40.4496 6.06095 40.4577 6.09727C40.3864 6.14435 40.3151 6.22776 40.2424 6.23045C39.8765 6.24525 39.5092 6.23718 39.142 6.24256C38.9725 6.24525 38.8016 6.26005 38.5998 6.27081C38.5891 6.47529 38.5743 6.6448 38.5743 6.8143C38.5729 9.66359 38.5702 12.5115 38.5783 15.3608C38.5783 15.6541 38.6173 15.9554 38.6913 16.2393C38.8285 16.768 39.1729 17.0249 39.7205 17.0303C40.0487 17.033 40.3783 16.9994 40.7577 16.9792C40.6514 17.072 40.5747 17.1595 40.4805 17.2173C39.9882 17.516 39.4743 17.7837 38.998 18.1052C37.7537 18.946 36.0734 18.1173 35.9375 16.4317C35.9214 16.2231 35.9241 16.0119 35.9241 15.8034C35.9241 12.8317 35.9241 9.86135 35.9241 6.88964C35.9241 6.69995 35.9241 6.51027 35.9241 6.24525H34.5371C35.9241 4.87307 37.2559 3.5547 38.5891 2.23364H38.585Z"\r
23828
- fill="#0D0716" />\r
23829
- </svg>\r
23830
- </div>\r
23831
- \r
23832
- <div class="my-3">\r
23833
- <button id="back" class="align-center gap-1">\r
23834
- <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">\r
23835
- <path\r
23836
- d="M8.74958 12.1199L4.94625 8.31655C4.49708 7.86738 4.49708 7.13238 4.94625 6.68322L8.74958 2.87988"\r
23837
- stroke="#3D3844" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"\r
23838
- stroke-linejoin="round" />\r
23839
- </svg>\r
23840
- <span class="text-sm text-tone-80">Back</span>\r
23841
- </button>\r
23842
- </div>\r
23843
- \r
23844
- <div class="w-4/5 mx-auto">\r
23845
- \r
23846
- <div class="w-4/5 mx-auto">\r
23847
- <div class="text-center">\r
23848
- <h3 class="text-tone-90 text-xl font-semibold">Transaction issues?</h3>\r
23849
- <p class="text-sm text-tone-70">Use the form below to find the Spotflow Merchant\r
23850
- responsible for your debit alert</p>\r
23851
- </div>\r
23852
- </div>\r
23853
- \r
23854
- <form class="mt-6 flex flex-col gap-4" id="transaction-issues-form">\r
23855
- <div class="relative w-full">\r
23856
- <input placeholder=" " class="peer transaction-issues-input" name="transReference"\r
23857
- id="trans-reference" disabled />\r
23858
- <span class="transaction-issues-input-placeholder" >\r
23859
- Transaction reference\r
23860
- </span>\r
23861
- </div>\r
23862
- \r
23863
- <!-- <div class="relative w-full">\r
23864
- <input placeholder=" " class="peer transaction-issues-input" name="fullName" id="full-name" />\r
23865
- <span class="transaction-issues-input-placeholder">\r
23866
- Full name\r
23867
- </span>\r
23868
- </div> -->\r
23869
- \r
23870
- <!-- <div class="relative w-full">\r
23871
- <input placeholder=" " class="peer transaction-issues-input" type="number" name="phoneNumber"\r
23872
- id="phone" />\r
23873
- <span class="transaction-issues-input-placeholder">\r
23874
- Phone number\r
23875
- </span>\r
23876
- </div> -->\r
23877
- \r
23878
- <div class="relative w-full">\r
23879
- <input placeholder=" " class="peer transaction-issues-input" type="email" name="email" id="email" disabled />\r
23880
- <span class="transaction-issues-input-placeholder">\r
23881
- Email address\r
23882
- </span>\r
23883
- </div>\r
23884
- \r
23885
- <div class="relative w-full">\r
23886
- <span class="absolute text-xs left-0 top-1 text-tone-70 pt-1 pb-1 px-3.5 tracking-[0.5px]">Reason for\r
23887
- reporting the transaction</span>\r
23888
- <textarea placeholder="write here" class="transaction-issues-input h-auto placeholder:text-sm pt-6"\r
23889
- id="reason" name="reason" rows="5" required></textarea>\r
23890
- \r
23891
- </div>\r
23892
- \r
23893
- <!-- <div class="relative w-full">\r
23894
- <div>\r
23895
- <select class="peer transaction-issues-input appearance-none pr-7" id="debited-select-field"\r
23896
- name="debited" required>\r
23897
- <option disabled selected value=""></option>\r
23898
- <option value="yes">Yes</option>\r
23899
- <option value="no">No</option>\r
23900
- </select>\r
23901
- </div>\r
23902
- <span class="absolute text-sm left-0 -translate-y-2/4 text-grey-100 pt-1 pb-1 px-3"\r
23903
- id="debited-select-label">Were you\r
23904
- debited</span>\r
23905
- \r
23906
- <div class="absolute right-4 top-1/2 -translate-y-2/4">\r
23907
- <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">\r
23908
- <path d="M1 1L7 7L13 1" stroke="#000000" stroke-width="2" stroke-linecap="round"\r
23909
- stroke-linejoin="round" />\r
23910
- </svg>\r
23911
- </div>\r
23912
- </div> -->\r
23913
- \r
23914
- <!-- <div class="relative w-full">\r
23915
- <div>\r
23916
- <select class="peer transaction-issues-input appearance-none pr-7" id="type-select-field"\r
23917
- name="disputeType" required>\r
23918
- <option disabled selected value=""></option>\r
23919
- <option value="CHARGEBACK">Chargeback</option>\r
23920
- </select>\r
23921
- </div>\r
23922
- <span class="absolute text-sm left-0 -translate-y-2/4 text-grey-100 pt-1 pb-1 px-3"\r
23923
- id="type-select-label">Dispute Type</span>\r
23924
- \r
23925
- <div class="absolute right-4 top-1/2 -translate-y-2/4">\r
23926
- <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">\r
23927
- <path d="M1 1L7 7L13 1" stroke="#000000" stroke-width="2" stroke-linecap="round"\r
23928
- stroke-linejoin="round" />\r
23929
- </svg>\r
23930
- </div>\r
23931
- </div> -->\r
23932
- \r
23933
- <div class="relative w-full">\r
23934
- <label for="file" class="text-xs text-tone-70 ">Evidence of debit upload</label>\r
23935
- <div class="mt-1">\r
23936
- <div class="container-between gap-1.5 border-dashed border border-[#D0D5DD] rounded-lg p-4">\r
23937
- <aside class="align-center gap-x-2 flex-grow">\r
23938
- <div class="flex-shrink-0" id="file-icon">\r
23939
- <svg width="32" height="32" viewBox="0 0 32 32" fill="none"\r
23940
- xmlns="http://www.w3.org/2000/svg">\r
23941
- <circle cx="16" cy="16" r="16" fill="#E6E6E7" />\r
23942
- <path\r
23943
- d="M13.334 18.6667L16.0007 16M16.0007 16L18.6673 18.6667M16.0007 16V22M21.334 19.1619C22.1483 18.4894 22.6673 17.472 22.6673 16.3333C22.6673 14.3083 21.0257 12.6667 19.0007 12.6667C18.855 12.6667 18.7187 12.5907 18.6447 12.4652C17.7754 10.9899 16.1703 10 14.334 10C11.5726 10 9.33398 12.2386 9.33398 15C9.33398 16.3774 9.89095 17.6247 10.792 18.529"\r
23944
- stroke="#86838A" stroke-width="1.5" stroke-linecap="round"\r
23945
- stroke-linejoin="round" />\r
23946
- </svg>\r
23947
- \r
23948
- </div>\r
23949
- <div class="flex-grow">\r
23950
- <label for="filee" class="text-tone-70 text-sm font-semibold cursor-pointer"\r
23951
- id="file-label">\r
23952
- Tap to Upload\r
23953
- </label>\r
23954
- <input type="file" id="filee" class="hidden" accept="image/*" name="file" />\r
23955
- <p class="text-tone-70 text-[11px]" id="file-text">\r
23956
- PDF, PNG, JPG | 10MB max.\r
23957
- </p>\r
23958
- \r
23959
- </div>\r
23960
- </aside>\r
23961
- \r
23962
- <div class="align-center gap-2">\r
23963
- <label for="filee" id="file-button">\r
23964
- <span class="bg-primary text-white text-sm font-semibold py-2 px-3 rounded-md" id="upload-btn-text">\r
23965
- Upload\r
23966
- </span>\r
23967
- </label>\r
23968
- <input type="file" id="filee" class="hidden" accept="image/*" />\r
23969
- </div>\r
23970
- </div>\r
23971
- \r
23972
- </div>\r
23973
- </div>\r
23974
- \r
23975
- \r
23976
- <div class="mt-4">\r
23977
- <button type="submit" disabled="true" class="details-form-button" id="form-button">\r
23978
- <svg class="spinner hidden" viewBox="0 0 24 24">\r
23979
- <path\r
23980
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
23981
- </path>\r
23982
- </svg>\r
23983
- <span id="avs-form-button-text">Submit</span>\r
23984
- </button>\r
23985
- </div>\r
23986
- </form>\r
23987
- </div>\r
23801
+ const Zr = `<div class="relative gap-3 pb-5" id="transaction-issues-form">
23802
+ <div class="border-b border-tone-70 pb-3 container-center">
23803
+
23804
+ <svg width="84" height="24" viewBox="0 0 84 24" fill="none" xmlns="http://www.w3.org/2000/svg">
23805
+ <path
23806
+ d="M66.4434 5.99093H69.0572C69.107 6.16312 69.1648 6.3407 69.2092 6.52231C69.9747 9.642 70.7294 12.7644 71.5097 15.88C71.6267 16.3482 71.811 16.8137 72.0424 17.2374C72.3303 17.7675 72.711 17.7971 73.1469 17.3841C73.2854 17.2536 73.4065 17.0989 73.5128 16.9415C74.0724 16.1155 74.4168 15.198 74.5096 14.2132C74.5554 13.7384 74.476 13.2379 74.3738 12.7657C73.8895 10.5326 73.3783 8.3048 72.8697 6.04474C73.3123 5.886 73.7469 5.98555 74.1693 5.96806C74.5863 5.95057 75.006 5.96402 75.4607 5.96402C75.5132 6.12411 75.5697 6.26537 75.6033 6.412C76.128 8.69089 76.6325 10.9752 77.1786 13.25C77.4316 14.302 77.7517 15.3379 78.0719 16.3711C78.1782 16.7168 78.3463 17.0545 78.5454 17.3558C78.7957 17.7338 79.1387 17.7715 79.4844 17.4728C79.6916 17.2939 79.8679 17.0639 80.0091 16.8271C80.4921 16.0253 80.7571 15.1361 80.9831 14.2375C81.3261 12.8801 81.5925 11.5133 81.5616 10.1021C81.5266 8.48372 80.9373 7.14786 79.6069 6.17792C79.5383 6.12815 79.4764 6.06626 79.3553 5.96133C79.6768 5.7703 79.9647 5.59676 80.2566 5.42591C80.5728 5.24027 80.9051 5.07614 81.2051 4.86763C81.4741 4.67929 81.6813 4.74252 81.9127 4.91875C82.7494 5.5591 83.1315 6.42142 83.1718 7.45593C83.2176 8.60345 82.9822 9.71465 82.7333 10.8218C82.3674 12.4442 81.8763 14.0263 81.1526 15.5289C80.7947 16.2715 80.3575 16.9576 79.8235 17.5926C78.6679 18.9661 76.4118 18.6096 75.7163 17.0235C75.4513 16.4195 75.2361 15.7926 74.9737 15.1092C74.885 15.2612 74.8069 15.3823 74.7424 15.5087C74.3428 16.2877 73.8948 17.0262 73.3056 17.6894C72.2092 18.9217 70.0151 18.5719 69.3532 17.1379C69.1353 16.663 68.9362 16.176 68.7761 15.6796C68.0631 13.4841 67.5828 11.2294 67.0999 8.97609C66.8913 8.00481 66.6734 7.03621 66.4447 5.99227L66.4434 5.99093Z"
23807
+ fill="#0D0716" />
23808
+ <path
23809
+ d="M14.0253 18.268V24.0002H11.3912C11.3912 23.7782 11.3912 23.5737 11.3912 23.3679C11.3912 18.4361 11.3912 13.5043 11.3912 8.57257C11.3912 8.38019 11.3966 8.18647 11.3778 7.99544C11.3293 7.50038 11.176 7.34837 10.6634 7.24478C10.5141 7.21518 10.3675 7.17617 10.2168 7.10487C11.5244 6.84792 12.7688 6.43089 14.0037 5.80265V8.847L14.0845 8.87122C14.1315 8.7757 14.1894 8.68557 14.2257 8.58602C14.4652 7.92011 14.7988 7.31204 15.2979 6.80353C16.7871 5.28741 19.1037 5.43539 20.383 7.13178C20.9413 7.87302 21.2682 8.72189 21.4162 9.62726C21.7485 11.668 21.505 13.6375 20.527 15.4752C20.2593 15.9783 19.9095 16.4545 19.518 16.8702C18.6234 17.8227 17.4893 18.2653 16.1831 18.2666C15.4862 18.2666 14.7907 18.2666 14.0253 18.2666V18.268ZM14.0253 17.9249C15.2696 18.0298 16.358 17.8361 17.258 17.0128C17.9104 16.4155 18.271 15.642 18.5064 14.8052C18.8992 13.4102 18.9732 11.9815 18.8952 10.5474C18.8575 9.85461 18.7203 9.16852 18.423 8.51875C17.714 6.97303 15.7997 6.88559 14.8876 8.19454C14.5943 8.61561 14.3589 9.11202 14.2378 9.60708C14.0898 10.2111 14.0414 10.8501 14.0333 11.4743C14.0091 13.4142 14.0239 15.3554 14.0239 17.2953C14.0239 17.485 14.0239 17.676 14.0239 17.9249H14.0253Z"
23810
+ fill="#0D0716" />
23811
+ <path
23812
+ d="M0.00403582 16.4884C0.458739 15.4202 0.899988 14.3857 1.37487 13.2691C1.5242 13.5099 1.62375 13.6673 1.71926 13.8261C2.50221 15.1216 3.50175 16.1978 4.8524 16.9175C5.68647 17.3615 6.57032 17.5942 7.52008 17.5565C8.27882 17.5269 8.712 17.0372 8.63397 16.2866C8.5963 15.926 8.47523 15.5884 8.19541 15.361C7.80528 15.0435 7.40977 14.7059 6.96179 14.492C5.93804 14.0023 4.87124 13.6054 3.84345 13.1252C3.16543 12.809 2.4901 12.4633 1.87397 12.0409C0.971288 11.4207 0.403582 10.5638 0.348426 9.42299C0.286543 8.12345 0.830034 7.16562 1.94796 6.51989C2.65692 6.10958 3.43718 5.91451 4.23761 5.82169C6.01338 5.61586 7.67882 5.97236 9.22051 6.88311C9.29315 6.92616 9.35773 6.98535 9.46804 7.06741C9.02006 7.95799 8.57478 8.84049 8.10124 9.78218C7.93577 9.6194 7.80259 9.49429 7.67748 9.36245C6.8757 8.52435 6.01741 7.76023 4.97751 7.22347C4.24972 6.84813 3.48022 6.64096 2.66095 6.6598C1.78652 6.67863 1.31164 7.31494 1.47846 8.1813C1.57128 8.65887 1.81208 9.04228 2.19414 9.30057C2.69727 9.64092 3.22597 9.95975 3.77753 10.21C4.61967 10.5907 5.4941 10.9014 6.35238 11.2485C7.13399 11.5647 7.88062 11.9454 8.52769 12.4929C9.56355 13.37 9.96848 14.4785 9.70481 15.8184C9.54607 16.6229 9.07387 17.2054 8.40124 17.6413C7.80259 18.0287 7.13533 18.2345 6.43848 18.3327C5.00173 18.5359 3.57977 18.4915 2.20356 17.9682C1.37622 17.6534 0.648422 17.1839 0 16.4897L0.00403582 16.4884Z"
23813
+ fill="#0D0716" />
23814
+ <path
23815
+ d="M33.5785 12.155C33.5866 12.6164 33.561 13.0778 33.4938 13.5352C33.1722 15.7321 31.8377 17.8576 29.5481 18.3217C27.3042 18.7764 25.0939 17.9531 23.9894 15.6177C23.6262 14.8496 23.4405 14.033 23.3706 13.1962C23.263 11.9209 23.2926 10.6442 23.6733 9.40928C24.2316 7.59719 25.3387 6.30439 27.2625 5.9008C28.7974 5.57794 30.4346 5.87659 31.6359 6.92052C33.0579 8.15548 33.4911 10.0981 33.5704 11.9088C33.5745 11.9922 33.5772 12.0743 33.5785 12.1577V12.155ZM25.406 10.0779C25.4248 11.5294 25.8297 13.0254 26.2912 14.2859C26.6598 15.2935 27.1414 16.2487 27.8867 17.0316C28.1934 17.3531 28.5687 17.6383 28.9629 17.8428C30.2328 18.4966 30.9848 16.9495 31.196 15.9419C31.6454 13.7935 31.2983 11.6693 30.5113 9.64605C30.2059 8.86041 29.8158 8.1205 29.2884 7.45863C28.9481 7.03218 28.5687 6.64743 28.0723 6.40124C27.362 6.05147 26.6705 6.21022 26.236 6.87209C25.6145 7.8232 25.3898 8.93709 25.4046 10.0792L25.406 10.0779Z"
23816
+ fill="#0D0716" />
23817
+ <path
23818
+ d="M65.2348 12.155C65.2428 12.6164 65.2173 13.0778 65.15 13.5352C64.8285 15.7321 63.494 17.8576 61.2043 18.3217C58.9604 18.7764 56.7501 17.9531 55.6457 15.6177C55.2824 14.8496 55.0968 14.033 55.0268 13.1962C54.9192 11.9209 54.9488 10.6442 55.3295 9.40928C55.8878 7.59719 56.995 6.30439 58.9187 5.9008C60.4537 5.57794 62.0909 5.87659 63.2922 6.92052C64.7141 8.15548 65.1473 10.0981 65.2267 11.9088C65.2307 11.9922 65.2334 12.0743 65.2348 12.1577V12.155ZM57.0636 10.0779C57.0824 11.5294 57.4873 13.0254 57.9488 14.2859C58.3174 15.2935 58.799 16.2487 59.5443 17.0316C59.851 17.3531 60.2263 17.6383 60.6205 17.8428C61.8904 18.4966 62.6424 16.9495 62.8536 15.9419C63.303 13.7935 62.9559 11.6693 62.1689 9.64605C61.8635 8.86041 61.4734 8.1205 60.946 7.45863C60.6057 7.03218 60.2263 6.64743 59.7299 6.40124C59.0196 6.05147 58.3281 6.21022 57.8936 6.87209C57.2721 7.8232 57.0474 8.93709 57.0622 10.0792L57.0636 10.0779Z"
23819
+ fill="#0D0716" />
23820
+ <path
23821
+ d="M49.0959 0.6918C48.586 1.7317 48.0842 2.75411 47.5838 3.77651C47.5542 3.7671 47.5246 3.75768 47.495 3.74692C47.456 3.42674 47.4546 3.09581 47.3685 2.78908C47.2273 2.28864 47.0511 1.79627 46.8479 1.3187C46.7632 1.11825 46.595 0.937985 46.4255 0.794041C45.8982 0.34472 45.1973 0.452341 44.869 1.05906C44.6888 1.39134 44.5542 1.76398 44.4802 2.13528C44.2314 3.37697 44.3215 4.63615 44.3215 5.96393C44.8018 5.96393 45.2511 5.94644 45.6991 5.96931C46.1147 5.98949 46.5466 5.86842 46.9488 6.11326C46.5358 6.31639 46.0932 6.22088 45.6641 6.23837C45.2322 6.25585 44.8004 6.2424 44.3215 6.2424V18.2584C43.4323 18.2799 42.5901 18.2678 41.7117 18.2678C41.7009 18.0458 41.6848 17.8763 41.6848 17.7068C41.6834 13.9845 41.6713 10.2634 41.6901 6.54105C41.6969 5.12448 42.009 3.7671 42.7354 2.53214C43.778 0.753683 45.3627 -0.0561722 47.4049 0.00301982C48.1569 0.0245442 48.6775 0.242479 49.0959 0.690455V0.6918Z"
23822
+ fill="#0D0716" />
23823
+ <path
23824
+ d="M49.1816 1.37912C50.4879 1.08046 51.7484 0.647286 52.9941 0.019043V18.2341H50.4112C50.3991 18.0228 50.3776 17.8049 50.3776 17.587C50.3762 12.7117 50.3776 7.83643 50.3736 2.96116C50.3736 2.70017 50.3574 2.43785 50.3238 2.17821C50.2605 1.6966 50.1449 1.57956 49.6888 1.48001C49.5206 1.44369 49.3511 1.41275 49.1816 1.37912Z"
23825
+ fill="#0D0716" />
23826
+ <path
23827
+ d="M38.585 2.23364V5.93718C39.2092 5.95467 39.8213 5.97081 40.4348 5.9883C40.4429 6.02462 40.4496 6.06095 40.4577 6.09727C40.3864 6.14435 40.3151 6.22776 40.2424 6.23045C39.8765 6.24525 39.5092 6.23718 39.142 6.24256C38.9725 6.24525 38.8016 6.26005 38.5998 6.27081C38.5891 6.47529 38.5743 6.6448 38.5743 6.8143C38.5729 9.66359 38.5702 12.5115 38.5783 15.3608C38.5783 15.6541 38.6173 15.9554 38.6913 16.2393C38.8285 16.768 39.1729 17.0249 39.7205 17.0303C40.0487 17.033 40.3783 16.9994 40.7577 16.9792C40.6514 17.072 40.5747 17.1595 40.4805 17.2173C39.9882 17.516 39.4743 17.7837 38.998 18.1052C37.7537 18.946 36.0734 18.1173 35.9375 16.4317C35.9214 16.2231 35.9241 16.0119 35.9241 15.8034C35.9241 12.8317 35.9241 9.86135 35.9241 6.88964C35.9241 6.69995 35.9241 6.51027 35.9241 6.24525H34.5371C35.9241 4.87307 37.2559 3.5547 38.5891 2.23364H38.585Z"
23828
+ fill="#0D0716" />
23829
+ </svg>
23830
+ </div>
23831
+
23832
+ <div class="my-3">
23833
+ <button id="back" class="align-center gap-1">
23834
+ <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
23835
+ <path
23836
+ d="M8.74958 12.1199L4.94625 8.31655C4.49708 7.86738 4.49708 7.13238 4.94625 6.68322L8.74958 2.87988"
23837
+ stroke="#3D3844" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
23838
+ stroke-linejoin="round" />
23839
+ </svg>
23840
+ <span class="text-sm text-tone-80">Back</span>
23841
+ </button>
23842
+ </div>
23843
+
23844
+ <div class="w-4/5 mx-auto">
23845
+
23846
+ <div class="w-4/5 mx-auto">
23847
+ <div class="text-center">
23848
+ <h3 class="text-tone-90 text-xl font-semibold">Transaction issues?</h3>
23849
+ <p class="text-sm text-tone-70">Use the form below to find the Spotflow Merchant
23850
+ responsible for your debit alert</p>
23851
+ </div>
23852
+ </div>
23853
+
23854
+ <form class="mt-6 flex flex-col gap-4" id="transaction-issues-form">
23855
+ <div class="relative w-full">
23856
+ <input placeholder=" " class="peer transaction-issues-input" name="transReference"
23857
+ id="trans-reference" disabled />
23858
+ <span class="transaction-issues-input-placeholder" >
23859
+ Transaction reference
23860
+ </span>
23861
+ </div>
23862
+
23863
+ <!-- <div class="relative w-full">
23864
+ <input placeholder=" " class="peer transaction-issues-input" name="fullName" id="full-name" />
23865
+ <span class="transaction-issues-input-placeholder">
23866
+ Full name
23867
+ </span>
23868
+ </div> -->
23869
+
23870
+ <!-- <div class="relative w-full">
23871
+ <input placeholder=" " class="peer transaction-issues-input" type="number" name="phoneNumber"
23872
+ id="phone" />
23873
+ <span class="transaction-issues-input-placeholder">
23874
+ Phone number
23875
+ </span>
23876
+ </div> -->
23877
+
23878
+ <div class="relative w-full">
23879
+ <input placeholder=" " class="peer transaction-issues-input" type="email" name="email" id="email" disabled />
23880
+ <span class="transaction-issues-input-placeholder">
23881
+ Email address
23882
+ </span>
23883
+ </div>
23884
+
23885
+ <div class="relative w-full">
23886
+ <span class="absolute text-xs left-0 top-1 text-tone-70 pt-1 pb-1 px-3.5 tracking-[0.5px]">Reason for
23887
+ reporting the transaction</span>
23888
+ <textarea placeholder="write here" class="transaction-issues-input h-auto placeholder:text-sm pt-6"
23889
+ id="reason" name="reason" rows="5" required></textarea>
23890
+
23891
+ </div>
23892
+
23893
+ <!-- <div class="relative w-full">
23894
+ <div>
23895
+ <select class="peer transaction-issues-input appearance-none pr-7" id="debited-select-field"
23896
+ name="debited" required>
23897
+ <option disabled selected value=""></option>
23898
+ <option value="yes">Yes</option>
23899
+ <option value="no">No</option>
23900
+ </select>
23901
+ </div>
23902
+ <span class="absolute text-sm left-0 -translate-y-2/4 text-grey-100 pt-1 pb-1 px-3"
23903
+ id="debited-select-label">Were you
23904
+ debited</span>
23905
+
23906
+ <div class="absolute right-4 top-1/2 -translate-y-2/4">
23907
+ <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
23908
+ <path d="M1 1L7 7L13 1" stroke="#000000" stroke-width="2" stroke-linecap="round"
23909
+ stroke-linejoin="round" />
23910
+ </svg>
23911
+ </div>
23912
+ </div> -->
23913
+
23914
+ <!-- <div class="relative w-full">
23915
+ <div>
23916
+ <select class="peer transaction-issues-input appearance-none pr-7" id="type-select-field"
23917
+ name="disputeType" required>
23918
+ <option disabled selected value=""></option>
23919
+ <option value="CHARGEBACK">Chargeback</option>
23920
+ </select>
23921
+ </div>
23922
+ <span class="absolute text-sm left-0 -translate-y-2/4 text-grey-100 pt-1 pb-1 px-3"
23923
+ id="type-select-label">Dispute Type</span>
23924
+
23925
+ <div class="absolute right-4 top-1/2 -translate-y-2/4">
23926
+ <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
23927
+ <path d="M1 1L7 7L13 1" stroke="#000000" stroke-width="2" stroke-linecap="round"
23928
+ stroke-linejoin="round" />
23929
+ </svg>
23930
+ </div>
23931
+ </div> -->
23932
+
23933
+ <div class="relative w-full">
23934
+ <label for="file" class="text-xs text-tone-70 ">Evidence of debit upload</label>
23935
+ <div class="mt-1">
23936
+ <div class="container-between gap-1.5 border-dashed border border-[#D0D5DD] rounded-lg p-4">
23937
+ <aside class="align-center gap-x-2 flex-grow">
23938
+ <div class="flex-shrink-0" id="file-icon">
23939
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
23940
+ xmlns="http://www.w3.org/2000/svg">
23941
+ <circle cx="16" cy="16" r="16" fill="#E6E6E7" />
23942
+ <path
23943
+ d="M13.334 18.6667L16.0007 16M16.0007 16L18.6673 18.6667M16.0007 16V22M21.334 19.1619C22.1483 18.4894 22.6673 17.472 22.6673 16.3333C22.6673 14.3083 21.0257 12.6667 19.0007 12.6667C18.855 12.6667 18.7187 12.5907 18.6447 12.4652C17.7754 10.9899 16.1703 10 14.334 10C11.5726 10 9.33398 12.2386 9.33398 15C9.33398 16.3774 9.89095 17.6247 10.792 18.529"
23944
+ stroke="#86838A" stroke-width="1.5" stroke-linecap="round"
23945
+ stroke-linejoin="round" />
23946
+ </svg>
23947
+
23948
+ </div>
23949
+ <div class="flex-grow">
23950
+ <label for="filee" class="text-tone-70 text-sm font-semibold cursor-pointer"
23951
+ id="file-label">
23952
+ Tap to Upload
23953
+ </label>
23954
+ <input type="file" id="filee" class="hidden" accept="image/*" name="file" />
23955
+ <p class="text-tone-70 text-[11px]" id="file-text">
23956
+ PDF, PNG, JPG | 10MB max.
23957
+ </p>
23958
+
23959
+ </div>
23960
+ </aside>
23961
+
23962
+ <div class="align-center gap-2">
23963
+ <label for="filee" id="file-button">
23964
+ <span class="bg-primary text-white text-sm font-semibold py-2 px-3 rounded-md" id="upload-btn-text">
23965
+ Upload
23966
+ </span>
23967
+ </label>
23968
+ <input type="file" id="filee" class="hidden" accept="image/*" />
23969
+ </div>
23970
+ </div>
23971
+
23972
+ </div>
23973
+ </div>
23974
+
23975
+
23976
+ <div class="mt-4">
23977
+ <button type="submit" disabled="true" class="details-form-button" id="form-button">
23978
+ <svg class="spinner hidden" viewBox="0 0 24 24">
23979
+ <path
23980
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
23981
+ </path>
23982
+ </svg>
23983
+ <span id="avs-form-button-text">Submit</span>
23984
+ </button>
23985
+ </div>
23986
+ </form>
23987
+ </div>
23988
23988
  </div>`;
23989
23989
  class Jr {
23990
23990
  constructor(e) {
@@ -29726,34 +29726,34 @@ function Vd(n, e) {
29726
29726
  e();
29727
29727
  }
29728
29728
  var P = Od(Vd);
29729
- const yo = `<div id="checkoutConfirmationEnd">\r
29730
- <div class="w-full">\r
29731
- <div id="otp-content" class=" grid gap-4">\r
29732
- <h5 class="text-black" id="otp-message">\r
29733
- \r
29734
- </h5>\r
29735
- \r
29736
- <div class="">\r
29737
- <div class="w-11/12 mx-auto">\r
29738
- <p class="text-center">Your transaction is being processed and is taking longer than usual to\r
29739
- confirm. You don’t need to\r
29740
- stay on this page—<br /> <span class="font-bold">we will notify you once it is confirmed.</span>\r
29741
- </p>\r
29742
- </div>\r
29743
- <div class="py-5">\r
29744
- <div class="mt-2">\r
29745
- <button class="details-form-button" id="goback-to-merchant" type="button">\r
29746
- <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">\r
29747
- <path\r
29748
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
29749
- </path>\r
29750
- </svg>\r
29751
- <span id="mobile-money-button-text"> Go back to Merchant </span>\r
29752
- </button>\r
29753
- </div>\r
29754
- </div>\r
29755
- </div>\r
29756
- </div>\r
29729
+ const yo = `<div id="checkoutConfirmationEnd">
29730
+ <div class="w-full">
29731
+ <div id="otp-content" class=" grid gap-4">
29732
+ <h5 class="text-black" id="otp-message">
29733
+
29734
+ </h5>
29735
+
29736
+ <div class="">
29737
+ <div class="w-11/12 mx-auto">
29738
+ <p class="text-center">Your transaction is being processed and is taking longer than usual to
29739
+ confirm. You don’t need to
29740
+ stay on this page—<br /> <span class="font-bold">we will notify you once it is confirmed.</span>
29741
+ </p>
29742
+ </div>
29743
+ <div class="py-5">
29744
+ <div class="mt-2">
29745
+ <button class="details-form-button" id="goback-to-merchant" type="button">
29746
+ <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">
29747
+ <path
29748
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
29749
+ </path>
29750
+ </svg>
29751
+ <span id="mobile-money-button-text"> Go back to Merchant </span>
29752
+ </button>
29753
+ </div>
29754
+ </div>
29755
+ </div>
29756
+ </div>
29757
29757
  </div>`;
29758
29758
  class Co {
29759
29759
  constructor(e) {
@@ -29792,35 +29792,35 @@ class Co {
29792
29792
  return yo;
29793
29793
  }
29794
29794
  }
29795
- const Ud = `<div id="confirmationProgress">\r
29796
- <div class="min-h-[20dvh]">\r
29797
- <div>\r
29798
- <div class="grid grid-rows-[auto_1fr] gap-4 mx-5">\r
29799
- <div class="items-center justify-self-center flex flex-col relative ">\r
29800
- <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none"\r
29801
- xmlns="http://www.w3.org/2000/svg">\r
29802
- <path\r
29803
- 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"\r
29804
- stroke="black" stroke-width="4" stroke-linejoin="round" />\r
29805
- </svg>\r
29806
- </div>\r
29807
- </div>\r
29808
- </div>\r
29809
- <div class="text-center w-11/12 md:w-4/5 mx-auto grid gap-4">\r
29810
- <h5 class="text-center text-sm text-grey-400">\r
29811
- We are confirming transaction status.\r
29812
- <br>\r
29813
- This can take a few minutes.\r
29814
- </h5>\r
29815
- \r
29816
- <div>\r
29817
- <p class="text-grey-400 text-sm">\r
29818
- Please wait for <span id="ctd-timer" class="font-bold"> </span> minutes\r
29819
- </p>\r
29820
- </div>\r
29821
- \r
29822
- </div>\r
29823
- </div>\r
29795
+ const Ud = `<div id="confirmationProgress">
29796
+ <div class="min-h-[20dvh]">
29797
+ <div>
29798
+ <div class="grid grid-rows-[auto_1fr] gap-4 mx-5">
29799
+ <div class="items-center justify-self-center flex flex-col relative ">
29800
+ <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none"
29801
+ xmlns="http://www.w3.org/2000/svg">
29802
+ <path
29803
+ 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"
29804
+ stroke="black" stroke-width="4" stroke-linejoin="round" />
29805
+ </svg>
29806
+ </div>
29807
+ </div>
29808
+ </div>
29809
+ <div class="text-center w-11/12 md:w-4/5 mx-auto grid gap-4">
29810
+ <h5 class="text-center text-sm text-grey-400">
29811
+ We are confirming transaction status.
29812
+ <br>
29813
+ This can take a few minutes.
29814
+ </h5>
29815
+
29816
+ <div>
29817
+ <p class="text-grey-400 text-sm">
29818
+ Please wait for <span id="ctd-timer" class="font-bold"> </span> minutes
29819
+ </p>
29820
+ </div>
29821
+
29822
+ </div>
29823
+ </div>
29824
29824
  </div>`;
29825
29825
  class Kd {
29826
29826
  constructor(e) {
@@ -29911,324 +29911,324 @@ class Kd {
29911
29911
  return Ud;
29912
29912
  }
29913
29913
  }
29914
- const jd = `<div class="flex items-center justify-center md:justify-between w-full text-xxs mt-5">\r
29915
- <div class="text-tone-60"><span>Powered by</span> <span class="font-bold">Spotflow</span></div>\r
29916
- <div class="align-center text-tone-60 hidden md:flex gap-4">\r
29917
- <span id="test-cards-link" class="hover:font-bold">Test Cards</span>\r
29918
- <a href="https://ribbon-scowl-35f.notion.site/Terms-Conditions-940742f0a1b144498ffc1786c5bc6a08?pvs=4" target="_blank" class="hover:font-bold">Terms</a>\r
29919
- <a href="https://ribbon-scowl-35f.notion.site/Privacy-Policy-Spotflow-3997ee8d923d4cd39a3dc43b7249b713" target="_blank" class="hover:font-bold">Privacy</a>\r
29920
- <a href="mailto:hello@spotflow.one" class="hover:font-bold">Contact</a>\r
29921
- </div>\r
29922
- </div>`, Fd = `<div class="box-container flex-1">\r
29923
- <!-- test-cards.html -->\r
29924
- <div class="bg-gray-100 py-2 px-4 rounded-lg mt-4 relative">\r
29925
- <div class="flex items-start gap-4 mb-4">\r
29926
- <nav id="test-card-tabs"\r
29927
- class="flex w-full font-medium items-start gap-6 border-b border-tone-10 text-base text-tone-40 mb-2">\r
29928
- <button class="tab-btn active-tab" data-target="no-auth">No auth</button>\r
29929
- <button class="tab-btn" data-target="pin">Pin</button>\r
29930
- <button class="tab-btn" data-target="pin-otp">Pin + OTP</button>\r
29931
- <button class="tab-btn" data-target="3ds">3DS</button>\r
29932
- <button class="tab-btn" data-target="avs">AVS</button>\r
29933
- </nav>\r
29934
- <!-- Close Icon -->\r
29935
- <button id="close-test-card" class="text-gray-500 hover:text-black">\r
29936
- ✕\r
29937
- </button>\r
29938
- </div>\r
29939
- \r
29940
- <!-- Section contents -->\r
29941
- <div id="no-auth" class="tab-content grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">\r
29942
- <div class="flex justify-between items-center">\r
29943
- <span class="text-tone-60 font-medium text-sm">Number</span>\r
29944
- <div class="flex items-center gap-1">\r
29945
- <span data-copy-value="4111112000062555" class="text-tone-100 text-sm font-medium">4111112000062555</span>\r
29946
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
29947
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\r
29948
- <path\r
29949
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
29950
- fill="#0D0716" />\r
29951
- </svg>\r
29952
- </button>\r
29953
- </div>\r
29954
- </div>\r
29955
- <div class="flex justify-between items-center">\r
29956
- <span class="text-tone-60 font-medium text-sm">Expiry</span>\r
29957
- <div class="flex items-center gap-1">\r
29958
- <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030 </span>\r
29959
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
29960
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\r
29961
- <path\r
29962
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
29963
- fill="#0D0716" />\r
29964
- </svg>\r
29965
- </button>\r
29966
- </div>\r
29967
- </div>\r
29968
- <div class="flex justify-between items-center">\r
29969
- <span class="text-tone-60 font-medium text-sm">CVV</span>\r
29970
- <div class="flex items-center gap-1">\r
29971
- <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321 </span>\r
29972
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
29973
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\r
29974
- <path\r
29975
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
29976
- fill="#0D0716" />\r
29977
- </svg>\r
29978
- </button>\r
29979
- </div>\r
29980
- </div>\r
29981
- </div>\r
29982
- \r
29983
- <!-- Pin -->\r
29984
- <div id="pin" class="hidden tab-content">\r
29985
- <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">\r
29986
- <div class="flex justify-between items-center">\r
29987
- <span class="text-tone-60 font-medium text-sm">Number</span>\r
29988
- <div class="flex items-center gap-1">\r
29989
- <span data-copy-value="5555558684543932"\r
29990
- class="text-tone-100 text-sm font-medium">5555558684543932 </span>\r
29991
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
29992
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
29993
- xmlns="http://www.w3.org/2000/svg">\r
29994
- <path\r
29995
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
29996
- fill="#0D0716" />\r
29997
- </svg>\r
29998
- </button>\r
29999
- </div>\r
30000
- </div>\r
30001
- \r
30002
- <div class="flex justify-between items-center">\r
30003
- <span class="text-tone-60 font-medium text-sm">Expiry</span>\r
30004
- <div class="flex items-center gap-1">\r
30005
- <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>\r
30006
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30007
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30008
- xmlns="http://www.w3.org/2000/svg">\r
30009
- <path\r
30010
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30011
- fill="#0D0716" />\r
30012
- </svg>\r
30013
- </button>\r
30014
- </div>\r
30015
- </div>\r
30016
- <div class="flex justify-between items-center">\r
30017
- <span class="text-tone-60 font-medium text-sm">CVV</span>\r
30018
- <div class="flex items-center gap-1">\r
30019
- <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>\r
30020
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30021
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30022
- xmlns="http://www.w3.org/2000/svg">\r
30023
- <path\r
30024
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30025
- fill="#0D0716" />\r
30026
- </svg>\r
30027
- </button>\r
30028
- </div>\r
30029
- </div>\r
30030
- <div class="flex justify-between items-center">\r
30031
- <span class="text-tone-60 font-medium text-sm">Pin</span>\r
30032
- <div class="flex items-center gap-1">\r
30033
- <span data-copy-value="4321" class="text-tone-100 text-sm font-medium">4321</span>\r
30034
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30035
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30036
- xmlns="http://www.w3.org/2000/svg">\r
30037
- <path\r
30038
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30039
- fill="#0D0716" />\r
30040
- </svg>\r
30041
- </button>\r
30042
- </div>\r
30043
- </div>\r
30044
- </div>\r
30045
- </div>\r
30046
- \r
30047
- <!-- Pin + OTP -->\r
30048
- <div id="pin-otp" class="tab-content hidden">\r
30049
- <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">\r
30050
- <div class="flex justify-between items-center">\r
30051
- <span class="text-tone-60 font-medium text-sm">Number</span>\r
30052
- <div class="flex items-center gap-1">\r
30053
- <span data-copy-value="5555567973581842" class="text-tone-100 text-sm font-medium">5555567973581842</span>\r
30054
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30055
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30056
- xmlns="http://www.w3.org/2000/svg">\r
30057
- <path\r
30058
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30059
- fill="#0D0716" />\r
30060
- </svg>\r
30061
- </button>\r
30062
- </div>\r
30063
- </div>\r
30064
- <div class="flex justify-between items-center">\r
30065
- <span class="text-tone-60 font-medium text-sm">Expiry</span>\r
30066
- <div class="flex items-center gap-1">\r
30067
- <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>\r
30068
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30069
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30070
- xmlns="http://www.w3.org/2000/svg">\r
30071
- <path\r
30072
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30073
- fill="#0D0716" />\r
30074
- </svg>\r
30075
- </button>\r
30076
- </div>\r
30077
- </div>\r
30078
- <div class="flex justify-between items-center">\r
30079
- <span class="text-tone-60 font-medium text-sm">CVV</span>\r
30080
- <div class="flex items-center gap-1">\r
30081
- <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>\r
30082
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30083
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30084
- xmlns="http://www.w3.org/2000/svg">\r
30085
- <path\r
30086
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30087
- fill="#0D0716" />\r
30088
- </svg>\r
30089
- </button>\r
30090
- </div>\r
30091
- </div>\r
30092
- <div class="flex justify-between items-center">\r
30093
- <span class="text-tone-60 font-medium text-sm">Pin</span>\r
30094
- <div class="flex items-center gap-1">\r
30095
- <span data-copy-value="4321" class="text-tone-100 text-sm font-medium">4321</span>\r
30096
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30097
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30098
- xmlns="http://www.w3.org/2000/svg">\r
30099
- <path\r
30100
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30101
- fill="#0D0716" />\r
30102
- </svg>\r
30103
- </button>\r
30104
- </div>\r
30105
- </div>\r
30106
- <div class="flex justify-between items-center">\r
30107
- <span class="text-tone-60 font-medium text-sm">OTP</span>\r
30108
- <div class="flex items-center gap-1">\r
30109
- <span data-copy-value="654321" class="text-tone-100 text-sm font-medium">654321</span>\r
30110
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30111
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30112
- xmlns="http://www.w3.org/2000/svg">\r
30113
- <path\r
30114
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30115
- fill="#0D0716" />\r
30116
- </svg>\r
30117
- </button>\r
30118
- </div>\r
30119
- </div>\r
30120
- </div>\r
30121
- </div>\r
30122
- <!-- 3DS -->\r
30123
- <div id="3ds" class="tab-content hidden"> \r
30124
- <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">\r
30125
- <div class="flex justify-between items-center">\r
30126
- <span class="text-tone-60 font-medium text-sm">Number</span>\r
30127
- <div class="flex items-center gap-1">\r
30128
- <span data-copy-value="5555558684543932"\r
30129
- class="text-tone-100 text-sm font-medium">5555577124976817 </span>\r
30130
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30131
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30132
- xmlns="http://www.w3.org/2000/svg">\r
30133
- <path\r
30134
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30135
- fill="#0D0716" />\r
30136
- </svg>\r
30137
- </button>\r
30138
- </div>\r
30139
- </div>\r
30140
- \r
30141
- <div class="flex justify-between items-center">\r
30142
- <span class="text-tone-60 font-medium text-sm">Expiry</span>\r
30143
- <div class="flex items-center gap-1">\r
30144
- <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>\r
30145
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30146
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30147
- xmlns="http://www.w3.org/2000/svg">\r
30148
- <path\r
30149
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30150
- fill="#0D0716" />\r
30151
- </svg>\r
30152
- </button>\r
30153
- </div>\r
30154
- </div>\r
30155
- <div class="flex justify-between items-center">\r
30156
- <span class="text-tone-60 font-medium text-sm">CVV</span>\r
30157
- <div class="flex items-center gap-1">\r
30158
- <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>\r
30159
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30160
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30161
- xmlns="http://www.w3.org/2000/svg">\r
30162
- <path\r
30163
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30164
- fill="#0D0716" />\r
30165
- </svg>\r
30166
- </button>\r
30167
- </div>\r
30168
- </div>\r
30169
- </div>\r
30170
- </div>\r
30171
- \r
30172
- <!-- AVS -->\r
30173
- <div id="avs" class="tab-content hidden">\r
30174
- <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">\r
30175
- <div class="flex justify-between items-center">\r
30176
- <span class="text-tone-60 font-medium text-sm">Number</span>\r
30177
- <div class="flex items-center gap-1">\r
30178
- <span data-copy-value="4111124373708482"\r
30179
- class="text-tone-100 text-sm font-medium">4111124373708482 </span>\r
30180
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30181
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30182
- xmlns="http://www.w3.org/2000/svg">\r
30183
- <path\r
30184
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30185
- fill="#0D0716" />\r
30186
- </svg>\r
30187
- </button>\r
30188
- </div>\r
30189
- </div>\r
30190
- \r
30191
- <div class="flex justify-between items-center">\r
30192
- <span class="text-tone-60 font-medium text-sm">Expiry</span>\r
30193
- <div class="flex items-center gap-1">\r
30194
- <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>\r
30195
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30196
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30197
- xmlns="http://www.w3.org/2000/svg">\r
30198
- <path\r
30199
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30200
- fill="#0D0716" />\r
30201
- </svg>\r
30202
- </button>\r
30203
- </div>\r
30204
- </div>\r
30205
- <div class="flex justify-between items-center">\r
30206
- <span class="text-tone-60 font-medium text-sm">CVV</span>\r
30207
- <div class="flex items-center gap-1">\r
30208
- <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>\r
30209
- <button class="copy-btn p-1 hover:opacity-80 transition-opacity">\r
30210
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none"\r
30211
- xmlns="http://www.w3.org/2000/svg">\r
30212
- <path\r
30213
- d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"\r
30214
- fill="#0D0716" />\r
30215
- </svg>\r
30216
- </button>\r
30217
- </div>\r
30218
- </div>\r
30219
- <div class="flex justify-between items-center">\r
30220
- <span class="text-tone-60 font-medium text-sm">Address</span>\r
30221
- <div class="flex flex-col items-end gap-1">\r
30222
- <span class="text-tone-100 text-sm font-medium">Address: 1, Spotflow Street</span>\r
30223
- <span class="text-tone-100 text-sm font-medium">City: Lekki</span>\r
30224
- <span class="text-tone-100 text-sm font-medium">State: Lagos</span>\r
30225
- <span class="text-tone-100 text-sm font-medium">Country: Nigeria</span>\r
30226
- <span class="text-tone-100 text-sm font-medium">ZIP: 101233</span>\r
30227
- </div>\r
30228
- </div>\r
30229
- </div>\r
30230
- </div>\r
30231
- </div>\r
29914
+ const jd = `<div class="flex items-center justify-center md:justify-between w-full text-xxs mt-5">
29915
+ <div class="text-tone-60"><span>Powered by</span> <span class="font-bold">Spotflow</span></div>
29916
+ <div class="align-center text-tone-60 hidden md:flex gap-4">
29917
+ <span id="test-cards-link" class="hover:font-bold">Test Cards</span>
29918
+ <a href="https://ribbon-scowl-35f.notion.site/Terms-Conditions-940742f0a1b144498ffc1786c5bc6a08?pvs=4" target="_blank" class="hover:font-bold">Terms</a>
29919
+ <a href="https://ribbon-scowl-35f.notion.site/Privacy-Policy-Spotflow-3997ee8d923d4cd39a3dc43b7249b713" target="_blank" class="hover:font-bold">Privacy</a>
29920
+ <a href="mailto:hello@spotflow.one" class="hover:font-bold">Contact</a>
29921
+ </div>
29922
+ </div>`, Fd = `<div class="box-container flex-1">
29923
+ <!-- test-cards.html -->
29924
+ <div class="bg-gray-100 py-2 px-4 rounded-lg mt-4 relative">
29925
+ <div class="flex items-start gap-4 mb-4">
29926
+ <nav id="test-card-tabs"
29927
+ class="flex w-full font-medium items-start gap-6 border-b border-tone-10 text-base text-tone-40 mb-2">
29928
+ <button class="tab-btn active-tab" data-target="no-auth">No auth</button>
29929
+ <button class="tab-btn" data-target="pin">Pin</button>
29930
+ <button class="tab-btn" data-target="pin-otp">Pin + OTP</button>
29931
+ <button class="tab-btn" data-target="3ds">3DS</button>
29932
+ <button class="tab-btn" data-target="avs">AVS</button>
29933
+ </nav>
29934
+ <!-- Close Icon -->
29935
+ <button id="close-test-card" class="text-gray-500 hover:text-black">
29936
+
29937
+ </button>
29938
+ </div>
29939
+
29940
+ <!-- Section contents -->
29941
+ <div id="no-auth" class="tab-content grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">
29942
+ <div class="flex justify-between items-center">
29943
+ <span class="text-tone-60 font-medium text-sm">Number</span>
29944
+ <div class="flex items-center gap-1">
29945
+ <span data-copy-value="4111112000062555" class="text-tone-100 text-sm font-medium">4111112000062555</span>
29946
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
29947
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
29948
+ <path
29949
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
29950
+ fill="#0D0716" />
29951
+ </svg>
29952
+ </button>
29953
+ </div>
29954
+ </div>
29955
+ <div class="flex justify-between items-center">
29956
+ <span class="text-tone-60 font-medium text-sm">Expiry</span>
29957
+ <div class="flex items-center gap-1">
29958
+ <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030 </span>
29959
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
29960
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
29961
+ <path
29962
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
29963
+ fill="#0D0716" />
29964
+ </svg>
29965
+ </button>
29966
+ </div>
29967
+ </div>
29968
+ <div class="flex justify-between items-center">
29969
+ <span class="text-tone-60 font-medium text-sm">CVV</span>
29970
+ <div class="flex items-center gap-1">
29971
+ <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321 </span>
29972
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
29973
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
29974
+ <path
29975
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
29976
+ fill="#0D0716" />
29977
+ </svg>
29978
+ </button>
29979
+ </div>
29980
+ </div>
29981
+ </div>
29982
+
29983
+ <!-- Pin -->
29984
+ <div id="pin" class="hidden tab-content">
29985
+ <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">
29986
+ <div class="flex justify-between items-center">
29987
+ <span class="text-tone-60 font-medium text-sm">Number</span>
29988
+ <div class="flex items-center gap-1">
29989
+ <span data-copy-value="5555558684543932"
29990
+ class="text-tone-100 text-sm font-medium">5555558684543932 </span>
29991
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
29992
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
29993
+ xmlns="http://www.w3.org/2000/svg">
29994
+ <path
29995
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
29996
+ fill="#0D0716" />
29997
+ </svg>
29998
+ </button>
29999
+ </div>
30000
+ </div>
30001
+
30002
+ <div class="flex justify-between items-center">
30003
+ <span class="text-tone-60 font-medium text-sm">Expiry</span>
30004
+ <div class="flex items-center gap-1">
30005
+ <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>
30006
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30007
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30008
+ xmlns="http://www.w3.org/2000/svg">
30009
+ <path
30010
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30011
+ fill="#0D0716" />
30012
+ </svg>
30013
+ </button>
30014
+ </div>
30015
+ </div>
30016
+ <div class="flex justify-between items-center">
30017
+ <span class="text-tone-60 font-medium text-sm">CVV</span>
30018
+ <div class="flex items-center gap-1">
30019
+ <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>
30020
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30021
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30022
+ xmlns="http://www.w3.org/2000/svg">
30023
+ <path
30024
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30025
+ fill="#0D0716" />
30026
+ </svg>
30027
+ </button>
30028
+ </div>
30029
+ </div>
30030
+ <div class="flex justify-between items-center">
30031
+ <span class="text-tone-60 font-medium text-sm">Pin</span>
30032
+ <div class="flex items-center gap-1">
30033
+ <span data-copy-value="4321" class="text-tone-100 text-sm font-medium">4321</span>
30034
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30035
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30036
+ xmlns="http://www.w3.org/2000/svg">
30037
+ <path
30038
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30039
+ fill="#0D0716" />
30040
+ </svg>
30041
+ </button>
30042
+ </div>
30043
+ </div>
30044
+ </div>
30045
+ </div>
30046
+
30047
+ <!-- Pin + OTP -->
30048
+ <div id="pin-otp" class="tab-content hidden">
30049
+ <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">
30050
+ <div class="flex justify-between items-center">
30051
+ <span class="text-tone-60 font-medium text-sm">Number</span>
30052
+ <div class="flex items-center gap-1">
30053
+ <span data-copy-value="5555567973581842" class="text-tone-100 text-sm font-medium">5555567973581842</span>
30054
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30055
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30056
+ xmlns="http://www.w3.org/2000/svg">
30057
+ <path
30058
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30059
+ fill="#0D0716" />
30060
+ </svg>
30061
+ </button>
30062
+ </div>
30063
+ </div>
30064
+ <div class="flex justify-between items-center">
30065
+ <span class="text-tone-60 font-medium text-sm">Expiry</span>
30066
+ <div class="flex items-center gap-1">
30067
+ <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>
30068
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30069
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30070
+ xmlns="http://www.w3.org/2000/svg">
30071
+ <path
30072
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30073
+ fill="#0D0716" />
30074
+ </svg>
30075
+ </button>
30076
+ </div>
30077
+ </div>
30078
+ <div class="flex justify-between items-center">
30079
+ <span class="text-tone-60 font-medium text-sm">CVV</span>
30080
+ <div class="flex items-center gap-1">
30081
+ <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>
30082
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30083
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30084
+ xmlns="http://www.w3.org/2000/svg">
30085
+ <path
30086
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30087
+ fill="#0D0716" />
30088
+ </svg>
30089
+ </button>
30090
+ </div>
30091
+ </div>
30092
+ <div class="flex justify-between items-center">
30093
+ <span class="text-tone-60 font-medium text-sm">Pin</span>
30094
+ <div class="flex items-center gap-1">
30095
+ <span data-copy-value="4321" class="text-tone-100 text-sm font-medium">4321</span>
30096
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30097
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30098
+ xmlns="http://www.w3.org/2000/svg">
30099
+ <path
30100
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30101
+ fill="#0D0716" />
30102
+ </svg>
30103
+ </button>
30104
+ </div>
30105
+ </div>
30106
+ <div class="flex justify-between items-center">
30107
+ <span class="text-tone-60 font-medium text-sm">OTP</span>
30108
+ <div class="flex items-center gap-1">
30109
+ <span data-copy-value="654321" class="text-tone-100 text-sm font-medium">654321</span>
30110
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30111
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30112
+ xmlns="http://www.w3.org/2000/svg">
30113
+ <path
30114
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30115
+ fill="#0D0716" />
30116
+ </svg>
30117
+ </button>
30118
+ </div>
30119
+ </div>
30120
+ </div>
30121
+ </div>
30122
+ <!-- 3DS -->
30123
+ <div id="3ds" class="tab-content hidden">
30124
+ <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">
30125
+ <div class="flex justify-between items-center">
30126
+ <span class="text-tone-60 font-medium text-sm">Number</span>
30127
+ <div class="flex items-center gap-1">
30128
+ <span data-copy-value="5555558684543932"
30129
+ class="text-tone-100 text-sm font-medium">5555577124976817 </span>
30130
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30131
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30132
+ xmlns="http://www.w3.org/2000/svg">
30133
+ <path
30134
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30135
+ fill="#0D0716" />
30136
+ </svg>
30137
+ </button>
30138
+ </div>
30139
+ </div>
30140
+
30141
+ <div class="flex justify-between items-center">
30142
+ <span class="text-tone-60 font-medium text-sm">Expiry</span>
30143
+ <div class="flex items-center gap-1">
30144
+ <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>
30145
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30146
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30147
+ xmlns="http://www.w3.org/2000/svg">
30148
+ <path
30149
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30150
+ fill="#0D0716" />
30151
+ </svg>
30152
+ </button>
30153
+ </div>
30154
+ </div>
30155
+ <div class="flex justify-between items-center">
30156
+ <span class="text-tone-60 font-medium text-sm">CVV</span>
30157
+ <div class="flex items-center gap-1">
30158
+ <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>
30159
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30160
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30161
+ xmlns="http://www.w3.org/2000/svg">
30162
+ <path
30163
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30164
+ fill="#0D0716" />
30165
+ </svg>
30166
+ </button>
30167
+ </div>
30168
+ </div>
30169
+ </div>
30170
+ </div>
30171
+
30172
+ <!-- AVS -->
30173
+ <div id="avs" class="tab-content hidden">
30174
+ <div class=" grid gap-3 border border-tone-50 px-6 py-4 rounded-2xl mb-4">
30175
+ <div class="flex justify-between items-center">
30176
+ <span class="text-tone-60 font-medium text-sm">Number</span>
30177
+ <div class="flex items-center gap-1">
30178
+ <span data-copy-value="4111124373708482"
30179
+ class="text-tone-100 text-sm font-medium">4111124373708482 </span>
30180
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30181
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30182
+ xmlns="http://www.w3.org/2000/svg">
30183
+ <path
30184
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30185
+ fill="#0D0716" />
30186
+ </svg>
30187
+ </button>
30188
+ </div>
30189
+ </div>
30190
+
30191
+ <div class="flex justify-between items-center">
30192
+ <span class="text-tone-60 font-medium text-sm">Expiry</span>
30193
+ <div class="flex items-center gap-1">
30194
+ <span data-copy-value="12/30" class="text-tone-100 text-sm font-medium">12/2030</span>
30195
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30196
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30197
+ xmlns="http://www.w3.org/2000/svg">
30198
+ <path
30199
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30200
+ fill="#0D0716" />
30201
+ </svg>
30202
+ </button>
30203
+ </div>
30204
+ </div>
30205
+ <div class="flex justify-between items-center">
30206
+ <span class="text-tone-60 font-medium text-sm">CVV</span>
30207
+ <div class="flex items-center gap-1">
30208
+ <span data-copy-value="321" class="text-tone-100 text-sm font-medium">321</span>
30209
+ <button class="copy-btn p-1 hover:opacity-80 transition-opacity">
30210
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
30211
+ xmlns="http://www.w3.org/2000/svg">
30212
+ <path
30213
+ d="M4.66667 3.99992V1.99992C4.66667 1.82311 4.7369 1.65354 4.86193 1.52851C4.98695 1.40349 5.15652 1.33325 5.33333 1.33325H13.3333C13.5101 1.33325 13.6797 1.40349 13.8047 1.52851C13.9298 1.65354 14 1.82311 14 1.99992V11.3333C14 11.5101 13.9298 11.6796 13.8047 11.8047C13.6797 11.9297 13.5101 11.9999 13.3333 11.9999H11.3333V13.9999C11.3333 14.3679 11.0333 14.6666 10.662 14.6666H2.67133C2.58342 14.6671 2.49626 14.6503 2.41488 14.617C2.3335 14.5837 2.25949 14.5347 2.19711 14.4728C2.13472 14.4108 2.0852 14.3372 2.05137 14.256C2.01754 14.1749 2.00009 14.0878 2 13.9999L2.002 4.66659C2.002 4.29859 2.302 3.99992 2.67333 3.99992H4.66667ZM3.33533 5.33325L3.33333 13.3333H10V5.33325H3.33533ZM6 3.99992H11.3333V10.6666H12.6667V2.66659H6V3.99992Z"
30214
+ fill="#0D0716" />
30215
+ </svg>
30216
+ </button>
30217
+ </div>
30218
+ </div>
30219
+ <div class="flex justify-between items-center">
30220
+ <span class="text-tone-60 font-medium text-sm">Address</span>
30221
+ <div class="flex flex-col items-end gap-1">
30222
+ <span class="text-tone-100 text-sm font-medium">Address: 1, Spotflow Street</span>
30223
+ <span class="text-tone-100 text-sm font-medium">City: Lekki</span>
30224
+ <span class="text-tone-100 text-sm font-medium">State: Lagos</span>
30225
+ <span class="text-tone-100 text-sm font-medium">Country: Nigeria</span>
30226
+ <span class="text-tone-100 text-sm font-medium">ZIP: 101233</span>
30227
+ </div>
30228
+ </div>
30229
+ </div>
30230
+ </div>
30231
+ </div>
30232
30232
  </div>`;
30233
30233
  class So {
30234
30234
  constructor({ container: e, closeCallback: i }) {
@@ -31036,97 +31036,97 @@ class qd {
31036
31036
  }
31037
31037
  }
31038
31038
  }
31039
- const zd = `<div>\r
31040
- <div class="container-center h-[40vh] hidden" id="loader">\r
31041
- <img src="" alt="loader gif" />\r
31042
- </div>\r
31043
- <div id="details-content" class="grid gap-5">\r
31044
- <h5 class="text-sm text-tone-100 text-center font-semibold md:w-4/5 mx-auto">\r
31045
- Make a single bank transfer from your bank to this account\r
31046
- before it expires.\r
31047
- </h5>\r
31048
- <div class="border border-grey-100 rounded-lg text-black px-6 py-5 grid gap-4">\r
31049
- <div class="text-sm grid grid-cols-[1fr_auto] gap-3">\r
31050
- <div>\r
31051
- <p class="text-sm">Amount</p>\r
31052
- </div>\r
31053
- \r
31054
- <div class="align-center gap-2">\r
31055
- <p class="font-bold transfer-curr-amount" id="transfer-amount"></p>\r
31056
- \r
31057
- <button type="button" class="relative group" id="copy-amount">\r
31058
- <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">\r
31059
- <path\r
31060
- d="M9.33268 7.52502V9.97502C9.33268 12.0167 8.51602 12.8334 6.47435 12.8334H4.02435C1.98268 12.8334 1.16602 12.0167 1.16602 9.97502V7.52502C1.16602 5.48335 1.98268 4.66669 4.02435 4.66669H6.47435C8.51602 4.66669 9.33268 5.48335 9.33268 7.52502Z"\r
31061
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
31062
- <path\r
31063
- d="M12.8327 4.02502V6.47502C12.8327 8.51669 12.016 9.33335 9.97435 9.33335H9.33268V7.52502C9.33268 5.48335 8.51602 4.66669 6.47435 4.66669H4.66602V4.02502C4.66602 1.98335 5.48268 1.16669 7.52435 1.16669H9.97435C12.016 1.16669 12.8327 1.98335 12.8327 4.02502Z"\r
31064
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
31065
- </svg>\r
31066
- \r
31067
- \r
31068
- <div class="tooltip">\r
31069
- <div class="tooltip-textbox">\r
31070
- <p class="tooltip-text" id="amount-tooltip">Copy</p>\r
31071
- </div>\r
31072
- </div>\r
31073
- </button>\r
31074
- </div>\r
31075
- </div>\r
31076
- \r
31077
- <div class="grid grid-cols-[1fr_auto] gap-3 text-sm">\r
31078
- <div>\r
31079
- <p class="text-sm">Account Number</p>\r
31080
- </div>\r
31081
- \r
31082
- <div class="align-center gap-2">\r
31083
- <p class="font-bold" id="transfer-acn"></p>\r
31084
- \r
31085
- <button type="button" class="relative group" id="copy-acn">\r
31086
- <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">\r
31087
- <path\r
31088
- d="M9.33268 7.52502V9.97502C9.33268 12.0167 8.51602 12.8334 6.47435 12.8334H4.02435C1.98268 12.8334 1.16602 12.0167 1.16602 9.97502V7.52502C1.16602 5.48335 1.98268 4.66669 4.02435 4.66669H6.47435C8.51602 4.66669 9.33268 5.48335 9.33268 7.52502Z"\r
31089
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
31090
- <path\r
31091
- d="M12.8327 4.02502V6.47502C12.8327 8.51669 12.016 9.33335 9.97435 9.33335H9.33268V7.52502C9.33268 5.48335 8.51602 4.66669 6.47435 4.66669H4.66602V4.02502C4.66602 1.98335 5.48268 1.16669 7.52435 1.16669H9.97435C12.016 1.16669 12.8327 1.98335 12.8327 4.02502Z"\r
31092
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
31093
- </svg>\r
31094
- \r
31095
- \r
31096
- <div class="tooltip">\r
31097
- <div class="tooltip-textbox">\r
31098
- <p class="tooltip-text" id="acn-tooltip">Copy</p>\r
31099
- </div>\r
31100
- </div>\r
31101
- </button>\r
31102
- </div>\r
31103
- </div>\r
31104
- \r
31105
- <div class="grid grid-cols-[1fr_auto] gap-3 text-sm">\r
31106
- <p>Bank name</p>\r
31107
- <p class="font-semibold" id="transfer-bank"></p>\r
31108
- </div>\r
31109
- \r
31110
- \r
31111
- <div class="grid grid-cols-[1fr_auto] gap-3 text-sm">\r
31112
- <p>Beneficiary</p>\r
31113
- <p class="font-semibold" id="account-name"></p>\r
31114
- </div>\r
31115
- </div>\r
31116
- \r
31117
- <div class="mt-3">\r
31118
- <button type="button" id="transfer-button" class="details-form-button">I have made this bank transfer</button>\r
31119
- </div>\r
31120
- \r
31121
- <div class="mt-5">\r
31122
- <div class="w-9/12 mx-auto">\r
31123
- <div class="bg-[#FEF7ED] text-[#816039] text-sm text-center rounded-lg p-2">\r
31124
- This account is for this transaction only and\r
31125
- expires in <span class="font-semibold" id="time-left"></span><span class="font-semibold">s</span>\r
31126
- </div>\r
31127
- </div>\r
31128
- </div>\r
31129
- </div>\r
31039
+ const zd = `<div>
31040
+ <div class="container-center h-[40vh] hidden" id="loader">
31041
+ <img src="" alt="loader gif" />
31042
+ </div>
31043
+ <div id="details-content" class="grid gap-5">
31044
+ <h5 class="text-sm text-tone-100 text-center font-semibold md:w-4/5 mx-auto">
31045
+ Make a single bank transfer from your bank to this account
31046
+ before it expires.
31047
+ </h5>
31048
+ <div class="border border-grey-100 rounded-lg text-black px-6 py-5 grid gap-4">
31049
+ <div class="text-sm grid grid-cols-[1fr_auto] gap-3">
31050
+ <div>
31051
+ <p class="text-sm">Amount</p>
31052
+ </div>
31053
+
31054
+ <div class="align-center gap-2">
31055
+ <p class="font-bold transfer-curr-amount" id="transfer-amount"></p>
31056
+
31057
+ <button type="button" class="relative group" id="copy-amount">
31058
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
31059
+ <path
31060
+ d="M9.33268 7.52502V9.97502C9.33268 12.0167 8.51602 12.8334 6.47435 12.8334H4.02435C1.98268 12.8334 1.16602 12.0167 1.16602 9.97502V7.52502C1.16602 5.48335 1.98268 4.66669 4.02435 4.66669H6.47435C8.51602 4.66669 9.33268 5.48335 9.33268 7.52502Z"
31061
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
31062
+ <path
31063
+ d="M12.8327 4.02502V6.47502C12.8327 8.51669 12.016 9.33335 9.97435 9.33335H9.33268V7.52502C9.33268 5.48335 8.51602 4.66669 6.47435 4.66669H4.66602V4.02502C4.66602 1.98335 5.48268 1.16669 7.52435 1.16669H9.97435C12.016 1.16669 12.8327 1.98335 12.8327 4.02502Z"
31064
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
31065
+ </svg>
31066
+
31067
+
31068
+ <div class="tooltip">
31069
+ <div class="tooltip-textbox">
31070
+ <p class="tooltip-text" id="amount-tooltip">Copy</p>
31071
+ </div>
31072
+ </div>
31073
+ </button>
31074
+ </div>
31075
+ </div>
31076
+
31077
+ <div class="grid grid-cols-[1fr_auto] gap-3 text-sm">
31078
+ <div>
31079
+ <p class="text-sm">Account Number</p>
31080
+ </div>
31081
+
31082
+ <div class="align-center gap-2">
31083
+ <p class="font-bold" id="transfer-acn"></p>
31084
+
31085
+ <button type="button" class="relative group" id="copy-acn">
31086
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
31087
+ <path
31088
+ d="M9.33268 7.52502V9.97502C9.33268 12.0167 8.51602 12.8334 6.47435 12.8334H4.02435C1.98268 12.8334 1.16602 12.0167 1.16602 9.97502V7.52502C1.16602 5.48335 1.98268 4.66669 4.02435 4.66669H6.47435C8.51602 4.66669 9.33268 5.48335 9.33268 7.52502Z"
31089
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
31090
+ <path
31091
+ d="M12.8327 4.02502V6.47502C12.8327 8.51669 12.016 9.33335 9.97435 9.33335H9.33268V7.52502C9.33268 5.48335 8.51602 4.66669 6.47435 4.66669H4.66602V4.02502C4.66602 1.98335 5.48268 1.16669 7.52435 1.16669H9.97435C12.016 1.16669 12.8327 1.98335 12.8327 4.02502Z"
31092
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
31093
+ </svg>
31094
+
31095
+
31096
+ <div class="tooltip">
31097
+ <div class="tooltip-textbox">
31098
+ <p class="tooltip-text" id="acn-tooltip">Copy</p>
31099
+ </div>
31100
+ </div>
31101
+ </button>
31102
+ </div>
31103
+ </div>
31104
+
31105
+ <div class="grid grid-cols-[1fr_auto] gap-3 text-sm">
31106
+ <p>Bank name</p>
31107
+ <p class="font-semibold" id="transfer-bank"></p>
31108
+ </div>
31109
+
31110
+
31111
+ <div class="grid grid-cols-[1fr_auto] gap-3 text-sm">
31112
+ <p>Beneficiary</p>
31113
+ <p class="font-semibold" id="account-name"></p>
31114
+ </div>
31115
+ </div>
31116
+
31117
+ <div class="mt-3">
31118
+ <button type="button" id="transfer-button" class="details-form-button">I have made this bank transfer</button>
31119
+ </div>
31120
+
31121
+ <div class="mt-5">
31122
+ <div class="w-9/12 mx-auto">
31123
+ <div class="bg-[#FEF7ED] text-[#816039] text-sm text-center rounded-lg p-2">
31124
+ This account is for this transaction only and
31125
+ expires in <span class="font-semibold" id="time-left"></span><span class="font-semibold">s</span>
31126
+ </div>
31127
+ </div>
31128
+ </div>
31129
+ </div>
31130
31130
  </div>`;
31131
31131
  function Wd(n) {
31132
31132
  return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
@@ -33921,87 +33921,87 @@ class xs {
33921
33921
  return zd;
33922
33922
  }
33923
33923
  }
33924
- const $d = `<div id="trasferConfirmationProgress">\r
33925
- <div>\r
33926
- <div>\r
33927
- <div class=" grid grid-rows-[auto_1fr] gap-4 mx-5">\r
33928
- <div class="items-center justify-self-center flex flex-col relative ">\r
33929
- <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none"\r
33930
- xmlns="http://www.w3.org/2000/svg">\r
33931
- <path\r
33932
- 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"\r
33933
- stroke="black" stroke-width="4" stroke-linejoin="round" />\r
33934
- </svg>\r
33935
- <!-- <div class="relative w-12 h-12">\r
33936
- <svg viewBox="0 0 100 100" width="100" height="100" class="h-full w-full">\r
33937
- <circle stroke-width="10" stroke="#E6E6E7" stroke-linecap="round" cx="50" cy="50"\r
33938
- class="circle-progress-bg" r="40" fill="transparent"></circle>\r
33939
- <circle stroke-width="11" stroke="#000000" stroke-linecap="round" cx="50" cy="50" r="40"\r
33940
- class="circle-progress" fill="transparent" stroke-dasharray="" stroke-dashoffset=""\r
33941
- transform="rotate(-90 50 50)"></circle>\r
33942
- </svg>\r
33943
- \r
33944
- </div> -->\r
33945
- </div>\r
33946
- </div>\r
33947
- </div>\r
33948
- <div class="text-center w-11/12 md:w-4/5 mx-auto grid gap-4 mb-8">\r
33949
- <h5 class="text-center text-sm text-grey-400">\r
33950
- We are confirming transaction status.\r
33951
- <br>\r
33952
- This can take a few minutes.\r
33953
- </h5>\r
33954
- \r
33955
- <div>\r
33956
- <p class="text-grey-400 text-sm">\r
33957
- Please wait for <span id="ctd-timer" class="font-bold"> </span> minutes\r
33958
- </p>\r
33959
- </div>\r
33960
- \r
33961
- </div>\r
33962
- \r
33963
- <div>\r
33964
- <div class="border border-tone-10 rounded-lg text-black px-4 py-4 grid gap-2">\r
33965
- \r
33966
- <div class="grid grid-cols-[1fr_auto] gap-3">\r
33967
- <div>\r
33968
- <p class="text-xs">Account details</p>\r
33969
- </div>\r
33970
- \r
33971
- <div class="align-center gap-2">\r
33972
- <p class="font-medium text-xs" id="transfer-acn-pr"></p>\r
33973
- \r
33974
- <button type="button" class="relative group" id="copy-acn-pr">\r
33975
- <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">\r
33976
- <path\r
33977
- d="M9.33268 7.52502V9.97502C9.33268 12.0167 8.51602 12.8334 6.47435 12.8334H4.02435C1.98268 12.8334 1.16602 12.0167 1.16602 9.97502V7.52502C1.16602 5.48335 1.98268 4.66669 4.02435 4.66669H6.47435C8.51602 4.66669 9.33268 5.48335 9.33268 7.52502Z"\r
33978
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
33979
- <path\r
33980
- d="M12.8327 4.02502V6.47502C12.8327 8.51669 12.016 9.33335 9.97435 9.33335H9.33268V7.52502C9.33268 5.48335 8.51602 4.66669 6.47435 4.66669H4.66602V4.02502C4.66602 1.98335 5.48268 1.16669 7.52435 1.16669H9.97435C12.016 1.16669 12.8327 1.98335 12.8327 4.02502Z"\r
33981
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
33982
- </svg>\r
33983
- \r
33984
- <div class="tooltip">\r
33985
- <div class="tooltip-textbox">\r
33986
- <p class="tooltip-text" id="acn-tooltip-pr">Copy</p>\r
33987
- </div>\r
33988
- </div>\r
33989
- </button>\r
33990
- </div>\r
33991
- </div>\r
33992
- \r
33993
- <div class="grid grid-cols-[1fr_auto] gap-3 text-xxs">\r
33994
- <p class="text-xs">Bank name</p>\r
33995
- <p class="font-medium text-xs" id="transfer-bank"></p>\r
33996
- </div>\r
33997
- \r
33998
- <div class="grid grid-cols-[1fr_auto] gap-3 text-xxs">\r
33999
- <p class="text-xs">Beneficiary</p>\r
34000
- <p class="font-medium text-xs" id="account-name"></p>\r
34001
- </div>\r
34002
- </div>\r
34003
- </div>\r
34004
- </div>\r
33924
+ const $d = `<div id="trasferConfirmationProgress">
33925
+ <div>
33926
+ <div>
33927
+ <div class=" grid grid-rows-[auto_1fr] gap-4 mx-5">
33928
+ <div class="items-center justify-self-center flex flex-col relative ">
33929
+ <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none"
33930
+ xmlns="http://www.w3.org/2000/svg">
33931
+ <path
33932
+ 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"
33933
+ stroke="black" stroke-width="4" stroke-linejoin="round" />
33934
+ </svg>
33935
+ <!-- <div class="relative w-12 h-12">
33936
+ <svg viewBox="0 0 100 100" width="100" height="100" class="h-full w-full">
33937
+ <circle stroke-width="10" stroke="#E6E6E7" stroke-linecap="round" cx="50" cy="50"
33938
+ class="circle-progress-bg" r="40" fill="transparent"></circle>
33939
+ <circle stroke-width="11" stroke="#000000" stroke-linecap="round" cx="50" cy="50" r="40"
33940
+ class="circle-progress" fill="transparent" stroke-dasharray="" stroke-dashoffset=""
33941
+ transform="rotate(-90 50 50)"></circle>
33942
+ </svg>
33943
+
33944
+ </div> -->
33945
+ </div>
33946
+ </div>
33947
+ </div>
33948
+ <div class="text-center w-11/12 md:w-4/5 mx-auto grid gap-4 mb-8">
33949
+ <h5 class="text-center text-sm text-grey-400">
33950
+ We are confirming transaction status.
33951
+ <br>
33952
+ This can take a few minutes.
33953
+ </h5>
33954
+
33955
+ <div>
33956
+ <p class="text-grey-400 text-sm">
33957
+ Please wait for <span id="ctd-timer" class="font-bold"> </span> minutes
33958
+ </p>
33959
+ </div>
33960
+
33961
+ </div>
33962
+
33963
+ <div>
33964
+ <div class="border border-tone-10 rounded-lg text-black px-4 py-4 grid gap-2">
33965
+
33966
+ <div class="grid grid-cols-[1fr_auto] gap-3">
33967
+ <div>
33968
+ <p class="text-xs">Account details</p>
33969
+ </div>
33970
+
33971
+ <div class="align-center gap-2">
33972
+ <p class="font-medium text-xs" id="transfer-acn-pr"></p>
33973
+
33974
+ <button type="button" class="relative group" id="copy-acn-pr">
33975
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
33976
+ <path
33977
+ d="M9.33268 7.52502V9.97502C9.33268 12.0167 8.51602 12.8334 6.47435 12.8334H4.02435C1.98268 12.8334 1.16602 12.0167 1.16602 9.97502V7.52502C1.16602 5.48335 1.98268 4.66669 4.02435 4.66669H6.47435C8.51602 4.66669 9.33268 5.48335 9.33268 7.52502Z"
33978
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
33979
+ <path
33980
+ d="M12.8327 4.02502V6.47502C12.8327 8.51669 12.016 9.33335 9.97435 9.33335H9.33268V7.52502C9.33268 5.48335 8.51602 4.66669 6.47435 4.66669H4.66602V4.02502C4.66602 1.98335 5.48268 1.16669 7.52435 1.16669H9.97435C12.016 1.16669 12.8327 1.98335 12.8327 4.02502Z"
33981
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
33982
+ </svg>
33983
+
33984
+ <div class="tooltip">
33985
+ <div class="tooltip-textbox">
33986
+ <p class="tooltip-text" id="acn-tooltip-pr">Copy</p>
33987
+ </div>
33988
+ </div>
33989
+ </button>
33990
+ </div>
33991
+ </div>
33992
+
33993
+ <div class="grid grid-cols-[1fr_auto] gap-3 text-xxs">
33994
+ <p class="text-xs">Bank name</p>
33995
+ <p class="font-medium text-xs" id="transfer-bank"></p>
33996
+ </div>
33997
+
33998
+ <div class="grid grid-cols-[1fr_auto] gap-3 text-xxs">
33999
+ <p class="text-xs">Beneficiary</p>
34000
+ <p class="font-medium text-xs" id="account-name"></p>
34001
+ </div>
34002
+ </div>
34003
+ </div>
34004
+ </div>
34005
34005
  </div>`;
34006
34006
  class Yd {
34007
34007
  constructor(e) {
@@ -34112,29 +34112,29 @@ class Yd {
34112
34112
  return $d;
34113
34113
  }
34114
34114
  }
34115
- const Qd = `<div id="paymenExpired">\r
34116
- <div class="container-center min-h-[30dvh]">\r
34117
- <div>\r
34118
- <div class="container-center mb-5">\r
34119
- <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">\r
34120
- <path\r
34121
- d="M32.5172 9.74998L22.6172 4.03331C21.0005 3.09998 19.0005 3.09998 17.3672 4.03331L7.48385 9.74998C5.86719 10.6833 4.86719 12.4166 4.86719 14.3V25.7C4.86719 27.5666 5.86719 29.3 7.48385 30.25L17.3839 35.9666C19.0005 36.9 21.0005 36.9 22.6339 35.9666L32.5339 30.25C34.1505 29.3166 35.1505 27.5833 35.1505 25.7V14.3C35.1339 12.4166 34.1339 10.7 32.5172 9.74998ZM18.7505 12.9166C18.7505 12.2333 19.3172 11.6666 20.0005 11.6666C20.6839 11.6666 21.2505 12.2333 21.2505 12.9166V21.6666C21.2505 22.35 20.6839 22.9166 20.0005 22.9166C19.3172 22.9166 18.7505 22.35 18.7505 21.6666V12.9166ZM21.5339 27.7166C21.4505 27.9166 21.3339 28.1 21.1839 28.2666C20.8672 28.5833 20.4505 28.75 20.0005 28.75C19.7839 28.75 19.5672 28.7 19.3672 28.6166C19.1505 28.5333 18.9839 28.4166 18.8172 28.2666C18.6672 28.1 18.5505 27.9166 18.4505 27.7166C18.3672 27.5166 18.3339 27.3 18.3339 27.0833C18.3339 26.65 18.5005 26.2166 18.8172 25.9C18.9839 25.75 19.1505 25.6333 19.3672 25.55C19.9839 25.2833 20.7172 25.4333 21.1839 25.9C21.3339 26.0666 21.4505 26.2333 21.5339 26.45C21.6172 26.65 21.6672 26.8666 21.6672 27.0833C21.6672 27.3 21.6172 27.5166 21.5339 27.7166Z"\r
34122
- fill="#D62020" />\r
34123
- </svg>\r
34124
- </div>\r
34125
- <h5 class="text-tone-100 font-semibold text-xl text-center mb-1" id="payment-warning-text">\r
34126
- Account Expired\r
34127
- </h5>\r
34128
- \r
34129
- <p class="w-11/12 mx-auto text-sm text-center">\r
34130
- Looks like your account is not valid. Please confirm and try again\r
34131
- </p>\r
34132
- \r
34133
- <!-- <div class="mt-8 container-center">\r
34134
- <button type="button" id="payment-expired" class="button-outline w-60">I have made the payment</button>\r
34135
- </div> -->\r
34136
- </div>\r
34137
- </div>\r
34115
+ const Qd = `<div id="paymenExpired">
34116
+ <div class="container-center min-h-[30dvh]">
34117
+ <div>
34118
+ <div class="container-center mb-5">
34119
+ <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
34120
+ <path
34121
+ d="M32.5172 9.74998L22.6172 4.03331C21.0005 3.09998 19.0005 3.09998 17.3672 4.03331L7.48385 9.74998C5.86719 10.6833 4.86719 12.4166 4.86719 14.3V25.7C4.86719 27.5666 5.86719 29.3 7.48385 30.25L17.3839 35.9666C19.0005 36.9 21.0005 36.9 22.6339 35.9666L32.5339 30.25C34.1505 29.3166 35.1505 27.5833 35.1505 25.7V14.3C35.1339 12.4166 34.1339 10.7 32.5172 9.74998ZM18.7505 12.9166C18.7505 12.2333 19.3172 11.6666 20.0005 11.6666C20.6839 11.6666 21.2505 12.2333 21.2505 12.9166V21.6666C21.2505 22.35 20.6839 22.9166 20.0005 22.9166C19.3172 22.9166 18.7505 22.35 18.7505 21.6666V12.9166ZM21.5339 27.7166C21.4505 27.9166 21.3339 28.1 21.1839 28.2666C20.8672 28.5833 20.4505 28.75 20.0005 28.75C19.7839 28.75 19.5672 28.7 19.3672 28.6166C19.1505 28.5333 18.9839 28.4166 18.8172 28.2666C18.6672 28.1 18.5505 27.9166 18.4505 27.7166C18.3672 27.5166 18.3339 27.3 18.3339 27.0833C18.3339 26.65 18.5005 26.2166 18.8172 25.9C18.9839 25.75 19.1505 25.6333 19.3672 25.55C19.9839 25.2833 20.7172 25.4333 21.1839 25.9C21.3339 26.0666 21.4505 26.2333 21.5339 26.45C21.6172 26.65 21.6672 26.8666 21.6672 27.0833C21.6672 27.3 21.6172 27.5166 21.5339 27.7166Z"
34122
+ fill="#D62020" />
34123
+ </svg>
34124
+ </div>
34125
+ <h5 class="text-tone-100 font-semibold text-xl text-center mb-1" id="payment-warning-text">
34126
+ Account Expired
34127
+ </h5>
34128
+
34129
+ <p class="w-11/12 mx-auto text-sm text-center">
34130
+ Looks like your account is not valid. Please confirm and try again
34131
+ </p>
34132
+
34133
+ <!-- <div class="mt-8 container-center">
34134
+ <button type="button" id="payment-expired" class="button-outline w-60">I have made the payment</button>
34135
+ </div> -->
34136
+ </div>
34137
+ </div>
34138
34138
  </div>`;
34139
34139
  class Xd {
34140
34140
  constructor(e) {
@@ -34657,41 +34657,41 @@ class ic extends Bt {
34657
34657
  }
34658
34658
  }
34659
34659
  }
34660
- const tc = `<form id="ussdBanks">\r
34661
- <div>\r
34662
- <h5 class="text-grey-400 font-semibold text-sm">Please choose your bank to begin payment</h5>\r
34663
- <div class="mt-2">\r
34664
- <div class="relative">\r
34665
- <div class="relative bank-select-relative">\r
34666
- <div class="relative w-full">\r
34667
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Bank</span>\r
34668
- <div>\r
34669
- <select class="avs-input-container appearance-none pr-7" id="bank-search-input" name="bank"\r
34670
- placeholder="Select your bank" required></select>\r
34671
- </div>\r
34672
- <div class="absolute right-4 top-1/2 -translate-y-2/4">\r
34673
- <svg id="bank-dropdown" width="14" height="8" viewBox="0 0 14 8" fill="none"\r
34674
- xmlns="http://www.w3.org/2000/svg">\r
34675
- <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"\r
34676
- stroke-linejoin="round" />\r
34677
- </svg>\r
34678
- </div>\r
34679
- </div>\r
34680
- </div>\r
34681
- \r
34682
- <div class="mt-4">\r
34683
- <button type="submit" disabled="true" class="details-form-button" id="ussd-bank-button">\r
34684
- <svg class="spinner hidden" viewBox="0 0 24 24">\r
34685
- <path\r
34686
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
34687
- </path>\r
34688
- </svg>\r
34689
- <span id="ussd-bank-button-text"> Pay </span>\r
34690
- </button>\r
34691
- </div>\r
34692
- </div>\r
34693
- </div>\r
34694
- </div>\r
34660
+ const tc = `<form id="ussdBanks">
34661
+ <div>
34662
+ <h5 class="text-grey-400 font-semibold text-sm">Please choose your bank to begin payment</h5>
34663
+ <div class="mt-2">
34664
+ <div class="relative">
34665
+ <div class="relative bank-select-relative">
34666
+ <div class="relative w-full">
34667
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Bank</span>
34668
+ <div>
34669
+ <select class="avs-input-container appearance-none pr-7" id="bank-search-input" name="bank"
34670
+ placeholder="Select your bank" required></select>
34671
+ </div>
34672
+ <div class="absolute right-4 top-1/2 -translate-y-2/4">
34673
+ <svg id="bank-dropdown" width="14" height="8" viewBox="0 0 14 8" fill="none"
34674
+ xmlns="http://www.w3.org/2000/svg">
34675
+ <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"
34676
+ stroke-linejoin="round" />
34677
+ </svg>
34678
+ </div>
34679
+ </div>
34680
+ </div>
34681
+
34682
+ <div class="mt-4">
34683
+ <button type="submit" disabled="true" class="details-form-button" id="ussd-bank-button">
34684
+ <svg class="spinner hidden" viewBox="0 0 24 24">
34685
+ <path
34686
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
34687
+ </path>
34688
+ </svg>
34689
+ <span id="ussd-bank-button-text"> Pay </span>
34690
+ </button>
34691
+ </div>
34692
+ </div>
34693
+ </div>
34694
+ </div>
34695
34695
  </form>`;
34696
34696
  class Es {
34697
34697
  constructor(e) {
@@ -34775,43 +34775,43 @@ class Es {
34775
34775
  return tc;
34776
34776
  }
34777
34777
  }
34778
- const sc = `<div id="viewCode">\r
34779
- <div class="grid gap-4">\r
34780
- <div class="text-center">\r
34781
- <div class="md:w-4/5 mx-auto grid gap-3">\r
34782
- <h5 class="text-sm text-center text-grey-400">\r
34783
- Dial the <span id="bank-name-ussd" class="font-semibold"></span>\r
34784
- code below on your mobile phone\r
34785
- to complete the payment\r
34786
- \r
34787
- </h5>\r
34788
- </div>\r
34789
- </div>\r
34790
- \r
34791
- <div class="container-center">\r
34792
- <div>\r
34793
- <p class="bank-dial-code text-2xl font-bold text-tone-100">*901*000*8812#</p>\r
34794
- <button type="button" class="copy-code-button text-sm text-tone-100 container-center gap-2 text-center w-full">\r
34795
- <span class="font-semibold mt-1">COPY USSD CODE</span>\r
34796
- \r
34797
- <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">\r
34798
- <path\r
34799
- d="M9.33268 8.02502V10.475C9.33268 12.5167 8.51602 13.3334 6.47435 13.3334H4.02435C1.98268 13.3334 1.16602 12.5167 1.16602 10.475V8.02502C1.16602 5.98335 1.98268 5.16669 4.02435 5.16669H6.47435C8.51602 5.16669 9.33268 5.98335 9.33268 8.02502Z"\r
34800
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
34801
- <path\r
34802
- d="M12.8327 4.52502V6.97502C12.8327 9.01669 12.016 9.83335 9.97435 9.83335H9.33268V8.02502C9.33268 5.98335 8.51602 5.16669 6.47435 5.16669H4.66602V4.52502C4.66602 2.48335 5.48268 1.66669 7.52435 1.66669H9.97435C12.016 1.66669 12.8327 2.48335 12.8327 4.52502Z"\r
34803
- stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />\r
34804
- </svg>\r
34805
- \r
34806
- </button>\r
34807
- </div>\r
34808
- </div>\r
34809
- \r
34810
- <div class="mt-4">\r
34811
- <button type="button" id="bank-completed-payment" class="details-form-button">I have made this\r
34812
- payment</button>\r
34813
- </div>\r
34814
- </div>\r
34778
+ const sc = `<div id="viewCode">
34779
+ <div class="grid gap-4">
34780
+ <div class="text-center">
34781
+ <div class="md:w-4/5 mx-auto grid gap-3">
34782
+ <h5 class="text-sm text-center text-grey-400">
34783
+ Dial the <span id="bank-name-ussd" class="font-semibold"></span>
34784
+ code below on your mobile phone
34785
+ to complete the payment
34786
+
34787
+ </h5>
34788
+ </div>
34789
+ </div>
34790
+
34791
+ <div class="container-center">
34792
+ <div>
34793
+ <p class="bank-dial-code text-2xl font-bold text-tone-100">*901*000*8812#</p>
34794
+ <button type="button" class="copy-code-button text-sm text-tone-100 container-center gap-2 text-center w-full">
34795
+ <span class="font-semibold mt-1">COPY USSD CODE</span>
34796
+
34797
+ <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
34798
+ <path
34799
+ d="M9.33268 8.02502V10.475C9.33268 12.5167 8.51602 13.3334 6.47435 13.3334H4.02435C1.98268 13.3334 1.16602 12.5167 1.16602 10.475V8.02502C1.16602 5.98335 1.98268 5.16669 4.02435 5.16669H6.47435C8.51602 5.16669 9.33268 5.98335 9.33268 8.02502Z"
34800
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
34801
+ <path
34802
+ d="M12.8327 4.52502V6.97502C12.8327 9.01669 12.016 9.83335 9.97435 9.83335H9.33268V8.02502C9.33268 5.98335 8.51602 5.16669 6.47435 5.16669H4.66602V4.52502C4.66602 2.48335 5.48268 1.66669 7.52435 1.66669H9.97435C12.016 1.66669 12.8327 2.48335 12.8327 4.52502Z"
34803
+ stroke="#0D0716" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
34804
+ </svg>
34805
+
34806
+ </button>
34807
+ </div>
34808
+ </div>
34809
+
34810
+ <div class="mt-4">
34811
+ <button type="button" id="bank-completed-payment" class="details-form-button">I have made this
34812
+ payment</button>
34813
+ </div>
34814
+ </div>
34815
34815
  </div>`;
34816
34816
  class oc {
34817
34817
  constructor(e) {
@@ -35149,142 +35149,142 @@ const yi = (n) => {
35149
35149
  return cc(e);
35150
35150
  }
35151
35151
  return "";
35152
- }, uc = `<div>\r
35153
- <button id="go-back" class="md:hidden" aria-label="Go back">\r
35154
- </button>\r
35155
- </div>\r
35156
- \r
35157
- <div class="container-between gap-3 py-3 border-b border-b-grey-faint">\r
35158
- <div class="" id="merchant-logo-container">\r
35159
- <img src="" alt="logo" id="merchant-logo" class="flex max-w-[200px] h-8 object-contain" />\r
35160
- </div>\r
35161
- <!-- <button id="close-btn">\r
35162
- <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">\r
35163
- <path d="M8.5 1.5L1.5 8.5M1.5 1.5L8.5 8.5" stroke="#55515B" stroke-width="1.5" stroke-linecap="round"\r
35164
- stroke-linejoin="round" />\r
35165
- </svg>\r
35166
- \r
35167
- </button> -->\r
35168
- </div>\r
35169
- \r
35170
- <div class="py-5 md:py-3 border-b border-b-grey-faint" id="payment-details-header">\r
35171
- <div class="hidden md:block" id="payment-details">\r
35172
- <div class="container-between gap-3">\r
35173
- <p class="text-xs break-words whitespace-normal" id="plan-name">-</p>\r
35174
- <p class="whitespace-nowrap mb-1 text-2xl font-bold" id="designated-rate-no-plan">\r
35175
- \r
35176
- </p>\r
35177
- <p class="text-xs text-left" id="merchant-email"></p>\r
35178
- </div>\r
35179
- <div class="flex justify-between items-start gap-4 py-1" id="payment-fees">\r
35180
- <div>\r
35181
- <p class="whitespace-nowrap mb-1 text-2xl font-bold">\r
35182
- <span id="designated-rate" class="inline-block"> USD 0</span>\r
35183
- </p>\r
35184
- <div class="text-sm" id="source-rate">\r
35185
- <span> Amount: </span>\r
35186
- <span class="ml-1 font-bold"> NGN 1</span>\r
35187
- </div>\r
35188
- <div class="text-sm hidden" id="tax-rate">\r
35189
- <span> Tax: </span>\r
35190
- <span id="tax-amount"> NGN 1</span>\r
35191
- </div>\r
35192
- </div>\r
35193
- <div id="currency-cursor" class="flex items-center relative">\r
35194
- <p class="text-sm mr-1 whitespace-nowrap" id="payment-rate-display">USD 1 = NGN 1</p>\r
35195
- <div class="group flex flex-col items-center cursor-pointer">\r
35196
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\r
35197
- <path\r
35198
- d="M8.00065 14.6668C11.6673 14.6668 14.6673 11.6668 14.6673 8.00016C14.6673 4.3335 11.6673 1.3335 8.00065 1.3335C4.33398 1.3335 1.33398 4.3335 1.33398 8.00016C1.33398 11.6668 4.33398 14.6668 8.00065 14.6668Z"\r
35199
- stroke="#101010" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />\r
35200
- <path d="M8 5.3335V8.66683" stroke="#101010" stroke-width="1.2" stroke-linecap="round"\r
35201
- stroke-linejoin="round" />\r
35202
- <path d="M7.99609 10.6665H8.00208" stroke="#101010" stroke-width="1.2" stroke-linecap="round"\r
35203
- stroke-linejoin="round" />\r
35204
- </svg>\r
35205
- \r
35206
- \r
35207
- <div\r
35208
- class="text-xs w-0 absolute transition-all duration-500 hidden rotate-45 left-0 top-5 z-30 text-[#98A2B3] hover:block bg-white p-3 rounded-lg lg:max-w-[20rem] translate-x-[-45%] min-w-[15rem] md:min-w-[18rem] shadow before:h-4 before:w-4 before:absolute before:-top-0 before:left-0 before:translate-x-[-45%] before:-translate-y-1 before:bg-white before:rotate-45 group-hover:rotate-0 hover:rotate-0 hover:opacity-100 group-hover:block group-hover:w-full hover:w-full">\r
35209
- <p class="text-gray-700 font-medium text-xs">\r
35210
- What is this?\r
35211
- </p>\r
35212
- <p class="text-xs text-tone-100 font-normal">\r
35213
- This rate reflects the current exchange rate for\r
35214
- converting United States Dollars (USD) to <span id="tooltip-localCurrency"> Nigerian Naira\r
35215
- (NGN) </span>. <span class="font-semibold">Please note that exchange rates are subject to\r
35216
- change and may vary slightly at the time of the\r
35217
- transaction.</span>\r
35218
- </p>\r
35219
- </div>\r
35220
- </div>\r
35221
- </div>\r
35222
- \r
35223
- \r
35224
- </div>\r
35225
- </div>\r
35226
- <div class="block md:hidden" id="payment-details-mob">\r
35227
- <div class="mb-3">\r
35228
- <p class="text-sm text-left mb-1" id="merchant-email-mob"></p>\r
35229
- <div id="currency-cursor-mob" class="flex items-center relative">\r
35230
- <p class="text-sm mr-1 whitespace-nowrap" id="payment-rate-display-mob">USD 1 = NGN 1</p>\r
35231
- <div class="group flex flex-col items-center cursor-pointer">\r
35232
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\r
35233
- <path\r
35234
- d="M8.00065 14.6668C11.6673 14.6668 14.6673 11.6668 14.6673 8.00016C14.6673 4.3335 11.6673 1.3335 8.00065 1.3335C4.33398 1.3335 1.33398 4.3335 1.33398 8.00016C1.33398 11.6668 4.33398 14.6668 8.00065 14.6668Z"\r
35235
- stroke="#101010" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />\r
35236
- <path d="M8 5.3335V8.66683" stroke="#101010" stroke-width="1.2" stroke-linecap="round"\r
35237
- stroke-linejoin="round" />\r
35238
- <path d="M7.99609 10.6665H8.00208" stroke="#101010" stroke-width="1.2" stroke-linecap="round"\r
35239
- stroke-linejoin="round" />\r
35240
- </svg>\r
35241
- \r
35242
- \r
35243
- <div\r
35244
- class="text-xs w-0 absolute transition-all duration-500 hidden rotate-45 left-0 top-5 z-30 text-[#98A2B3] hover:block bg-white p-3 rounded-lg translate-x-[0%] min-w-[15rem] shadow before:h-4 before:w-4 before:absolute before:-top-0 before:left-0 before:translate-x-[0%] before:-translate-y-1 before:bg-white before:rotate-45 group-hover:rotate-0 hover:rotate-0 hover:opacity-100 group-hover:block group-hover:w-4/5 hover:w-full">\r
35245
- <p class="text-black font-medium text-xs">\r
35246
- What is this?\r
35247
- </p>\r
35248
- <p class="text-xs">\r
35249
- This rate reflects the current exchange rate for\r
35250
- converting United States Dollars (USD) to <span id="tooltip-localCurrency-mob"> Nigerian Naira\r
35251
- (NGN) </span>. Please note that exchange rates are subject to\r
35252
- change and may vary slightly at the time of the\r
35253
- transaction.\r
35254
- </p>\r
35255
- </div>\r
35256
- </div>\r
35257
- </div>\r
35258
- </div>\r
35259
- <div>\r
35260
- <p class="text-base font-semibold break-words whitespace-normal" id="plan-name-mob">-</p>\r
35261
- \r
35262
- <div>\r
35263
- <p class="whitespace-nowrap mb-1 text-2xl font-bold">\r
35264
- <span id="designated-rate-mob" class="inline-block"> USD 0</span>\r
35265
- </p>\r
35266
- <div class="text-sm" id="source-rate-mob">\r
35267
- <span> To pay: </span>\r
35268
- <span class="ml-1 font-bold"> NGN 1</span>\r
35269
- </div>\r
35270
- <div class="text-sm hidden" id="tax-rate-mob">\r
35271
- <span> Tax: </span>\r
35272
- <span id="tax-amount-mob"> NGN\r
35273
- </div>\r
35274
- </div>\r
35275
- </div>\r
35276
- </div>\r
35277
- \r
35278
- </div>\r
35279
- \r
35280
- <div class="pt-5 pb-4 border-b border-b-grey-faint" id="payment-methods-container">\r
35281
- <h3 class="mb-3 text-sm md:text-xs text-grey-400 font-semibold"><span id="select-payment-method-text">Select your\r
35282
- preferred</span> payment method</h3>\r
35283
- \r
35284
- <div class="payment-options">\r
35285
- \r
35286
- <!-- Tab options -->\r
35287
- </div>\r
35152
+ }, uc = `<div>
35153
+ <button id="go-back" class="md:hidden" aria-label="Go back">
35154
+ </button>
35155
+ </div>
35156
+
35157
+ <div class="container-between gap-3 py-3 border-b border-b-grey-faint">
35158
+ <div class="" id="merchant-logo-container">
35159
+ <img src="" alt="logo" id="merchant-logo" class="flex max-w-[200px] h-8 object-contain" />
35160
+ </div>
35161
+ <!-- <button id="close-btn">
35162
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
35163
+ <path d="M8.5 1.5L1.5 8.5M1.5 1.5L8.5 8.5" stroke="#55515B" stroke-width="1.5" stroke-linecap="round"
35164
+ stroke-linejoin="round" />
35165
+ </svg>
35166
+
35167
+ </button> -->
35168
+ </div>
35169
+
35170
+ <div class="py-5 md:py-3 border-b border-b-grey-faint" id="payment-details-header">
35171
+ <div class="hidden md:block" id="payment-details">
35172
+ <div class="container-between gap-3">
35173
+ <p class="text-xs break-words whitespace-normal" id="plan-name">-</p>
35174
+ <p class="whitespace-nowrap mb-1 text-2xl font-bold" id="designated-rate-no-plan">
35175
+
35176
+ </p>
35177
+ <p class="text-xs text-left" id="merchant-email"></p>
35178
+ </div>
35179
+ <div class="flex justify-between items-start gap-4 py-1" id="payment-fees">
35180
+ <div>
35181
+ <p class="whitespace-nowrap mb-1 text-2xl font-bold">
35182
+ <span id="designated-rate" class="inline-block"> USD 0</span>
35183
+ </p>
35184
+ <div class="text-sm" id="source-rate">
35185
+ <span> Amount: </span>
35186
+ <span class="ml-1 font-bold"> NGN 1</span>
35187
+ </div>
35188
+ <div class="text-sm hidden" id="tax-rate">
35189
+ <span> Tax: </span>
35190
+ <span id="tax-amount"> NGN 1</span>
35191
+ </div>
35192
+ </div>
35193
+ <div id="currency-cursor" class="flex items-center relative">
35194
+ <p class="text-sm mr-1 whitespace-nowrap" id="payment-rate-display">USD 1 = NGN 1</p>
35195
+ <div class="group flex flex-col items-center cursor-pointer">
35196
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
35197
+ <path
35198
+ d="M8.00065 14.6668C11.6673 14.6668 14.6673 11.6668 14.6673 8.00016C14.6673 4.3335 11.6673 1.3335 8.00065 1.3335C4.33398 1.3335 1.33398 4.3335 1.33398 8.00016C1.33398 11.6668 4.33398 14.6668 8.00065 14.6668Z"
35199
+ stroke="#101010" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
35200
+ <path d="M8 5.3335V8.66683" stroke="#101010" stroke-width="1.2" stroke-linecap="round"
35201
+ stroke-linejoin="round" />
35202
+ <path d="M7.99609 10.6665H8.00208" stroke="#101010" stroke-width="1.2" stroke-linecap="round"
35203
+ stroke-linejoin="round" />
35204
+ </svg>
35205
+
35206
+
35207
+ <div
35208
+ class="text-xs w-0 absolute transition-all duration-500 hidden rotate-45 left-0 top-5 z-30 text-[#98A2B3] hover:block bg-white p-3 rounded-lg lg:max-w-[20rem] translate-x-[-45%] min-w-[15rem] md:min-w-[18rem] shadow before:h-4 before:w-4 before:absolute before:-top-0 before:left-0 before:translate-x-[-45%] before:-translate-y-1 before:bg-white before:rotate-45 group-hover:rotate-0 hover:rotate-0 hover:opacity-100 group-hover:block group-hover:w-full hover:w-full">
35209
+ <p class="text-gray-700 font-medium text-xs">
35210
+ What is this?
35211
+ </p>
35212
+ <p class="text-xs text-tone-100 font-normal">
35213
+ This rate reflects the current exchange rate for
35214
+ converting United States Dollars (USD) to <span id="tooltip-localCurrency"> Nigerian Naira
35215
+ (NGN) </span>. <span class="font-semibold">Please note that exchange rates are subject to
35216
+ change and may vary slightly at the time of the
35217
+ transaction.</span>
35218
+ </p>
35219
+ </div>
35220
+ </div>
35221
+ </div>
35222
+
35223
+
35224
+ </div>
35225
+ </div>
35226
+ <div class="block md:hidden" id="payment-details-mob">
35227
+ <div class="mb-3">
35228
+ <p class="text-sm text-left mb-1" id="merchant-email-mob"></p>
35229
+ <div id="currency-cursor-mob" class="flex items-center relative">
35230
+ <p class="text-sm mr-1 whitespace-nowrap" id="payment-rate-display-mob">USD 1 = NGN 1</p>
35231
+ <div class="group flex flex-col items-center cursor-pointer">
35232
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
35233
+ <path
35234
+ d="M8.00065 14.6668C11.6673 14.6668 14.6673 11.6668 14.6673 8.00016C14.6673 4.3335 11.6673 1.3335 8.00065 1.3335C4.33398 1.3335 1.33398 4.3335 1.33398 8.00016C1.33398 11.6668 4.33398 14.6668 8.00065 14.6668Z"
35235
+ stroke="#101010" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
35236
+ <path d="M8 5.3335V8.66683" stroke="#101010" stroke-width="1.2" stroke-linecap="round"
35237
+ stroke-linejoin="round" />
35238
+ <path d="M7.99609 10.6665H8.00208" stroke="#101010" stroke-width="1.2" stroke-linecap="round"
35239
+ stroke-linejoin="round" />
35240
+ </svg>
35241
+
35242
+
35243
+ <div
35244
+ class="text-xs w-0 absolute transition-all duration-500 hidden rotate-45 left-0 top-5 z-30 text-[#98A2B3] hover:block bg-white p-3 rounded-lg translate-x-[0%] min-w-[15rem] shadow before:h-4 before:w-4 before:absolute before:-top-0 before:left-0 before:translate-x-[0%] before:-translate-y-1 before:bg-white before:rotate-45 group-hover:rotate-0 hover:rotate-0 hover:opacity-100 group-hover:block group-hover:w-4/5 hover:w-full">
35245
+ <p class="text-black font-medium text-xs">
35246
+ What is this?
35247
+ </p>
35248
+ <p class="text-xs">
35249
+ This rate reflects the current exchange rate for
35250
+ converting United States Dollars (USD) to <span id="tooltip-localCurrency-mob"> Nigerian Naira
35251
+ (NGN) </span>. Please note that exchange rates are subject to
35252
+ change and may vary slightly at the time of the
35253
+ transaction.
35254
+ </p>
35255
+ </div>
35256
+ </div>
35257
+ </div>
35258
+ </div>
35259
+ <div>
35260
+ <p class="text-base font-semibold break-words whitespace-normal" id="plan-name-mob">-</p>
35261
+
35262
+ <div>
35263
+ <p class="whitespace-nowrap mb-1 text-2xl font-bold">
35264
+ <span id="designated-rate-mob" class="inline-block"> USD 0</span>
35265
+ </p>
35266
+ <div class="text-sm" id="source-rate-mob">
35267
+ <span> To pay: </span>
35268
+ <span class="ml-1 font-bold"> NGN 1</span>
35269
+ </div>
35270
+ <div class="text-sm hidden" id="tax-rate-mob">
35271
+ <span> Tax: </span>
35272
+ <span id="tax-amount-mob"> NGN
35273
+ </div>
35274
+ </div>
35275
+ </div>
35276
+ </div>
35277
+
35278
+ </div>
35279
+
35280
+ <div class="pt-5 pb-4 border-b border-b-grey-faint" id="payment-methods-container">
35281
+ <h3 class="mb-3 text-sm md:text-xs text-grey-400 font-semibold"><span id="select-payment-method-text">Select your
35282
+ preferred</span> payment method</h3>
35283
+
35284
+ <div class="payment-options">
35285
+
35286
+ <!-- Tab options -->
35287
+ </div>
35288
35288
  </div>`;
35289
35289
  class hc {
35290
35290
  constructor(e) {
@@ -35445,45 +35445,45 @@ class hc {
35445
35445
  return uc;
35446
35446
  }
35447
35447
  }
35448
- const mc = `<div id="mobileConfirmationProgress">\r
35449
- <div>\r
35450
- <div>\r
35451
- <div class=" grid grid-rows-[auto_1fr] gap-4 mx-5">\r
35452
- <div class="items-center justify-self-center flex flex-col relative ">\r
35453
- <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none"\r
35454
- xmlns="http://www.w3.org/2000/svg">\r
35455
- <path\r
35456
- 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"\r
35457
- stroke="black" stroke-width="4" stroke-linejoin="round" />\r
35458
- </svg>\r
35459
- <!-- <div class="relative w-12 h-12">\r
35460
- <svg viewBox="0 0 100 100" width="100" height="100" class="h-full w-full">\r
35461
- <circle stroke-width="10" stroke="#E6E6E7" stroke-linecap="round" cx="50" cy="50"\r
35462
- class="circle-progress-bg" r="40" fill="transparent"></circle>\r
35463
- <circle stroke-width="11" stroke="#000000" stroke-linecap="round" cx="50" cy="50" r="40"\r
35464
- class="circle-progress" fill="transparent" stroke-dasharray="" stroke-dashoffset=""\r
35465
- transform="rotate(-90 50 50)"></circle>\r
35466
- </svg>\r
35467
- \r
35468
- </div> -->\r
35469
- </div>\r
35470
- </div>\r
35471
- </div>\r
35472
- <div class="text-center w-11/12 md:w-4/5 mx-auto grid gap-4">\r
35473
- <h5 class="text-center text-sm text-grey-400">\r
35474
- We are confirming transaction status.\r
35475
- <br>\r
35476
- This can take a few minutes.\r
35477
- </h5>\r
35478
- \r
35479
- <div>\r
35480
- <p class="text-grey-400 text-sm">\r
35481
- Please wait for <span id="ctd-timer" class="font-bold"> </span> minutes\r
35482
- </p>\r
35483
- </div>\r
35484
- \r
35485
- </div>\r
35486
- </div>\r
35448
+ const mc = `<div id="mobileConfirmationProgress">
35449
+ <div>
35450
+ <div>
35451
+ <div class=" grid grid-rows-[auto_1fr] gap-4 mx-5">
35452
+ <div class="items-center justify-self-center flex flex-col relative ">
35453
+ <svg class="animate-spin" width="40" height="40" viewBox="0 0 64 64" fill="none"
35454
+ xmlns="http://www.w3.org/2000/svg">
35455
+ <path
35456
+ 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"
35457
+ stroke="black" stroke-width="4" stroke-linejoin="round" />
35458
+ </svg>
35459
+ <!-- <div class="relative w-12 h-12">
35460
+ <svg viewBox="0 0 100 100" width="100" height="100" class="h-full w-full">
35461
+ <circle stroke-width="10" stroke="#E6E6E7" stroke-linecap="round" cx="50" cy="50"
35462
+ class="circle-progress-bg" r="40" fill="transparent"></circle>
35463
+ <circle stroke-width="11" stroke="#000000" stroke-linecap="round" cx="50" cy="50" r="40"
35464
+ class="circle-progress" fill="transparent" stroke-dasharray="" stroke-dashoffset=""
35465
+ transform="rotate(-90 50 50)"></circle>
35466
+ </svg>
35467
+
35468
+ </div> -->
35469
+ </div>
35470
+ </div>
35471
+ </div>
35472
+ <div class="text-center w-11/12 md:w-4/5 mx-auto grid gap-4">
35473
+ <h5 class="text-center text-sm text-grey-400">
35474
+ We are confirming transaction status.
35475
+ <br>
35476
+ This can take a few minutes.
35477
+ </h5>
35478
+
35479
+ <div>
35480
+ <p class="text-grey-400 text-sm">
35481
+ Please wait for <span id="ctd-timer" class="font-bold"> </span> minutes
35482
+ </p>
35483
+ </div>
35484
+
35485
+ </div>
35486
+ </div>
35487
35487
  </div>`;
35488
35488
  class vc {
35489
35489
  constructor(e) {
@@ -35572,83 +35572,83 @@ class vc {
35572
35572
  return mc;
35573
35573
  }
35574
35574
  }
35575
- const pc = `<form id="mobile-money-form">\r
35576
- <div>\r
35577
- <h5 class="text-grey-400 font-semibold text-sm">Please enter your Mobile Money details to begin payment</h5>\r
35578
- \r
35579
- <div class="mt-2 flex flex-col gap-4">\r
35580
- <div class="relative bank-select-relative">\r
35581
- <div class="relative w-full">\r
35582
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Network</span>\r
35583
- <div>\r
35584
- <select class="mm-input-container appearance-none pr-7" id="network-search-input" name="network"\r
35585
- placeholder="Select Network" required></select>\r
35586
- </div>\r
35587
- <div class="absolute right-4 top-1/2 -translate-y-2/4">\r
35588
- <svg id="bank-dropdown" width="14" height="8" viewBox="0 0 14 8" fill="none"\r
35589
- xmlns="http://www.w3.org/2000/svg">\r
35590
- <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"\r
35591
- stroke-linejoin="round" />\r
35592
- </svg>\r
35593
- </div>\r
35594
- </div>\r
35595
- </div>\r
35596
- <div id="otp-message" class="hidden">\r
35597
- <div class="bg-[#FEF7ED] text-[#816039] text-sm rounded-lg p-2 font-semibold">\r
35598
- Please generate the OTP code by dialing #144*82#", then enter the OTP below\r
35599
- </div>\r
35600
- </div>\r
35601
- \r
35602
- <div class="relative w-full hidden" id="otp-input-container">\r
35603
- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">OTP</span>\r
35604
- <div>\r
35605
- <input class="mm-input-container" type="tel" id="otp-input" name="otp-input" placeholder="Enter OTP"\r
35606
- />\r
35607
- </div>\r
35608
- </div>\r
35609
- \r
35610
- <div class="relative w-full">\r
35611
- <!-- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Mobile number</span> -->\r
35612
- <div class="flex border border-tone-40 rounded-lg" id="phone-number-container">\r
35613
- <div class="grow relative flex gap-2">\r
35614
- <div class="relative flex w-full">\r
35615
- <div class="absolute left-0 top-1/2 -translate-y-2/4 border-r py-4 pl-4 pr-2 border-tone-40">\r
35616
- <div id="region-code" class="align-center gap-2">\r
35617
- </div>\r
35618
- </div>\r
35619
- <input\r
35620
- class="details-input-container ml-20 mr-11 grow py-4 pl-4 pr-2 font-normal placeholder:text-tone-50"\r
35621
- type="tel" id="phone-number-input" name="number" placeholder="Enter your mobile number" required />\r
35622
- </div>\r
35623
- </div>\r
35624
- </div>\r
35625
- <div id="phone-number-error" class="text-sm text-error font-semibold mt-2 hidden"></div>\r
35626
- </div>\r
35627
- \r
35628
- </div>\r
35629
- <div class="mt-4">\r
35630
- <button type="submit" class="details-form-button">\r
35631
- <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">\r
35632
- <path\r
35633
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
35634
- </path>\r
35635
- </svg>\r
35636
- <span id="mobile-money-button-text"> </span>\r
35637
- </button>\r
35638
- </div>\r
35639
- </div>\r
35640
- <div class="container-center mt-4 gap-1" id="pci-dsss">\r
35641
- <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">\r
35642
- <path\r
35643
- d="M4.884 0.68L1.384 2.235C1.024 2.395 0.789001 2.755 0.789001 3.15V5.5C0.789001 8.275 2.709 10.87 5.289 11.5C7.869 10.87 9.789 8.275 9.789 5.5V3.15C9.789 2.755 9.554 2.395 9.194 2.235L5.694 0.68C5.439 0.565 5.139 0.565 4.884 0.68ZM5.289 5.995H8.789C8.524 8.055 7.149 9.89 5.289 10.465V6H1.789V3.15L5.289 1.595V5.995Z"\r
35644
- fill="#6D6A73" />\r
35645
- </svg>\r
35646
- \r
35647
- <p class="text-[10px] text-grey-100">\r
35648
- PCI DSS Certified\r
35649
- </p>\r
35650
- </div>\r
35651
- \r
35575
+ const pc = `<form id="mobile-money-form">
35576
+ <div>
35577
+ <h5 class="text-grey-400 font-semibold text-sm">Please enter your Mobile Money details to begin payment</h5>
35578
+
35579
+ <div class="mt-2 flex flex-col gap-4">
35580
+ <div class="relative bank-select-relative">
35581
+ <div class="relative w-full">
35582
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Network</span>
35583
+ <div>
35584
+ <select class="mm-input-container appearance-none pr-7" id="network-search-input" name="network"
35585
+ placeholder="Select Network" required></select>
35586
+ </div>
35587
+ <div class="absolute right-4 top-1/2 -translate-y-2/4">
35588
+ <svg id="bank-dropdown" width="14" height="8" viewBox="0 0 14 8" fill="none"
35589
+ xmlns="http://www.w3.org/2000/svg">
35590
+ <path d="M1 1L7 7L13 1" stroke="#9E9BA1" stroke-width="2" stroke-linecap="round"
35591
+ stroke-linejoin="round" />
35592
+ </svg>
35593
+ </div>
35594
+ </div>
35595
+ </div>
35596
+ <div id="otp-message" class="hidden">
35597
+ <div class="bg-[#FEF7ED] text-[#816039] text-sm rounded-lg p-2 font-semibold">
35598
+ Please generate the OTP code by dialing #144*82#", then enter the OTP below
35599
+ </div>
35600
+ </div>
35601
+
35602
+ <div class="relative w-full hidden" id="otp-input-container">
35603
+ <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">OTP</span>
35604
+ <div>
35605
+ <input class="mm-input-container" type="tel" id="otp-input" name="otp-input" placeholder="Enter OTP"
35606
+ />
35607
+ </div>
35608
+ </div>
35609
+
35610
+ <div class="relative w-full">
35611
+ <!-- <span class="absolute text-xs left-0 top-1 text-grey-100 pt-1 pb-1 px-3 tracking-[0.5px]">Mobile number</span> -->
35612
+ <div class="flex border border-tone-40 rounded-lg" id="phone-number-container">
35613
+ <div class="grow relative flex gap-2">
35614
+ <div class="relative flex w-full">
35615
+ <div class="absolute left-0 top-1/2 -translate-y-2/4 border-r py-4 pl-4 pr-2 border-tone-40">
35616
+ <div id="region-code" class="align-center gap-2">
35617
+ </div>
35618
+ </div>
35619
+ <input
35620
+ class="details-input-container ml-20 mr-11 grow py-4 pl-4 pr-2 font-normal placeholder:text-tone-50"
35621
+ type="tel" id="phone-number-input" name="number" placeholder="Enter your mobile number" required />
35622
+ </div>
35623
+ </div>
35624
+ </div>
35625
+ <div id="phone-number-error" class="text-sm text-error font-semibold mt-2 hidden"></div>
35626
+ </div>
35627
+
35628
+ </div>
35629
+ <div class="mt-4">
35630
+ <button type="submit" class="details-form-button">
35631
+ <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">
35632
+ <path
35633
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
35634
+ </path>
35635
+ </svg>
35636
+ <span id="mobile-money-button-text"> </span>
35637
+ </button>
35638
+ </div>
35639
+ </div>
35640
+ <div class="container-center mt-4 gap-1" id="pci-dsss">
35641
+ <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
35642
+ <path
35643
+ d="M4.884 0.68L1.384 2.235C1.024 2.395 0.789001 2.755 0.789001 3.15V5.5C0.789001 8.275 2.709 10.87 5.289 11.5C7.869 10.87 9.789 8.275 9.789 5.5V3.15C9.789 2.755 9.554 2.395 9.194 2.235L5.694 0.68C5.439 0.565 5.139 0.565 4.884 0.68ZM5.289 5.995H8.789C8.524 8.055 7.149 9.89 5.289 10.465V6H1.789V3.15L5.289 1.595V5.995Z"
35644
+ fill="#6D6A73" />
35645
+ </svg>
35646
+
35647
+ <p class="text-[10px] text-grey-100">
35648
+ PCI DSS Certified
35649
+ </p>
35650
+ </div>
35651
+
35652
35652
  </form>`;
35653
35653
  class bc {
35654
35654
  constructor(e) {
@@ -35671,7 +35671,7 @@ class bc {
35671
35671
  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.amount = e.amount, this.totalAmount = e.totalAmount, this.merchantDetails = e.merchantDetails, this.restartTransactionProcess = e.restartTransactionProcess, this.warningError = new xn({
35672
35672
  container: this.container,
35673
35673
  onAction: this.restartTransactionProcess.bind(this)
35674
- }), this.countryCode = e.countryCode;
35674
+ }), this.countryCode = e.currency === "XOF" || e.currency === "XAF" || e.localCurrency === "XOF" || e.localCurrency === "XAF" ? e.countryCode : "";
35675
35675
  }
35676
35676
  validateForm() {
35677
35677
  const e = this.container.querySelector(
@@ -35798,45 +35798,45 @@ class bc {
35798
35798
  return pc;
35799
35799
  }
35800
35800
  }
35801
- const fc = `<div id="checkoutMobileOtp">\r
35802
- <div class="w-full">\r
35803
- <div id="otp-content" class=" grid gap-4">\r
35804
- <h5 class="text-black" id="otp-message">\r
35805
- \r
35806
- </h5>\r
35807
- \r
35808
- <div class="">\r
35809
- <div class="relative w-full">\r
35810
- <input class="otp-input text-center" type="tel" id="card-otp" name="otp" required />\r
35811
- <div id="otp-error-container" class="mt-2">\r
35812
- <p id="otp-error" class="text-sm font-semibold text-error"></p>\r
35813
- </div>\r
35814
- \r
35815
- <div class="mt-4 md:mt-6">\r
35816
- <button type="button" class="otp-button container-center" disabled="true">\r
35817
- <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">\r
35818
- <path\r
35819
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
35820
- </path>\r
35821
- </svg>\r
35822
- <span id="mobile-money-button-text">Authorize</span>\r
35823
- </button>\r
35824
- </div>\r
35825
- \r
35826
- </div>\r
35827
- \r
35828
- <div class="py-5">\r
35829
- <div class="container-center">\r
35830
- <div id="otp-loader"></div>\r
35831
- <button type="button" id="cancel-payment" class="text-sm text-tone-100 font-semibold">\r
35832
- \r
35833
- \r
35834
- Cancel\r
35835
- payment</button>\r
35836
- </div>\r
35837
- </div>\r
35838
- </div>\r
35839
- </div>\r
35801
+ const fc = `<div id="checkoutMobileOtp">
35802
+ <div class="w-full">
35803
+ <div id="otp-content" class=" grid gap-4">
35804
+ <h5 class="text-black" id="otp-message">
35805
+
35806
+ </h5>
35807
+
35808
+ <div class="">
35809
+ <div class="relative w-full">
35810
+ <input class="otp-input text-center" type="tel" id="card-otp" name="otp" required />
35811
+ <div id="otp-error-container" class="mt-2">
35812
+ <p id="otp-error" class="text-sm font-semibold text-error"></p>
35813
+ </div>
35814
+
35815
+ <div class="mt-4 md:mt-6">
35816
+ <button type="button" class="otp-button container-center" disabled="true">
35817
+ <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">
35818
+ <path
35819
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
35820
+ </path>
35821
+ </svg>
35822
+ <span id="mobile-money-button-text">Authorize</span>
35823
+ </button>
35824
+ </div>
35825
+
35826
+ </div>
35827
+
35828
+ <div class="py-5">
35829
+ <div class="container-center">
35830
+ <div id="otp-loader"></div>
35831
+ <button type="button" id="cancel-payment" class="text-sm text-tone-100 font-semibold">
35832
+
35833
+
35834
+ Cancel
35835
+ payment</button>
35836
+ </div>
35837
+ </div>
35838
+ </div>
35839
+ </div>
35840
35840
  </div>`;
35841
35841
  class gc {
35842
35842
  constructor(e) {
@@ -36266,43 +36266,43 @@ class Cc {
36266
36266
  this.attachInputListeners();
36267
36267
  }
36268
36268
  }
36269
- const Sc = `<div id="eft-authenticate-container">\r
36270
- <div class="pt-3">\r
36271
- <div class="container-center">\r
36272
- <svg width="98" height="32" viewBox="0 0 98 32" fill="none" xmlns="http://www.w3.org/2000/svg"\r
36273
- xmlns:xlink="http://www.w3.org/1999/xlink">\r
36274
- <rect width="98" height="32" fill="url(#pattern0_13486_80257)" />\r
36275
- <defs>\r
36276
- <pattern id="pattern0_13486_80257" patternContentUnits="objectBoundingBox" width="1" height="1">\r
36277
- <use xlink:href="#image0_13486_80257" transform="scale(0.00666667 0.0204167)" />\r
36278
- </pattern>\r
36279
- <image id="image0_13486_80257" width="150" height="49" preserveAspectRatio="none"\r
36280
- xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAxCAYAAAA4GFC0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjkwOTc5QTUwRjM0MTFFRUE5ODhCMTQxOUUyMjMyQTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjkwOTc5QTQwRjM0MTFFRUE5ODhCMTQxOUUyMjMyQTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0ZCODQ4MjcwRjMyMTFFRTk3MjBBOTZDQkQyQzdEQzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0ZCODQ4MjgwRjMyMTFFRTk3MjBBOTZDQkQyQzdEQzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SP/CfAAARUklEQVR42uxd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" />\r
36281
- </defs>\r
36282
- </svg>\r
36283
- </div>\r
36284
- <div class="md:w-4/6 mx-auto mt-4">\r
36285
- \r
36286
- <p class="text-lg font-medium text-center">\r
36287
- Please click the button below to\r
36288
- authenticate your payment\r
36289
- </p>\r
36290
- </div>\r
36291
- <div class="mt-8">\r
36292
- <button class="details-form-button" id="authenticate-btn">\r
36293
- <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">\r
36294
- <path\r
36295
- d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">\r
36296
- </path>\r
36297
- </svg>\r
36298
- <span id="authenticate-button-text">\r
36299
- Authenticate\r
36300
- \r
36301
- </span>\r
36302
- </button>\r
36303
- </div>\r
36304
- </div>\r
36305
- \r
36269
+ const Sc = `<div id="eft-authenticate-container">
36270
+ <div class="pt-3">
36271
+ <div class="container-center">
36272
+ <svg width="98" height="32" viewBox="0 0 98 32" fill="none" xmlns="http://www.w3.org/2000/svg"
36273
+ xmlns:xlink="http://www.w3.org/1999/xlink">
36274
+ <rect width="98" height="32" fill="url(#pattern0_13486_80257)" />
36275
+ <defs>
36276
+ <pattern id="pattern0_13486_80257" patternContentUnits="objectBoundingBox" width="1" height="1">
36277
+ <use xlink:href="#image0_13486_80257" transform="scale(0.00666667 0.0204167)" />
36278
+ </pattern>
36279
+ <image id="image0_13486_80257" width="150" height="49" preserveAspectRatio="none"
36280
+ xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAxCAYAAAA4GFC0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjkwOTc5QTUwRjM0MTFFRUE5ODhCMTQxOUUyMjMyQTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjkwOTc5QTQwRjM0MTFFRUE5ODhCMTQxOUUyMjMyQTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0ZCODQ4MjcwRjMyMTFFRTk3MjBBOTZDQkQyQzdEQzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0ZCODQ4MjgwRjMyMTFFRTk3MjBBOTZDQkQyQzdEQzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SP/CfAAARUklEQVR42uxd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" />
36281
+ </defs>
36282
+ </svg>
36283
+ </div>
36284
+ <div class="md:w-4/6 mx-auto mt-4">
36285
+
36286
+ <p class="text-lg font-medium text-center">
36287
+ Please click the button below to
36288
+ authenticate your payment
36289
+ </p>
36290
+ </div>
36291
+ <div class="mt-8">
36292
+ <button class="details-form-button" id="authenticate-btn">
36293
+ <svg class="spinner hidden" id="spinner" viewBox="0 0 24 24">
36294
+ <path
36295
+ d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
36296
+ </path>
36297
+ </svg>
36298
+ <span id="authenticate-button-text">
36299
+ Authenticate
36300
+
36301
+ </span>
36302
+ </button>
36303
+ </div>
36304
+ </div>
36305
+
36306
36306
  </div>`;
36307
36307
  class Ps {
36308
36308
  constructor(e) {