Clearpay SFCC cartridges v24.1.3

clearpayeu · Dec 4, 2024 · 3473129 · 3473129
1 parent 0565ca2
commit 3473129
Show file tree

Hide file tree

Showing 18 changed files with 64 additions and 70 deletions.
diff --git a/cartridges/int_clearpay_core/cartridge/scripts/logic/services/clearpayHttpService.js b/cartridges/int_clearpay_core/cartridge/scripts/logic/services/clearpayHttpService.js
@@ -49,7 +49,7 @@ function getClearpayHttpService() {
             service.setRequestMethod(requestBody.requestMethod);
             service.addHeader('Content-Type', 'application/json');
 
-            var clearpayCartridge = 'ClearpayCartridge/24.1.2';
+            var clearpayCartridge = 'ClearpayCartridge/24.1.3';
             var merchantID = service.configuration.credential.user;
             var siteURL = URLUtils.httpsHome().toString();
             var storeFront = Site.getCurrent().getID();

diff --git a/cartridges/int_clearpay_sfra/cartridge/client/default/scss/clearpaystyle.scss b/cartridges/int_clearpay_sfra/cartridge/client/default/scss/clearpaystyle.scss
@@ -193,7 +193,6 @@ $screen_width : 767px;
 .clearpay-checkout-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/checkout-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -203,7 +202,6 @@ $screen_width : 767px;
 .clearpay-buynow-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/buy-now-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -214,7 +212,6 @@ $screen_width : 767px;
 .clearpay-placeorder-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/place-order-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -235,6 +232,3 @@ $screen_width : 767px;
     display: block;
 }
 
-img.clearpay-checkout-logo {
-    content: url('https://static.afterpay.com/integration/checkout/logo-clearpay-colour-131x25.png');
-}
diff --git a/cartridges/int_clearpay_sfra/cartridge/client/default/scss/global.scss b/cartridges/int_clearpay_sfra/cartridge/client/default/scss/global.scss
@@ -5,7 +5,6 @@
 .clearpay-checkout-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/checkout-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -16,9 +15,9 @@
     display: none !important;
 }
 
-img.clearpay-image {
+img.cp-footer-image {
     vertical-align: middle;
     width: 7em;
     margin: 5px 0;
-    content: url('https://static.afterpay.com/integration/product-page/logo-clearpay-colour.png');
+    max-width: 100px;
 }
diff --git a/cartridges/int_clearpay_sfra/cartridge/templates/default/cart/checkoutButtons.isml b/cartridges/int_clearpay_sfra/cartridge/templates/default/cart/checkoutButtons.isml
@@ -30,18 +30,19 @@ clearpayExpressPickupEnabled - does the current cart and selected ship method in
     if (disableClearpayPaymentMethod) {
         checkoutButtonClass += " clearpay-hide";
     }
+    buttonUrl = "https://static.afterpay.com/" + request.getLocale().replace('_', '-') + "/integration/button/checkout-with-clearpay/white-on-black.svg";
 </isscript>
 <iscomment>Start of Clearpay</iscomment>
 <isif condition="${clearpayExpressCheckoutEnabled}">
     <isset name="clearpayExpressCheckoutPage" value="cart" scope="page" />
     <isinclude template="product/components/clearpayexpresscheckout" />
     <div class="mb-sm-3">
         <isif condition="${isExpressCheckoutFinalize}">
-            <a href="${URLUtils.url('ClearpayExpress-ContinueFinalize')}" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}">
+            <a href="${URLUtils.url('ClearpayExpress-ContinueFinalize')}" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}" style="background-image: url('${buttonUrl}');">
             &nbsp;
             </a>
         <iselseif condition="${clearpayExpressCheckoutCartEnabled}" />
-            <a id="clearpay-express-button" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}" role="button">
+            <a id="clearpay-express-button" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}" role="button" style="background-image: url('${buttonUrl}');">
             &nbsp;
             </a>
         </isif>

diff --git a/cartridges/int_clearpay_sfra/cartridge/templates/default/checkout/checkout.isml b/cartridges/int_clearpay_sfra/cartridge/templates/default/checkout/checkout.isml
@@ -116,8 +116,11 @@
                             </button>
                             <iscomment>Start of Clearpay</iscomment>
                             </div>
