From 119a1c1052b300c695835e826561bb0dc2023186 Mon Sep 17 00:00:00 2001
From: Max Parker <max.parker@gene.co.uk>
Date: Tue, 20 May 2025 15:29:02 +0100
Subject: [PATCH 1/3] Added placeholder express methods to prevent CLS
 Introduction of a placeholder express methods section so that third parties
 can indicate that they will be rendering express methods before they have
 loaded to prevent CSL.

---
 .../DetailsPage/DetailsPage.vue               | 19 +++++++++++++++++--
 .../DividerComponent/DividerComponent.vue     |  4 ++--
 .../src/stores/PaymentStores/PaymentStore.js  |  3 +++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue b/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue
index a878496a..33b7152b 100644
--- a/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue
+++ b/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="details-form">
     <div class="details-form-header"
-         v-show="isExpressPaymentsVisible && (typeof ageCheckRequired === 'undefined' || !ageCheckRequired)">
+         v-show="(isExpressPaymentsVisible || placeholderExpressMethods.length)
+          && (typeof ageCheckRequired === 'undefined' || !ageCheckRequired)">
       <div class="instantCheckout-block">
         <TextField
           :text="instantCheckoutText"
@@ -38,6 +39,14 @@
           v-for="expressPaymentMethod in expressPaymentMethods"
           :key="`${expressPaymentMethod}-${storedKey}`"
         />
+        <template
+          v-for="index in placeholderExpressMethods"
+          :key="index"
+        >
+          <div class="button button--blank">
+            <div class="text-loading" />
+          </div>
+        </template>
       </div>
     </div>
     <div class="details-form-body">
@@ -372,6 +381,7 @@ export default {
       ageCheckerExtensions: [],
       clickAndCollectComponents: [],
       isCreditComponentVisible: false,
+      placeholderExpress: window.bluefinchCheckout?.placeholderExpress,
     };
   },
   watch: {
@@ -406,7 +416,12 @@ export default {
       'isUsingSavedShippingAddress',
     ]),
     ...mapState(useShippingMethodsStore, ['isClickAndCollect']),
-    ...mapState(usePaymentStore, ['errorMessage', 'isExpressPaymentsVisible', 'isPaymentMethodAvailable']),
+    ...mapState(usePaymentStore, [
+      'errorMessage',
+      'placeholderExpressMethods',
+      'isExpressPaymentsVisible',
+      'isPaymentMethodAvailable'
+    ]),
     ...mapState(useValidationStore, ['errors', 'isAddressValid']),
     ...mapState(useBraintreeStore, ['paypal']),
     selectedAddressType() {
diff --git a/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DividerComponent/DividerComponent.vue b/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DividerComponent/DividerComponent.vue
index 9521dce4..25ce7c3d 100644
--- a/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DividerComponent/DividerComponent.vue
+++ b/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DividerComponent/DividerComponent.vue
@@ -2,7 +2,7 @@
   <div class="divider">
     <div class="divider-line" />
     <TextField
-      v-if="isExpressPaymentsVisible"
+      v-if="isExpressPaymentsVisible || placeholderExpressMethods.length"
       :text="dividerText"
       :data-cy="'instant-checkout-divider-text'"
     />
@@ -34,7 +34,7 @@ export default {
   },
   computed: {
     ...mapState(useConfigStore, ['locale']),
-    ...mapState(usePaymentStore, ['availableMethods', 'isExpressPaymentsVisible']),
+    ...mapState(usePaymentStore, ['availableMethods', 'isExpressPaymentsVisible', 'placeholderExpressMethods']),
   },
   async mounted() {
     if (!this.locale) {
diff --git a/view/frontend/web/js/checkout/src/stores/PaymentStores/PaymentStore.js b/view/frontend/web/js/checkout/src/stores/PaymentStores/PaymentStore.js
index a6ca70aa..b89c5ee8 100644
--- a/view/frontend/web/js/checkout/src/stores/PaymentStores/PaymentStore.js
+++ b/view/frontend/web/js/checkout/src/stores/PaymentStores/PaymentStore.js
@@ -14,6 +14,7 @@ export default defineStore('paymentStore', {
     paymentEmitter: mitt(),
     availableMethods: getCartPaymentMethods(),
     expressMethods: [],
+    placeholderExpressMethods: window.bluefinchCheckout?.placeholderExpressMethods || [],
     hasVaultedMethods: false,
     firstOpenController: 'braintree',
     selectedMethod: null,
@@ -70,6 +71,8 @@ export default defineStore('paymentStore', {
     addExpressMethod(method) {
       this.setData({
         expressMethods: this.$state.expressMethods.concat([method]),
+        placeholderExpressMethods: this.$state.placeholderExpressMethods
+          .filter((placeholderMethod) => method !== placeholderMethod),
       });
     },
 

From db3334e8fb1541c20a4d26ad60e9a3f9a204df78 Mon Sep 17 00:00:00 2001
From: Max Parker <max.parker@gene.co.uk>
Date: Wed, 24 Sep 2025 15:42:24 +0100
Subject: [PATCH 2/3] Fix eslint issues

---
 .../Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue b/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue
index cb9eece5..f5914bd5 100644
--- a/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue
+++ b/view/frontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue
@@ -432,7 +432,7 @@ export default {
       'errorMessage',
       'placeholderExpressMethods',
       'isExpressPaymentsVisible',
-      'isPaymentMethodAvailable'
+      'isPaymentMethodAvailable',
     ]),
     ...mapState(useValidationStore, ['errors', 'isAddressValid']),
     ...mapState(useBraintreeStore, ['paypal']),

From 3b0532910b65b0a50c416996b6a178841e021f2e Mon Sep 17 00:00:00 2001
From: Max Parker <max.parker@gene.co.uk>
Date: Wed, 24 Sep 2025 16:01:27 +0100
Subject: [PATCH 3/3] Updated PayPal Express default height

---
 .../src/components/Steps/PaymentPage/Braintree/PayPal/PayPal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/view/frontend/web/js/checkout/src/components/Steps/PaymentPage/Braintree/PayPal/PayPal.vue b/view/frontend/web/js/checkout/src/components/Steps/PaymentPage/Braintree/PayPal/PayPal.vue
index ac5232b8..21cbfea8 100644
--- a/view/frontend/web/js/checkout/src/components/Steps/PaymentPage/Braintree/PayPal/PayPal.vue
+++ b/view/frontend/web/js/checkout/src/components/Steps/PaymentPage/Braintree/PayPal/PayPal.vue
@@ -152,6 +152,7 @@ export default {
             shape: this.paypal.buttonShape,
             color: this.paypal.buttonColor,
             tagline: false,
+            height: 45,
           },
           fundingSource: this.isCredit ? window[this.namespace].FUNDING.CREDIT : window[this.namespace].FUNDING.PAYPAL,
           createOrder: () => paypalInstance.createPayment({