From de1e386f62fac805173a12f7736bd3ddcdf4ddbe Mon Sep 17 00:00:00 2001
From: Murray Wood <murray@digitalpenguin.studio>
Date: Sat, 21 Mar 2026 12:03:05 +0800
Subject: [PATCH 1/2] Add handling for accept terms checkbox

---
 .../commerce_splitit/docs/changelog.txt       |   7 ++
 .../lexicon/en/default.inc.php                |   2 +
 .../templates/frontend/gateways/splitit.twig  | 100 ++++++++++++++----
 3 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/core/components/commerce_splitit/docs/changelog.txt b/core/components/commerce_splitit/docs/changelog.txt
index 5fdcdec..e5c6b1b 100644
--- a/core/components/commerce_splitit/docs/changelog.txt
+++ b/core/components/commerce_splitit/docs/changelog.txt
@@ -1,3 +1,10 @@
+Splitit for Commerce 2.2.0-pl
+---------------------------------
+Released on TBD
+
+- Automatically detect Commerce's AcceptTerms module and gate the Splitit widget until terms are accepted
+- Show a notice message when Splitit is selected but terms have not been accepted yet
+
 Splitit for Commerce 2.1.0-pl
 ---------------------------------
 Released on 25-01-2024
diff --git a/core/components/commerce_splitit/lexicon/en/default.inc.php b/core/components/commerce_splitit/lexicon/en/default.inc.php
index 43d733c..d39c36e 100644
--- a/core/components/commerce_splitit/lexicon/en/default.inc.php
+++ b/core/components/commerce_splitit/lexicon/en/default.inc.php
@@ -16,6 +16,8 @@
 $_lang['setting_commerce_splitit.locale'] = 'Splitit Locale';
 $_lang['setting_commerce_splitit.locale_desc'] = 'Set a locale for Splitit to use. e.g. en-US or fr-FR. If no value is found, the core locale system setting will be used instead. Default is en-US. If you have more than one language, add this setting to each of your contexts with a different value in each.';
 
+$_lang['commerce_splitit.accept_terms_first'] = 'Please accept the terms and conditions before paying with Splitit.';
+
 // Transaction lexicons
 $_lang['commerce.payment_verified'] = 'Payment Verified';
 $_lang['commerce.is_paid'] = 'Is Paid';
diff --git a/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig b/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig
index 36f2721..fa049ef 100644
--- a/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig
+++ b/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig
@@ -2,7 +2,17 @@
     #splitit-container .spt-btn {
         /*display: none;*/
     }
+    #splitit-terms-notice {
+        display: none;
+        padding: 0.75rem 1rem;
+        margin-bottom: 0.75rem;
+        background: #fff8e1;
+        border: 1px solid #f0c040;
+        border-radius: 4px;
+        color: #555;
+    }
 </style>
+<div id="splitit-terms-notice"></div>
 <div id="splitit-container"></div>
 <script>
     function initializeSplitit() {
@@ -29,10 +39,17 @@
                 cultureName: "{{ consumer_data.CultureName|lower }}",
             },
             onSuccess: function(result) {
-                // Add data to form
-                const form = CommercePayments.getForm(),
-                    input = document.createElement("input");
+                var form = CommercePayments.getForm();
+
+                // If Commerce's AcceptTerms module is active, verify terms are accepted before submitting
+                var acceptTermsCheckbox = form.querySelector('input[name="accept_terms"]');
+                if (acceptTermsCheckbox && !acceptTermsCheckbox.checked) {
+                    showSplititTermsNotice();
+                    return;
+                }
 
+                // Add data to form
+                var input = document.createElement("input");
                 input.setAttribute("type", "hidden");
                 input.setAttribute("name", "splitit_data");
                 input.setAttribute("value", JSON.stringify(result));
@@ -60,35 +77,76 @@
         btn.style.visibility = 'hidden';
     }
 
