+ {/* Info banner sits next to the selector it describes */}
+
+
+
+ {t('hostedFieldInfo')}
+
+
From 8cf2cb82331e7a674fadb0877e85ed7f2ae72931 Mon Sep 17 00:00:00 2001
From: Justas
Date: Fri, 10 Jul 2026 10:58:48 +0300
Subject: [PATCH 3/7] feat(SL-375): render Saferpay Fields inline in the
default checkout
Add a single shared Saferpay Fields form (the SDK binds to fixed element IDs and has
no re-init, so only one form may exist) that is placed once below the payment options
and shown under whichever Custom-Form card is selected. Place-once + show/hide avoids
reparenting the SDK iframes (which would reload them). Submit is intercepted and routed
through the existing submitHostedFields AJAX flow.
Verified live on the test store: Fields render inline under Visa/Mastercard, SDK
initialises, new-card payment + 3-D Secure completes (order confirmed), and switching
between card options keeps the fields working.
The hosted iframe page remains as a no-JS fallback for now; its retirement + the
Transaction Interface file removal follow.
---
.../Loader/PaymentFormAssetLoader.php | 39 ++++
views/js/front/inline-fields.js | 194 ++++++++++++++++++
2 files changed, 233 insertions(+)
create mode 100644 views/js/front/inline-fields.js
diff --git a/src/Presentation/Loader/PaymentFormAssetLoader.php b/src/Presentation/Loader/PaymentFormAssetLoader.php
index 1c134406c..216675653 100644
--- a/src/Presentation/Loader/PaymentFormAssetLoader.php
+++ b/src/Presentation/Loader/PaymentFormAssetLoader.php
@@ -156,6 +156,45 @@ private function registerDefaultCheckoutAssets($controller)
$this->module->name . '-checkout',
'modules/' . $this->module->name . '/views/css/front/saferpay_checkout.css'
);
+
+ $this->registerInlineFieldsAssets($controller);
+ }
+
+ /**
+ * Registers the Saferpay Fields SDK + inline renderer so Custom-Form cards show their
+ * card form inline in the default checkout instead of redirecting to a hosted page.
+ * Only relevant when the account has Fields (Business licence) and a field access token.
+ *
+ * @param OrderControllerCore $controller
+ */
+ private function registerInlineFieldsAssets($controller)
+ {
+ if (!\Configuration::get(SaferPayConfig::BUSINESS_LICENSE . SaferPayConfig::getConfigSuffix())) {
+ return;
+ }
+
+ if (!SaferPayConfig::getFieldAccessToken()) {
+ return;
+ }
+
+ Media::addJsDef([
+ 'saferpay_field_access_token' => SaferPayConfig::getFieldAccessToken(),
+ 'saferpay_field_url' => SaferPayConfig::getFieldUrl(),
+ 'holder_name' => $this->module->l('Holder name', 'PaymentFormAssetLoader'),
+ 'saferpay_internal_error' => $this->module->l('An error occurred while processing the card, please try again.', 'PaymentFormAssetLoader'),
+ ]);
+
+ $controller->registerJavascript(
+ 'remote-saferpay-fields-js-lib',
+ SaferPayConfig::FIELDS_LIBRARY_DEFAULT_VALUE,
+ ['server' => 'remote', 'position' => 'bottom', 'priority' => 20]
+ );
+
+ $controller->registerJavascript(
+ $this->module->name . '-inline-fields',
+ 'modules/' . $this->module->name . '/views/js/front/inline-fields.js',
+ ['position' => 'bottom', 'priority' => 21]
+ );
}
public function registerErrorBags()
diff --git a/views/js/front/inline-fields.js b/views/js/front/inline-fields.js
new file mode 100644
index 000000000..6e0258cc4
--- /dev/null
+++ b/views/js/front/inline-fields.js
@@ -0,0 +1,194 @@
+/**
+ *NOTICE OF LICENSE
+ *
+ *This source file is subject to the Open Software License (OSL 3.0)
+ *that is bundled with this package in the file LICENSE.txt.
+ *It is also available through the world-wide-web at this URL:
+ *http://opensource.org/licenses/osl-3.0.php
+ *If you did not receive a copy of the license and are unable to
+ *obtain it through the world-wide-web, please send an email
+ *to license@prestashop.com so we can send you a copy immediately.
+ *
+ *DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ *versions in the future. If you wish to customize PrestaShop for your
+ *needs please refer to http://www.prestashop.com for more information.
+ *
+ *@author INVERTUS UAB www.invertus.eu
+ *@copyright SIX Payment Services
+ *@license SIX Payment Services
+ */
+
+/**
+ * Renders the Saferpay Fields card form inline in the default PrestaShop checkout.
+ *
+ * The Saferpay Fields SDK binds to four fixed element IDs (fields-holder-name,
+ * fields-card-number, fields-expiration, fields-cvc) and offers no way to scope to a
+ * container, no re-init and no teardown. Therefore exactly ONE Fields form may exist on
+ * the page. We render one shared form, initialise it once, and reveal it under whichever
+ * Saferpay card option is currently selected. Only the submitted payment-method name
+ * differs between card options; the card inputs themselves are brand-agnostic.
+ */
+(function () {
+ if (typeof saferpay_field_access_token === 'undefined' || !saferpay_field_access_token) {
+ return;
+ }
+
+ var SLOT_ID = 'saferpay-inline-fields';
+ var initialised = false;
+
+ function fieldsFormMarkup() {
+ return '' +
+ '