+                            <isset name="merchantLocale" value="${request.getLocale().replace('_', '-')}" scope="page" />
                             <input id="clearpay-placeorder-button" class="clearpay-widget-hideuntilready ${buttonPlaceOrderClass} btn btn-block ap-checkout-pay-tab-ecf ap-checkout-po-ecf"
-                                    type="button">&nbsp;
+                                type="button" style="background-image: url('https://static.afterpay.com/${merchantLocale}/integration/button/place-order-with-clearpay/white-on-black.svg');"
+                            >
+                                &nbsp;
                             </input>
                             <iscomment>End of Clearpay</iscomment>
                         </div>

diff --git a/cartridges/int_clearpay_sfra/cartridge/templates/default/components/footer/pageFooter.isml b/cartridges/int_clearpay_sfra/cartridge/templates/default/components/footer/pageFooter.isml
@@ -9,13 +9,15 @@
             </div>
             <div class="footer-item col-sm-2 collapsible-xs">
                 <isset name="cpBrand" value="${pdict.CurrentSession.privacy.clearpayBrand}" scope="page"/>
+                <isset name="merchantLocale" value="${request.getLocale().replace('_', '-')}" scope="page" />
                 <isif condition="${pdict.CurrentSession.privacy.clearpayApplicable && cpBrand}">
                     <div>
                         <h2 class="title d-none d-sm-block">${Resource.msg('footer.payments', 'clearpay', null)}</h2>
                     </div>
-                    <img class="clearpay-image"
+                    <img class="cp-footer-image"
                         height="32"
                         alt="${cpBrand}"
+                        src="https://static.afterpay.com/${merchantLocale}/integration/logo/lockup/color-black-32.svg"
                     />
                 </isif>
             </div>

diff --git a/...learpay_sfra/cartridge/templates/default/product/components/addToCartButtonExtension.isml b/...learpay_sfra/cartridge/templates/default/product/components/addToCartButtonExtension.isml
@@ -34,22 +34,23 @@ clearpayExpressPickupEnabled - does the current cart and selected ship method in
         if (disableClearpayPaymentMethod) {
             buttonClass += ' clearpay-hide';
         }
+        var buttonUrl = "https://static.afterpay.com/" + request.getLocale().replace('_', '-') + "/integration/button/buy-now-with-clearpay/white-on-black.svg";
     </isscript>
-    <div class="col-12 pdp-checkout-button">
-        <isif condition="${isExpressCheckoutFinalize}">
-            <button id="clearpay-continue-finalize-button" class="${buttonClass}"
-                data-toggle="modal"
-                data-pid="${product.id}"
-                ${!product.readyToOrder || !product.available ? "disabled" : ""}>
-                &nbsp;
-            </button>            
-        <iselse/>
-            <button id="clearpay-express-pdp-button" class="${buttonClass}"
-                data-toggle="modal"
-                data-pid="${product.id}"
-                ${!product.readyToOrder || !product.available ? "disabled" : ""}>
-                &nbsp;
-            </button>
-        </isif>
-    </div>
+    <isif condition="${isExpressCheckoutFinalize}">
+        <button id="clearpay-continue-finalize-button" class="${buttonClass}"
+            data-toggle="modal"
+            data-pid="${product.id}"
+            ${!product.readyToOrder || !product.available ? "disabled" : ""}
+            style="background-image: url('${buttonUrl}');">
+            &nbsp;
+        </button>            
+    <iselse/>
+        <button id="clearpay-express-pdp-button" class="${buttonClass}"
+            data-toggle="modal"
+            data-pid="${product.id}"
+            ${!product.readyToOrder || !product.available ? "disabled" : ""}
+            style="background-image: url('${buttonUrl}');">
+            &nbsp;
+        </button>
+    </isif>
 </isif>
diff --git a/cartridges/int_clearpay_sfra_6/cartridge/client/default/scss/clearpaystyle.scss b/cartridges/int_clearpay_sfra_6/cartridge/client/default/scss/clearpaystyle.scss
@@ -193,7 +193,6 @@ $screen_width : 767px;
 .clearpay-checkout-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/checkout-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -203,7 +202,6 @@ $screen_width : 767px;
 .clearpay-buynow-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/buy-now-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -214,7 +212,6 @@ $screen_width : 767px;
 .clearpay-placeorder-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/place-order-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -235,6 +232,3 @@ $screen_width : 767px;
     display: block;
 }
 
