Fix Square card form white-on-white: explicit light style options

This commit is contained in:
2026-05-26 06:52:55 +00:00
parent b76da95cea
commit 51764593ef
+25 -2
View File
@@ -2168,7 +2168,30 @@ function openUpdateCard(id, triggerBtn) {
}
Square.payments('<?= SQUARE_APP_ID ?>', '<?= SQUARE_LOCATION_ID ?>').then(payments => {
_sqPayments = payments;
return _sqPayments.card();
return _sqPayments.card({
style: {
'.input-container': {
borderColor: '#d1d5db',
borderRadius: '6px',
backgroundColor: '#ffffff',
},
'.input-container.is-focus': {
borderColor: '#f97316',
},
'.input-container.is-error': {
borderColor: '#dc2626',
},
'input': {
backgroundColor: '#ffffff',
color: '#111111',
fontSize: '14px',
fontFamily: 'Inter, Arial, sans-serif',
},
'input::placeholder': {
color: '#9ca3af',
},
}
});
}).then(card => {
window._ucCard = card;
return card.attach('#ucCardContainer');
@@ -2222,7 +2245,7 @@ async function submitUpdateCard() {
<button onclick="closeUpdateCard()" style="background:none;border:none;font-size:1.3rem;cursor:pointer;color:#6b7280;line-height:1">✕</button>
</div>
<p style="font-size:.83rem;color:#6b7280;margin-bottom:1rem">Enter the customer's new card. The old card will be removed and replaced.</p>
<div id="ucCardContainer" style="border:1px solid #e5e7eb;border-radius:8px;padding:.75rem;min-height:54px;margin-bottom:1rem"></div>
<div id="ucCardContainer" style="border:1px solid #e5e7eb;border-radius:8px;padding:.75rem;min-height:54px;margin-bottom:1rem;background:#fff"></div>
<div id="ucMsg" style="display:none;font-size:.82rem;margin-bottom:.75rem;padding:.5rem .75rem;border-radius:6px;background:#fef2f2"></div>
<div style="display:flex;gap:.75rem">
<button id="ucSubmitBtn" onclick="submitUpdateCard()" style="flex:1;background:#f97316;color:#fff;border:none;border-radius:8px;padding:.75rem;font-size:.9rem;font-weight:700;cursor:pointer">Save New Card</button>