PayPal Commerce Credit Card Field Styles

[lesliekirk]

I know this isn't "regular" CSS so I need to know how to properly format it.

In the Payment Settings > PayPal Commerce Platform is a tab Credit Card Field Styles with a field having the same name. In that field, by default is

{
"input":
{
"padding": "0 0.5em",
"line-height": "calc(3.5em - 2px)",
"-moz-appearance": "none",
"-webkit-appearance": "none"
}
}

How do I change it to use this

 border: 1px solid #dfe1e1;
border-radius: 0;
display: block;
font-family: inherit;
font-size: 100%;
height: 2em;
line-height: 2;
outline: 0 none;
padding: 0 0.50rem;
vertical-align: middle;
width: 100%;

When I try to add anything additional (using the same format that is in the example) - those styles don't get added. I tried making some simple substitutions inside each of the quotes and the only thing I could change was the line-height. I really, really need borders around the input fields. FYI - the framework for the site is Suivant but I suspect this field might be needed by others.

It should be noted/warning that there is no history for this field.

[Brennan]

There is actually a separate PayPal commerce Platform css stylesheet which is the better place to update the styles. Go into CSS Resources and look for the PayPal CSS. Here you can edit it just like any other CSS file.

[lesliekirk]

There is actually a separate PayPal commerce Platform css stylesheet which is the better place to update the styles. Go into CSS Resources and look for the PayPal CSS. Here you can edit it just like any other CSS file.

I have tried for 2 solid days to tweak that mumble grumblin' thing (paypalcp). It is not touching the input fields. Keep in mind the site is not Shadows 1.x nor 2.x. I have tried changing classes, I have tried tweaking classes. Nothing is touching the input fields in the iframes for the credit card, expiration date, or CVV. Granted I could be doing this all wrong, I've tried using the Google browser tool, Firefox tools, and even Safari. I had even tried replacing the code with the code from Shadows 2.0 but then had an issue with the javascript. All I want to do is put borders around the fields. It shouldn't be this hard...

[Matt Zimmermann]

Hi Leslie,

Since this is within an iframe, the site styles will not cascade into them. If you are not seeing any changes by modifying either of the CSS sections, you may need to add more styles to duplicate the input styles of the site. I'm assuming when you modified the JSON code, your styles looks like this:

{
"input": {
"border": "1px solid #dfe1e1",
"border-radius": "0",
"display": "block",
"font-family": "inherit",
"font-size": "100%",
"height": "2em",
"line-height": "2",
"outline": "0 none",
"padding": "0 0.50rem",
"vertical-align": "middle",
"width": "100%"
}
}

[lesliekirk]

Hi Leslie,

Since this is within an iframe, the site styles will not cascade into them. If you are not seeing any changes by modifying either of the CSS sections, you may need to add more styles to duplicate the input styles of the site. I'm assuming when you modified the JSON code, your styles looks like this:

{
"input": {
"border": "1px solid #dfe1e1",
"border-radius": "0",
"display": "block",
"font-family": "inherit",
"font-size": "100%",
"height": "2em",
"line-height": "2",
"outline": "0 none",
"padding": "0 0.50rem",
"vertical-align": "middle",
"width": "100%"
}
}

Thanks, Matt, yes it was pretty close to that. I had tried just added a few key styles but noticed it wasn't working. I added what you posted and it didn't work either.

Interesting how does it work correctly with a site using Shadows 2.0? I would really like to see it in action. Does the demo site have PayPal active?

[Matt Zimmermann]

Hi Leslie,

Here is a demo site using the latest release of Shadows with PayPal: https://mivadevtest.com/shirt.html

When you get to OSEL, choose the second option labeled "Credit Card".

[lesliekirk]

Hi Leslie,

Here is a demo site using the latest release of Shadows with PayPal: https://mivadevtest.com/shirt.html

When you get to OSEL, choose the second option labeled "Credit Card".

Thanks, Matt. Something still seems to be different with the fields from the demo you've shared and the site I'm trying to tweak.

I've got Shadows 2.0 installed in a branch and the paypalcp active. I had to add the CSS to the head of the OPAY screen to get it to begin to display properly.

Keep in mind, I've still got to get this to meld with the Suivant ReadyTheme and the CVV popup is going to be a real pain in the rear. But maybe I'm getting closer...thanks.