-img.clearpay-checkout-logo {
-    content: url('https://static.afterpay.com/integration/checkout/logo-clearpay-colour-131x25.png');
-}
diff --git a/cartridges/int_clearpay_sfra_6/cartridge/client/default/scss/global.scss b/cartridges/int_clearpay_sfra_6/cartridge/client/default/scss/global.scss
@@ -5,7 +5,6 @@
 .clearpay-checkout-button {
     background-color: #000;
     color: #fff !important;
-    background-image: url('https://static.afterpay.com/button/checkout-with-clearpay/white-on-black.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position-x: center;
@@ -16,9 +15,9 @@
     display: none !important;
 }
 
-img.clearpay-image {
+img.cp-footer-image {
     vertical-align: middle;
     width: 7em;
     margin: 5px 0;
-    content: url('https://static.afterpay.com/integration/product-page/logo-clearpay-colour.png');
+    max-width: 100px;
 }
diff --git a/cartridges/int_clearpay_sfra_6/cartridge/templates/default/cart/checkoutButtons.isml b/cartridges/int_clearpay_sfra_6/cartridge/templates/default/cart/checkoutButtons.isml
@@ -30,18 +30,19 @@ clearpayExpressPickupEnabled - does the current cart and selected ship method in
     if (disableClearpayPaymentMethod) {
         checkoutButtonClass += " clearpay-hide";
     }
+    buttonUrl = "https://static.afterpay.com/" + request.getLocale().replace('_', '-') + "/integration/button/checkout-with-clearpay/white-on-black.svg";
 </isscript>
 <iscomment>Start of Clearpay</iscomment>
 <isif condition="${clearpayExpressCheckoutEnabled}">
     <isset name="clearpayExpressCheckoutPage" value="cart" scope="page" />
     <isinclude template="product/components/clearpayexpresscheckout" />
     <div class="mb-sm-3">
         <isif condition="${isExpressCheckoutFinalize}">
-            <a href="${URLUtils.url('ClearpayExpress-ContinueFinalize')}" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}">
+            <a href="${URLUtils.url('ClearpayExpress-ContinueFinalize')}" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}" style="background-image: url('${buttonUrl}');">
             &nbsp;
             </a>
         <iselseif condition="${clearpayExpressCheckoutCartEnabled}" />
-            <a id="clearpay-express-button" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}" role="button">
+            <a id="clearpay-express-button" class="${checkoutButtonClass} btn btn-block checkout-btn ${pdict.valid.error ? 'disabled' : ''}" role="button" style="background-image: url('${buttonUrl}');">
             &nbsp;
             </a>
         </isif>

diff --git a/cartridges/int_clearpay_sfra_6/cartridge/templates/default/checkout/checkout.isml b/cartridges/int_clearpay_sfra_6/cartridge/templates/default/checkout/checkout.isml
@@ -133,8 +133,11 @@
                             </button>
                             <iscomment>Start of Clearpay</iscomment>
                             </div>
+                            <isset name="merchantLocale" value="${request.getLocale().replace('_', '-')}" scope="page" />
                             <input id="clearpay-placeorder-button" class="clearpay-widget-hideuntilready ${buttonPlaceOrderClass} btn btn-block ap-checkout-pay-tab-ecf ap-checkout-po-ecf"
-                                    type="button">&nbsp;
+                                type="button" style="background-image: url('https://static.afterpay.com/${merchantLocale}/integration/button/place-order-with-clearpay/white-on-black.svg');"
+                            >
+                                &nbsp;
                             </input>
                             <iscomment>End of Clearpay</iscomment>
                         </div>

diff --git a/cartridges/int_clearpay_sfra_6/cartridge/templates/default/components/footer/pageFooter.isml b/cartridges/int_clearpay_sfra_6/cartridge/templates/default/components/footer/pageFooter.isml
@@ -9,13 +9,15 @@
             </div>
             <div class="footer-item col-sm-2 collapsible-xs">
                 <isset name="cpBrand" value="${pdict.CurrentSession.privacy.clearpayBrand}" scope="page"/>
+                <isset name="merchantLocale" value="${request.getLocale().replace('_', '-')}" scope="page" />
                 <isif condition="${pdict.CurrentSession.privacy.clearpayApplicable && cpBrand}">
                     <div>
                         <h2 class="title d-none d-sm-block">${Resource.msg('footer.payments', 'clearpay', null)}</h2>
                     </div>
