@sezzle/sezzle-react-widget 2.0.7 → 3.0.2

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.
Files changed (8) hide show
  1. package/README.md +24 -3
  2. package/dist/index.cjs +85 -75
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.es.js +85 -75
  5. package/dist/index.es.js.map +1 -1
  6. package/package.json +1 -1
  7. package/dist/index.js +0 -801
  8. package/dist/index.js.map +0 -1
package/README.md CHANGED
@@ -3,7 +3,8 @@
3
3
  `@sezzle/sezzle-react-widget` is a React-based component to render Sezzle's widget on React platforms.
4
4
 
5
5
  # Installation
6
- ______________________________________________________________________
6
+
7
+ ---
7
8
 
8
9
  Using npm:
9
10
  `npm install @sezzle/sezzle-react-widget`
@@ -22,55 +23,74 @@ Within your product page, add the two following snippets in the appropriate loca
22
23
  # Customization
23
24
 
24
25
  The following props can be specified in the element to customize the widget's content and appearance
25
- ______________________________________________________________________
26
+
27
+ ---
28
+
26
29
  - **{price} (Required)**
30
+
27
31
  - Type: String
28
32
 
29
33
  - **{merchantId} (Required)**
34
+
30
35
  - Purpose: Site's 36-character Merchant ID, found in the Business Settings of Sezzle Merchant Dashboard.
31
36
  - Type: String
32
37
 
33
38
  - **{theme}** (Optional)
39
+
34
40
  - Purpose: To control the Sezzle image variant. Use light or black-flat for light backgrounds, dark or white-flat for dark backgrounds.
35
41
  - Type: String
36
42
  - Options: light, dark, white-flat, black-flat
37
43
  - Default: light
38
44
 
39
45
  - **{alignment}** (Optional)
46
+
40
47
  - Type: String
41
48
  - Options: auto, left, center, right
42
49
  - Default: auto
43
50
 
44
51
  - **{fontWeight}** (Optional)
52
+
45
53
  - Type: Number
46
54
  - Default: 500
47
55
 
48
56
  - **{fontFamily}** (Optional)
57
+
49
58
  - Type: String
50
59
  - Default: inherit
51
60
 
52
61
  - **{fontSize}** (Optional)
62
+
53
63
  - Type: Number
54
64
  - Default: 14
55
65
 
56
66
  - **{textColor}** (Optional)
67
+
57
68
  - Type: String
58
69
  - Default: inherit
59
70
 
60
71
  - **{logoSize}** (Optional)
72
+
61
73
  - Purpose: To scale the logo (1 = 100%)
62
74
  - Type: Number
63
75
  - Default: 1
64
76
 
65
77
  - **{includeAPModal}** (Optional)
78
+
66
79
  - Purpose: To enable Afterpay's logo within the Sezzle widget
67
80
  - Type: Boolean
68
81
  - Default: false
69
82
 
70
83
  - **{minPrice}** (Optional)
84
+
71
85
  - Purpose to display a checkout minimum within the Sezzle widget
72
86
  - Type: Number
73
- - Default: 0
87
+ - Default: 20
88
+
89
+ - **{maxPrice}** (Optional)
90
+
91
+ - Purpose to display a checkout maximum within the Sezzle widget
92
+ - Type: Number
93
+ - Default: 2500
74
94
 
75
95
  # Example
76
96
 
@@ -81,6 +101,7 @@ ______________________________________________________________________
81
101
  theme={'light'}
82
102
  includeAPModal={false}
83
103
  minPrice={35}
104
+ maxPrice={3000}
84
105
  fontWeight={500}
85
106
  fontFamily={'inherit'}
86
107
  fontSize={12}
