Skip to content

Commit a9850a7

Browse files
jimmynjimmyn
committed
feat: add dynamic card brand icons to credit card payment method
Display available card brand icons (Visa, Mastercard, etc.) in the payment method title for both Classic and Blocks checkout, based on merchant's enabled payment methods from MONEI API. - Add CardBrandHelper service to fetch and format card brand configurations - Fetch available card brands from MONEI API metadata.card.brands - Copy 9 card brand SVG icons (8 brands + default) from Magento module - Inject card brands into payment method label for Classic checkout - Render card brands in CreditCardLabel component for Blocks checkout - Automatically hide default logo when card brands are available - Add CSS for horizontal icon layout with proper spacing - Remove unused $profile_monitor property - Fix PHPStan issues with ternary operators and null checks
1 parent 2fce098 commit a9850a7

File tree

17 files changed

+916
-495
lines changed

17 files changed

+916
-495
lines changed

‎assets/css/monei-blocks-checkout.css‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
/* Card Input Container */
22
.monei-card-input {
33
padding: 12px;
4-
border: 1px solid hsla(0,0%,7%,.8);
5-
border-radius: 4px;
6-
background: #fff;
74
transition: border-color 0.2s ease;
85
margin-bottom: 12px;
9-
height: 1.8em;
6+
background-color: #fff;
7+
border: 1px solid hsla(0, 0%, 7%, .8);
8+
border-radius: 4px;
9+
box-sizing: border-box;
10+
color: #2b2d2f;
11+
font-family: inherit;
12+
font-size: 1em;
13+
height: 3.125em;
14+
line-height: 1em;
15+
margin: 0;
16+
min-height: 0;
17+
padding: 0;
18+
width: 100%;
1019
}
1120

1221
.monei-card-input.is-focused {
@@ -20,12 +29,19 @@
2029

2130
/* Cardholder Name Input */
2231
.monei-input {
23-
width: 100%;
24-
padding: 12px;
25-
border: 1px solid #ddd;
32+
background-color: #fff;
33+
border: 1px solid hsla(0, 0%, 7%, .8);
2634
border-radius: 4px;
27-
font-size: 16px;
28-
transition: border-color 0.2s ease;
35+
box-sizing: border-box;
36+
color: #2b2d2f;
37+
font-family: inherit;
38+
font-size: 1em;
39+
height: 3.125em;
40+
line-height: 1em;
41+
margin: 0;
42+
min-height: 0;
43+
padding: 1em .5em;
44+
width: 100%;
2945
}
3046

3147
.monei-input:focus {
@@ -43,23 +59,15 @@
4359
cursor: not-allowed;
4460
}
4561

46-
/* Error Messages */
47-
.wc-block-components-validation-error {
48-
color: #cc1818;
49-
font-size: 0.875em;
50-
margin-top: 4px;
51-
margin-bottom: 8px;
52-
}
53-
5462
/* Payment Request Container */
5563
.monei-payment-request-container {
5664
min-height: 50px;
5765
display: flex;
5866
align-items: center;
5967
justify-content: center;
60-
border-radius: 4px;
6168
background: #fff;
62-
margin-bottom: 12px;
69+
width: 100%;
70+
margin: .5em 0 0;
6371
}
6472

6573
/* Label Container */
@@ -73,6 +81,20 @@
7381
font-weight: 500;
7482
}
7583

84+
.monei-card-brands {
85+
display: inline-flex;
86+
align-items: center;
87+
gap: 5px;
88+
}
89+
90+
.monei-card-brands img,
91+
.card-brand-icon {
92+
height: 24px !important;
93+
width: auto !important;
94+
display: inline-block !important;
95+
margin: 0 !important;
96+
}
97+
7698
.monei-logo {
7799
display: inline-flex;
78100
align-items: center;
@@ -85,6 +107,7 @@
85107

86108
/* Fieldset */
87109
.monei-fieldset {
110+
background: none;
88111
border: none;
89112
padding: 0;
90113
margin: 0;
@@ -113,10 +136,6 @@
113136
margin-bottom: 16px;
114137
}
115138

116-
/* Apple/Google Pay Button Adjustments */
117-
#payment-request-container {
118-
width: 100%;
119-
}
120139

121140
/* Place Order Button States */
122141
.wc-block-components-checkout-place-order-button:disabled {

0 commit comments

Comments
 (0)