From 8aaa6dbf962bfc40391a7ce349b34afd8cd780c4 Mon Sep 17 00:00:00 2001 From: Monei Magento Date: Fri, 31 May 2024 11:09:37 +0200 Subject: [PATCH] Add payment icos in checkout payment steps --- view/frontend/layout/checkout_index_index.xml | 3 ++ view/frontend/web/css/bizum.css | 4 ++ view/frontend/web/css/card-input.css | 5 +++ view/frontend/web/css/google-apple.css | 8 ++++ view/frontend/web/css/mbway.css | 4 ++ view/frontend/web/css/monei-payment.css | 6 +++ view/frontend/web/css/multibanco.css | 4 ++ view/frontend/web/img/apple-pay.svg | 3 ++ view/frontend/web/img/bizum.svg | 3 ++ view/frontend/web/img/cards.svg | 1 + view/frontend/web/img/google-pay.svg | 9 ++++ view/frontend/web/img/mbway.svg | 1 + view/frontend/web/img/multibanco.svg | 45 +++++++++++++++++++ .../monei-google-apple-method.js | 7 +++ .../template/payment/monei-bizum-insite.html | 7 ++- .../template/payment/monei-card-insite.html | 7 ++- .../payment/monei-google-apple-insite.html | 7 ++- .../web/template/payment/monei-redirect.html | 7 ++- 18 files changed, 123 insertions(+), 8 deletions(-) create mode 100644 view/frontend/web/css/mbway.css create mode 100644 view/frontend/web/css/monei-payment.css create mode 100644 view/frontend/web/css/multibanco.css create mode 100644 view/frontend/web/img/apple-pay.svg create mode 100644 view/frontend/web/img/bizum.svg create mode 100644 view/frontend/web/img/cards.svg create mode 100644 view/frontend/web/img/google-pay.svg create mode 100644 view/frontend/web/img/mbway.svg create mode 100644 view/frontend/web/img/multibanco.svg diff --git a/view/frontend/layout/checkout_index_index.xml b/view/frontend/layout/checkout_index_index.xml index 7f6a9f0..0a4efc9 100644 --- a/view/frontend/layout/checkout_index_index.xml +++ b/view/frontend/layout/checkout_index_index.xml @@ -5,7 +5,10 @@ --> + + + diff --git a/view/frontend/web/css/bizum.css b/view/frontend/web/css/bizum.css index 75a5f8c..2b73205 100644 --- a/view/frontend/web/css/bizum.css +++ b/view/frontend/web/css/bizum.css @@ -1,3 +1,7 @@ +.payment-method#monei_bizum .payment-method-title label span.monei-payment-icon{ + background: url(../img/bizum.svg) no-repeat; + width: 70px; +} #monei-bizum-insite-payment-form { width: 225px; } diff --git a/view/frontend/web/css/card-input.css b/view/frontend/web/css/card-input.css index c03701e..ae51049 100644 --- a/view/frontend/web/css/card-input.css +++ b/view/frontend/web/css/card-input.css @@ -1,3 +1,8 @@ +.payment-method#monei_card .payment-method-title label span.monei-payment-icon{ + background: url(../img/cards.svg) no-repeat; + width: 220px; +} + #monei-card-insite-payment-form { display: block; padding: 10px 0; diff --git a/view/frontend/web/css/google-apple.css b/view/frontend/web/css/google-apple.css index e700408..4123ab2 100644 --- a/view/frontend/web/css/google-apple.css +++ b/view/frontend/web/css/google-apple.css @@ -1,3 +1,11 @@ +.payment-method#monei_google_pay .payment-method-title label span.monei-payment-icon{ + background: url(../img/google-pay.svg) no-repeat; + width: 50px; +} +.payment-method#monei_apple_pay .payment-method-title label span.monei-payment-icon{ + background: url(../img/apple-pay.svg) no-repeat; + width: 50px; +} #monei-google-apple-insite-payment-form { width: 130px; } diff --git a/view/frontend/web/css/mbway.css b/view/frontend/web/css/mbway.css new file mode 100644 index 0000000..5639c91 --- /dev/null +++ b/view/frontend/web/css/mbway.css @@ -0,0 +1,4 @@ +.payment-method#monei_mbway_redirect .payment-method-title label span.monei-payment-icon{ + background: url(../img/mbway.svg) no-repeat; + width: 45px; +} diff --git a/view/frontend/web/css/monei-payment.css b/view/frontend/web/css/monei-payment.css new file mode 100644 index 0000000..23e2e66 --- /dev/null +++ b/view/frontend/web/css/monei-payment.css @@ -0,0 +1,6 @@ +.payment-method.monei-payment-methods .payment-method-title label{ + display: inline-flex; +} +.payment-method.monei-payment-methods .payment-method-title label span:first-child { + padding-right: 10px; +} diff --git a/view/frontend/web/css/multibanco.css b/view/frontend/web/css/multibanco.css new file mode 100644 index 0000000..ecf5e65 --- /dev/null +++ b/view/frontend/web/css/multibanco.css @@ -0,0 +1,4 @@ +.payment-method#monei_multibanco_redirect .payment-method-title label span.monei-payment-icon{ + background: url(../img/multibanco.svg) no-repeat; + width: 105px; +} diff --git a/view/frontend/web/img/apple-pay.svg b/view/frontend/web/img/apple-pay.svg new file mode 100644 index 0000000..7d305cc --- /dev/null +++ b/view/frontend/web/img/apple-pay.svg @@ -0,0 +1,3 @@ + + + diff --git a/view/frontend/web/img/bizum.svg b/view/frontend/web/img/bizum.svg new file mode 100644 index 0000000..8ead4ad --- /dev/null +++ b/view/frontend/web/img/bizum.svg @@ -0,0 +1,3 @@ + + + diff --git a/view/frontend/web/img/cards.svg b/view/frontend/web/img/cards.svg new file mode 100644 index 0000000..a0a01e7 --- /dev/null +++ b/view/frontend/web/img/cards.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/view/frontend/web/img/google-pay.svg b/view/frontend/web/img/google-pay.svg new file mode 100644 index 0000000..4453844 --- /dev/null +++ b/view/frontend/web/img/google-pay.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/view/frontend/web/img/mbway.svg b/view/frontend/web/img/mbway.svg new file mode 100644 index 0000000..82b9b46 --- /dev/null +++ b/view/frontend/web/img/mbway.svg @@ -0,0 +1 @@ + diff --git a/view/frontend/web/img/multibanco.svg b/view/frontend/web/img/multibanco.svg new file mode 100644 index 0000000..5c14cca --- /dev/null +++ b/view/frontend/web/img/multibanco.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/view/frontend/web/js/view/payment/method-renderer/monei-google-apple-method.js b/view/frontend/web/js/view/payment/method-renderer/monei-google-apple-method.js index a6e87d9..ae299a6 100644 --- a/view/frontend/web/js/view/payment/method-renderer/monei-google-apple-method.js +++ b/view/frontend/web/js/view/payment/method-renderer/monei-google-apple-method.js @@ -54,6 +54,13 @@ define( monei.api.getPaymentMethods({accountId: this.accountId}).then(result => this.setTitle(result)) }, + getPaymentCode: function () { + if(this.applePaySupported){ + return 'monei_apple_pay'; + } + return 'monei_google_pay'; + }, + isMethodVisible: function () { if(this.applePaySupported){ return this.isEnabledApplePay(); diff --git a/view/frontend/web/template/payment/monei-bizum-insite.html b/view/frontend/web/template/payment/monei-bizum-insite.html index ddded6b..b12a5d0 100644 --- a/view/frontend/web/template/payment/monei-bizum-insite.html +++ b/view/frontend/web/template/payment/monei-bizum-insite.html @@ -4,13 +4,16 @@ * @copyright Copyright © Monei (https://monei.com) */ --> -
+
- +
diff --git a/view/frontend/web/template/payment/monei-card-insite.html b/view/frontend/web/template/payment/monei-card-insite.html index 5d59597..9c51fd2 100644 --- a/view/frontend/web/template/payment/monei-card-insite.html +++ b/view/frontend/web/template/payment/monei-card-insite.html @@ -4,13 +4,16 @@ * @copyright Copyright © Monei (https://monei.com) */ --> -
+
- +
diff --git a/view/frontend/web/template/payment/monei-google-apple-insite.html b/view/frontend/web/template/payment/monei-google-apple-insite.html index 52017df..182b0ca 100644 --- a/view/frontend/web/template/payment/monei-google-apple-insite.html +++ b/view/frontend/web/template/payment/monei-google-apple-insite.html @@ -4,13 +4,16 @@ * @copyright Copyright © Monei (https://monei.com) */ --> -
+
- +
diff --git a/view/frontend/web/template/payment/monei-redirect.html b/view/frontend/web/template/payment/monei-redirect.html index 6d005a4..76c9422 100644 --- a/view/frontend/web/template/payment/monei-redirect.html +++ b/view/frontend/web/template/payment/monei-redirect.html @@ -4,13 +4,16 @@ * @copyright Copyright © Monei (https://monei.com) */ --> -
+
- +