package/dist/index.cjs CHANGED
@@ -12,6 +12,8 @@ function _typeof$3(o) { "@babel/helpers - typeof"; return _typeof$3 = "function"
12
12
  function _regeneratorRuntime() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof$3(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof$3(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
13
13
  function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
14
14
  function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
15
+ var supportedLanguages = ["en", "es", "fr"];
16
+
15
17
  /**
16
18
  * This function will return the price string
17
19
  * @param price - string value
@@ -19,12 +21,12 @@ function _asyncToGenerator(n) { return function () { var t = this, e = arguments
19
21
  */
20
22
 
21
23
  function parsePriceString(price) {
22
- var formattedPrice = '';
24
+ var formattedPrice = "";
23
25
  if (!price) return formattedPrice;
24
26
  for (var i = 0; i < price.length; i++) {
25
- if (isNumeric(price[i]) || price[i] === '.' || price[i] === ',') {
27
+ if (isNumeric(price[i]) || price[i] === "." || price[i] === ",") {
26
28
  // Ignore actual sentence punctuation
27
- if (i > 0 && price[i] === '.' && isAlphabet(price[i - 1])) continue;
29
+ if (i > 0 && price[i] === "." && isAlphabet(price[i - 1])) continue;
28
30
  formattedPrice += price[i];
29
31
  }
30
32
  }
@@ -63,49 +65,48 @@ function isAlphabet(n) {
63
65
  * @return string
64
66
  */
65
67
 
66
- function getLanguage(supportedLanguages) {
67
- var lang = document.querySelector('html').lang.substring(0, 2).toLowerCase();
68
- return supportedLanguages.indexOf(lang) > -1 ? lang : 'en';
68
+ function getLanguage() {
69
+ var lang = document.querySelector("html").lang.substring(0, 2).toLowerCase();
70
+ return supportedLanguages.indexOf(lang) > -1 ? lang : "en";
69
71
  }
70
72
  function getAPModal(_x) {
71
73
  return _getAPModal.apply(this, arguments);
72
74
  }
73
75
  function _getAPModal() {
74
76
  _getAPModal = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(modalNode) {
75
- var supportedLanguages, currentLang, url, response;
77
+ var currentLang, url, response;
76
78
  return _regeneratorRuntime().wrap(function _callee$(_context) {
77
79
  while (1) switch (_context.prev = _context.next) {
78
80
  case 0:
79
- supportedLanguages = ['en', 'es', 'fr'];
80
- currentLang = getLanguage(supportedLanguages);
81
- modalNode.className = 'sezzle-checkout-modal-lightbox close-sezzle-modal sezzle-ap-modal';
81
+ currentLang = getLanguage();
82
+ modalNode.className = "sezzle-checkout-modal-lightbox close-sezzle-modal sezzle-ap-modal";
82
83
  url = "https://media.sezzle.com/afterpay/modal/".concat(currentLang, ".html");
83
- _context.prev = 4;
84
- _context.next = 7;
84
+ _context.prev = 3;
85
+ _context.next = 6;
85
86
  return fetch(url);
86
- case 7:
87
+ case 6:
87
88
  response = _context.sent;
88
89
  if (response.ok) {
89
- _context.next = 10;
90
+ _context.next = 9;
90
91
  break;
91
92
  }
92
93
  throw new Error("Failed to fetch afterpay modal, status: ".concat(response.status));
93
- case 10:
94
- _context.next = 12;
94
+ case 9:
95
+ _context.next = 11;
95
96
  return response.text();
96
- case 12:
97
+ case 11:
97
98
  modalNode.innerHTML = _context.sent;
98
- _context.next = 18;
99
+ _context.next = 17;
99
100
  break;
100
- case 15:
101
- _context.prev = 15;
102
- _context.t0 = _context["catch"](4);
101
+ case 14:
102
+ _context.prev = 14;
103
+ _context.t0 = _context["catch"](3);
103
104
  console.error(_context.t0);
104
- case 18:
105
+ case 17:
105
106
  case "end":
106
107
  return _context.stop();
107
108
  }
108
- }, _callee, null, [[4, 15]]);
109
+ }, _callee, null, [[3, 14]]);
109
110
  }));
110
111
  return _getAPModal.apply(this, arguments);
111
112
  }
@@ -160,11 +161,11 @@ var pieAlt$2 = "pie at";
160
161
  var schedulePayments$2 = "3. Schedule the rest of your payments.";
161
162
  var selectSezzle$2 = "1. Pay later by selecting Sezzle at checkout.";
162
163
  var sezzleHeader$2 = "Buy Now. Pay Later.";
163
- var sezzleHeaderChild$2 = "Available for purchases of $20 to $2,500.<sup>1</sup>";
164
+ var sezzleHeaderChild$2 = "Available for purchases of $%%min-price%% to $%%max-price%%.<sup>1</sup>";
164
165
  var sezzleHeaderChild2$2 = "Instant decision. No impact to your credit score.<sup>2</sup>";
165
166
  var sezzleInfo$2 = "Sezzle Information";
166
167
  var template$2 = "or %%numberOfPayments%% interest-free payments of %%price%% with %%logo%%%%afterpay%%%%min-price%% %%info%%";
167
- var terms1$2 = "<sup>1</sup>Subject to approval. <a href='https://www.sezzle.com/legal' target='_blank'>Click here for complete terms.</a> First payment date and amount may fluctuate based on eligibility and time of merchant order completion.";
168
+ var terms1$2 = "<sup>1</sup>Subject to approval. <a href='https://legal.sezzle.com/user' target='_blank'>Click here for complete terms.</a> First payment date and amount may fluctuate based on eligibility and time of merchant order completion.";
168
169
  var terms2$2 = "<sup>2</sup>Signing up for Sezzle will not impact your credit score. You may opt-in to our free credit reporting program, Sezzle Up, to have your payments reported to credit bureaus.";
169
170
  var termsHiw$2 = "<a href='https://sezzle.com/how-it-works' target='_blank'>Learn more about Sezzle buy now, pay later here.</a>";
170
171
  var today$2 = "Today";
@@ -209,11 +210,11 @@ var pieAlt$1 = "tarte à";
209
210
  var schedulePayments$1 = "3. Planifiez le reste de vos paiements.";
210
211
  var selectSezzle$1 = "1. Payez plus tard en sélectionnant Sezzle au moment du paiement.";
211
212
  var sezzleHeader$1 = "Achetez maintenant. Payez plus tard.";
212
- var sezzleHeaderChild$1 = "Disponible pour des achats de 20 $ à 2 500 $. <sup>1</sup>";
213
+ var sezzleHeaderChild$1 = "Disponible pour des achats de %%min-price%% $ à %%max-price%% $. <sup>1</sup>";
213
214
  var sezzleHeaderChild2$1 = "Décision instantanée. Aucun impact sur votre cote de crédit. <sup>2</sup>";
214
215
  var sezzleInfo$1 = "Informations sur Sezzle";
215
216
  var template$1 = "ou %%numberOfPayments%% paiements sans intérêt de %%price%% avec %%logo%%%%afterpay%%%%min-price%% %%info%%";
216
- var terms1$1 = "<sup>1</sup> Sous réserve d'approbation. <a href='https://legal.sezzle.com/fr-ca/' target='_blank'> Cliquez ici pour consulter les conditions complètes. </a> La date et le montant du premier paiement peuvent fluctuer en fonction de l'éligibilité et de l'heure de réalisation de la commande par le commerçant.";
217
+ var terms1$1 = "<sup>1</sup> Sous réserve d'approbation. <a href='https://legal.sezzle.com/user/fr-ca/' target='_blank'> Cliquez ici pour consulter les conditions complètes. </a> La date et le montant du premier paiement peuvent fluctuer en fonction de l'éligibilité et de l'heure de réalisation de la commande par le commerçant.";
217
218
  var terms2$1 = "<sup>2</sup> L'inscription à Sezzle n'aura aucun impact sur votre score de crédit. Vous pouvez opter pour notre programme gratuit de rapport de crédit, Sezzle Up, pour que vos paiements soient signalés aux agences d'évaluation du crédit.";
218
219
  var termsHiw$1 = "<a href='https://sezzle.com/fr-ca/how-it-works/' target='_blank'> Apprenez-en plus sur Sezzle achetez maintenant, payez plus tard ici. </a>";
219
220
  var today$1 = "Aujourd'hui";
@@ -258,11 +259,11 @@ var pieAlt = "pastel en";
258
259
  var schedulePayments = "3. Programa el resto de tus pagos.";
259
260
  var selectSezzle = "1. Pague más tarde seleccionando Sezzle al finalizar la compra.";
260
261
  var sezzleHeader = "Compra ahora. Paga después.";
261
- var sezzleHeaderChild = "Disponible para compras de $20 a $2,500. <sup>1</sup>";
262
+ var sezzleHeaderChild = "Disponible para compras de $%%min-price%% a $%%max-price%%. <sup>1</sup>";
262
263
  var sezzleHeaderChild2 = "Decisión instantánea. No afecta su calificación crediticia. <sup>2</sup>";
263
264
  var sezzleInfo = "Información sobre Sezzle";
264
265
  var template = "o %%numberOfPayments%% pagos sin intereses de %%price%% con %%logo%%%%afterpay%%%%min-price%% %%info%%";
265
- var terms1 = "<sup>1</sup> Sujeto a aprobación. <a href='https://www.sezzle.com/legal' target='_blank'> Haga clic aquí para conocer los términos completos. </a> La fecha y el monto del primer pago pueden fluctuar según la elegibilidad y el momento en que el comerciante complete el pedido.";
266
+ var terms1 = "<sup>1</sup> Sujeto a aprobación. <a href='https://legal.sezzle.com/user' target='_blank'> Haga clic aquí para conocer los términos completos. </a> La fecha y el monto del primer pago pueden fluctuar según la elegibilidad y el momento en que el comerciante complete el pedido.";
266
267
  var terms2 = "<sup>2</sup> Registrarse en Sezzle no afectará su calificación crediticia. Puede optar por inscribirse en nuestro programa gratuito de informes crediticios, Sezzle Up, para que sus pagos se informen a las agencias de crédito.";
267
268
  var termsHiw = "<a href='https://sezzle.com/how-it-works' target='_blank'> Obtenga más información sobre Sezzle. Compre ahora, pague después aquí. </a>";
268
269
  var today = "Hoy";
@@ -304,8 +305,7 @@ var translationsMap$1 = {
304
305
  fr: frTranslations,
305
306
  es: esTranslations
306
307
  };
307
- var supportedLanguages = Object.keys(translationsMap$1);
308
- var currentLang = getLanguage(supportedLanguages);
308
+ var currentLang = getLanguage();
309
309
  var translations = translationsMap$1[currentLang];
310
310
  var modalHTML = "\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" lang=\"".concat(translations.locale, "\"\n aria-label=\"").concat(translations.sezzleInfo, "\" aria-description=\"").concat(translations.learnMore, "\" style=\"display: block;\">\n <div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"").concat(translations.aboutSezzle, "\"\n class=\"sezzle-checkout-modal-hidden\">\n <div class=\"sezzle-modal\">\n <div><button role=\"button\" aria-label=\"").concat(translations.closeSezzleModal, "\" class=\"close-sezzle-modal\"></button></div>\n <div class=\"sezzle-logo\" title=\"Sezzle\"></div>\n <div id=\"sezzle-modal-core-content\" class=\"sezzle-modal-content\">\n <div id=\"tp-widget-wrapper\" class=\"tp-widget-wrapper visible\">\n <a id=\"profile-link\" target=\"_blank\" href=\"https://www.trustpilot.com/review/sezzle.com?utm_medium=trustbox&amp;utm_source=MicroCombo\">\n <!-- Stars -->\n <div id=\"tp-widget-stars\" class=\"tp-widget-stars\">\n <div class=\"\">\n <div class=\"tp-stars tp-stars--4 tp-stars--4--half\">\n <div style=\"position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 18.326693227091635%;\">\n\n <svg role=\"img\" viewBox=\"0 0 251 46\" xmlns=\"http://www.w3.org/2000/svg\" style=\"position: absolute; height: 100%; width: 100%; left: 0; top: 0;\">\n <title id=\"starRating-tfnn0cd6r0c\" lang=\"en-US\">").concat(translations.trustPilotTitle, "</title>\n <g class=\"tp-star\">\n <path class=\"tp-star__canvas\" fill=\"#dcdce6\" d=\"M0 46.330002h46.375586V0H0z\"></path>\n <path class=\"tp-star__shape\" d=\"M39.533936 19.711433L13.230239 38.80065l3.838216-11.797827L7.02115 19.711433h12.418975l3.837417-11.798624 3.837418 11.798624h12.418975zM23.2785 31.510075l7.183595-1.509576 2.862114 8.800152L23.2785 31.510075z\" fill=\"#FFF\"></path>\n </g>\n <g class=\"tp-star\">\n <path class=\"tp-star__canvas\" fill=\"#dcdce6\" d=\"M51.24816 46.330002h46.375587V0H51.248161z\"></path>\n <path class=\"tp-star__canvas--half\" fill=\"#dcdce6\" d=\"M51.24816 46.330002h23.187793V0H51.248161z\"></path>\n <path class=\"tp-star__shape\" d=\"M74.990978 31.32991L81.150908 30 84 39l-9.660206-7.202786L64.30279 39l3.895636-11.840666L58 19.841466h12.605577L74.499595 8l3.895637 11.841466H91L74.990978 31.329909z\" fill=\"#FFF\"></path>\n </g>\n <g class=\"tp-star\">\n <path class=\"tp-star__canvas\" fill=\"#dcdce6\" d=\"M102.532209 46.330002h46.375586V0h-46.375586z\"></path>\n <path class=\"tp-star__canvas--half\" fill=\"#dcdce6\" d=\"M102.532209 46.330002h23.187793V0h-23.187793z\"></path>\n <path class=\"tp-star__shape\" d=\"M142.066994 19.711433L115.763298 38.80065l3.838215-11.797827-10.047304-7.291391h12.418975l3.837418-11.798624 3.837417 11.798624h12.418975zM125.81156 31.510075l7.183595-1.509576 2.862113 8.800152-10.045708-7.290576z\" fill=\"#FFF\"></path>\n </g>\n <g class=\"tp-star\">\n <path class=\"tp-star__canvas\" fill=\"#dcdce6\" d=\"M153.815458 46.330002h46.375586V0h-46.375586z\"></path>\n <path class=\"tp-star__canvas--half\" fill=\"#dcdce6\" d=\"M153.815458 46.330002h23.187793V0h-23.187793z\"></path>\n <path class=\"tp-star__shape\" d=\"M193.348355 19.711433L167.045457 38.80065l3.837417-11.797827-10.047303-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418974zM177.09292 31.510075l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z\" fill=\"#FFF\"></path>\n </g>\n <g class=\"tp-star\">\n <path class=\"tp-star__canvas\" fill=\"#dcdce6\" d=\"M205.064416 46.330002h46.375587V0h-46.375587z\"></path>\n <path class=\"tp-star__canvas--half\" fill=\"#dcdce6\" d=\"M205.064416 46.330002h23.187793V0h-23.187793z\"></path>\n <path class=\"tp-star__shape\" d=\"M244.597022 19.711433l-26.3029 19.089218 3.837419-11.797827-10.047304-7.291391h12.418974l3.837418-11.798624 3.837418 11.798624h12.418975zm-16.255436 11.798642l7.183595-1.509576 2.862114 8.800152-10.045709-7.290576z\" fill=\"#FFF\"></path>\n </g>\n </svg>\n </div>\n </div>\n </div>\n </div>\n <div class=\"widget-info\">\n <!-- Business Info -->\n <div id=\"tp-widget-rating\" class=\"tp-widget-rating\">").concat(translations.trustPilotReviews, "</div>\n <!-- Logo -->\n <div id=\"tp-widget-logo\" class=\"tp-widget-logo\">\n <div class=\"\">\n <div style=\"position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 24.6031746031746%;\">\n <svg role=\"img\" viewBox=\"0 0 126 31\" xmlns=\"http://www.w3.org/2000/svg\" style=\"position: absolute; height: 100%; width: 100%; left: 0; top: 0;\">\n <title id=\"trustpilotLogo-wwxihtot4h\">Trustpilot</title>\n <path class=\"tp-logo__text\" d=\"M33.074774 11.07005H45.81806v2.364196h-5.010656v13.290316h-2.755306V13.434246h-4.988435V11.07005h.01111zm12.198892 4.319629h2.355341v2.187433h.04444c.077771-.309334.222203-.60762.433295-.894859.211092-.287239.466624-.56343.766597-.79543.299972-.243048.633276-.430858.999909-.585525.366633-.14362.744377-.220953 1.12212-.220953.288863 0 .499955.011047.611056.022095.1111.011048.222202.033143.344413.04419v2.408387c-.177762-.033143-.355523-.055238-.544395-.077333-.188872-.022096-.366633-.033143-.544395-.033143-.422184 0-.822148.08838-1.199891.254096-.377744.165714-.699936.41981-.977689.740192-.277753.331429-.499955.729144-.666606 1.21524-.166652.486097-.244422 1.03848-.244422 1.668195v5.39125h-2.510883V15.38968h.01111zm18.220567 11.334883H61.02779v-1.579813h-.04444c-.311083.574477-.766597 1.02743-1.377653 1.369908-.611055.342477-1.233221.51924-1.866497.51924-1.499864 0-2.588654-.364573-3.25526-1.104765-.666606-.740193-.999909-1.856005-.999909-3.347437V15.38968h2.510883v6.948968c0 .994288.188872 1.701337.577725 2.1101.377744.408763.922139.618668 1.610965.618668.533285 0 .96658-.077333 1.322102-.243048.355524-.165714.644386-.37562.855478-.65181.222202-.265144.377744-.596574.477735-.972194.09999-.37562.144431-.784382.144431-1.226288v-6.573349h2.510883v11.323836zm4.27739-3.634675c.07777.729144.355522 1.237336.833257 1.535623.488844.287238 1.06657.441905 1.744286.441905.233312 0 .499954-.022095.799927-.055238.299973-.033143.588836-.110476.844368-.209905.266642-.099429.477734-.254096.655496-.452954.166652-.198857.244422-.452953.233312-.773335-.01111-.320381-.133321-.585525-.355523-.784382-.222202-.209906-.499955-.364573-.844368-.497144-.344413-.121525-.733267-.232-1.17767-.320382-.444405-.088381-.888809-.18781-1.344323-.287239-.466624-.099429-.922138-.232-1.355432-.37562-.433294-.14362-.822148-.342477-1.166561-.596573-.344413-.243048-.622166-.56343-.822148-.950097-.211092-.386668-.311083-.861716-.311083-1.436194 0-.618668.155542-1.12686.455515-1.54667.299972-.41981.688826-.75124 1.14434-1.005336.466624-.254095.97769-.430858 1.544304-.541334.566615-.099429 1.11101-.154667 1.622075-.154667.588836 0 1.15545.066286 1.688736.18781.533285.121524 1.02213.320381 1.455423.60762.433294.276191.788817.640764 1.07768 1.08267.288863.441905.466624.98324.544395 1.612955h-2.621984c-.122211-.596572-.388854-1.005335-.822148-1.204193-.433294-.209905-.933248-.309334-1.488753-.309334-.177762 0-.388854.011048-.633276.04419-.244422.033144-.466624.088382-.688826.165715-.211092.077334-.388854.198858-.544395.353525-.144432.154667-.222203.353525-.222203.60762 0 .309335.111101.552383.322193.740193.211092.18781.488845.342477.833258.475048.344413.121524.733267.232 1.177671.320382.444404.088381.899918.18781 1.366542.287239.455515.099429.899919.232 1.344323.37562.444404.14362.833257.342477 1.17767.596573.344414.254095.622166.56343.833258.93905.211092.37562.322193.850668.322193 1.40305 0 .673906-.155541 1.237336-.466624 1.712385-.311083.464001-.711047.850669-1.199891 1.137907-.488845.28724-1.04435.508192-1.644295.640764-.599946.132572-1.199891.198857-1.788727.198857-.722156 0-1.388762-.077333-1.999818-.243048-.611056-.165714-1.14434-.408763-1.588745-.729144-.444404-.33143-.799927-.740192-1.05546-1.226289-.255532-.486096-.388853-1.071621-.411073-1.745528h2.533103v-.022095zm8.288135-7.700208h1.899828v-3.402675h2.510883v3.402675h2.26646v1.867052h-2.26646v6.054109c0 .265143.01111.486096.03333.684954.02222.18781.07777.353524.155542.486096.07777.132572.199981.232.366633.298287.166651.066285.377743.099428.666606.099428.177762 0 .355523 0 .533285-.011047.177762-.011048.355523-.033143.533285-.077334v1.933338c-.277753.033143-.555505.055238-.811038.088381-.266642.033143-.533285.04419-.811037.04419-.666606 0-1.199891-.066285-1.599855-.18781-.399963-.121523-.722156-.309333-.944358-.552381-.233313-.243049-.377744-.541335-.466625-.905907-.07777-.364573-.13332-.784383-.144431-1.248384v-6.683825h-1.899827v-1.889147h-.02222zm8.454788 0h2.377562V16.9253h.04444c.355523-.662858.844368-1.12686 1.477644-1.414098.633276-.287239 1.310992-.430858 2.055369-.430858.899918 0 1.677625.154667 2.344231.475048.666606.309335 1.222111.740193 1.666515 1.292575.444405.552382.766597 1.193145.9888 1.92229.222202.729145.333303 1.513527.333303 2.3421 0 .762288-.099991 1.50248-.299973 2.20953-.199982.718096-.499955 1.347812-.899918 1.900194-.399964.552383-.911029.98324-1.533194 1.31467-.622166.33143-1.344323.497144-2.18869.497144-.366634 0-.733267-.033143-1.0999-.099429-.366634-.066286-.722157-.176762-1.05546-.320381-.333303-.14362-.655496-.33143-.933249-.56343-.288863-.232-.522175-.497144-.722157-.79543h-.04444v5.656393h-2.510883V15.38968zm8.77698 5.67849c0-.508193-.06666-1.005337-.199981-1.491433-.133321-.486096-.333303-.905907-.599946-1.281527-.266642-.37562-.599945-.673906-.988799-.894859-.399963-.220953-.855478-.342477-1.366542-.342477-1.05546 0-1.855387.364572-2.388672 1.093717-.533285.729144-.799928 1.701337-.799928 2.916578 0 .574478.066661 1.104764.211092 1.59086.144432.486097.344414.905908.633276 1.259432.277753.353525.611056.629716.99991.828574.388853.209905.844367.309334 1.355432.309334.577725 0 1.05546-.121524 1.455423-.353525.399964-.232.722157-.541335.97769-.905907.255531-.37562.444403-.79543.555504-1.270479.099991-.475049.155542-.961145.155542-1.458289zm4.432931-9.99812h2.510883v2.364197h-2.510883V11.07005zm0 4.31963h2.510883v11.334883h-2.510883V15.389679zm4.755124-4.31963h2.510883v15.654513h-2.510883V11.07005zm10.210184 15.963847c-.911029 0-1.722066-.154667-2.433113-.452953-.711046-.298287-1.310992-.718097-1.810946-1.237337-.488845-.530287-.866588-1.160002-1.12212-1.889147-.255533-.729144-.388854-1.535622-.388854-2.408386 0-.861716.133321-1.657147.388853-2.386291.255533-.729145.633276-1.35886 1.12212-1.889148.488845-.530287 1.0999-.93905 1.810947-1.237336.711047-.298286 1.522084-.452953 2.433113-.452953.911028 0 1.722066.154667 2.433112.452953.711047.298287 1.310992.718097 1.810947 1.237336.488844.530287.866588 1.160003 1.12212 1.889148.255532.729144.388854 1.524575.388854 2.38629 0 .872765-.133322 1.679243-.388854 2.408387-.255532.729145-.633276 1.35886-1.12212 1.889147-.488845.530287-1.0999.93905-1.810947 1.237337-.711046.298286-1.522084.452953-2.433112.452953zm0-1.977528c.555505 0 1.04435-.121524 1.455423-.353525.411074-.232.744377-.541335 1.01102-.916954.266642-.37562.455513-.806478.588835-1.281527.12221-.475049.188872-.961145.188872-1.45829 0-.486096-.066661-.961144-.188872-1.44724-.122211-.486097-.322193-.905907-.588836-1.281527-.266642-.37562-.599945-.673907-1.011019-.905907-.411074-.232-.899918-.353525-1.455423-.353525-.555505 0-1.04435.121524-1.455424.353525-.411073.232-.744376.541334-1.011019.905907-.266642.37562-.455514.79543-.588835 1.281526-.122211.486097-.188872.961145-.188872 1.447242 0 .497144.06666.98324.188872 1.458289.12221.475049.322193.905907.588835 1.281527.266643.37562.599946.684954 1.01102.916954.411073.243048.899918.353525 1.455423.353525zm6.4883-9.66669h1.899827v-3.402674h2.510883v3.402675h2.26646v1.867052h-2.26646v6.054109c0 .265143.01111.486096.03333.684954.02222.18781.07777.353524.155541.486096.077771.132572.199982.232.366634.298287.166651.066285.377743.099428.666606.099428.177762 0 .355523 0 .533285-.011047.177762-.011048.355523-.033143.533285-.077334v1.933338c-.277753.033143-.555505.055238-.811038.088381-.266642.033143-.533285.04419-.811037.04419-.666606 0-1.199891-.066285-1.599855-.18781-.399963-.121523-.722156-.309333-.944358-.552381-.233313-.243049-.377744-.541335-.466625-.905907-.07777-.364573-.133321-.784383-.144431-1.248384v-6.683825h-1.899827v-1.889147h-.02222z\" fill=\"#191919\"></path>\n <path class=\"tp-logo__star\" fill=\"#00B67A\" d=\"M30.141707 11.07005H18.63164L15.076408.177071l-3.566342 10.892977L0 11.059002l9.321376 6.739063-3.566343 10.88193 9.321375-6.728016 9.310266 6.728016-3.555233-10.88193 9.310266-6.728016z\"></path>\n <path class=\"tp-logo__star-notch\" fill=\"#005128\" d=\"M21.631369 20.26169l-.799928-2.463625-5.755033 4.153914z\"></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </a>\n </div>\n <header class=\"sezzle-header\">").concat(translations.sezzleHeader, "\n </header>\n <p class=\"sezzle-row\">\n <span>").concat(translations.sezzleHeaderChild, "</span>\n <span>").concat(translations.sezzleHeaderChild2, "</span>\n </p>\n <div class=\"sezzle-four-pay ").concat(currentLang !== "en" ? "sezzle-four-pay-fr-es" : "", "\">\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 25%\">\n <svg width=\"35\" height=\"35\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -7.62939e-05C22.6264 -7.64088e-05 25.2272 0.51724 27.6537 1.52233C30.0802 2.52743 32.285 4.00062 34.1421 5.85779C35.9993 7.71496 37.4725 9.91974 38.4776 12.3463C39.4827 14.7728 40 17.3735 40 19.9999L30 19.9999C30 18.6867 29.7413 17.3863 29.2388 16.1731C28.7362 14.9598 27.9997 13.8574 27.0711 12.9289C26.1425 12.0003 25.0401 11.2637 23.8268 10.7611C22.6136 10.2586 21.3132 9.99992 20 9.99992L20 -7.62939e-05Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M40 19.9999C40 22.7613 37.7614 24.9998 35 24.9998C32.2386 24.9998 30 22.7613 30 19.9999C30 17.2385 32.2386 14.9998 35 14.9998C37.7614 14.9998 40 17.2385 40 19.9999Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"35\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.today, "</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 50%\">\n <svg width=\"35\" height=\"35\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M40 20C40 31.0457 31.0457 40 20 40C17.2386 40 15 37.7614 15 35C15 32.2386 17.2386 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10V0C31.0457 0 40 8.9543 40 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.week, " 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 75%\">\n <svg width=\"35\" height=\"35\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -8.74228e-07C23.9556 -1.04713e-06 27.8224 1.17298 31.1114 3.37061C34.4004 5.56824 36.9638 8.69181 38.4776 12.3463C39.9913 16.0009 40.3874 20.0222 39.6157 23.9018C38.844 27.7814 36.9392 31.3451 34.1421 34.1421C31.3451 36.9392 27.7814 38.844 23.9018 39.6157C20.0222 40.3874 16.0009 39.9913 12.3463 38.4776C8.69181 36.9638 5.56824 34.4004 3.37061 31.1114C1.17298 27.8224 -7.48492e-07 23.9556 -8.74228e-07 20L10 20C10 21.9778 10.5865 23.9112 11.6853 25.5557C12.7841 27.2002 14.3459 28.4819 16.1732 29.2388C18.0004 29.9957 20.0111 30.1937 21.9509 29.8079C23.8907 29.422 25.6725 28.4696 27.0711 27.0711C28.4696 25.6725 29.422 23.8907 29.8079 21.9509C30.1937 20.0111 29.9957 18.0004 29.2388 16.1732C28.4819 14.3459 27.2002 12.7841 25.5557 11.6853C23.9112 10.5865 21.9778 10 20 10L20 -8.74228e-07Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M10 20C10 22.7614 7.76142 25 5 25C2.23858 25 -8.74228e-07 22.7614 -8.74228e-07 20C-8.74228e-07 17.2386 2.23858 15 5 15C7.76142 15 10 17.2386 10 20Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"5\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.week, " 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 100%\">\n <svg width=\"35\" height=\"35\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.week, " 6<sup>3</sup></span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">\n ").concat(translations.selectSezzle, "\n </p>\n <p class=\"single-feature\">\n ").concat(translations.completePurchase, "\n </p>\n <p class=\"single-feature\">\n ").concat(translations.schedulePayments, "\n </p>\n </div>\n <div class=\"terms-container\">\n <p class=\"terms\">").concat(translations.terms1, "</p>\n <p class=\"terms\">").concat(translations.terms2, "</p>\n <p class=\"terms\"><span class=\"webbank-terms\">").concat(translations.webBankTerms, "</span><br/>").concat(translations.termsHiw, "</p>\n </div>\n </div>\n </div>\n </div>\n</section>\n\n");
311
311
 
@@ -396,7 +396,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
396
396
  break;
397
397
  default:
398
398
  modalElement.className = "sezzle-checkout-modal-lightbox close-sezzle-modal";
399
- modalElement.innerHTML = modalHTML;
399
+ var currentLang = getLanguage();
400
+ var updatedModalHTML = modalHTML.replace("%%min-price%%", Intl.NumberFormat(currentLang).format(props.minPrice)).replace("%%max-price%%", Intl.NumberFormat(currentLang).format(props.maxPrice));
401
+ modalElement.innerHTML = updatedModalHTML;
400
402
  }
401
403
  state = _objectSpread$2(_objectSpread$2({}, state), {}, {
402
404
  modalElement: modalElement
@@ -405,6 +407,11 @@ var Modal = /*#__PURE__*/function (_React$Component) {
405
407
  state.modalElement.style.display = state.isModalVisible ? "block" : "none";
406
408
  return state;
407
409
  }
410
+ }, {
411
+ key: "replacePlaceholder",
412
+ value: function replacePlaceholder(text, placeholder, value) {
413
+ return text.replace(placeholder, value);
414
+ }
408
415
  }]);
409
416
  }(React__default["default"].Component);
