Modify style CSS for module "Prestashop Checkout" 8.4.1.0

[bliscar]

Hello !

I am trying to modify style for credit card name field and credit number field, for module "Prestashop Checkout".

I am using an external custom.css file to override the style of my website, and writing this line to change style of card name input field:

input.card-field-name { color: #FFF !important; background: #222 !important; border: 1px solid #555 !important; }

I am using the directive !important because the original style is included in a <style> parameter inside the code.

But the style does not change ...

Any idea ? Thank you.

Prestashop 8.1.7

Prestashop Checkout module 8.4.1.0 

[Andrei H]

Hello,

Have you checked if the <style> tag (and the input element) is actually injected into your page? I tried to have a look through their code and I cannot find it. I think this is actually injected into an iframe - but can you double check it, please?

In order for the PSPs to keep PCI compliance, they are not allowed to add card related inputs directly to your page. The way it usually works, these inputs are each loaded in separate iframes (or in a single iframe in case of a Hosted Payment Page). 

If the above is true, you will not be able to make the changes via CSS. Best you can do is to directly contact their development team to see if they expose any way of adding custom styles to the iframe (maybe a custom hook or something similar).

[bliscar]

10 hours ago, Andrei H said:

Hello,

Have you checked if the <style> tag (and the input element) is actually injected into your page? I tried to have a look through their code and I cannot find it. I think this is actually injected into an iframe - but can you double check it, please?

In order for the PSPs to keep PCI compliance, they are not allowed to add card related inputs directly to your page. The way it usually works, these inputs are each loaded in separate iframes (or in a single iframe in case of a Hosted Payment Page). 

If the above is true, you will not be able to make the changes via CSS. Best you can do is to directly contact their development team to see if they expose any way of adding custom styles to the iframe (maybe a custom hook or something similar).

Yes. You are right. The <style> tag is actually injected into an iframe.

I will try to contact the support team to see how I can manage to change the style.

Thank you !

[ps8modules]

Hi.

You can change the style even in the iframe via JQuery.
Just add a few lines of code to ./themes/your theme/assets/js/custom.js (if it doesn't exist, create it).
For example:

$(document).ready(function() {
    if (prestashop.page.page_name == 'order') { /* run the script only on the order page */
        if ($('#iframe').length) { /* find out if there is a PayPal iframe by its id=??? */
            $('#iframe').load(function() {
                $('#iframe').contents().find('head').append('<style>input.card-field-name { color: #FFF !important; background: #222 !important; border: 1px solid #555 !important; }</style>');  
            });
        }
    }
});

 

Edited August 27 by ps8modules.com (see edit history)