+    function showSplititTermsNotice() {
+        var notice = document.getElementById('splitit-terms-notice');
+        if (notice) {
+            notice.textContent = '{{ lex("commerce_splitit.accept_terms_first") }}';
+            notice.style.display = 'block';
+        }
+    }
+
+    function hideSplititTermsNotice() {
+        var notice = document.getElementById('splitit-terms-notice');
+        if (notice) {
+            notice.style.display = 'none';
+        }
+    }
+
     // Wait until the page has finished loading
     CommercePayments.onReady(function() {
-        const form = CommercePayments.getForm();
-        const btn = document.querySelector('button[type=submit].c-primary-button');
-        const method = form.querySelector('#payment-method-{{ method }}');
-        const radios = form.querySelectorAll('input[type=radio].c-payment-method-radio');
+        var form = CommercePayments.getForm();
+        var btn = document.querySelector('button[type=submit].c-primary-button');
+        var method = form.querySelector('#payment-method-{{ method }}');
+        var radios = form.querySelectorAll('input[type=radio].c-payment-method-radio');
+        var acceptTermsCheckbox = form.querySelector('input[name="accept_terms"]');
 
-        // Show Splitit widget
-        const splitit = initializeSplitit(method);
+        var splitit = initializeSplitit();
 
-        if (method.checked) {
-            // Splitit widget has its own submit button that can't be disabled, so we disable and hide the commerce
-            // submit button here if the Splitit method is selected.
-            splitit.show();
-            splititDisableSubmitBtn(btn);
+        /**
+         * Check if the AcceptTerms checkbox exists and is checked.
+         * Returns true when no checkbox is present (module not active).
+         */
+        function termsAccepted() {
+            return !acceptTermsCheckbox || acceptTermsCheckbox.checked;
         }
 
-        radios.forEach(function(radio) {
-            radio.addEventListener('change', function(e) {
-                if (e.target.checked && e.target === method) {
+        /**
+         * Shows or hides the Splitit widget based on selected payment method
+         * and accept terms checkbox state.
+         */
+        function updateSplititVisibility() {
+            if (method.checked) {
+                splititDisableSubmitBtn(btn);
+                if (termsAccepted()) {
                     splitit.show();
-                    splititDisableSubmitBtn(btn);
-                }
-                else {
+                    hideSplititTermsNotice();
+                } else {
                     splitit.hide();
-                    splititEnableSubmitBtn(btn);
+                    showSplititTermsNotice();
                 }
+            } else {
+                splitit.hide();
+                hideSplititTermsNotice();
+                splititEnableSubmitBtn(btn);
+            }
+        }
+
+        if (method.checked) {
+            updateSplititVisibility();
+        }
+
+        radios.forEach(function(radio) {
+            radio.addEventListener('change', function() {
+                updateSplititVisibility();
             });
         });
 
+        if (acceptTermsCheckbox) {
+            acceptTermsCheckbox.addEventListener('change', function() {
+                if (method.checked) {
+                    updateSplititVisibility();
+                }
+            });
+        }
     });
 </script>

From 27a0a0194ecab24e9f415a75cfcfa2c070d6205e Mon Sep 17 00:00:00 2001
From: Murray Wood <murray@digitalpenguin.studio>
Date: Sat, 21 Mar 2026 12:18:23 +0800
Subject: [PATCH 2/2] Add handling for if Splitit API authentication fails

---
 .../commerce_splitit/docs/changelog.txt       |  1 +
 .../lexicon/en/default.inc.php                |  1 +
 .../templates/frontend/gateways/splitit.twig  | 31 +++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/core/components/commerce_splitit/docs/changelog.txt b/core/components/commerce_splitit/docs/changelog.txt
index e5c6b1b..ff362f3 100644
--- a/core/components/commerce_splitit/docs/changelog.txt
+++ b/core/components/commerce_splitit/docs/changelog.txt
@@ -4,6 +4,7 @@ Released on TBD
 
 - Automatically detect Commerce's AcceptTerms module and gate the Splitit widget until terms are accepted
 - Show a notice message when Splitit is selected but terms have not been accepted yet
+- Show a user-friendly error instead of a JS exception when Splitit API authentication fails
 
 Splitit for Commerce 2.1.0-pl
 ---------------------------------
diff --git a/core/components/commerce_splitit/lexicon/en/default.inc.php b/core/components/commerce_splitit/lexicon/en/default.inc.php
index d39c36e..148163b 100644
--- a/core/components/commerce_splitit/lexicon/en/default.inc.php
+++ b/core/components/commerce_splitit/lexicon/en/default.inc.php
@@ -17,6 +17,7 @@
 $_lang['setting_commerce_splitit.locale_desc'] = 'Set a locale for Splitit to use. e.g. en-US or fr-FR. If no value is found, the core locale system setting will be used instead. Default is en-US. If you have more than one language, add this setting to each of your contexts with a different value in each.';
 
 $_lang['commerce_splitit.accept_terms_first'] = 'Please accept the terms and conditions before paying with Splitit.';
+$_lang['commerce_splitit.gateway_error'] = 'The Splitit payment method is temporarily unavailable. Please choose a different payment method or try again later.';
 
 // Transaction lexicons
 $_lang['commerce.payment_verified'] = 'Payment Verified';
diff --git a/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig b/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig
index fa049ef..01d66b7 100644
--- a/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig
+++ b/core/components/commerce_splitit/templates/frontend/gateways/splitit.twig
@@ -11,9 +11,21 @@
         border-radius: 4px;
         color: #555;
     }
+    #splitit-error {
+        padding: 0.75rem 1rem;
+        margin-bottom: 0.75rem;
+        background: #fdecea;
+        border: 1px solid #f5c6cb;
+        border-radius: 4px;
+        color: #721c24;
+    }
 </style>
 <div id="splitit-terms-notice"></div>
+{% if ipn %}
 <div id="splitit-container"></div>
+{% else %}
+<div id="splitit-error">{{ lex("commerce_splitit.gateway_error") }}</div>
+{% endif %}
 <script>
     function initializeSplitit() {
         return window.Splitit.FlexForm.setup({
@@ -100,6 +112,7 @@
         var radios = form.querySelectorAll('input[type=radio].c-payment-method-radio');
         var acceptTermsCheckbox = form.querySelector('input[name="accept_terms"]');
 
+        {% if ipn %}
         var splitit = initializeSplitit();
 
         /**
@@ -148,5 +161,23 @@
                 }
             });
         }
+        {% else %}
+        // IPN is missing -- Splitit API authentication or plan initiation failed.
+        // Disable the submit button when this method is selected so the customer
+        // cannot attempt to pay with a broken gateway.
+        if (method.checked) {
+            splititDisableSubmitBtn(btn);
+        }
+
+        radios.forEach(function(radio) {
+            radio.addEventListener('change', function(e) {
+                if (e.target.checked && e.target === method) {
+                    splititDisableSubmitBtn(btn);
+                } else {
+                    splititEnableSubmitBtn(btn);
+                }
+            });
+        });
+        {% endif %}
     });
 </script>