-                    <img class="clearpay-image"
+                    <img class="cp-footer-image"
                         height="32"
                         alt="${cpBrand}"
+                        src="https://static.afterpay.com/${merchantLocale}/integration/logo/lockup/color-black-32.svg"
                     />
                 </isif>
             </div>

diff --git a/...arpay_sfra_6/cartridge/templates/default/product/components/addToCartButtonExtension.isml b/...arpay_sfra_6/cartridge/templates/default/product/components/addToCartButtonExtension.isml
@@ -34,22 +34,23 @@ clearpayExpressPickupEnabled - does the current cart and selected ship method in
         if (disableClearpayPaymentMethod) {
             buttonClass += ' clearpay-hide';
         }
+        var buttonUrl = "https://static.afterpay.com/" + request.getLocale().replace('_', '-') + "/integration/button/buy-now-with-clearpay/white-on-black.svg";
     </isscript>
-    <div class="col-12 pdp-checkout-button">
-        <isif condition="${isExpressCheckoutFinalize}">
-            <button id="clearpay-continue-finalize-button" class="${buttonClass}"
-                data-toggle="modal"
-                data-pid="${product.id}"
-                ${!product.readyToOrder || !product.available ? "disabled" : ""}>
-                &nbsp;
-            </button>            
-        <iselse/>
-            <button id="clearpay-express-pdp-button" class="${buttonClass}"
-                data-toggle="modal"
-                data-pid="${product.id}"
-                ${!product.readyToOrder || !product.available ? "disabled" : ""}>
-                &nbsp;
-            </button>
-        </isif>
-    </div>
+    <isif condition="${isExpressCheckoutFinalize}">
+        <button id="clearpay-continue-finalize-button" class="${buttonClass}"
+            data-toggle="modal"
+            data-pid="${product.id}"
+            ${!product.readyToOrder || !product.available ? "disabled" : ""}
+            style="background-image: url('${buttonUrl}');">
+            &nbsp;
+        </button>            
+    <iselse/>
+        <button id="clearpay-express-pdp-button" class="${buttonClass}"
+            data-toggle="modal"
+            data-pid="${product.id}"
+            ${!product.readyToOrder || !product.available ? "disabled" : ""}
+            style="background-image: url('${buttonUrl}');">
+            &nbsp;
+        </button>
+    </isif>
 </isif>
diff --git a/...ay v24.1.2 Integration Guide RefArch.docx → ...ay v24.1.3 Integration Guide RefArch.docx b/...ay v24.1.2 Integration Guide RefArch.docx → ...ay v24.1.3 Integration Guide RefArch.docx
diff --git a/...24.1.2 Integration Guide SiteGenesis.docx → ...24.1.3 Integration Guide SiteGenesis.docx b/...24.1.2 Integration Guide SiteGenesis.docx → ...24.1.3 Integration Guide SiteGenesis.docx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Clearpay",
-  "version": "24.1.2",
+  "version": "24.1.3",
   "description": "Clearpay's official cartridge for SFRA and controllers-based SiteGenesis ",
   "main": "index.js",
   "engines": {

diff --git a/reference/_clearpay.scss b/reference/_clearpay.scss
@@ -229,15 +229,13 @@ $laptop : 960px;
 .clearpay-checkout-button {
     width: 246px;
     height: 37px;
-    background-image: url('https://static.afterpay.com/button/checkout-with-clearpay/white-on-black.svg');
     background-size: cover;
     background-color: #000 !important;
 }
 
 .clearpay-paynow-button {
     width: 246px !important;
     height: 37px;
-    background-image: url('https://static.afterpay.com/button/buy-now-with-clearpay/white-on-black.svg');
     background-size: cover;
     background-color: #000 !important;
 }
@@ -290,12 +288,8 @@ $laptop : 960px;
     align-items: flex-start;
     width: 246px !important;
     height: 37px;
-    background-image: url('https://static.afterpay.com/button/place-order-with-clearpay/white-on-black.svg');
     background-size: cover;
     background-color: #000 !important;
     border: none;
 }
 
-img.clearpay-checkout-logo {
-    content: url('https://static.afterpay.com/integration/checkout/logo-clearpay-colour-131x25.png');
-}