Payment Processor Styles

[JayDub]

Hi - I've found the basic payment processor styles under Form/Details/Fields/Payment Processors but as far as I can see, you can only make changes to a few things, like the font, etc. How do you control other aspects of the fields holding the payment information, such as the width, border size, etc? I ask because on my form, the payment fields do not take on the style settings that I have created for the other fields on the form. I'm sure there is a way to fix this, but I haven't been able to find it. Thanks!

[telly]

Hi @JayDub,

I have successfully configure the style of my payment processor. Just go to the edit style > Form/Details > Layout :

From here you can change the layout and the background, alignment, border color


Or you can go to edit style > Form/Details > You can choose label, fields, and button: 


Here is a screenshot of a sample DataPage with Payment:


I hope it helps
 

[JayDub]

Thanks @telly . I'm able to set a few properties, like the border width of the fields using the method you described, and the payment processor fields seem to pick it up. However, other properties, like the placeholder text color and field height it seems to ignore. The odd thing is, if I use the inspector in Firefox, it looks like it is using correct property value of 40px for the height. But when I hover over the field it is 50px in height, so all of the payment processor fields appear taller than my other fields on the form. The other odd thing is that the payment processor fields will pick up any value over 50px and actually become taller, but they seem to ignore any value under 50px. And, again, they are completely ignoring the placeholder text color I have set. In the html, I can see that the payment processor fields are actually in an iframe. I don't know if that is causing the issue or not?

[telly]

Hi @JayDub,

Try to add !important after the pixel, for example Height:150px!important




I hope it helps

[JayDub]

Hi @telly. I have been working on other things but just came back to this issue. I added !important to the cbFormTextBox style but it still has no effect on height of the credit card fields. As a matter of fact, no matter what I set as !important for the field height, the credit card fields always display 10px higher than that value (see attached screenshot, where I set them to 50px - and they are displaying as 60px.)

I submitted this issue to Caspio support and this was their response:

Quote

Hello Joel,

Thank you for patiently waiting.

Upon checking and verifying this with our internal team. I'm afraid that it will need complex custom coding to change the style of the payment processor fields this is for security purposes. What we can do is to change the style of the other fields, you may use the code below on the header of the DataPage:

<style>
.cbFormTextField{
height: 41px !important;
width: 300px!important;
}
input#InsertRecordPayeeFirstName::placeholder {
color: #efebeb;
}

input#InsertRecordPayeeEmail::placeholder{
color: #efebeb!important;
}


input#InsertRecordPayeeLastName::placeholder{
color: #efebeb!important;
}

input#InsertRecordPayeePhone::placeholder{
color: #efebeb!important;
}
</style>

For reference, you may check this link: https://c0acs764.caspio.com/dp/ba4a60009a119570a12e4c478dc4/files/4336016

Regards,
Ethel

Maria Ethel Del Mundo | Customer Support Specialist
mariaethel.delmundo@caspio.com

They are basically saying there is no way to change the formatting of the credit card fields, and I have to change the rest of my form to match them instead (which still doesn't work because, as mentioned previously - they always appear 10px taller.) But, in addition, you are clearly able to do what I am trying to do - and I can't. So why are they telling me it's not possible - when you clearly can do it? Their explanation that it is a security issue doesn't make sense to me - why would changing a field height be a security issue? So, I'm trying to figure out what the real issue is so I can figure out a workaround as this issue is keeping our site from going live. Question for you: the screenshot you included of your result - is that just the Caspio Datapage preview or is that the Datapage displaying on an actual site (my preview in Caspio works fine - it's when I place it on a page that I have the issue.) I am hosting the page in WordPress - could that possibly be creating the issue? Thanks for any help you (or anyone else) can give! This is driving me crazy - I've even had our web developer look at it and they are stumped - and Caspio's explanation doesn't clear anything up!

[Sprocket]

@JayDub did you ever find a solution for this?

 

I've been trying to style stripe payment fields also (mine are for some reason randomly missing the borders that appear on every other field) and I have noticed these fields are different from the normal form fields in that each one is actually an iframe directly to stripe.

So the height attribute you point out is an attribute of a div, but within that div is an iframe that provides the stripe-hosted field. That stripe iframe appears to be not affected by caspio styles. Maybe entering the card info into an iframe is the security requirement they mean, and it's a technical limitation that they cannot actually style anything within that iframe. 

I have not yet found a solution. then next thing I plan to try is to set a background color for my entire form and maybe that can at least show the shape of these fields. I also wonder if it would be worth checking to see if there are any styling settings in Stripe itself, maybe there is some kind of default that could be set there that would affect the iframe contents. 

 

[JayDub]

Hi @Sprocket - sorry for the late reply. I got mine mostly looking like I wanted it, but it took setting up an expert session with Caspio support to figure it out. I still have some issues with the height of the payment processor fields, but nothing terrible. I would suggest submitting a ticket if you haven't already to get help.