From 04105b323be7b42ab2a16b24dfcb944789f53d58 Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Tue, 5 May 2026 16:47:01 +0200
Subject: [PATCH 1/9] Use `get-order` instead of `get-product`.

---
 site/assets/js/modules/paygate/purchases.js   | 15 +++++
 site/assets/js/pages/checkout/dom.js          |  2 +-
 site/assets/js/pages/checkout/index.js        | 64 ++++++-------------
 .../js/pages/checkout/view-controller.js      | 28 ++++----
 site/layouts/checkout/single.html             |  6 +-
 5 files changed, 54 insertions(+), 61 deletions(-)

diff --git a/site/assets/js/modules/paygate/purchases.js b/site/assets/js/modules/paygate/purchases.js
index 2a91f14b..b70a1894 100644
--- a/site/assets/js/modules/paygate/purchases.js
+++ b/site/assets/js/modules/paygate/purchases.js
@@ -52,6 +52,16 @@
  * @property {PaygateMoney} netAmount product price before VAT
  */
 
+/**
+ * Paygate order data returned by the purchase endpoint.
+ *
+ * @typedef {Object} PaygateOrder
+ * @property {string} orderId paygate order ID
+ * @property {string} productName product display name
+ * @property {string} productDescription product description shown on checkout
+ * @property {boolean} paymentCompleted whether the order was already paid
+ */
+
 /**
  * Paygate response for the `place-order` endpoint.
  *
@@ -160,6 +170,8 @@
  * @typedef {Object} PaygatePurchaseClient
  * @property {function(string): Promise<PaygateProduct>} getProduct
  *   loads checkout product data by product ID
+ * @property {function(string): Promise<PaygateOrder>} getOrder
+ *   loads checkout order data by order ID
  * @property {function(string): Promise<PlaceOrderResponse>} placeOrder
  *   creates a checkout order for the given product ID
  * @property {function(CalculateChargesRequest): Promise<CalculateChargesResponse>} calculateCharges
@@ -179,6 +191,9 @@ export function createPurchaseClient(serverUrl) {
         getProduct(productId) {
             return getJson(`${serverUrl}/products/${encodeURIComponent(productId)}`);
         },
+        getOrder(orderId) {
+            return getJson(`${serverUrl}/purchases/${encodeURIComponent(orderId)}`);
+        },
         placeOrder(productId) {
             return postJson(`${serverUrl}/purchases/place-order`, {productId});
         },
diff --git a/site/assets/js/pages/checkout/dom.js b/site/assets/js/pages/checkout/dom.js
index 2fff1c10..c4620755 100644
--- a/site/assets/js/pages/checkout/dom.js
+++ b/site/assets/js/pages/checkout/dom.js
@@ -53,7 +53,7 @@
  * @property {JQuery<HTMLElement>} $totalValue total amount element
  * @property {JQuery<HTMLButtonElement>} $submitButton checkout submit button
  * @property {JQuery<HTMLElement>} $errorModal generic checkout error modal
- * @property {JQuery<HTMLElement>} $notFound product-not-found result panel
+ * @property {JQuery<HTMLElement>} $notFound order-not-found result panel
  * @property {JQuery<HTMLElement>} $summaryError generic checkout summary-error panel
  * @property {HTMLFormElement} form native checkout form element
  */
diff --git a/site/assets/js/pages/checkout/index.js b/site/assets/js/pages/checkout/index.js
index 053c96ed..43a099d7 100644
--- a/site/assets/js/pages/checkout/index.js
+++ b/site/assets/js/pages/checkout/index.js
@@ -44,17 +44,15 @@ $(
         }
 
         const purchaseClient = createPurchaseClient(params.paygate.serverurl);
-        const productId = getProductId();
+        const orderId = getOrderId();
         const view = createCheckoutView(dom);
         const formController = createCheckoutFormController({dom});
