@sezzle/sezzle-react-widget 2.0.0 → 2.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 (6) hide show
  1. package/README.md +31 -21
  2. package/dist/index.es.js +208 -207
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.js +209 -210
  5. package/dist/index.js.map +1 -1
  6. package/package.json +34 -38
package/dist/index.es.js CHANGED
@@ -13,7 +13,6 @@ function parsePriceString(price) {
13
13
  if (isNumeric(price[i]) || price[i] === '.' || price[i] === ',') {
14
14
  // Ignore actual sentence punctuation
15
15
  if (i > 0 && price[i] === '.' && isAlphabet(price[i - 1])) continue;
16
-
17
16
  formattedPrice += price[i];
18
17
  }
19
18
  }
@@ -44,128 +43,74 @@ function isNumeric(n) {
44
43
  * @return boolean [if it's alphabet or not]
45
44
  */
46
45
  function isAlphabet(n) {
47
- return (/^[a-zA-Z()]+$/.test(n)
48
- );
46
+ return /^[a-zA-Z()]+$/.test(n);
49
47
  }
50
48
 
51
49
  function getFormattedPrice(price, numberOfPayments) {
52
50
  var priceString = parsePriceString(price);
53
51
  var priceReplacer = parsePrice(price);
54
-
55
52
  var formatter = price.replace(priceString, '{price}');
56
-
57
53
  var sezzleInstallmentPrice = (priceReplacer / numberOfPayments).toFixed(2);
58
-
59
54
  var sezzleInstallmentFormattedPrice = formatter.replace('{price}', sezzleInstallmentPrice);
60
-
61
55
  return sezzleInstallmentFormattedPrice;
62
56
  }
63
57
 
64
- var modalEnglishHTML = "\n<style>@import url(\"https://fonts.googleapis.com/css?family=Comfortaa\");\n@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap\");\n.sezzle-modal-open {\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n}\n\n.sezzle-checkout-modal-hidden {\n width: 100%;\n height: 100%;\n -webkit-font-smoothing: antialiased;\n transition: all 0.4s ease;\n margin-top: 0;\n}\n@media screen and (min-width: 0px) and (max-width: 280px) {\n .sezzle-checkout-modal-hidden {\n display: none;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n height: auto;\n max-height: 90%;\n width: 343px;\n color: #000000;\n font-family: Comfortaa, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n background-color: #fff;\n overflow: auto;\n padding: 20px 0;\n border-radius: 10px;\n box-sizing: border-box;\n}\n@media screen and (max-width: 374px) {\n .sezzle-checkout-modal-hidden .sezzle-modal {\n transform: scale(0.9) translate(-55%, -55%);\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n height: 24px;\n opacity: 0.2;\n cursor: pointer;\n padding: 0;\n outline: 0;\n background: 0 0;\n border: none;\n box-shadow: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:hover {\n opacity: 1;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 0.5;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n opacity: 0.8;\n }\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 1;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::before {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::after {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(-45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-logo {\n display: block;\n height: 24px;\n width: 98px;\n margin: 10px auto 0;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content {\n height: auto;\n text-align: center;\n padding: 0px 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-header {\n display: block;\n text-align: center;\n font-style: normal;\n font-size: 24px;\n font-weight: 700;\n line-height: 30px;\n font-family: \"Comfortaa\";\n color: #000000;\n margin-top: 24px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 16px auto;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(131, 51, 212, 0.05);\n border-radius: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 14px;\n font-weight: 700;\n line-height: 16px;\n font-family: \"Comfortaa\";\n color: #000000;\n margin: 16px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 16px 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item :first-child {\n padding: 0px 6px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0px;\n padding: 8px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .percentage {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 600;\n line-height: 20px;\n color: #8333D4;\n font-family: \"Nunito Sans\";\n align-items: center;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .due {\n text-align: center;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n color: #5E5E5E;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features .single-feature {\n text-align: center;\n font-style: normal;\n font-size: 17px;\n font-weight: 600;\n line-height: 22px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 14px;\n color: #000000;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 12px;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo::first-letter {\n text-transform: capitalize;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a {\n color: #000000;\n text-decoration: underline;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:visited {\n color: #037269;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms {\n text-align: center;\n font-style: normal;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n color: #5E5E5E;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal {\n background-image: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-logo {\n width: 98px;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n background-position: 50%;\n height: 24px;\n margin: 10px auto 20px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content {\n height: auto;\n width: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-header {\n font-size: 24px;\n line-height: 30px;\n margin: 10px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-row {\n font-size: 15px;\n line-height: 20px;\n margin: 8px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments {\n height: fit-content;\n margin: 20px auto;\n padding: 20px 0 0;\n border: 1px solid #e5e5e5;\n border-radius: 5px;\n max-width: 502px;\n display: block;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap: 24px;\n font-family: \"Nunito sans\";\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header {\n font-family: \"Nunito Sans\";\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 20px;\n display: block;\n align-items: center;\n text-align: center;\n padding: 15px;\n letter-spacing: -0.3px;\n border-bottom: 1px solid #e5e5e5;\n color: #000000;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header span {\n font-size: 17px;\n line-height: 22px;\n font-weight: 700;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options {\n font-size: 12px;\n line-height: 14px;\n margin: 0px 20px 0;\n padding: 20px 0px;\n border-bottom: 1px solid #e5e5e5;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan {\n display: flex;\n justify-content: space-between;\n padding-bottom: 10px;\n font-size: 12px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount span {\n font-size: 17px;\n line-height: 22px;\n color: #8333D4;\n font-weight: 600;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount .per-month {\n font-size: 13px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .term-length {\n border-radius: 100px;\n background: rgba(41, 211, 162, 0.1);\n color: #00804A;\n padding: 2px 8px;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details {\n display: flex;\n justify-content: space-between;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments:last-child {\n border: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .details {\n font-size: 17px;\n line-height: 22px;\n margin: 16px auto;\n font-weight: 600;\n font-family: \"Nunito Sans\";\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .terms {\n font-size: 11px;\n line-height: 13px;\n color: #5E5E5E;\n margin: 10px auto 0;\n padding: 24px 0 0;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n font-family: \"Nunito Sans\";\n}</style>\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" aria-label=\"Sezzle Information\" lang=\"en\" style=\"display: none; max-height: 100%;\"><div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"Learn more about Sezzle\" class=\"sezzle-checkout-modal-hidden\"><div class=\"sezzle-modal sezzle-checkout-modal-hidden\"><div><button role=\"button\" aria-label=\"Close Sezzle Modal\" class=\"close-sezzle-modal\"></button></div><div class=\"sezzle-logo\" title=\"Sezzle\"></div><div id=\"sezzle-modal-core-content\" class=\"sezzle-modal-content\">\n <header class=\"sezzle-header\">Buy Now. Pay&nbsp;Later.</header>\n <p class=\"sezzle-row\">Select Sezzle as your payment method at&nbsp;checkout.</p>\n\n <div class=\"sezzle-four-pay\">\n <p class=\"sezzle-row\">Split your order into 4 or more!</p>\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"pie at 25%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path 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\" fill=\"#8333D4\"></path>\n <path 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\" 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\">Today</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"pie at 50%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Week 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"pie at 75%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path 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\" fill=\"#8333D4\"></path>\n <path 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\" 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\">Week 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"pie at 100%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Week 6</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">Build your credit with Sezzle*</p>\n <p class=\"single-feature\">Flexible payment options</p>\n <p class=\"single-feature\">Trusted by over 10&nbsp;million consumers</p>\n </div>\n\n <p class=\"terms\">* Sezzle Up is a free credit reporting program shoppers can opt into to have payments reported to credit bureaus.</p>\n <p class=\"terms\">Subject to approval. First payment date and amount may fluctuate based on eligibility and time of merchant order completion.</p>\n </div></div></div>\n </section>\n\n";
58
+ var modalEnglishHTML = "\n<style>\n@import url('https://fonts.cdnfonts.com/css/satoshi');\n@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap');\n.sezzle-modal-open {\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.sezzle-checkout-modal-hidden {\n width: 100%;\n height: 100%;\n -webkit-font-smoothing: antialiased;\n transition: all 0.4s ease;\n margin-top: 0;\n}\n@media screen and (min-width: 0px) and (max-width: 280px) {\n .sezzle-checkout-modal-hidden {\n display: none;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n height: auto;\n max-height: 90%;\n width: 343px;\n color: #000000;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n background-color: #fff;\n overflow: auto;\n padding: 20px 0;\n border-radius: 10px;\n box-sizing: border-box;\n}\n@media screen and (max-width: 374px) {\n .sezzle-checkout-modal-hidden .sezzle-modal {\n transform: scale(0.9) translate(-55%, -55%);\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n height: 24px;\n opacity: 0.2;\n cursor: pointer;\n padding: 0;\n outline: 0;\n background: 0 0;\n border: none;\n box-shadow: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:hover {\n opacity: 1;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 0.5;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n opacity: 0.8;\n }\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 1;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::before {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::after {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(-45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-logo {\n display: block;\n height: 24px;\n width: 98px;\n margin: 10px auto 0;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content {\n height: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-header {\n display: block;\n text-align: center;\n font-style: normal;\n font-size: 24px;\n font-weight: 600;\n line-height: 28px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin-top: 24px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(131, 51, 212, 0.05);\n border-radius: 16px;\n padding: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin: 0px 0px 12px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 16px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today :first-child {\n padding: 0px 6px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments :first-child {\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item {\n padding: 16px 2px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0px;\n padding: 8px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .percentage {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n color: #8333D4;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n align-items: center;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .due {\n text-align: center;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features .single-feature {\n text-align: center;\n font-style: normal;\n font-size: 17px;\n font-weight: 600;\n line-height: 22px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 14px;\n color: #000000;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 12px;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo::first-letter {\n text-transform: capitalize;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a {\n color: #000000;\n text-decoration: underline;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:visited {\n color: #037269;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms {\n text-align: center;\n font-style: normal;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal {\n background-image: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-logo {\n width: 98px;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n background-position: 50%;\n height: 24px;\n margin: 10px auto 20px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content {\n height: auto;\n width: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-header {\n font-size: 24px;\n line-height: 30px;\n margin: 10px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-row {\n font-size: 15px;\n line-height: 20px;\n margin: 8px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments {\n height: fit-content;\n margin: 20px auto;\n padding: 20px 0 0;\n border: 1px solid #e5e5e5;\n border-radius: 5px;\n max-width: 502px;\n display: block;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap: 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header {\n font-family: Satoshi, \"Open Sans\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 20px;\n display: block;\n align-items: center;\n text-align: center;\n padding: 15px;\n letter-spacing: -0.3px;\n border-bottom: 1px solid #e5e5e5;\n color: #000000;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header span {\n font-size: 17px;\n line-height: 22px;\n font-weight: 700;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options {\n font-size: 12px;\n line-height: 14px;\n margin: 0px 20px 0;\n padding: 20px 0px;\n border-bottom: 1px solid #e5e5e5;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan {\n display: flex;\n justify-content: space-between;\n padding-bottom: 10px;\n font-size: 12px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount span {\n font-size: 17px;\n line-height: 22px;\n color: #8333D4;\n font-weight: 600;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount .per-month {\n font-size: 13px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .term-length {\n border-radius: 100px;\n background: rgba(41, 211, 162, 0.1);\n color: #00804A;\n padding: 2px 8px;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details {\n display: flex;\n justify-content: space-between;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments:last-child {\n border: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .details {\n font-size: 17px;\n line-height: 22px;\n margin: 16px auto;\n font-weight: 600;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .terms {\n font-size: 11px;\n line-height: 13px;\n color: #5E5E5E;\n margin: 10px auto 0;\n padding: 12px 0 0;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n</style>\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" lang=\"en\"\n aria-label=\"Sezzle Information\" aria-description=\"Learn more about Sezzle\" style=\"display: block;\">\n <div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"Learn more about Sezzle\"\n class=\"sezzle-checkout-modal-hidden\">\n <div class=\"sezzle-modal sezzle-modal-color\">\n <div><button role=\"button\" aria-label=\"Close Sezzle modal.\" 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 <header class=\"sezzle-header\">Buy Now. Pay Later.\n </header>\n <p class=\"sezzle-row\">\n Pay in 4 by selecting Sezzle at checkout.\n </p>\n <div class=\"sezzle-four-pay\">\n <p class=\"sezzle-row\">\n Flexible payment plans for your budget\n </p>\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"pie at 25%\">\n <svg width=\"40\" height=\"40\" 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\">Today</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"pie at 50%\">\n <svg width=\"40\" height=\"40\" 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\">Week 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"pie at 75%\">\n <svg width=\"40\" height=\"40\" 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\">Week 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"pie at 100%\">\n <svg width=\"40\" height=\"40\" 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\">Week 6</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">\n No credit check required\n </p>\n <p class=\"single-feature\">\n Instant credit decision\n </p>\n <p class=\"single-feature\">\n Opt in to free credit reporting\n </p>\n </div>\n <p class=\"terms\">Signing up for Sezzle will not impact your credit score. You may opt-in to our free credit\n reporting program, Sezzle Up, to have your payments reported to credit bureaus. Learn more about spending\n power <a href=\"https://sezzle.com/how-it-works\" target=\"_blank\">here</a>.</p>\n <p class=\"terms\">Subject to approval. <a href=\"https://www.sezzle.com/legal\" target=\"_blank\">Click here for\n complete terms.</a> First payment date and amount may fluctuate based on eligibility and time of merchant\n order completion.</p>\n </div>\n </div>\n </div>\n</section>\n\n";
65
59
 
66
- var modalFrenchHTML = "\n<style>@import url(\"https://fonts.googleapis.com/css?family=Comfortaa\");\n@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap\");\n.sezzle-modal-open {\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n}\n\n.sezzle-checkout-modal-hidden {\n width: 100%;\n height: 100%;\n -webkit-font-smoothing: antialiased;\n transition: all 0.4s ease;\n margin-top: 0;\n}\n@media screen and (min-width: 0px) and (max-width: 280px) {\n .sezzle-checkout-modal-hidden {\n display: none;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n height: auto;\n max-height: 90%;\n width: 343px;\n color: #000000;\n font-family: Comfortaa, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n background-color: #fff;\n overflow: auto;\n padding: 20px 0;\n border-radius: 10px;\n box-sizing: border-box;\n}\n@media screen and (max-width: 374px) {\n .sezzle-checkout-modal-hidden .sezzle-modal {\n transform: scale(0.9) translate(-55%, -55%);\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n height: 24px;\n opacity: 0.2;\n cursor: pointer;\n padding: 0;\n outline: 0;\n background: 0 0;\n border: none;\n box-shadow: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:hover {\n opacity: 1;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 0.5;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n opacity: 0.8;\n }\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 1;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::before {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::after {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(-45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-logo {\n display: block;\n height: 24px;\n width: 98px;\n margin: 10px auto 0;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content {\n height: auto;\n text-align: center;\n padding: 0px 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-header {\n display: block;\n text-align: center;\n font-style: normal;\n font-size: 24px;\n font-weight: 700;\n line-height: 30px;\n font-family: \"Comfortaa\";\n color: #000000;\n margin-top: 24px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 16px auto;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(131, 51, 212, 0.05);\n border-radius: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 14px;\n font-weight: 700;\n line-height: 16px;\n font-family: \"Comfortaa\";\n color: #000000;\n margin: 16px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 16px 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item :first-child {\n padding: 0px 6px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0px;\n padding: 8px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .percentage {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 600;\n line-height: 20px;\n color: #8333D4;\n font-family: \"Nunito Sans\";\n align-items: center;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .due {\n text-align: center;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n color: #5E5E5E;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 8px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features .single-feature {\n text-align: center;\n font-style: normal;\n font-size: 17px;\n font-weight: 600;\n line-height: 22px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 14px;\n color: #000000;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 12px;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo::first-letter {\n text-transform: capitalize;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a {\n color: #000000;\n text-decoration: underline;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:visited {\n color: #037269;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms {\n text-align: center;\n font-style: normal;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n color: #5E5E5E;\n font-family: \"Nunito Sans\";\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal {\n background-image: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-logo {\n width: 98px;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n background-position: 50%;\n height: 24px;\n margin: 10px auto 20px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content {\n height: auto;\n width: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-header {\n font-size: 24px;\n line-height: 30px;\n margin: 10px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-row {\n font-size: 15px;\n line-height: 20px;\n margin: 8px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments {\n height: fit-content;\n margin: 20px auto;\n padding: 20px 0 0;\n border: 1px solid #e5e5e5;\n border-radius: 5px;\n max-width: 502px;\n display: block;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap: 24px;\n font-family: \"Nunito sans\";\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header {\n font-family: \"Nunito Sans\";\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 20px;\n display: block;\n align-items: center;\n text-align: center;\n padding: 15px;\n letter-spacing: -0.3px;\n border-bottom: 1px solid #e5e5e5;\n color: #000000;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header span {\n font-size: 17px;\n line-height: 22px;\n font-weight: 700;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options {\n font-size: 12px;\n line-height: 14px;\n margin: 0px 20px 0;\n padding: 20px 0px;\n border-bottom: 1px solid #e5e5e5;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan {\n display: flex;\n justify-content: space-between;\n padding-bottom: 10px;\n font-size: 12px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount span {\n font-size: 17px;\n line-height: 22px;\n color: #8333D4;\n font-weight: 600;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount .per-month {\n font-size: 13px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .term-length {\n border-radius: 100px;\n background: rgba(41, 211, 162, 0.1);\n color: #00804A;\n padding: 2px 8px;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details {\n display: flex;\n justify-content: space-between;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments:last-child {\n border: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .details {\n font-size: 17px;\n line-height: 22px;\n margin: 16px auto;\n font-weight: 600;\n font-family: \"Nunito Sans\";\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .terms {\n font-size: 11px;\n line-height: 13px;\n color: #5E5E5E;\n margin: 10px auto 0;\n padding: 24px 0 0;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n font-family: \"Nunito Sans\";\n}</style>\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" aria-label=\"Sezzle Information\" lang=\"en\" style=\"display: none; max-height: 100%;\"><div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"Learn more about Sezzle\" class=\"sezzle-checkout-modal-hidden\"><div class=\"sezzle-modal sezzle-checkout-modal-hidden\"><div><button role=\"button\" aria-label=\"Close Sezzle Modal\" class=\"close-sezzle-modal\"></button></div><div class=\"sezzle-logo\" title=\"Sezzle\"></div><div id=\"sezzle-modal-core-content\" class=\"sezzle-modal-content\">\n <header class=\"sezzle-header\">Acheter maintenant. Payer&nbsp;plus&nbsp;tard.</header>\n <p class=\"sezzle-row\">S\xE9lectionnez Sezzle comme mode de paiement lors du&nbsp;paiement.</p>\n\n <div class=\"sezzle-four-pay\">\n <p class=\"sezzle-row\">Divisez votre commande en 4 ou plus !</p>\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 25%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path 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\" fill=\"#8333D4\"></path>\n <path 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\" 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\">Aujourd'hui</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 50%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Semaine 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 75%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path 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\" fill=\"#8333D4\"></path>\n <path 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\" 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\">Semaine 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 100%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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\" fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Semaine 6</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">Construisez votre cr\xE9dit avec Sezzle*</p>\n <p class=\"single-feature\">Options de paiement flexibles</p>\n <p class=\"single-feature\">Reconnu par plus de 10 millions de consommateurs</p>\n </div>\n\n <p class=\"terms\">* Sezzle Up est un programme gratuit d'\xE9valuation du cr\xE9dit auquel les acheteurs peuvent opter pour que les paiements soient signal\xE9s aux bureaux de cr\xE9dit.</p>\n <p class=\"terms\">Soumis \xE0 l'approbation. La date et le montant du premier paiement peuvent varier en fonction de l'\xE9ligibilit\xE9 et de l'heure \xE0 laquelle la commande du marchand est termin\xE9e.</p>\n </div></div></div></section>\n";
60
+ var modalFrenchHTML = "\n<style>\n@import url('https://fonts.cdnfonts.com/css/satoshi');\n@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap');\n.sezzle-modal-open {\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.sezzle-checkout-modal-hidden {\n width: 100%;\n height: 100%;\n -webkit-font-smoothing: antialiased;\n transition: all 0.4s ease;\n margin-top: 0;\n}\n@media screen and (min-width: 0px) and (max-width: 280px) {\n .sezzle-checkout-modal-hidden {\n display: none;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n height: auto;\n max-height: 90%;\n width: 343px;\n color: #000000;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n background-color: #fff;\n overflow: auto;\n padding: 20px 0;\n border-radius: 10px;\n box-sizing: border-box;\n}\n@media screen and (max-width: 374px) {\n .sezzle-checkout-modal-hidden .sezzle-modal {\n transform: scale(0.9) translate(-55%, -55%);\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n height: 24px;\n opacity: 0.2;\n cursor: pointer;\n padding: 0;\n outline: 0;\n background: 0 0;\n border: none;\n box-shadow: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:hover {\n opacity: 1;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 0.5;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n opacity: 0.8;\n }\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 1;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::before {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::after {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(-45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-logo {\n display: block;\n height: 24px;\n width: 98px;\n margin: 10px auto 0;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content {\n height: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-header {\n display: block;\n text-align: center;\n font-style: normal;\n font-size: 24px;\n font-weight: 600;\n line-height: 28px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin-top: 24px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(131, 51, 212, 0.05);\n border-radius: 16px;\n padding: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin: 0px 0px 12px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 16px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today :first-child {\n padding: 0px 6px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments :first-child {\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item {\n padding: 16px 2px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0px;\n padding: 8px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .percentage {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n color: #8333D4;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n align-items: center;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .due {\n text-align: center;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features .single-feature {\n text-align: center;\n font-style: normal;\n font-size: 17px;\n font-weight: 600;\n line-height: 22px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 14px;\n color: #000000;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 12px;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo::first-letter {\n text-transform: capitalize;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a {\n color: #000000;\n text-decoration: underline;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:visited {\n color: #037269;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms {\n text-align: center;\n font-style: normal;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal {\n background-image: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-logo {\n width: 98px;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n background-position: 50%;\n height: 24px;\n margin: 10px auto 20px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content {\n height: auto;\n width: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-header {\n font-size: 24px;\n line-height: 30px;\n margin: 10px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-row {\n font-size: 15px;\n line-height: 20px;\n margin: 8px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments {\n height: fit-content;\n margin: 20px auto;\n padding: 20px 0 0;\n border: 1px solid #e5e5e5;\n border-radius: 5px;\n max-width: 502px;\n display: block;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap: 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header {\n font-family: Satoshi, \"Open Sans\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 20px;\n display: block;\n align-items: center;\n text-align: center;\n padding: 15px;\n letter-spacing: -0.3px;\n border-bottom: 1px solid #e5e5e5;\n color: #000000;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header span {\n font-size: 17px;\n line-height: 22px;\n font-weight: 700;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options {\n font-size: 12px;\n line-height: 14px;\n margin: 0px 20px 0;\n padding: 20px 0px;\n border-bottom: 1px solid #e5e5e5;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan {\n display: flex;\n justify-content: space-between;\n padding-bottom: 10px;\n font-size: 12px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount span {\n font-size: 17px;\n line-height: 22px;\n color: #8333D4;\n font-weight: 600;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount .per-month {\n font-size: 13px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .term-length {\n border-radius: 100px;\n background: rgba(41, 211, 162, 0.1);\n color: #00804A;\n padding: 2px 8px;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details {\n display: flex;\n justify-content: space-between;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments:last-child {\n border: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .details {\n font-size: 17px;\n line-height: 22px;\n margin: 16px auto;\n font-weight: 600;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .terms {\n font-size: 11px;\n line-height: 13px;\n color: #5E5E5E;\n margin: 10px auto 0;\n padding: 12px 0 0;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n\n</style>\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" lang=\"fr\"\n aria-label=\"Informations Sezzle\" aria-description=\"En savoir plus sur Sezzle\" style=\"display: block;\">\n <div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"En savoir plus sur Sezzle\"\n class=\"sezzle-checkout-modal-hidden\">\n <div class=\"sezzle-modal sezzle-modal-color\">\n <div><button role=\"button\" aria-label=\"Fermer Sezzle modal.\" 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 <header class=\"sezzle-header\">Acheter maintenant. Payer&nbsp;plus&nbsp;tard.\n </header>\n <p class=\"sezzle-row\">\n Payez en 4 en s\xE9lectionnant Sezzle \xE0 la caisse.\n </p>\n <div class=\"sezzle-four-pay\">\n <p class=\"sezzle-row\">\n Plans de paiement flexibles pour votre&nbsp;budget\n </p>\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 25%\">\n <svg width=\"40\" height=\"40\" 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\">Aujourd'hui</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 50%\">\n <svg width=\"40\" height=\"40\" 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\">Semaine 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 75%\">\n <svg width=\"40\" height=\"40\" 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\">Semaine 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 100%\">\n <svg width=\"40\" height=\"40\" 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\">Semaine 6</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">\n Aucune v\xE9rification de cr\xE9dit requise\n </p>\n <p class=\"single-feature\">\n D\xE9cision de cr\xE9dit instantan\xE9e\n </p>\n <p class=\"single-feature\">\n Optez pour le rapport de cr\xE9dit&nbsp;gratuite\n </p>\n </div>\n <p class=\"terms\">L'inscription \xE0 Sezzle n'aura aucune incidence sur votre pointage de cr\xE9dit. Vous pouvez\n accepter de participer \xE0 notre programme gratuit d'\xE9valuation du cr\xE9dit, Sezzle Up, afin que vos paiements\n soient signal\xE9s aux bureaux de cr\xE9dit. Pour en savoir plus sur le pouvoir d'achat, <a\n href=\"https://sezzle.com/how-it-works\" target=\"_blank\">cliquez ici.</a></p>\n <p class=\"terms\">Sous r\xE9serve d'approbation. <a href=\"https://www.sezzle.com/legal\" target=\"_blank\">Cliquez ici\n pour l'int\xE9gralit\xE9 des conditions.</a> La date et le montant du premier paiement peuvent varier en fonction\n de l'\xE9ligibilit\xE9 et de la date de finalisation de la commande aupr\xE8s du vendeu.</p>\n </div>\n </div>\n </div>\n</section>\n";
67
61
 
68
62
  var apModalHTML = '<div id="afterpay-popup-wrapper" style="position: fixed; z-index: 2147483647; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: auto;"><div id="afterpay-popup-outer" style="display: flex; place-content: center; align-items: center; width: 100%; min-height: 100%; background-color: rgba(0, 0, 0, 0.8);"><div id="afterpay-popup-inner" style="position: relative; background-color: rgb(255, 255, 255);"><a href="https://www.afterpay.com/purchase-payment-agreement" target="_blank" style="display: block;"><img src="https://static.afterpay.com/us-popup-medium.png" srcset="https://static.afterpay.com/us-popup-medium.png 1x, https://static.afterpay.com/us-popup-medium@2x.png 2x" style="max-width: 597px; display: block; width: 100%;"></a><a href="#" style="position: absolute; right: 8px; top: 8px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" width="32px" height="32px"><g id="surface1"><path style=" " d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 12.21875 10.78125 L 10.78125 12.21875 L 14.5625 16 L 10.78125 19.78125 L 12.21875 21.21875 L 16 17.4375 L 19.78125 21.21875 L 21.21875 19.78125 L 17.4375 16 L 21.21875 12.21875 L 19.78125 10.78125 L 16 14.5625 Z "></path></g></svg></a></div></div></div>';
69
63
 
70
- var classCallCheck = function (instance, Constructor) {
71
- if (!(instance instanceof Constructor)) {
72
- throw new TypeError("Cannot call a class as a function");
73
- }
74
- };
75
-
76
- var createClass = function () {
77
- function defineProperties(target, props) {
78
- for (var i = 0; i < props.length; i++) {
79
- var descriptor = props[i];
80
- descriptor.enumerable = descriptor.enumerable || false;
81
- descriptor.configurable = true;
82
- if ("value" in descriptor) descriptor.writable = true;
83
- Object.defineProperty(target, descriptor.key, descriptor);
84
- }
85
- }
86
-
87
- return function (Constructor, protoProps, staticProps) {
88
- if (protoProps) defineProperties(Constructor.prototype, protoProps);
89
- if (staticProps) defineProperties(Constructor, staticProps);
90
- return Constructor;
91
- };
92
- }();
93
-
94
- var _extends = Object.assign || function (target) {
95
- for (var i = 1; i < arguments.length; i++) {
96
- var source = arguments[i];
97
-
98
- for (var key in source) {
99
- if (Object.prototype.hasOwnProperty.call(source, key)) {
100
- target[key] = source[key];
101
- }
102
- }
103
- }
104
-
105
- return target;
106
- };
107
-
108
- var inherits = function (subClass, superClass) {
109
- if (typeof superClass !== "function" && superClass !== null) {
110
- throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
111
- }
112
-
113
- subClass.prototype = Object.create(superClass && superClass.prototype, {
114
- constructor: {
115
- value: subClass,
116
- enumerable: false,
117
- writable: true,
118
- configurable: true
119
- }
120
- });
121
- if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
122
- };
123
-
124
- var possibleConstructorReturn = function (self, call) {
125
- if (!self) {
126
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
127
- }
128
-
129
- return call && (typeof call === "object" || typeof call === "function") ? call : self;
130
- };
131
-
132
- var Modal = function (_React$Component) {
133
- inherits(Modal, _React$Component);
134
-
64
+ function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$2(o); }
65
+ function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
66
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
67
+ function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
68
+ function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey$2(descriptor.key), descriptor); } }
69
+ function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
70
+ function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
71
+ function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
72
+ function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf$2(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf$2(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn$2(this, result); }; }
73
+ function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized$2(self); }
74
+ function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
75
+ function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
76
+ function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
77
+ function _defineProperty$2(obj, key, value) { key = _toPropertyKey$2(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
78
+ function _toPropertyKey$2(arg) { var key = _toPrimitive$2(arg, "string"); return _typeof$2(key) === "symbol" ? key : String(key); }
79
+ function _toPrimitive$2(input, hint) { if (_typeof$2(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$2(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
80
+ var Modal = /*#__PURE__*/function (_React$Component) {
81
+ _inherits$2(Modal, _React$Component);
82
+ var _super = _createSuper$2(Modal);
135
83
  function Modal(props) {
136
- classCallCheck(this, Modal);
137
-
138
- var _this = possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props));
139
-
140
- _this.toggleModalVisibility = function (isModalVisible) {
141
- isModalVisible ? _this.setState({ modalElement: { style: { display: 'block' } } }) : _this.setState({ modalElement: { style: { display: 'none' } } });
142
- };
143
-
144
- _this.modalCloseHandler = function (event) {
84
+ var _this;
85
+ _classCallCheck$2(this, Modal);
86
+ _this = _super.call(this, props);
87
+ _defineProperty$2(_assertThisInitialized$2(_this), "toggleModalVisibility", function (isModalVisible) {
88
+ if (isModalVisible !== _this.state.isModalVisible) {
89
+ _this.setState(_objectSpread$2(_objectSpread$2({}, _this.state), {}, {
90
+ isModalVisible: isModalVisible
91
+ }));
92
+ }
93
+ });
94
+ _defineProperty$2(_assertThisInitialized$2(_this), "modalCloseHandler", function (event) {
145
95
  _this.props.callbackModalClose(_this.props.modalType);
146
- _this.setState({ modalElement: { style: { display: 'none' } } });
147
- };
148
-
96
+ });
149
97
  _this.state = {
150
- modalElement: null
98
+ modalElement: null,
99
+ isModalVisible: false
151
100
  };
152
101
  return _this;
153
102
  }
154
-
155
- createClass(Modal, [{
156
- key: 'componentDidMount',
103
+ _createClass$2(Modal, [{
104
+ key: "componentDidMount",
157
105
  value: function componentDidMount() {
158
106
  var _this2 = this;
159
-
160
107
  document.querySelector('html').appendChild(this.state.modalElement);
161
-
162
- var sezzleModal = void 0;
108
+ var sezzleModal;
163
109
  if (this.props.modalType === 'afterpay') {
164
110
  sezzleModal = document.querySelector('.sezzle-ap-modal');
165
111
  } else {
166
112
  sezzleModal = document.querySelector('.sezzle-modal');
167
113
  }
168
-
169
114
  sezzleModal.addEventListener('click', function (event) {
170
115
  return event.stopPropagation();
171
116
  });
@@ -176,12 +121,12 @@ var Modal = function (_React$Component) {
176
121
  });
177
122
  }
178
123
  }, {
179
- key: 'componentDidUpdate',
124
+ key: "componentDidUpdate",
180
125
  value: function componentDidUpdate(prevProps, prevState) {
181
126
  this.toggleModalVisibility(this.props.toggleModalVisibility);
182
127
  }
183
128
  }, {
184
- key: 'componentWillUnmount',
129
+ key: "componentWillUnmount",
185
130
  value: function componentWillUnmount() {
186
131
  var modals = document.querySelector('html').getElementsByClassName('sezzle-checkout-modal-lightbox');
187
132
  for (var i = 0; i < modals.length; i++) {
@@ -189,36 +134,36 @@ var Modal = function (_React$Component) {
189
134
  }
190
135
  }
191
136
  }, {
192
- key: 'render',
137
+ key: "render",
193
138
  value: function render() {
194
139
  return null;
195
140
  }
196
141
  }], [{
197
- key: 'getDerivedStateFromProps',
142
+ key: "getDerivedStateFromProps",
198
143
  value: function getDerivedStateFromProps(props, state) {
199
- if (state.modalElement) return state;
200
- var modalElement = void 0;
201
- switch (props.modalType) {
202
- case 'afterpay':
203
- modalElement = document.createElement('div');
204
- modalElement.className = 'sezzle-checkout-modal-lightbox close-sezzle-modal sezzle-ap-modal';
205
- modalElement.innerHTML = apModalHTML;
206
- modalElement.style.display = 'none';
207
- break;
208
- default:
209
- modalElement = document.createElement('div');
210
- modalElement.className = 'sezzle-checkout-modal-lightbox close-sezzle-modal';
211
- modalElement.innerHTML = document.querySelector('html').lang && document.querySelector('html').lang.substring(0, 2).toLowerCase() === "fr" ? modalFrenchHTML : modalEnglishHTML;
212
- modalElement.style.display = 'none';
144
+ if (!state.modalElement) {
145
+ var modalElement = document.createElement('div');
146
+ switch (props.modalType) {
147
+ case 'afterpay':
148
+ modalElement.className = 'sezzle-checkout-modal-lightbox close-sezzle-modal sezzle-ap-modal';
149
+ modalElement.innerHTML = apModalHTML;
150
+ break;
151
+ default:
152
+ modalElement.className = 'sezzle-checkout-modal-lightbox close-sezzle-modal';
153
+ modalElement.innerHTML = document.querySelector('html').lang && document.querySelector('html').lang.substring(0, 2).toLowerCase() === 'fr' ? modalFrenchHTML : modalEnglishHTML;
154
+ }
155
+ modalElement.style.display = state.isModalVisible ? 'block' : 'none';
156
+ state = _objectSpread$2(_objectSpread$2({}, state), {}, {
157
+ modalElement: modalElement
158
+ });
159
+ } else {
160
+ state.isModalVisible ? state.modalElement.style.display = 'block' : state.modalElement.style.display = 'none';
213
161
  }
214
- state = _extends({}, state, { modalElement: modalElement });
215
162
  return state;
216
163
  }
217
164
  }]);
218
165
  return Modal;
219
166
  }(React.Component);
220
-
221
-
222
167
  Modal.propTypes = {
223
168
  toggleModalVisibility: PropTypes.bool,
224
169
  modalType: PropTypes.string,
@@ -252,17 +197,32 @@ function styleInject(css, ref) {
252
197
  }
253
198
  }
254
199
 
255
- var css = ".sezzle-checkout-modal-lightbox * {\n\tvertical-align: baseline;\n\tbox-sizing: border-box;\n\tline-height: normal;\n }\n\n .sezzle-checkout-modal-lightbox {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 99999998;\n\tbackground-color: rgba(5, 31, 52, 0.57);\n\twidth: 100vw;\n\theight: 100vh;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tcolor: unset;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal-hidden {\n\ttransition: all 0.4s ease;\n\tmargin-top: 0;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\tposition: fixed;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -384px;\n\tmargin-left: -325px;\n\tz-index: 99999998;\n\tbackground-color: #fff;\n\tbox-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n\tborder-radius: 20px;\n\tcolor: #000;\n\tfont-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n\ttransition: all 0.4s ease;\n\twidth: 650px;\n }\n @media (max-width: 650px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\t position: relative;\n\t top: 0px;\n\t left: 0px;\n\t padding: 50px 20px;\n\t margin: 0;\n\t border-radius: 0;\n\t height: 100%;\n\t font-size: 15px;\n\t max-width: 100%;\n\t min-width: 320px;\n\t overflow: auto;\n\t}\n }\n @media (max-height: 767px) and (min-width: 651px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\t position: relative;\n\t top: 0px;\n\t left: 0px;\n\t margin: 20px auto;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 {\n\tfont-size: 18px;\n\ttext-align: center;\n\tmargin: 0 auto;\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 .sezzle-checkout-modal h1 {\n\t font-size: 16px;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\tdisplay: block;\n\ttext-align: center;\n\ttext-transform: none;\n\tfont-size: 12pt;\n\tline-height: 25px;\n\tfont-weight: 300;\n\tbox-sizing: border-box;\n\tcolor: #7d8588;\n\tmargin: 5px 0 !important;\n\tletter-spacing: 0.25px;\n }\n @media (max-width: 768px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\t text-align: center;\n\t}\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\t font-size: 11pt;\n\t text-align: center;\n\t letter-spacing: 0.5px;\n\t line-height: 18px;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n\tdisplay: block;\n\tbox-sizing: border-box;\n\tfont-size: 11pt;\n\topacity: 0.8;\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n\t font-size: 7.5pt;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal a {\n\tdisplay: block;\n\tmargin: 4px auto 0;\n\tcolor: #17ce6a;\n\tfont-size: 8pt;\n\tfont-weight: 500;\n\ttext-transform: lowercase;\n\ttext-align: left;\n\tletter-spacing: 0.25px;\n\ttext-decoration: none;\n\ttransition: 0.15s;\n\topacity: 0.65;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal a:hover {\n\ttransition: 0.1s;\n\topacity: 1;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n\tfont-size: 18px;\n\ttext-align: center;\n\tmargin: 0 auto;\n\tcolor: unset;\n }\n @media (max-width: 768px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n\t text-align: center;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 img {\n\tmargin: 0 4px;\n\tdisplay: inline-block;\n\theight: 30px !important;\n\twidth: auto;\n\tposition: relative;\n\ttop: 6px;\n\tvertical-align: initial;\n }\n\n .sezzle-shopify-info-button {\n\tdisplay: block;\n\toverflow: hidden;\n\tmargin: 0;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper {\n\tdisplay: block;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n\tcolor: inherit;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper:focus {\n\toutline: 5px auto;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-left {\n\ttext-align: left;\n\tfloat: left;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-center {\n\ttext-align: center;\n\tfloat: none;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-right {\n\ttext-align: right;\n\tfloat: right;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text {\n\twidth: unset;\n\tmargin: auto;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n\tword-wrap: normal;\n\tline-height: 18px;\n\tfont-size: 14px;\n\tfont-weight: 500;\n\tfont-family: inherit;\n\tcolor: inherit;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-left {\n\ttext-align: left;\n\tmargin: 0;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-center {\n\ttext-align: center;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-right {\n\tfloat: right;\n\ttext-align: right;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-payment-amount {\n\tzoom: 1;\n\tfloat: none;\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n\tfont-weight: 900;\n\tfont-size: 1.2em;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-logo {\n\tdisplay: inline-block;\n\tbox-sizing: border-box;\n\theight: 18px;\n\twidth: auto;\n\topacity: 1;\n\tfloat: none;\n\tmargin: 0;\n\tmargin-bottom: -3px;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-info-icon {\n\tdisplay: inline;\n\twidth: auto;\n\tmargin: 0;\n\tbox-shadow: none;\n\tborder: none;\n\tpadding: 0px 0px 0px 3px;\n\tbackground: none;\n\tvertical-align: baseline;\n\tline-height: initial;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tcursor: pointer;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-ap-logo {\n\theight: 45px;\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n\tvertical-align: middle;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text button.ap-modal-info-link {\n\tdisplay: inline;\n\twidth: auto;\n\tmargin: 0;\n\tbox-shadow: none;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: middle;\n\tline-height: inherit;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tcursor: pointer;\n }\n\n .sezzle-hidden {\n\tdisplay: none;\n\tvisibility: hidden;\n }\n";
256
- styleInject(css);
257
-
258
- var SezzleWidgetText = function (_React$Component) {
259
- inherits(SezzleWidgetText, _React$Component);
260
-
200
+ var css_248z = ".sezzle-checkout-modal-lightbox * {\n\tvertical-align: baseline;\n\tbox-sizing: border-box;\n\tline-height: normal;\n }\n\n .sezzle-checkout-modal-lightbox {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 99999998;\n\tbackground-color: rgba(5, 31, 52, 0.57);\n\twidth: 100vw;\n\theight: 100vh;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tcolor: unset;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal-hidden {\n\ttransition: all 0.4s ease;\n\tmargin-top: 0;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\tposition: fixed;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -384px;\n\tmargin-left: -325px;\n\tz-index: 99999998;\n\tbackground-color: #fff;\n\tbox-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n\tborder-radius: 20px;\n\tcolor: #000;\n\tfont-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n\ttransition: all 0.4s ease;\n\twidth: 650px;\n }\n @media (max-width: 650px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\t position: relative;\n\t top: 0px;\n\t left: 0px;\n\t padding: 50px 20px;\n\t margin: 0;\n\t border-radius: 0;\n\t height: 100%;\n\t font-size: 15px;\n\t max-width: 100%;\n\t min-width: 320px;\n\t overflow: auto;\n\t}\n }\n @media (max-height: 767px) and (min-width: 651px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\t position: relative;\n\t top: 0px;\n\t left: 0px;\n\t margin: 20px auto;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 {\n\tfont-size: 18px;\n\ttext-align: center;\n\tmargin: 0 auto;\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 .sezzle-checkout-modal h1 {\n\t font-size: 16px;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\tdisplay: block;\n\ttext-align: center;\n\ttext-transform: none;\n\tfont-size: 12pt;\n\tline-height: 25px;\n\tfont-weight: 300;\n\tbox-sizing: border-box;\n\tcolor: #7d8588;\n\tmargin: 5px 0 !important;\n\tletter-spacing: 0.25px;\n }\n @media (max-width: 768px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\t text-align: center;\n\t}\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\t font-size: 11pt;\n\t text-align: center;\n\t letter-spacing: 0.5px;\n\t line-height: 18px;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n\tdisplay: block;\n\tbox-sizing: border-box;\n\tfont-size: 11pt;\n\topacity: 0.8;\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n\t font-size: 7.5pt;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal a {\n\tdisplay: block;\n\tmargin: 4px auto 0;\n\tcolor: #17ce6a;\n\tfont-size: 8pt;\n\tfont-weight: 500;\n\ttext-transform: lowercase;\n\ttext-align: left;\n\tletter-spacing: 0.25px;\n\ttext-decoration: none;\n\ttransition: 0.15s;\n\topacity: 0.65;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal a:hover {\n\ttransition: 0.1s;\n\topacity: 1;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n\tfont-size: 18px;\n\ttext-align: center;\n\tmargin: 0 auto;\n\tcolor: unset;\n }\n @media (max-width: 768px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n\t text-align: center;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 img {\n\tmargin: 0 4px;\n\tdisplay: inline-block;\n\theight: 30px !important;\n\twidth: auto;\n\tposition: relative;\n\ttop: 6px;\n\tvertical-align: initial;\n }\n\n .sezzle-shopify-info-button {\n\tdisplay: block;\n\toverflow: hidden;\n\tmargin: 0;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper {\n\tdisplay: block;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n\tcolor: inherit;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper:focus {\n\toutline: 5px auto;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-left {\n\ttext-align: left;\n\tfloat: left;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-center {\n\ttext-align: center;\n\tfloat: none;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-right {\n\ttext-align: right;\n\tfloat: right;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text {\n\twidth: unset;\n\tmargin: auto;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n\tword-wrap: normal;\n\tline-height: 18px;\n\tfont-size: 14px;\n\tfont-weight: 500;\n\tfont-family: inherit;\n\tcolor: inherit;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-left {\n\ttext-align: left;\n\tmargin: 0;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-center {\n\ttext-align: center;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-right {\n\tfloat: right;\n\ttext-align: right;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-payment-amount {\n\tzoom: 1;\n\tfloat: none;\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n\tfont-weight: 900;\n\tfont-size: 1.2em;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-logo {\n\tdisplay: inline-block;\n\tbox-sizing: border-box;\n\theight: 18px;\n\twidth: auto;\n\topacity: 1;\n\tfloat: none;\n\tmargin: 0;\n\tmargin-bottom: -3px;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-info-icon {\n\tdisplay: inline;\n\twidth: auto;\n\tmargin: 0;\n\tbox-shadow: none;\n\tborder: none;\n\tpadding: 0px 0px 0px 3px;\n\tbackground: none;\n\tvertical-align: baseline;\n\tline-height: initial;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tcursor: pointer;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-ap-logo {\n\theight: 45px;\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n\tvertical-align: middle;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text button.ap-modal-info-link {\n\tdisplay: inline;\n\twidth: auto;\n\tmargin: 0;\n\tbox-shadow: none;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: middle;\n\tline-height: inherit;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tcursor: pointer;\n }\n\n .sezzle-hidden {\n\tdisplay: none;\n\tvisibility: hidden;\n }\n";
201
+ styleInject(css_248z);
202
+
203
+ function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
204
+ function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
205
+ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
206
+ function _defineProperty$1(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
207
+ function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
208
+ function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey$1(descriptor.key), descriptor); } }
209
+ function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
210
+ function _toPropertyKey$1(arg) { var key = _toPrimitive$1(arg, "string"); return _typeof$1(key) === "symbol" ? key : String(key); }
211
+ function _toPrimitive$1(input, hint) { if (_typeof$1(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$1(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
212
+ function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
213
+ function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
214
+ function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn$1(this, result); }; }
215
+ function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized$1(self); }
216
+ function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
217
+ function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
218
+ function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
219
+ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
220
+ _inherits$1(SezzleWidgetText, _React$Component);
221
+ var _super = _createSuper$1(SezzleWidgetText);
261
222
  function SezzleWidgetText(props) {
262
- classCallCheck(this, SezzleWidgetText);
263
-
264
- var _this = possibleConstructorReturn(this, (SezzleWidgetText.__proto__ || Object.getPrototypeOf(SezzleWidgetText)).call(this, props));
265
-
223
+ var _this;
224
+ _classCallCheck$1(this, SezzleWidgetText);
225
+ _this = _super.call(this, props);
266
226
  _this.state = {
267
227
  config: _this.props.config,
268
228
  sezzle: false,
@@ -271,26 +231,24 @@ var SezzleWidgetText = function (_React$Component) {
271
231
  };
272
232
  return _this;
273
233
  }
274
-
275
- createClass(SezzleWidgetText, [{
276
- key: 'renderSezzleWidgetText',
234
+ _createClass$1(SezzleWidgetText, [{
235
+ key: "renderSezzleWidgetText",
277
236
  value: function renderSezzleWidgetText() {
278
237
  var _this2 = this;
279
-
280
238
  var numberOfPayments = 4;
281
239
  var logoURLs = {
282
- 'light': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg',
283
- 'dark': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor_WhiteWM.svg',
240
+ light: 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg',
241
+ dark: 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor_WhiteWM.svg',
284
242
  'black-flat': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_BlackAlt.svg',
285
243
  'white-flat': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_WhiteAlt.svg'
286
244
  };
287
245
  var template = {
288
- en: 'or ' + numberOfPayments + ' interest-free payments of %%price%% with %%logo%%%%afterpay%%%%min-price%% %%info%%',
289
- fr: 'ou ' + numberOfPayments + ' paiements de %%price%% sans int\xE9r\xEAts avec %%logo%%%%afterpay%%%%min-price%% %%info%%'
246
+ en: "or ".concat(numberOfPayments, " interest-free payments of %%price%% with %%logo%%%%afterpay%%%%min-price%% %%info%%"),
247
+ fr: "ou ".concat(numberOfPayments, " paiements de %%price%% sans int\xE9r\xEAts avec %%logo%%%%afterpay%%%%min-price%% %%info%%")
290
248
  };
291
249
  var clickHere = {
292
250
  en: 'Click here to learn more about Sezzle',
293
- fr: 'Cliquez pour en savoir plus sur Sezzle'
251
+ fr: 'Cliquez ici pour en savoir plus sur Sezzle'
294
252
  };
295
253
  var ordersOver = {
296
254
  en: ' for orders over',
@@ -301,48 +259,63 @@ var SezzleWidgetText = function (_React$Component) {
301
259
  template[language].split('%%').forEach(function (subTemplate, index) {
302
260
  switch (subTemplate) {
303
261
  case 'price':
304
- var priceElement = React.createElement(
305
- 'span',
306
- { className: 'sezzle-payment-amount sezzle-button-text', key: index },
307
- getFormattedPrice(_this2.state.config.price, numberOfPayments)
308
- );
262
+ // eslint-disable-next-line no-case-declarations
263
+ var priceElement = /*#__PURE__*/React.createElement("span", {
264
+ className: "sezzle-payment-amount sezzle-button-text",
265
+ key: index
266
+ }, getFormattedPrice(_this2.state.config.price, numberOfPayments));
309
267
  subtemplates.push(priceElement);
310
268
  break;
311
269
  case 'logo':
312
- var logoElement = React.createElement('img', { alt: 'Sezzle',
313
- className: 'sezzle-logo szl-' + (_this2.state.config.theme === 'dark' || _this2.state.config.theme === 'white-flat' ? 'dark' : 'light') + '-image', src: logoURLs[_this2.state.config.theme] || logoURLs.light,
314
- style: { transformOrigin: 'top-' + _this2.state.config.alignment, transform: 'scale(' + _this2.state.config.logoSize + ')', cursor: 'pointer', width: '74px', height: '18px' },
315
- key: index, onClick: function onClick() {
270
+ // eslint-disable-next-line no-case-declarations
271
+ var logoElement = /*#__PURE__*/React.createElement("img", {
272
+ alt: "Sezzle",
273
+ className: "sezzle-logo szl-".concat(_this2.state.config.theme === 'dark' || _this2.state.config.theme === 'white-flat' ? 'dark' : 'light', "-image"),
274
+ src: logoURLs[_this2.state.config.theme] || logoURLs.light,
275
+ style: {
276
+ transformOrigin: "top-".concat(_this2.state.config.alignment),
277
+ transform: "scale(".concat(_this2.state.config.logoSize, ")"),
278
+ cursor: 'pointer',
279
+ width: '74px',
280
+ height: '18px'
281
+ },
282
+ key: index,
283
+ onClick: function onClick() {
316
284
  return _this2.openModal('sezzle');
317
- } });
285
+ }
286
+ });
318
287
  subtemplates.push(logoElement);
319
288
  break;
320
289
  case 'info':
321
- var infoElement = React.createElement(
322
- 'div',
323
- { 'aria-label': '' + clickHere[language], className: 'sezzle-info-icon', key: index, onClick: function onClick() {
324
- return _this2.openModal('sezzle');
325
- } },
326
- '\u24D8'
327
- );
290
+ // eslint-disable-next-line no-case-declarations
291
+ var infoElement = /*#__PURE__*/React.createElement("div", {
292
+ "aria-label": "".concat(clickHere[language]),
293
+ className: "sezzle-info-icon",
294
+ key: index,
295
+ onClick: function onClick() {
296
+ return _this2.openModal('sezzle');
297
+ }
298
+ }, "\u24D8");
328
299
  subtemplates.push(infoElement);
329
300
  break;
330
301
  case 'afterpay':
331
302
  if (_this2.state.config.includeAPModal) {
332
- subtemplates.push(language === "fr" ? "ou" : " or ");
333
- var apLogo = React.createElement('img', { className: 'sezzle-ap-logo ap-modal-info-link no-sezzle-info',
303
+ subtemplates.push(language === 'fr' ? ' ou ' : ' or ');
304
+ var apLogo = /*#__PURE__*/React.createElement("img", {
305
+ className: "sezzle-ap-logo ap-modal-info-link no-sezzle-info",
334
306
  src: 'https://media.sezzle.com/sezzle-credit-website-assets/ap-badge-black-on-mint.svg',
335
307
  onClick: function onClick() {
336
308
  return _this2.openModal('afterpay');
337
- }, key: index,
338
- alt: 'Afterpay'
309
+ },
310
+ key: index,
311
+ alt: "Afterpay"
339
312
  });
340
313
  subtemplates.push(apLogo);
341
314
  }
342
315
  break;
343
316
  case 'min-price':
344
317
  if (_this2.state.config.minPrice && !_this2.state.config.includeAPModal) {
345
- subtemplates.push(ordersOver[language] + ' $' + _this2.state.config.minPrice);
318
+ subtemplates.push("".concat(ordersOver[language], " $").concat(_this2.state.config.minPrice));
346
319
  }
347
320
  break;
348
321
  default:
@@ -352,64 +325,95 @@ var SezzleWidgetText = function (_React$Component) {
352
325
  return subtemplates;
353
326
  }
354
327
  }, {
355
- key: 'openModal',
328
+ key: "openModal",
356
329
  value: function openModal(modalType) {
357
- modalType === 'afterpay' ? this.setState({ afterpay: true }) : this.setState({ sezzle: true });
330
+ modalType === 'afterpay' ? this.setState({
331
+ afterpay: true
332
+ }) : this.setState({
333
+ sezzle: true
334
+ });
358
335
  }
359
336
  }, {
360
- key: 'closeModal',
337
+ key: "closeModal",
361
338
  value: function closeModal(modalType) {
362
- modalType === 'afterpay' ? this.setState({ afterpay: false }) : this.setState({ sezzle: false });
339
+ modalType === 'afterpay' ? this.setState({
340
+ afterpay: false
341
+ }) : this.setState({
342
+ sezzle: false
343
+ });
363
344
  }
364
345
  }, {
365
- key: 'render',
346
+ key: "render",
366
347
  value: function render() {
367
348
  var _this3 = this;
368
-
369
- return React.createElement(
370
- 'div',
371
- { className: 'sezzle-shopify-info-button sezzle-' + (this.state.config.merchantId || '') },
372
- React.createElement(
373
- 'div',
374
- { 'aria-haspopup': 'dialog', role: 'button', tabIndex: '0', className: 'sezzle-checkout-button-wrapper sezzle-modal-link sezzle-' + (this.state.config.merchantId || '') + ' sezzle-' + (this.state.config.alignment || 'auto'), style: { cursor: 'pointer' } },
375
- React.createElement(
376
- 'div',
377
- { className: 'sezzle-button-text sezzle-' + (this.state.config.alignment || 'auto') + ' szl-' + (this.state.config.theme === 'dark' || this.state.config.theme === 'white-flat' ? 'dark' : 'light'), style: { fontWeight: this.state.config.fontWeight || 500, fontFamily: this.state.config.fontFamily || 'inherit', fontSize: (this.state.config.fontSize || 14) + 'px', color: this.state.config.textColor || 'inherit' } },
378
- this.renderSezzleWidgetText()
379
- )
380
- ),
381
- this.state.modalsToShow.map(function (modal, index) {
382
- return React.createElement(Modal, { modalType: modal, key: index, toggleModalVisibility: _this3.state[modal], callbackModalClose: function callbackModalClose(modal) {
383
- return _this3.closeModal(modal);
384
- } });
385
- })
386
- );
349
+ return /*#__PURE__*/React.createElement("div", {
350
+ className: "sezzle-shopify-info-button sezzle-".concat(this.state.config.merchantId || '')
351
+ }, /*#__PURE__*/React.createElement("div", {
352
+ "aria-haspopup": "dialog",
353
+ role: "button",
354
+ tabIndex: "0",
355
+ className: "sezzle-checkout-button-wrapper sezzle-modal-link sezzle-".concat(this.state.config.merchantId || '', " sezzle-").concat(this.state.config.alignment || 'auto'),
356
+ style: {
357
+ cursor: 'pointer'
358
+ }
359
+ }, /*#__PURE__*/React.createElement("div", {
360
+ 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'),
361
+ style: {
362
+ fontWeight: this.state.config.fontWeight || 500,
363
+ fontFamily: this.state.config.fontFamily || 'inherit',
364
+ fontSize: (this.state.config.fontSize || 14) + 'px',
365
+ color: this.state.config.textColor || 'inherit'
366
+ }
367
+ }, this.renderSezzleWidgetText())), this.state.modalsToShow.map(function (modal, index) {
368
+ return /*#__PURE__*/React.createElement(Modal, {
369
+ modalType: modal,
370
+ key: index,
371
+ toggleModalVisibility: _this3.state[modal],
372
+ callbackModalClose: function callbackModalClose(modal) {
373
+ return _this3.closeModal(modal);
374
+ }
375
+ });
376
+ }));
387
377
  }
388
378
  }], [{
389
- key: 'getDerivedStateFromProps',
379
+ key: "getDerivedStateFromProps",
390
380
  value: function getDerivedStateFromProps(props, state) {
391
381
  var config = props.config;
392
- state = _extends({}, state, { config: config });
393
-
382
+ state = _objectSpread$1(_objectSpread$1({}, state), {}, {
383
+ config: config
384
+ });
394
385
  return state;
395
386
  }
396
387
  }]);
397
388
  return SezzleWidgetText;
398
389
  }(React.Component);
399
-
400
-
401
390
  SezzleWidgetText.propTypes = {
402
391
  config: PropTypes.object
403
392
  };
404
393
 
405
- var SezzleWidgetWrapper = function (_React$Component) {
406
- inherits(SezzleWidgetWrapper, _React$Component);
407
-
394
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
395
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
396
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
397
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
398
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
399
+ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
400
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
401
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
402
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
403
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
404
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
405
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
406
+ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
407
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
408
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
409
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
410
+ var SezzleWidgetWrapper = /*#__PURE__*/function (_React$Component) {
411
+ _inherits(SezzleWidgetWrapper, _React$Component);
412
+ var _super = _createSuper(SezzleWidgetWrapper);
408
413
  function SezzleWidgetWrapper(props) {
409
- classCallCheck(this, SezzleWidgetWrapper);
410
-
411
- var _this = possibleConstructorReturn(this, (SezzleWidgetWrapper.__proto__ || Object.getPrototypeOf(SezzleWidgetWrapper)).call(this, props));
412
-
414
+ var _this;
415
+ _classCallCheck(this, SezzleWidgetWrapper);
416
+ _this = _super.call(this, props);
413
417
  _this.state = {
414
418
  sezzleConfig: {
415
419
  price: _this.props.price || 0,
@@ -428,34 +432,30 @@ var SezzleWidgetWrapper = function (_React$Component) {
428
432
  };
429
433
  return _this;
430
434
  }
431
-
432
- createClass(SezzleWidgetWrapper, [{
433
- key: 'render',
435
+ _createClass(SezzleWidgetWrapper, [{
436
+ key: "render",
434
437
  value: function render() {
435
- return React.createElement(
436
- 'div',
437
- null,
438
- React.createElement(SezzleWidgetText, { config: this.state.sezzleConfig })
439
- );
438
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SezzleWidgetText, {
439
+ config: this.state.sezzleConfig
440
+ }));
440
441
  }
441
442
  }], [{
442
- key: 'getDerivedStateFromProps',
443
+ key: "getDerivedStateFromProps",
443
444
  value: function getDerivedStateFromProps(props, state) {
444
445
  if (props.price !== state.sezzleConfig.price) {
445
446
  var updateState = state;
446
447
  updateState.sezzleConfig.price = props.price;
447
448
  return updateState;
448
449
  }
449
- state = _extends({}, state);
450
-
451
- if (props.includeAPModal) state.sezzleConfig.modalsToShow.push('afterpay');
450
+ state = _objectSpread({}, state);
451
+ if (props.includeAPModal && state.sezzleConfig.modalsToShow.indexOf('afterpay') === -1) {
452
+ state.sezzleConfig.modalsToShow.push('afterpay');
453
+ }
452
454
  return state;
453
455
  }
454
456
  }]);
455
457
  return SezzleWidgetWrapper;
456
458
  }(React.Component);
457
-
458
-
459
459
  SezzleWidgetWrapper.propTypes = {
460
460
  price: PropTypes.string.isRequired,
461
461
  merchantId: PropTypes.string.isRequired,
@@ -466,8 +466,9 @@ SezzleWidgetWrapper.propTypes = {
466
466
  fontSize: PropTypes.number,
467
467
  textColor: PropTypes.string,
468
468
  logoSize: PropTypes.number,
469
+ minPrice: PropTypes.number,
469
470
  includeAPModal: PropTypes.bool
470
471
  };
471
472
 
472
- export default SezzleWidgetWrapper;
473
+ export { SezzleWidgetWrapper as default };
473
474
  //# sourceMappingURL=index.es.js.map