From 80f381d46d649ef345e996734121e7308d896888 Mon Sep 17 00:00:00 2001 From: "v.carkaxhija" Date: Thu, 21 Nov 2024 11:26:40 +0100 Subject: [PATCH 1/4] fix style for hosted fields --- .../buckaroo_magento2_creditcards.html | 111 +++++++++--------- 1 file changed, 57 insertions(+), 54 deletions(-) diff --git a/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html b/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html index babcc987c..7bc7be80f 100644 --- a/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html +++ b/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html @@ -8,13 +8,13 @@ data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
- +
@@ -23,79 +23,82 @@
- +
-
-
- -
-
-

+
+ +
+

+
-
- -
-
-

+
+ +
+

+
-
-
-
- -
-
-

+
+
+
+ +
-
- -
-
-

+

+
+
+ +
+

+
-
- -
+
+ +
-
-
+
+
-
- - - Cancel - -
+
+ + + Cancel + +
- +
From f83f7b8d7c21f99ec876003085f7df3d52f2f0d8 Mon Sep 17 00:00:00 2001 From: "v.carkaxhija" Date: Thu, 21 Nov 2024 11:29:24 +0100 Subject: [PATCH 2/4] fix style for hosted fields --- .../frontend/web/js/view/payment/method-renderer/creditcards.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/view/frontend/web/js/view/payment/method-renderer/creditcards.js b/view/frontend/web/js/view/payment/method-renderer/creditcards.js index 81f24cb73..741c3c612 100644 --- a/view/frontend/web/js/view/payment/method-renderer/creditcards.js +++ b/view/frontend/web/js/view/payment/method-renderer/creditcards.js @@ -132,7 +132,7 @@ define( let disabled = !sdkClient.formIsValid(); payButton.disabled = disabled; if (disabled) { - payButton.style.backgroundColor = "#ff5555"; + payButton.style.backgroundColor = ""; payButton.style.cursor = "not-allowed"; payButton.style.opacity = "0.5"; } else { From 06dca42aaa6cb33303a40a9f030d9a375ea51dac Mon Sep 17 00:00:00 2001 From: "v.carkaxhija" Date: Thu, 21 Nov 2024 16:14:05 +0100 Subject: [PATCH 3/4] fix style for hosted fields --- .../payment/method-renderer/creditcards.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/view/frontend/web/js/view/payment/method-renderer/creditcards.js b/view/frontend/web/js/view/payment/method-renderer/creditcards.js index 741c3c612..bf3318b9c 100644 --- a/view/frontend/web/js/view/payment/method-renderer/creditcards.js +++ b/view/frontend/web/js/view/payment/method-renderer/creditcards.js @@ -148,8 +148,8 @@ define( let cardLogoStyling = { height:"80%", position: 'absolute', - border: '1px soli gray', - radius: '5px', + border: '1px solid #d6d6d6', + borderRadius: "4px", opacity:'1', transition:'all 0.3s ease', right:'5px', @@ -159,11 +159,18 @@ define( // Define styling and mount hosted fields as needed... let styling = { fontSize: "14px", - fontFamily: 'Consolas, Liberation Mono, Menlo, Courier, monospace', + fontStyle: "normal", + fontWeight: 400, + fontFamily: 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif', textAlign: 'left', - background: 'inherit', - color: 'black', - placeholderColor: 'grey', + background: '#fefefe', + color: '#333333', + placeholderColor: '#888888', + borderRadius: '5px', + padding: '8px 10px', + boxShadow: 'none', + transition: 'border-color 0.2s ease, box-shadow 0.2s ease', + border: '1px solid #d6d6d6', cardLogoStyling: cardLogoStyling }; From dad8c7c5065f162bee071e590929c19d3d6cb3a4 Mon Sep 17 00:00:00 2001 From: "v.carkaxhija" Date: Mon, 25 Nov 2024 16:14:49 +0100 Subject: [PATCH 4/4] fix error message --- .../web/js/view/payment/method-renderer/creditcards.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/view/frontend/web/js/view/payment/method-renderer/creditcards.js b/view/frontend/web/js/view/payment/method-renderer/creditcards.js index bf3318b9c..df39bc0fe 100644 --- a/view/frontend/web/js/view/payment/method-renderer/creditcards.js +++ b/view/frontend/web/js/view/payment/method-renderer/creditcards.js @@ -77,7 +77,7 @@ define( // Check for error field in response if (response.error) { // Display the error message in the observable - this.oauthTokenError("Error getting OAuth token."); + this.oauthTokenError("An error occurred, please try another payment method or try again later."); } else { const accessToken = response.data.access_token; const issuers = response.data.issuers; @@ -86,7 +86,7 @@ define( } } catch (error) { // Catch any other errors (e.g., network issues) - this.oauthTokenError("Error getting OAuth token."); + this.oauthTokenError("An error occurred, please try another payment method or try again later."); } },