-        let orderId = null;
-        let orderPromise = null;
         let countryManuallySelected = false;
         let phoneCountryManuallySelected = false;
         const chargeController = createChargeController({
             purchaseClient,
             view,
-            ensureOrderId,
+            ensureOrderId: () => Promise.resolve(orderId),
             getBuyerCountryCode: () => dom.$country.val(),
             getVatId: () => (dom.$vatId.val() || '').trim(),
             onFieldValidationStateChange: state => {
@@ -64,9 +62,8 @@ $(
             logApiError
         });
 
-        if (!productId) {
-            chargeController.invalidate();
-            view.showNotFoundView();
+        if (!orderId) {
+            redirectToGettingHelp();
             return;
         }
 
@@ -74,7 +71,7 @@ $(
         formController.updatePhoneCountryDisplay();
         formController.bindPhoneEvents();
         chargeController.updateSubmitState();
-        loadProduct();
+        loadOrder();
         bindEvents();
 
         /**
@@ -136,16 +133,16 @@ $(
         }
 
         /**
-         * Loads product details for the checkout page from the current checkout URL.
+         * Loads order details for the checkout page from the current checkout URL.
          *
-         * @return {Promise<void>} resolves when the initial product load flow finishes
+         * @return {Promise<void>} resolves when the initial order load flow finishes
          */
-        async function loadProduct() {
+        async function loadOrder() {
             view.setSummaryLoading(true);
 
             try {
-                const product = await purchaseClient.getProduct(productId);
-                view.fillProductSummary(product);
+                const order = await purchaseClient.getOrder(orderId);
+                view.fillOrderSummary(order);
                 view.setSummaryLoading(false);
                 dom.$form.prop('hidden', false);
                 chargeController.updateSubmitState();
@@ -197,12 +194,19 @@ $(
         }
 
         /**
-         * Reads the product ID from the `product` query parameter.
+         * Reads the order ID from the `orderId` query parameter.
          *
-         * @return {string} checkout product ID, or empty string when unavailable
+         * @return {string} checkout order ID, or empty string when unavailable
          */
-        function getProductId() {
-            return (new URLSearchParams(window.location.search).get('product') || '').trim();
+        function getOrderId() {
+            return (new URLSearchParams(window.location.search).get('orderId') || '').trim();
+        }
+
+        /**
+         * Redirects visitors with incomplete checkout links to the help page.
+         */
+        function redirectToGettingHelp() {
+            window.location.replace('/getting-help');
         }
 
         /**
@@ -238,31 +242,5 @@ $(
 
             chargeController.requestIfReady();
         }
-
-        /**
-         * Places the order once and reuses it for all later charge calculations.
-         *
-         * @return {Promise<string>} paygate order ID
-         */
-        async function ensureOrderId() {
-            if (orderId) {
-                return orderId;
-            }
-
-            if (!orderPromise) {
-                orderPromise = purchaseClient
-                    .placeOrder(productId)
-                    .then(response => {
-                        orderId = response.orderId;
-                        return orderId;
-                    })
-                    .catch(error => {
-                        orderPromise = null;
-                        throw error;
-                    });
-            }
-
-            return orderPromise;
-        }
     }
 );
diff --git a/site/assets/js/pages/checkout/view-controller.js b/site/assets/js/pages/checkout/view-controller.js
index f6dfec6e..1a1be999 100644
--- a/site/assets/js/pages/checkout/view-controller.js
+++ b/site/assets/js/pages/checkout/view-controller.js
@@ -36,8 +36,8 @@
  * @typedef {Object} CheckoutViewController
  * @property {function(): void} closeErrorModal
  *   closes the generic checkout error modal
- * @property {function(Object): void} fillProductSummary
- *   fills summary fields with product data
+ * @property {function(Object): void} fillOrderSummary
+ *   fills summary fields with order data
  * @property {function(): boolean} isFormHidden
  *   checks whether the checkout form is currently hidden
  * @property {function(boolean): void} setSubmitDisabled
@@ -47,7 +47,7 @@
  * @property {function(): void} showErrorModal
  *   opens the generic checkout error modal
  * @property {function(): void} showNotFoundView
- *   shows the checkout product-not-found panel
+ *   shows the checkout order-not-found panel
  * @property {function(): void} showSummaryError
  *   shows the generic checkout summary-error panel
  * @property {function(Object): void} updateCharges
@@ -81,27 +81,27 @@ export function createCheckoutView(dom) {
     }
 
     /**
-     * Fills the order summary with product details returned by Paygate.
+     * Fills the order summary with order details returned by Paygate.
      *
-     * @param {Object} product paygate product data for the current order
+     * @param {Object} order paygate order data for the current order
      */
-    function fillProductSummary(product) {
-        if (!product) {
+    function fillOrderSummary(order) {
+        if (!order) {
             return;
         }
 
-        dom.$productName.text(product.name || 'Unnamed product').prop('hidden', false);
+        dom.$productName.text(order.productName || 'Unnamed product').prop('hidden', false);
 
-        if (product.description) {
-            dom.$productDescription.text(product.description).prop('hidden', false);
+        if (order.productDescription) {
+            dom.$productDescription.text(order.productDescription).prop('hidden', false);
         } else {
             dom.$productDescription.text('').prop('hidden', true);
         }
 
-        dom.$subtotalValue.text(formatMoney(product.netAmount));
+        dom.$subtotalValue.text(formatMoney(order.netAmount));
         dom.$vatLabel.text('VAT');
-        dom.$vatValue.text(formatMoney(zeroMoney(product.netAmount.currency)));
-        dom.$totalValue.text(formatMoney(product.netAmount));
+        dom.$vatValue.text(formatMoney(zeroMoney(order.netAmount.currency)));
+        dom.$totalValue.text(formatMoney(order.netAmount));
     }
 
     /**
@@ -206,7 +206,7 @@ export function createCheckoutView(dom) {
 
     return {
         closeErrorModal,
-        fillProductSummary,
+        fillOrderSummary,
         isFormHidden,
         setSubmitDisabled,
         setSummaryLoading,
diff --git a/site/layouts/checkout/single.html b/site/layouts/checkout/single.html
index e8c53796..6d68ce1c 100644
--- a/site/layouts/checkout/single.html
+++ b/site/layouts/checkout/single.html
@@ -241,15 +241,15 @@ <h2 class="message-modal-title" id="checkout-error-modal-title">Something went w
                         </div>
                         <div id="checkout-not-found" hidden>
                             {{ partial "components/result-panel.html" (dict
-                                "title" "Product not found"
+                                "title" "Order not found"
                                 "title_as_h1" true
                                 "mark" (dict
                                     "text" "404"
                                     "icon_class" "result-panel-mark-code"
                                 )
                                 "lines" (slice
-                                    "The checkout product could not be found."
-                                    "Please check the address or return to the home page."
+                                    "The checkout order could not be found."
+                                    "Please check the address or get help."
                                 )
                                 "action" (dict
                                     "label" "Back to home"

From 19604abfd6cdfd76511123028bf7d35db8465c96 Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Tue, 5 May 2026 16:50:27 +0200
Subject: [PATCH 2/9] Remove `getProduct` request API.

---
 site/assets/js/modules/paygate/purchases.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/site/assets/js/modules/paygate/purchases.js b/site/assets/js/modules/paygate/purchases.js
index b70a1894..f0fa6bd2 100644
--- a/site/assets/js/modules/paygate/purchases.js
+++ b/site/assets/js/modules/paygate/purchases.js
@@ -42,16 +42,6 @@
  * @property {PaygateCurrency} currency currency metadata
  */
 
-/**
- * Paygate product data returned by the product endpoint.
- *
- * @typedef {Object} PaygateProduct
- * @property {string} id product identifier
- * @property {string} name product display name
- * @property {string} description product description shown on checkout
- * @property {PaygateMoney} netAmount product price before VAT
- */
-
 /**
  * Paygate order data returned by the purchase endpoint.
  *
@@ -168,8 +158,6 @@
  * Paygate purchase endpoint methods used by checkout.
  *
  * @typedef {Object} PaygatePurchaseClient
- * @property {function(string): Promise<PaygateProduct>} getProduct
- *   loads checkout product data by product ID
  * @property {function(string): Promise<PaygateOrder>} getOrder
  *   loads checkout order data by order ID
  * @property {function(string): Promise<PlaceOrderResponse>} placeOrder
@@ -188,9 +176,6 @@
  */
 export function createPurchaseClient(serverUrl) {
     return {
-        getProduct(productId) {
-            return getJson(`${serverUrl}/products/${encodeURIComponent(productId)}`);
-        },
         getOrder(orderId) {
             return getJson(`${serverUrl}/purchases/${encodeURIComponent(orderId)}`);
         },

From 92f6adda21725e2de8d1950498afb778b4867419 Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Tue, 5 May 2026 17:38:07 +0200
Subject: [PATCH 3/9] Bring consent buttons to the `getting-help`.

---
 site/assets/js/pages/pricing.js               | 209 +++++++++++++-----
 site/content/getting-help/services.json       |   1 +
 .../comparable-services-footer.html           |  12 +-
 .../_partials/getting-help/services.html      |   5 +-
 4 files changed, 162 insertions(+), 65 deletions(-)

diff --git a/site/assets/js/pages/pricing.js b/site/assets/js/pages/pricing.js
index 3af57b6f..250f9259 100644
--- a/site/assets/js/pages/pricing.js
+++ b/site/assets/js/pages/pricing.js
@@ -27,6 +27,7 @@
 'use strict';
 
 import * as params from '@params';
+import {createPurchaseClient} from 'js/modules/paygate/purchases';
 
 /**
  * The user's consent.
@@ -38,25 +39,27 @@ import * as params from '@params';
  * process his personal information
  * @property {boolean} supportAgreementConsent indicates whether the user agrees to be
  * bound by the terms of the Development Support Agreement
+ * @property {boolean} newsletterConsent indicates whether the user agrees to receive
+ * newsletters
  */
 
 /**
- * The user's consent transaction data.
+ * The user's consent submission data.
  *
- * <p>The user's consents and the reCAPTCHA token. The token uses to verify whether it is a
+ * <p>The user's consents and the reCAPTCHA token. The token is used to verify whether it is a
  * real user or some malicious code.
  *
- * @typedef {Object} TransactionRequest
- * @property {Consent} Consent the user's consent
- * @property {string} token the reCAPTCHA token generated by Google API
+ * @typedef {Object} ConsentRequest
+ * @property {string} orderId paygate order ID
+ * @property {Consent} consent the user's consent
+ * @property {{token: string}} recaptcha reCAPTCHA verification payload
  */
 
 /**
- * The user's consent transaction ID and 2checkout signature.
+ * Paygate response for the `place-order` endpoint.
  *
- * @typedef {Object} Transaction
- * @property {string} id consent transaction ID
- * @property {string} signature HMAC signature for 2checkout payment form processing
+ * @typedef {Object} PlaceOrderResponse
+ * @property {string} orderId created paygate order ID
  */
 $(
     function () {
@@ -70,9 +73,12 @@ $(
         const $linkBack = $redirectScreen.find('#linkBack');
         const $consentCheckboxes = $("input[type='checkbox'].consent");
 
+        const purchaseClient = createPurchaseClient(params.paygate.serverurl);
         const reCaptchaSiteKey = params.payment.recaptchakey;
-        const orderUrl = params.payment.orderurl;
-        const apiUrl = params.payment.apiurl;
+        const consentUrl = params.payment.consenturl;
+        const productId = ($('[data-paygate-product-id]').attr('data-paygate-product-id') || '')
+            .trim();
+        const shouldSubmitConsent = params.environment === 'production';
 
         $orderButtonHolder.tooltip('enable');
 
@@ -120,57 +126,125 @@ $(
         }
 
         /**
-         * Submits consent transaction.
+         * Places a Paygate order, sends consent in production, and opens checkout.
          *
-         * <p>Prepares transaction URL, Privacy and Support Agreement consents data, generates
-         * the reCAPTCHA token and adds it to the request data. After that calls send transaction
-         * function.
+         * <p>Development builds skip consent submission so local Paygate testing is not blocked by
+         * the production consent service.
          */
-        function submitOrder() {
-            const transactionUrl = `${apiUrl}/transaction`;
-            const privacyConsent = $privacyConsent.prop("checked");
-            const supportAgreementConsent = $supportAgreementConsent.prop("checked");
-
+        async function submitOrder() {
             showRedirect();
+            setOrderButtonProcessing(true);
 
-            grecaptcha.ready(() => {
-                grecaptcha
-                    .execute(reCaptchaSiteKey, {action: 'submitPaymentTransaction'})
-                    .then((token) => {
-                        const transactionRequest = {
-                            consent: {privacyConsent, supportAgreementConsent},
-                            token
-                        };
-                        sendPaymentTransaction(transactionUrl, transactionRequest);
-                    });
-            });
+            try {
+                if (!productId) {
+                    throw new Error('Paygate product ID is not configured.');
+                }
+
+                const order = await purchaseClient.placeOrder(productId);
+                const orderId = order.orderId;
+
+                if (!orderId) {
+                    throw new Error('Paygate did not return an order ID.');
+                }
+
+                if (shouldSubmitConsent) {
+                    if (!consentUrl) {
+                        throw new Error('Consent URL is not configured.');
+                    }
+
+                    const token = await getRecaptchaToken();
+                    await submitConsent(buildConsentRequest(orderId, token));
+                }
+
+                redirectToCheckout(orderId);
+            } catch (error) {
+                logOrderError(error);
+                showErrorMessage();
+                setOrderButtonProcessing(false);
+            }
         }
 
         /**
-         * Generates the payment processing transaction.
-         *
-         * <p>Sends the transaction data and returns the transaction ID. If the request is
-         * successful, redirects to the Payment screen.
+         * Builds the production consent API request.
          *
-         * @param {string} transactionUrl the transaction API URL
-         * @param {TransactionRequest} transactionRequest the Consent transaction registration
-         * request
+         * @param {string} orderId paygate order ID
+         * @param {string} token reCAPTCHA token generated by Google API
+         * @return {ConsentRequest} consent request body
          */
-        function sendPaymentTransaction(transactionUrl, transactionRequest) {
-            $.ajax(transactionUrl, {
-                type: 'POST',
-                data: JSON.stringify(transactionRequest),
-                contentType: 'application/json',
-                success: (transaction) => {
-                    redirectToPaymentPage(transaction);
-                    hideRedirect();
+        function buildConsentRequest(orderId, token) {
+            return {
+                orderId,
+                consent: {
+                    privacyConsent: $privacyConsent.prop('checked'),
+                    supportAgreementConsent: $supportAgreementConsent.prop('checked'),
+                    newsletterConsent: false
                 },
-                error: (jqXhr) => {
-                    console.error(`${jqXhr.status}: ${jqXhr.statusText}`);
-                    console.error(`Error message: ${jqXhr.responseJSON.message}`);
-                    showErrorMessage();
+                recaptcha: {
+                    token
                 }
+            };
+        }
+
+        /**
+         * Gets the invisible reCAPTCHA token for consent submission.
+         *
+         * @return {Promise<string>} generated reCAPTCHA token
+         */
+        function getRecaptchaToken() {
+            return new Promise((resolve, reject) => {
+                if (!window.grecaptcha) {
+                    reject(new Error('reCAPTCHA is unavailable.'));
+                    return;
+                }
+
+                grecaptcha.ready(() => {
+                    grecaptcha
+                        .execute(reCaptchaSiteKey, {action: 'submitConsent'})
+                        .then(resolve)
+                        .catch(reject);
+                });
+            });
+        }
+
+        /**
+         * Sends the consent payload to the production consent endpoint.
+         *
+         * @param {ConsentRequest} consentRequest consent request body
+         * @return {Promise<void>} resolves when consent is accepted
+         */
+        async function submitConsent(consentRequest) {
+            const response = await fetch(consentUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(consentRequest)
             });
+
+            if (!response.ok) {
+                throw ({
+                    status: response.status,
+                    statusText: response.statusText,
+                    body: await readResponseBody(response)
+                });
+            }
+        }
+
+        /**
+         * Parses a fetch response body as JSON when possible, otherwise as text.
+         *
+         * @param {Response} response fetch response to parse
+         * @return {Promise<*>} parsed JSON, text, or null when there is no readable body
+         */
+        async function readResponseBody(response) {
+            const contentType = response.headers.get('content-type') || '';
+            try {
+                return contentType.includes('application/json')
+                    ? await response.json()
+                    : await response.text();
+            } catch (ignored) {
+                return null;
+            }
         }
 
         /**
@@ -195,15 +269,42 @@ $(
          */
         function hideRedirect() {
             $redirectScreen.hide();
+            setOrderButtonProcessing(false);
         }
 
         /**
-         * Redirects to the payment page.
+         * Enables or disables the order button while the order flow is in progress.
          *
-         * @param {Transaction} transaction the consent transaction response.
+         * @param {boolean} isProcessing whether the order flow is currently running
          */
-        function redirectToPaymentPage(transaction) {
-            window.location = `${orderUrl}&customer-ext-ref=${transaction.id}&signature=${transaction.signature}`;
+        function setOrderButtonProcessing(isProcessing) {
+            $orderButton.prop('disabled', isProcessing || !isConsentObtained());
+            $orderButton.toggleClass('disabled', isProcessing || !isConsentObtained());
+        }
+
+        /**
+         * Redirects to checkout for the created order.
+         *
+         * @param {string} orderId paygate order ID
+         */
+        function redirectToCheckout(orderId) {
+            window.location = `/checkout/?orderId=${encodeURIComponent(orderId)}`;
+        }
+
+        /**
+         * Logs order-flow failures in a compact and consistent format.
+         *
+         * @param {Object|Error} error order-flow error
+         */
+        function logOrderError(error) {
+            console.error(
+                `${error.status || 'Order flow error'}: ` +
+                `${error.statusText || error.message || 'Request failed'}`
+            );
+
+            if (error.body) {
+                console.error('Error response:', error.body);
+            }
         }
     }
 );
diff --git a/site/content/getting-help/services.json b/site/content/getting-help/services.json
index 1076ed7c..85c9a690 100644
--- a/site/content/getting-help/services.json
+++ b/site/content/getting-help/services.json
@@ -4,6 +4,7 @@
     "header_cols": [
       {
         "icon": "fas fa-brackets-curly",
+        "paygate_product_id": "spine-standard-support",
         "title": "Standard Support Pack",
         "subtitle": "Get ongoing guidance when implementing your&nbsp;project with Spine"
       },
diff --git a/site/layouts/_partials/getting-help/comparable-services-footer.html b/site/layouts/_partials/getting-help/comparable-services-footer.html
index 8e3cce5e..c82d36cf 100644
--- a/site/layouts/_partials/getting-help/comparable-services-footer.html
+++ b/site/layouts/_partials/getting-help/comparable-services-footer.html
@@ -27,7 +27,7 @@
 <!--
 The component renders two columns of actions.
 
-The first column includes the price, agreement checkboxes, and a button to 2Checkout.
+The first column includes the price, agreement checkboxes, and an order button.
 The second includes the mailto button.
 
 Each column will be displayed inside its own comparable card.
@@ -40,8 +40,7 @@
             <span class="slash">/</span>
             <span class="description">1 support pack (100&nbsp;hours)</span>
         </div>
-        <!-- TODO:2026-03-23:julia.evseeva: Uncomment this when the new solution replacing 2Checkout is ready to use. -->
-        <!--<div class="checkboxes-list">
+        <div class="checkboxes-list">
             <label class="checkbox-container" for="privacyConsent">
                 <span class="text">I agree to processing of my personal information as per the
                     <a href="{{ `privacy-statement/`| relURL }}"
@@ -64,18 +63,15 @@
                        autocomplete='off'>
                 <span class="checkmark"></span>
             </label>
-        </div>-->
+        </div>
         <!-- The tooltip visibility is managed in the `js/pages/pricing.js`. -->
-        <!--<div class="pricing-btn-holder"
+        <div class="pricing-btn-holder"
              data-bs-toggle="tooltip"
              data-bs-placement="bottom"
              data-bs-title="Read and agree to the terms to&nbsp;continue.">
             <button class="btn btn-bordered-blue pricing-btn order-btn disabled"
                     id="order-now-btn"
                     disabled>Order Now</button>
-        </div>-->
-        <div class="contact-btn-holder">
-            {{ partial "getting-help/mailto-button.html" . }}
         </div>
     </div>
 </div>
diff --git a/site/layouts/_partials/getting-help/services.html b/site/layouts/_partials/getting-help/services.html
index 501a954c..35751883 100644
--- a/site/layouts/_partials/getting-help/services.html
+++ b/site/layouts/_partials/getting-help/services.html
@@ -31,8 +31,6 @@
 The Google reCaptcha is used for the payment option.
 -->
 
-<!--TODO:2025-12-04:julia.evseeva: Update the price in 2Checkout before the release. -->
-
 {{ partial "scripts/body/recaptcha.html" . }}
 
 {{ with .Resources.GetMatch "services.json" }}
@@ -43,7 +41,8 @@ <h1 class="section-title light">{{ $data.title | markdownify }}</h1>
             <div class="support-card compare-support">
                 {{ $comparableServices := $data.comparable_services }}
                 {{ range $comparableServices.header_cols }}
-                    <div class="header">
+                    <div class="header"
+                         {{ with .paygate_product_id }}data-paygate-product-id="{{ . }}"{{ end }}>
                         <i class="header-icon {{ .icon }}"></i>
                         <div class="text-container">
                             <h4>{{ .title | markdownify }}</h4>

From 0de01adbbe1dabb4a6a09ecc935968693d996e71 Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Tue, 5 May 2026 17:51:12 +0200
Subject: [PATCH 4/9] Move params.

---
 site/assets/js/pages/checkout/index.js           | 2 +-
 site/assets/js/pages/pricing.js                  | 2 +-
 site/config/_default/hugo.toml                   | 7 ++-----
 site/config/development/hugo.toml                | 6 ++----
 site/layouts/_partials/scripts/body-scripts.html | 2 --
 5 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/site/assets/js/pages/checkout/index.js b/site/assets/js/pages/checkout/index.js
index 43a099d7..e13867e4 100644
--- a/site/assets/js/pages/checkout/index.js
+++ b/site/assets/js/pages/checkout/index.js
@@ -43,7 +43,7 @@ $(
             return;
         }
 
-        const purchaseClient = createPurchaseClient(params.paygate.serverurl);
+        const purchaseClient = createPurchaseClient(params.payment.paygateurl);
         const orderId = getOrderId();
         const view = createCheckoutView(dom);
         const formController = createCheckoutFormController({dom});
diff --git a/site/assets/js/pages/pricing.js b/site/assets/js/pages/pricing.js
index 250f9259..5625fb45 100644
--- a/site/assets/js/pages/pricing.js
+++ b/site/assets/js/pages/pricing.js
@@ -73,7 +73,7 @@ $(
         const $linkBack = $redirectScreen.find('#linkBack');
         const $consentCheckboxes = $("input[type='checkbox'].consent");
 
-        const purchaseClient = createPurchaseClient(params.paygate.serverurl);
+        const purchaseClient = createPurchaseClient(params.payment.paygateurl);
         const reCaptchaSiteKey = params.payment.recaptchakey;
         const consentUrl = params.payment.consenturl;
         const productId = ($('[data-paygate-product-id]').attr('data-paygate-product-id') || '')
diff --git a/site/config/_default/hugo.toml b/site/config/_default/hugo.toml
index fbfaeb14..d671b863 100644
--- a/site/config/_default/hugo.toml
+++ b/site/config/_default/hugo.toml
@@ -15,13 +15,10 @@ disableKinds = ['taxonomy', 'term']
   description = 'Open-source CQRS/ES framework for modern cloud applications'
 
 [params.payment]
-  apiURL = 'https://us-central1-spine-site-server.cloudfunctions.net/paymentTransaction'
-  orderURL = 'https://secure.2checkout.com/checkout/buy?merchant=999999999589&currency=EUR&tpl=default&prod=4HJME1JJDF&qty=1'
+  consentURL = 'https://us-central1-spine-site-server.cloudfunctions.net/api/consent'
+  paygateURL = 'https://stag.paygate.teamdev.com'
   reCaptchaKey = '6Lef7b0ZAAAAAHPIbf6XQIzzeyCoSzS56GTej1c0'
 
-[params.paygate]
-  serverURL = 'https://stag.paygate.teamdev.com'
-
 [params.libs.docsearch]
   appId = 'DUYV0WFHKV'
   apiKey = '50ce4ead490484f1436ae042c0a1a4dd'
diff --git a/site/config/development/hugo.toml b/site/config/development/hugo.toml
index ab1f3487..c5c23c67 100644
--- a/site/config/development/hugo.toml
+++ b/site/config/development/hugo.toml
@@ -1,5 +1,3 @@
 [params.payment]
-  apiURL = 'http://localhost:5002/spine-site-server/us-central1/paymentTransaction'
-
-[params.paygate]
-  serverURL = 'https://stag.paygate.teamdev.com'
+  consentURL = 'http://localhost:5002/spine-site-server/us-central1/api/consent'
+  paygateURL = 'https://stag.paygate.teamdev.com'
diff --git a/site/layouts/_partials/scripts/body-scripts.html b/site/layouts/_partials/scripts/body-scripts.html
index 85783cf8..dd2c48e4 100644
--- a/site/layouts/_partials/scripts/body-scripts.html
+++ b/site/layouts/_partials/scripts/body-scripts.html
@@ -26,12 +26,10 @@
 
 {{ $environment := hugo.Environment }}
 {{ $payment := site.Params.payment }}
-{{ $paygate := site.Params.paygate }}
 
 {{ $params := (dict
     "environment" $environment
     "payment" $payment
-    "paygate" $paygate
 )}}
 
 {{ partial "theme/scripts/body/baseurl.html" . }}

From 975556bd934965a075f9b26eea2f78a5fe84cb40 Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Wed, 6 May 2026 09:48:11 +0200
Subject: [PATCH 5/9] Remove redundant.

---
 site/assets/js/pages/pricing.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/site/assets/js/pages/pricing.js b/site/assets/js/pages/pricing.js
index 5625fb45..1d580432 100644
--- a/site/assets/js/pages/pricing.js
+++ b/site/assets/js/pages/pricing.js
@@ -148,10 +148,6 @@ $(
                 }
 
                 if (shouldSubmitConsent) {
-                    if (!consentUrl) {
-                        throw new Error('Consent URL is not configured.');
-                    }
-
                     const token = await getRecaptchaToken();
                     await submitConsent(buildConsentRequest(orderId, token));
                 }
@@ -177,7 +173,6 @@ $(
                 consent: {
                     privacyConsent: $privacyConsent.prop('checked'),
                     supportAgreementConsent: $supportAgreementConsent.prop('checked'),
-                    newsletterConsent: false
                 },
                 recaptcha: {
                     token

From 468730e857c18e5a594dae2962fbdbfa22ec812a Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Wed, 6 May 2026 11:47:22 +0200
Subject: [PATCH 6/9] Improve docs.

---
 site/assets/js/pages/pricing.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/assets/js/pages/pricing.js b/site/assets/js/pages/pricing.js
index 1d580432..3c934aaa 100644
--- a/site/assets/js/pages/pricing.js
+++ b/site/assets/js/pages/pricing.js
@@ -278,7 +278,7 @@ $(
         }
 
         /**
-         * Redirects to checkout for the created order.
+         * Redirects to the checkout page for the created order.
          *
          * @param {string} orderId paygate order ID
          */

From f072290fc39b75ace4fae0e863c44b754e9ba38f Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Wed, 6 May 2026 16:30:21 +0200
Subject: [PATCH 7/9] Provide prod Paygate address.

---
 site/config/_default/hugo.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/config/_default/hugo.toml b/site/config/_default/hugo.toml
index d671b863..0d71eaf5 100644
--- a/site/config/_default/hugo.toml
+++ b/site/config/_default/hugo.toml
@@ -16,7 +16,7 @@ disableKinds = ['taxonomy', 'term']
 
 [params.payment]
   consentURL = 'https://us-central1-spine-site-server.cloudfunctions.net/api/consent'
-  paygateURL = 'https://stag.paygate.teamdev.com'
+  paygateURL = 'https://paygate.teamdev.com'
   reCaptchaKey = '6Lef7b0ZAAAAAHPIbf6XQIzzeyCoSzS56GTej1c0'
 
 [params.libs.docsearch]

From e47de34b01b199e240970f175cf37b9669166b48 Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Thu, 7 May 2026 11:54:24 +0200
Subject: [PATCH 8/9] Rename product `name` to `title`.

---
 site/assets/js/modules/paygate/purchases.js      | 2 +-
 site/assets/js/pages/checkout/dom.js             | 4 ++--
 site/assets/js/pages/checkout/view-controller.js | 2 +-
 site/layouts/checkout/single.html                | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/assets/js/modules/paygate/purchases.js b/site/assets/js/modules/paygate/purchases.js
index f0fa6bd2..6c10dbb1 100644
--- a/site/assets/js/modules/paygate/purchases.js
+++ b/site/assets/js/modules/paygate/purchases.js
@@ -47,7 +47,7 @@
  *
  * @typedef {Object} PaygateOrder
  * @property {string} orderId paygate order ID
- * @property {string} productName product display name
+ * @property {string} productTitle product display title
  * @property {string} productDescription product description shown on checkout
  * @property {boolean} paymentCompleted whether the order was already paid
  */
diff --git a/site/assets/js/pages/checkout/dom.js b/site/assets/js/pages/checkout/dom.js
index c4620755..d31bdcaf 100644
--- a/site/assets/js/pages/checkout/dom.js
+++ b/site/assets/js/pages/checkout/dom.js
@@ -44,7 +44,7 @@
  * @property {JQuery<HTMLElement>} $loadingSpinner summary spinner element
  * @property {JQuery<HTMLElement>} $loadingText summary loading text element
  * @property {JQuery<HTMLElement>} $loadingSupport summary support text element
- * @property {JQuery<HTMLElement>} $productName product name element
+ * @property {JQuery<HTMLElement>} $productTitle product title element
  * @property {JQuery<HTMLElement>} $productDescription product description
  *   element
  * @property {JQuery<HTMLElement>} $subtotalValue subtotal value element
@@ -78,7 +78,7 @@ export function getCheckoutDom() {
         $loadingSpinner: $('#checkout-summary-loading-spinner'),
         $loadingText: $('#checkout-summary-loading-text'),
         $loadingSupport: $('#checkout-summary-support'),
-        $productName: $('#checkout-product-name'),
+        $productTitle: $('#checkout-product-title'),
         $productDescription: $('#checkout-product-description'),
         $subtotalValue: $('#checkout-subtotal-value'),
         $vatLabel: $('#checkout-vat-label'),
diff --git a/site/assets/js/pages/checkout/view-controller.js b/site/assets/js/pages/checkout/view-controller.js
index 1a1be999..e49a6009 100644
--- a/site/assets/js/pages/checkout/view-controller.js
+++ b/site/assets/js/pages/checkout/view-controller.js
@@ -90,7 +90,7 @@ export function createCheckoutView(dom) {
             return;
         }
 
-        dom.$productName.text(order.productName || 'Unnamed product').prop('hidden', false);
+        dom.$productTitle.text(order.productTitle || 'Untitled product').prop('hidden', false);
 
         if (order.productDescription) {
             dom.$productDescription.text(order.productDescription).prop('hidden', false);
diff --git a/site/layouts/checkout/single.html b/site/layouts/checkout/single.html
index 6d68ce1c..a4fadf00 100644
--- a/site/layouts/checkout/single.html
+++ b/site/layouts/checkout/single.html
@@ -23,7 +23,7 @@
                                         Something went wrong, please contact {{ $emailLink }}.
                                     </p>
                                 </div>
-                                <div class="checkout-summary-product" id="checkout-product-name" hidden></div>
+                                <div class="checkout-summary-product" id="checkout-product-title" hidden></div>
                                 <div class="checkout-summary-product-description" id="checkout-product-description" hidden></div>
                                 <div class="checkout-summary-row checkout-summary-row-divider">
                                     <span class="checkout-summary-label">Subtotal</span>

From 90491eb92379396671eebbac451c73952c24440f Mon Sep 17 00:00:00 2001
From: Vladyslav Kuksiuk <vladyslav.kuksiuk@teamdev.com>
Date: Thu, 7 May 2026 12:28:40 +0200
Subject: [PATCH 9/9] Improve readme.

---
 README.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/README.md b/README.md
index 13667f71..87c5d6cc 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,18 @@ hugo mod clean --all
 
 Then run the `hugo serve` again.
 
+### Testing locally
+
+#### Payments
+The `getting-help` page contains products for sale.
+
+It is possible to test the product checkout flow. 
+The development environment provides a connection to the staging Paygate server, 
+which allows testing of the full checkout process, including payment.
+
+To pay for a product, it is necessary to use 
+[LHV sandbox cards](https://merchant.lhv.ee/help/en/articles/12807566-test-cards).
+
 ## Documentation
 
 The documentation is located in a [separate repository][documentation-repo].