410
417
  Modal.propTypes = {
@@ -443,7 +450,7 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
443
450
  config: _this.props.config,
444
451
  sezzle: false,
445
452
  afterpay: false,
446
- modalsToShow: ['sezzle', 'afterpay']
453
+ modalsToShow: ["sezzle", "afterpay"]
447
454
  };
448
455
  return _this;
449
456
  }
@@ -454,21 +461,20 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
454
461
  var _this2 = this;
455
462
  var numberOfPayments = 4;
456
463
  var logoURLs = {
457
- light: 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg',
458
- dark: 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor_WhiteWM.svg',
459
- 'black-flat': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_BlackAlt.svg',
460
- 'white-flat': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_WhiteAlt.svg'
464
+ light: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg",
465
+ dark: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor_WhiteWM.svg",
466
+ "black-flat": "https://media.sezzle.com/branding/2.0/Sezzle_Logo_BlackAlt.svg",
467
+ "white-flat": "https://media.sezzle.com/branding/2.0/Sezzle_Logo_WhiteAlt.svg"
461
468
  };
462
- var supportedLanguages = Object.keys(translationsMap);
463
- var language = getLanguage(supportedLanguages);
469
+ var language = getLanguage();
464
470
  var translations = translationsMap[language];
465
471
  var subtemplates = [];
