Customizing colors on `square.js` card form -- Documention incorrect

Questions
1

The colors of the card form look out of place and hard to read in a dark theme. Other form elements would use a darker background.

image
image1100×299 16.9 KB

This documentation is incorrect: https://developer.squareup.com/docs/web-payments/customize-styles

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:

  1. Is this form the only way to get a Card Nonce token?

  2. 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?

2

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.

      const darkModeCardStyle = {
        '.input-container': {
          borderColor: '#2D2D2D',
          borderRadius: '6px',
        },
        '.input-container.is-focus': {
          borderColor: '#006AFF',
        },
        '.input-container.is-error': {
          borderColor: '#ff1600',
        },
        '.message-text': {
          color: '#999999',
        },
        '.message-icon': {
          color: '#999999',
        },
        '.message-text.is-error': {
          color: '#ff1600',
        },
        '.message-icon.is-error': {
          color: '#ff1600',
        },
        input: {
          backgroundColor: '#2D2D2D',
          color: '#FFFFFF',
          fontFamily: 'helvetica neue, sans-serif',
        },
        'input::placeholder': {
          color: '#999999',
        },
        'input.is-error': {
          color: '#ff1600',
        },
      };

:slightly_smiling_face:

3

Using the sample @ web-payments-quickstart/card-styling-simple.html at main · square/web-payments-quickstart · GitHub

If you add the following to the <head>:

<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.

Here’s the MDN on that attribute: color-scheme - CSS: Cascading Style Sheets | MDN

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:

<style type="text/css">
:root {
	color-scheme: unset;
}
</style>

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

4

Thanks for sharing your findings. I’m passing them along to the team. :slightly_smiling_face:

5

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.

6

Were you using our example that uses dark mode? :slightly_smiling_face:

7

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.

8

Okay, thank you for sharing. I’ll pass it along. :slightly_smiling_face:

9

@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.

See extensive experimentation from StackBlitz here about this issue with iframes and dark mode: Transparent iframes and dark mode

10

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>

  1. 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.

  2. Dark Mode Styles: The styles are set to match a dark mode theme, with a dark background and light text.

  3. 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. :slightly_smiling_face:

11

I am still struggling with this and would appreciate if anyone can help me get this to work. My card container looks just like the original post. I am in a Nuxt/Vue context, but everything in terms of my Square implementation is working except this one piece.

I have tried every conceivable way of affecting the backgroundColor but to no avail. Yes, I have examined the quickstart, the docs, the forums, tried the CSS variables above, etc., and none of it works.

For whatever reason, backgroundColor is not set whenever I attached a credit card with:

const darkModeCardStyle = {
    '.input-container': {
      borderColor: '#2D2D2D',
      borderRadius: '6px',
    },
    '.input-container.is-focus': {
      borderColor: '#006AFF',
    },
    '.input-container.is-error': {
      borderColor: '#ff1600',
    },
    '.message-text': {
      color: '#999999',
    },
    '.message-icon': {
      color: '#999999',
    },
    '.message-text.is-error': {
      color: '#ff1600',
    },
    '.message-icon.is-error': {
      color: '#ff1600',
    },
    input: {
      backgroundColor: '#2D2D2D',
      color: '#FFFFFF',
      fontFamily: 'Helvetica',
    },
    'input::placeholder': {
      color: '#999999',
    },
    'input.is-error': {
      color: '#ff1600',
    },
  } as CardClassSelectors;

via

    card.value = await payments.value.card({
      style: darkModeCardStyle,
    });

This is what it yields:

<style id="sq-single-card-styles">
      input { color: #FFFFFF; font-family: Helvetica; }
      
      form .sq-background-text { font-family: Helvetica; }
      
      label { font-family: Helvetica; color: #999999; }
      
      input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 100px #2D2D2D inset !important; -webkit-text-fill-color: #FFFFFF !important; }
      
      input.sq-error { color: #ff1600; }
      
      form input::placeholder { color: #999999; }
      
      form .sq-background-text .sq-visible-background-text { color: #999999; }
      
      form #card-number-wrapper { border-color: #2D2D2D; }
      </style>

The above conforms to the docs as well as what is spelled out in the CardClassSelectors interface.

Please help :frowning:

12

Are you attaching the card container before or after the background is set? :slight_smile: