Though it does seem to affect text that is outside of the form, like “Enter your card number”. It mentions a dark-mode.css, but not only is the form is in an <iframe> and won’t styled by that method, it doesn’t mention what the contents of that CSS file would be. Also adding class="dark-mode" to the body appears to have no affect on anything. Should Step 1 on that page be taken out entirely? Is it attempting to instruct users on how to add a dark mode to a page in general or something? If so, why? Is this content generated by ChatGPT?
The 2nd step, “Step 2: Define a custom style” appears to be on the right track. But it doesn’t change the form elements, possibly wrong selectors. I started to fix the selectors myself, but I have no way of knowing what will last and what won’t.
Really my main questions are this:
Is this form the only way to get a Card Nonce token?
Is there any documentation on how to customize the look of this form so that it can fit into a form when embedded into a website as intended?
This is the only way to get a token to pass to CreatePayment for processing payments with a web application. As for the styling I just tested and it works as expected with our sample.
<style type="text/css">
html {
color-scheme: dark;
}
</style>
The colors in the widget become inverted… It’s a bit baffling to me that CSS outside of the <iframe> has any effect inside it, but I’ve isolated what seems to be going on.
Seems like it would be reasonably common to include in themes that allow switching, I know it’s in some popular CSS frameworks (I’m using one).
The inversion would be the opposite of what one would expect when trying to style it darker… So the documentation technically isn’t incorrect, although that dark-mode.css step could be removed since it isn’t related to changing the Square form style (making it a bit confusing)… but there does appear to be a weird glitch when setting color-scheme: dark;
It looks like in my case a workaround could be, only on the page where the form shows, to add:
But I’m not sure if that will apply to all cases… definitely strange, could potentially be a browser bug (in both Chromium and FF) since one would expect no effect within the <iframe> based on outside CSS
Thank you for this thread! I was upgrading a site to use bootstrap 5.3 and was running into this dark mode issue. For me, the card-container background was white, even though I was using a dark theme. And the darkModeCardStyle values were set to the values in your examples. The font-color showed white, but the background was also white, making the entry very user unfriendly. Anyway, I started with adding the style html { color-scheme: dark; }, no joy. I then saw this :root { color-scheme: unset; } just before giving up on this thread and poof! We have joy.
I have the same question/concern though, is this a long term fix or am I on thin ice with this fix?
Via ngrok, I do have outside access to my page if someone at square would like to analyze the issue.
Yes, the dark mode example. It worked with the prior home-grown dark mode. Switching to bootstrap 5.3 broke something and somehow, :root { color-scheme: unset; } seems to fix the issue.
@Bryan-Square: Is there any way we can add a meta tag to the iframe (i.e., <meta name="color-scheme" content="light dark">) to tell the iframe what color mode it can/should render in?
The suggested :root { color-scheme: unset; } did not help me, and actually just the styles of the host page.
The Square Web Payments SDK, you typically do not have direct control over the content of the iframe that Square injects into your page. This iframe is managed by Square and is designed to securely handle sensitive payment information. Therefore, injecting custom meta tags or directly modifying the content of the iframe is not supported due to security and integrity reasons.
Handling Dark Mode with the Square Web Payments SDK
While you cannot directly add a meta tag to the iframe, you can still influence the appearance of the iframe to some extent using the available customization options provided by the SDK.
Square allows you to customize the appearance of the payment form using CSS variables. These variables can be used to adjust the colors and other styles to better match your site’s theme, including dark mode.
Example: Customizing the Payment Form for Dark Mode
Here is an example of how you can customize the Square payment form to support dark mode using the CSS variables provided by the SDK:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Square Web Payments SDK</title>
<style>
body {
background-color: #121212;
color: #ffffff;
}
/* Custom styles for the Square payment form */
.sq-payment-form {
--sq-background-color: #121212;
--sq-text-color: #ffffff;
--sq-border-color: #ffffff;
--sq-placeholder-color: #888888;
--sq-input-background-color: #1e1e1e;
}
</style>
<script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
</head>
<body>
<div id="payment-form"></div>
<script>
async function initializeSquarePayments() {
const payments = Square.payments('YOUR_APPLICATION_ID', 'YOUR_LOCATION_ID');
const card = await payments.card();
await card.attach('#payment-form');
// Handle form submission
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const result = await card.tokenize();
if (result.status === 'OK') {
console.log('Tokenization succeeded:', result.token);
// Handle the successful tokenization
} else {
console.error('Tokenization failed:', result.errors);
// Handle the tokenization failure
}
});
}
initializeSquarePayments();
</script>
</body>
</html>
CSS Variables: The .sq-payment-form class is used to define CSS variables that customize the appearance of the payment form. This includes background color, text color, border color, placeholder color, and input background color. These variables are applied to the elements within the Square iframe.
Dark Mode Styles: The styles are set to match a dark mode theme, with a dark background and light text.
Square Payments Initialization: The Square Payments SDK is initialized, and the payment form is attached to the #payment-form element.
By customizing the CSS variables, you can have a dark mode appearance for the Square payment form without directly modifying the iframe content.