466
- translations.template.split('%%').forEach(function (subTemplate, index) {
472
+ translations.template.split("%%").forEach(function (subTemplate, index) {
467
473
  switch (subTemplate) {
468
- case 'numberOfPayments':
474
+ case "numberOfPayments":
469
475
  subtemplates.push(numberOfPayments);
470
476
  break;
471
- case 'price':
477
+ case "price":
472
478
  // eslint-disable-next-line no-case-declarations
473
479
  var priceElement = /*#__PURE__*/React__default["default"].createElement("span", {
474
480
  className: "sezzle-payment-amount sezzle-button-text",
@@ -476,46 +482,46 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
476
482
  }, getFormattedPrice(_this2.state.config.price, numberOfPayments));
477
483
  subtemplates.push(priceElement);
478
484
  break;
479
- case 'logo':
485
+ case "logo":
480
486
  // eslint-disable-next-line no-case-declarations
481
487
  var logoElement = /*#__PURE__*/React__default["default"].createElement("img", {
482
488
  alt: "Sezzle",
483
- className: "sezzle-logo szl-".concat(_this2.state.config.theme === 'dark' || _this2.state.config.theme === 'white-flat' ? 'dark' : 'light', "-image"),
489
+ className: "sezzle-logo szl-".concat(_this2.state.config.theme === "dark" || _this2.state.config.theme === "white-flat" ? "dark" : "light", "-image"),
484
490
  src: logoURLs[_this2.state.config.theme] || logoURLs.light,
485
491
  style: {
486
492
  transformOrigin: "top-".concat(_this2.state.config.alignment),
487
493
  transform: "scale(".concat(_this2.state.config.logoSize, ")"),
488
- cursor: 'pointer',
489
- width: '74px',
490
- height: '18px'
494
+ cursor: "pointer",
495
+ width: "74px",
496
+ height: "18px"
491
497
  },
492
498
  key: index,
493
499
  onClick: function onClick() {
494
- return _this2.openModal('sezzle');
500
+ return _this2.openModal("sezzle");
495
501
  }
496
502
  });
497
503
  subtemplates.push(logoElement);
498
504
  break;
499
- case 'info':
505
+ case "info":
500
506
  // eslint-disable-next-line no-case-declarations
501
507
  var infoElement = /*#__PURE__*/React__default["default"].createElement("div", {
502
508
  "aria-label": "".concat(translations.clickHere),
503
509
  className: "sezzle-info-icon",
504
510
  key: index,
505
511
  onClick: function onClick() {
506
- return _this2.openModal('sezzle');
512
+ return _this2.openModal("sezzle");
507
513
  }
508
514
  }, "\u24D8");
509
515
  subtemplates.push(infoElement);
510
516
  break;
511
- case 'afterpay':
517
+ case "afterpay":
512
518
  if (_this2.state.config.includeAPModal) {
513
519
  subtemplates.push("".concat(translations.or));
514
520
  var apLogo = /*#__PURE__*/React__default["default"].createElement("img", {
515
521
  className: "sezzle-ap-logo ap-modal-info-link no-sezzle-info",
516
- src: 'https://media.sezzle.com/sezzle-credit-website-assets/ap-badge-black-on-mint.svg',
522
+ src: "https://media.sezzle.com/sezzle-credit-website-assets/ap-badge-black-on-mint.svg",
517
523
  onClick: function onClick() {
518
- return _this2.openModal('afterpay');
524
+ return _this2.openModal("afterpay");
519
525
  },
520
526
  key: index,
521
527
  alt: "Afterpay"
@@ -523,8 +529,9 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
523
529
  subtemplates.push(apLogo);
524
530
  }
525
531
  break;
526
- case 'min-price':
527
- if (_this2.state.config.minPrice && !_this2.state.config.includeAPModal) {
532
+ case "min-price":
533
+ var priceFloat = parsePrice(parsePriceString(_this2.state.config.price));
534
+ if (_this2.state.config.minPrice > priceFloat && !_this2.state.config.includeAPModal) {
528
535
  subtemplates.push(" ".concat(translations.ordersOver, " $").concat(_this2.state.config.minPrice));
529
536
  }
530
537
  break;
@@ -537,7 +544,7 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
537
544
  }, {
538
545
  key: "openModal",
539
546
  value: function openModal(modalType) {
540
- modalType === 'afterpay' ? this.setState({
547
+ modalType === "afterpay" ? this.setState({
541
548
  afterpay: true
542
549
  }) : this.setState({
543
550
  sezzle: true
@@ -546,7 +553,7 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
546
553
  }, {
547
554
  key: "closeModal",
548
555
  value: function closeModal(modalType) {
549
- modalType === 'afterpay' ? this.setState({
556
+ modalType === "afterpay" ? this.setState({
550
557
  afterpay: false
551
558
  }) : this.setState({
552
559
  sezzle: false
@@ -557,25 +564,25 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
557
564
  value: function render() {
558
565
  var _this3 = this;
559
566
  return /*#__PURE__*/React__default["default"].createElement("div", {
560
- className: "sezzle-shopify-info-button sezzle-".concat(this.state.config.merchantId || '')
567
+ className: "sezzle-shopify-info-button sezzle-".concat(this.state.config.merchantId || "")
561
568
  }, /*#__PURE__*/React__default["default"].createElement("div", {
562
569
  "aria-haspopup": "dialog",
563
570
  role: "button",
564
571
  tabIndex: "0",
565
- className: "sezzle-checkout-button-wrapper sezzle-modal-link sezzle-".concat(this.state.config.merchantId || '', " sezzle-").concat(this.state.config.alignment || 'auto'),
572
+ className: "sezzle-checkout-button-wrapper sezzle-modal-link sezzle-".concat(this.state.config.merchantId || "", " sezzle-").concat(this.state.config.alignment || "auto"),
566
573
  style: {
567
- cursor: 'pointer'
574
+ cursor: "pointer"
568
575
  },
569
576
  onClick: function onClick() {
570
- return _this3.openModal('sezzle');
577
+ return _this3.openModal("sezzle");
571
578
  }
572
579
  }, /*#__PURE__*/React__default["default"].createElement("div", {
573
- className: "sezzle-button-text sezzle-".concat(this.state.config.alignment || 'auto', " szl-").concat(this.state.config.theme === 'dark' || this.state.config.theme === 'white-flat' ? 'dark' : 'light'),
580
+ className: "sezzle-button-text sezzle-".concat(this.state.config.alignment || "auto", " szl-").concat(this.state.config.theme === "dark" || this.state.config.theme === "white-flat" ? "dark" : "light"),
574
581
  style: {
575
582
  fontWeight: this.state.config.fontWeight || 500,
576
- fontFamily: this.state.config.fontFamily || 'inherit',
577
- fontSize: (this.state.config.fontSize || 14) + 'px',
578
- color: this.state.config.textColor || 'inherit'
583
+ fontFamily: this.state.config.fontFamily || "inherit",
584
+ fontSize: (this.state.config.fontSize || 14) + "px",
585
+ color: this.state.config.textColor || "inherit"
579
586
  }
580
587
  }, this.renderSezzleWidgetText())), this.state.modalsToShow.map(function (modal, index) {
581
588
  return /*#__PURE__*/React__default["default"].createElement(Modal, {
@@ -584,7 +591,9 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
584
591
  toggleModalVisibility: _this3.state[modal],
585
592
  callbackModalClose: function callbackModalClose(modal) {
586
593
  return _this3.closeModal(modal);
587
- }
594
+ },
595
+ minPrice: _this3.state.config.minPrice,
596
+ maxPrice: _this3.state.config.maxPrice
588
597
  });
589
598
  }));
590
599
  }
@@ -627,17 +636,18 @@ var SezzleWidgetWrapper = /*#__PURE__*/function (_React$Component) {
627
636
  _this.state = {
628
637
  sezzleConfig: {
629
638
  price: _this.props.price || 0,
630
- merchantId: _this.props.merchantId || '',
639
+ merchantId: _this.props.merchantId || "",
631
640
  includeAPModal: _this.props.includeAPModal || false,
632
- minPrice: _this.props.minPrice || 0,
633
- theme: _this.props.theme || 'light',
634
- alignment: _this.props.alignment || 'auto',
641
+ minPrice: _this.props.minPrice || 20,
642
+ maxPrice: _this.props.maxPrice || 2500,
643
+ theme: _this.props.theme || "light",
644
+ alignment: _this.props.alignment || "auto",
635
645
  fontWeight: _this.props.fontWeight || 500,
636
- fontFamily: _this.props.fontFamily || 'inherit',
646
+ fontFamily: _this.props.fontFamily || "inherit",
637
647
  fontSize: _this.props.fontSize || 14,
638
- textColor: _this.props.textColor || 'inherit',
648
+ textColor: _this.props.textColor || "inherit",
639
649
  logoSize: _this.props.logoSize || 1,
640
- modalsToShow: ['sezzle']
650
+ modalsToShow: ["sezzle"]
641
651
  }
642
652
  };
643
653
  return _this;
@@ -659,8 +669,8 @@ var SezzleWidgetWrapper = /*#__PURE__*/function (_React$Component) {
659
669
  return updateState;
660
670
  }
661
671
  state = _objectSpread({}, state);
662
- if (props.includeAPModal && state.sezzleConfig.modalsToShow.indexOf('afterpay') === -1) {
663
- state.sezzleConfig.modalsToShow.push('afterpay');
672
+ if (props.includeAPModal && state.sezzleConfig.modalsToShow.indexOf("afterpay") === -1) {
673
+ state.sezzleConfig.modalsToShow.push("afterpay");
664
674
  }
665
675
  return state;
666
676
  }