styling secure fields

[ihojmanb]

Is there an more custom way to style secure fields than just the style object given in the fields.create method? I'm building my payment gateway using checkout API V2 and Tailwind CSS and find it hard to tweak the style of the input fields of cardNumber, securityCode and expirationDate

Here 'Nombre del titular' is an input field, whereas 'Card number' and 'Security code' are divs as required by the API:

[lucmantovani]

Hi @ihojmanb!

The only way to style the inputs is through the style property when creating them
But they were designed to adapt to their container, which is the div element

So, by styling the div as the raw inupts (like 'Nombre del titular') should be enough

[ihojmanb]

Hi @lucmantovani! I found a better way to do it. My initial cardForm configuration was the following:

const cardForm = mp.cardForm({
  amount: "100.5",
  iframe: true,
  form: {
   ....
}

and my form was written as:

<div type="text" id="cardNumber" className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></div>
<div type="text" id="cardExpirationDate" className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></div>
<div type="text" name="securityCode" id="securityCode" className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></div>

if I turn iframe value to false (or just delete that property, its default value is false) then I get to write my secure fields as inputs instead of divs, like so:

<input type="text" id="cardNumber" className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></input>
<input type="text" id="cardExpirationDate" className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></input>
<input type="text" name="securityCode" id="securityCode" className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></input>

[lucmantovani]

Indeed by deleting the property iframe you can write Card fields as inputs

But in this way you are not really using Secure Fields, loosing the extra security provided by the iframes and also loosing the elegibility for PCI SAQ-A (see more)

I recommend trying to style the container before moving to not using Secure Fields

[ihojmanb]

I followed your advice, but it seems like some styles (tailwind classes nor vanilla css) do not render in those containers, say, changing the border color on :focus. is there any reason for it? I want to have secure fields, but I also want my payment gateway to be consistent with my product brand.

On the other hand, if I decide to use sdk v1 instead of v2, what would be the best way to ensure security over those fields? is that what the security.js script was about?

[lucmantovani]

Since the inputs are inside an iframe they live in a context other than the window were the css is applied
One alternative is to attach event listeners to the fields (see more) and then manage the container's css classes.

But those are only available when integrating through what we call Core Methods, where you have more flexibility for customization.

[ihojmanb]

great info Lucas, thanks. I will dig into it!