Add payment icos in checkout payment steps

MONEI · May 31, 2024 · 8aaa6db · 8aaa6db
1 parent 9fb4c37
commit 8aaa6db
Show file tree

Hide file tree

Showing 18 changed files with 123 additions and 8 deletions.
diff --git a/view/frontend/layout/checkout_index_index.xml b/view/frontend/layout/checkout_index_index.xml
@@ -5,7 +5,10 @@
   -->
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
+        <css src="Monei_MoneiPayment::css/monei-payment.css" />
         <css src="Monei_MoneiPayment::css/card-input.css" />
+        <css src="Monei_MoneiPayment::css/mbway.css" />
+        <css src="Monei_MoneiPayment::css/multibanco.css" />
         <css src="Monei_MoneiPayment::css/bizum.css" />
         <css src="Monei_MoneiPayment::css/google-apple.css" />
     </head>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/view/frontend/web/img/bizum.svg b/view/frontend/web/img/bizum.svg
diff --git a/view/frontend/web/img/cards.svg b/view/frontend/web/img/cards.svg
diff --git a/view/frontend/web/img/google-pay.svg b/view/frontend/web/img/google-pay.svg