Custom Form Styling for Bootstrap Form

  • Resolved mockeey

    (@mockeey)


    1 year, 2 months ago

    Hi,

    I’ve been using the following code (https://ww.wp.xz.cn/support/topic/assistance-needed-for-customizing-add-payment-method-ui/) to successfully style the “Stripe payment form”:

    add_filter(‘wc_stripe_get_element_options’, function($options, $gateway){

    if($gateway->id === ‘stripe_cc’){

    $options[‘appearance’] = [

    ‘variables’ => [

                    ‘fontFamily’ => ‘Inter, sans-serif’,

                    ‘fontSizeBase’ => ’16px’,

                    ‘colorText’ => ‘#fff’

                ],

    ‘rules’ => [

    ‘.Tab’ => [

    ‘border’ => ‘1px solid #fff’

    ],

    ‘.Input’ => [

                     ‘borderRadius’ => ’16px’

                 ]

    ]

    ];

    }

    return $options;

    }, 10, 2);

    However, when using the “Custom form“ options (such as Bootstrap or other layouts), these styles do not apply. Despite the Stripe iframe loading correctly, the custom styles have no effect. Currently, the issue is that the text appears dark against a dark background, making it unreadable.

    I have a few questions:

    1. Is there a different filter or hook specifically for styling the custom form layouts?
    2. Are there any known limitations when applying custom styles in this mode?
    3. Could you provide an example of how to style the input fields when using the Bootstrap layout?

    I appreciate your guidance on this. Thanks in advance for your help!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Clayton R

    (@mrclayton)

    1 year, 2 months ago

    Hi @mockeey

    1. When using the custom forms, you can copy their templates from the plugin into your theme and modify them that way. You can also modify them with CSS on your site. https://docs.paymentplugins.com/wc-stripe/config/#/templates
    2. No, there aren’t any limitations when using the custom forms. Although, I would recommend using the Stripe payment form over any of the other forms.
    3. You can use regular CSS since it’s only the input field that’s in the iFrame. Everything else like the labels and effects come from CSS provided by the plugin, which you can override.

    Kind Regards

    Thread Starter mockeey

    (@mockeey)

    1 year, 2 months ago

    Thanks for your response!

    I realize I wasn’t specific enough in my original message. I was able to style most elements using CSS, but your link was very helpful. I had to use some custom JS and CSS workarounds to achieve certain results.

    The main issue I’m facing is with the input field inside the iframe. The code I provided works fine on the original Stripe form (where the entire form is within an iframe), but it doesn’t apply when using the Bootstrap version. Specifically, the input text color doesn’t change to white, even though the same code works in the standard Stripe form.

    I’d prefer to use the Bootstrap layout since the default Stripe form is difficult to style to match my website’s UI. Interestingly, other Stripe payment plugins seem to inherit the website’s styles for the iframe input fields, while yours appears to have predefined styles (font, colors, etc.) that override them.

    Is there a way to apply custom styles to the iframe input fields in the Bootstrap version?

    Plugin Author Clayton R

    (@mrclayton)

    1 year, 2 months ago

    Hi @mockeey

    Interestingly, other Stripe payment plugins seem to inherit the website’s styles for the iframe input fields

    They may be using the default WooCommerce form or applying some sort of inherit style.

    Is there a way to apply custom styles to the iframe input fields in the Bootstrap version?

    Yes, there is a different filter for the custom forms. wc_stripe_get_card_custom_field_options

    https://docs.stripe.com/js/elements_object/create_element?type=cardNumber#elements_create-options-style

    https://docs.stripe.com/js/appendix/style

    Example:

    add_filter('wc_stripe_get_card_custom_field_options', function($options){
        $options['cardNumber'] = ['base' => ['color' => '#fff']];
        $options['cardExpiry'] = ['base' => ['color' => '#fff']];
        $options['cardCvc'] = ['base' => ['color' => '#fff']];
        return $options;
    });

    Kind Regards

    Thread Starter mockeey

    (@mockeey)

    1 year, 2 months ago

    Thanks again for your help!

    The code you provided didn’t work as expected, but I was able to modify it to get the desired result. For anyone facing the same issue with the Bootstrap form, here’s the working solution:

    add_filter('wc_stripe_get_card_custom_field_options', function($options) {
        $options['cardNumber'] = [
            'style' => [
                'base' => [
                    'color' => '#ffffff',
                    'fontSize' => '16px',
                    '::placeholder' => [
                        'color' => '#ffffff'
                    ]
                ]
            ]
        ];
        
        $options['cardExpiry'] = $options['cardNumber']; // Reuse same styles
        $options['cardCvc'] = $options['cardNumber'];    // Reuse same styles
        
        return $options;
    });

    Thanks again for your assistance! I believe this thread is now resolved.

    Plugin Author Clayton R

    (@mrclayton)

    1 year, 2 months ago

    Hi @mockeey

    Thanks for confirming. We always appreciate a nice review if you have a moment. https://ww.wp.xz.cn/support/plugin/woo-stripe-payment/reviews/

    Kind Regards

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom Form Styling for Bootstrap Form’ is closed to new replies.