Gpay/Apple Pay express button appearence rounded.

Hello iagoditu,

Thank you for contacting Woo support.

To add custom styles to the payment form, you can follow the steps outlined in this documentation.
https://woocommerce.com/document/stripe/customization/style-payment-form/

Please don’t hesitate to contact us again if you have more questions or concerns.
We are here to help ??

Best regards.

Hello @doublezed2,

Thank you for answer. Are we in same page? I’m trying to change those button style:

Those buttons appear in cart and checkout. I don’t want to change style of payment form, but the buttons that appear in woocommerce pages.

Best regards,

Iago

Here the Images with buttons i need to style.

Hi @iagoditu

Unfortunately, WooCommerce Stripe Payment Gateway does not have this feature built-in. However, you can achieve this by using a custom code.

Please note that writing or providing custom code is not within the scope of our support policy. If you are still having problems, we recommend asking development questions on the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

• A local web developer
• Codeable.io
• WooExperts

I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

Hey @shameemreza, how can we edit it via custom code? The Google Pay button is an iframe, which comes from Stripe, so we can’t apply any stylings directly. Also, on this documentation page, https://docs.stripe.com/elements/appearance-api, I can’ see only options to edit the form but not this Google Pay button, https://i.imgur.com/gbOuHHg.png, which is inserted into the PDP page and cart page’t see any info about how to edit Google pay button. What I’ve tried:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    $stripe_params['appearance'] = (object) [
        'rules' => (object) [
            // '.Input' => (object) [
            //     'fontSize' => '16px',
            //     'backgroundColor' => '#212D63',
            //     'border' => '20px solid var(--colorPrimary)',
            // ],
            '.GooglePayButton' => (object) [
              'border' => '1px solid #000000',
              'backgroundColor' => '#fff'
            ]
        ],
        'variables' => (object) [
          'fontFamily' => '"SF", Sans-serif'
        ]
    ];

    return $stripe_params;
} );

Neither .GooglePayButton rule, or .GooglePayButton-logo works. I can’t see any stylings applied to the Google Pay button. The commented code works, I can see applied stylings for inputs, so the hook is working correctly.

So the question is: How can we change the styling of this Google Pay button?

I also tried to change it on wp-admin area configs (/wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=methods&area=payment_requests), but it doesn’t work like supposed: the light version of the button (https://i.imgur.com/o7TxyEl.png) looks the same as Outline (https://i.imgur.com/V8vsYfh.png). So I can’t achieve border styling for the button inside an iframe.

• This reply was modified 2 weeks, 3 days ago by ahordii.

Hello ahordii,

Thank you for your message here.

I understand you’re looking to customize the Google Pay button, which is an iframe from Stripe, limiting direct styling options. For further details, you can refer to this guide.

As per support policy, we’re unable to assist with custom code, but for help, we recommend reaching out to Codeable or a Certified WooExpert.

If you have any follow-up questions, please create a new topic at this forum.
This way we can assist you separately and keep the forum organized.

Have a great day!

Hey @doublezed2 , thanks a lot for your reply!

Yeah, as I already mentioned, I saw the customization docs you sent but wasn’t able to find any info about configuring Google Pay button stylings. I also checked the rules, which I can apply here https://docs.stripe.com/elements/appearance-api?platform=web#form-inputs—labels-above, but there is no rule for ‘.GooglePayButton’. I tried to implement rules for ‘.Button’, but stylings didn’t apply to the Google Pay button as well.

Yeah, I totally understand that you are not able to assist with custom code, that’s fine. Could you just let me know if there are some rules which can be applied to the Google Pay button?

Thanks in advance!

Hey @ahordii,

It looks like you’re trying to round the Google Pay button on both the cart and checkout pages, but targeting the button elements hasn’t worked. Since these buttons are typically wrapped in an iframe, implementing JavaScript may be necessary to adjust their styling.

Could you please share your website URL? This will allow us to take a closer look and offer more specific guidance on how to achieve this. Please note that, as per our support policy, we’re unable to provide custom CSS. However, we’ll do our best to help identify the root cause of the issue.

Looking forward to your response!

Hello @jonayedhosen , sure, you can check the google pay button on the PDP page, like here https://kinship.jp/product/loro-piana-mens-superlight-crewneck/.

It’s already rounded for PDP, what I’m trying to achieve is to add a border to it, change the background, fill on hover etc (if it’s possible, of course, which I’m not sure).

I’ve tried to use the wc_stripe_upe_params hook (not CSS, because CSS can’t be applied to the third-party iframe).

Here is the code example I implemented to test if I can add the border to the Google Pay button:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    $stripe_params['appearance'] = (object) [
        'rules' => (object) [
            // '.Input' => (object) [
            //     'fontSize' => '16px',
            //     'backgroundColor' => '#212D63',
            //     'border' => '20px solid var(--colorPrimary)',
            // ],
            '.GooglePayButton' => (object) [
              'border' => '1px solid #000000',
              'backgroundColor' => '#fff'
            ],
            '.Button' => (object) [
              'border' => '1px solid #000000',
              'backgroundColor' => '#fff'
            ],
        ],
        'variables' => (object) [
          'fontFamily' => '"SF", Sans-serif'
        ]
    ];

    return $stripe_params;
} );

From the doc https://docs.stripe.com/elements/appearance-api?platform=web, I can see there are some rules (like .Button), which I tried to use, but it didn’t work. As well as I tried to add my custom rule (CSS for .GooglePayButton) but it doesn’t work as well.

Hello ahordii,

Thank you for your reply.

This is an old thread created by another person.
As per our forum guidelines, I suggest you create a new topic.
You may reference this thread in your new topic so we can continue the conversation there.

Apprecaite your cooperation. ??

Best regards.