Apple Pay Button is pushing down “Into cart” button

Hey there @fox-didl

This layout is the standard, with the Payment Request button above the Add to Cart button so if you wanted to change this, you would need to customize the theme template files to move these parts around.

Thanks,

From out dev. He said this is a bug in the plugin.:

The div with the ID “wc-stripe-payment-request-wrapper” is always rendered in the DOM (also when Apple-Pay is not available) and causes the “Add-to-cart” Button to break. (==> CSS Rule: display:block

with apple pay:
https://prnt.sc/ngrrnq

without apple pay (still a break because of this wrapper):
https://prnt.sc/ngrs5l

Hi again @fox-didl

If you’re looking to change the position of the Payment Request button, your theme developer can look at changing this with some custom code.

I’d recommend they have a look at this section of the code to get started:

https://github.com/woocommerce/woocommerce-gateway-stripe/blob/7427da93d2e124a4374e6f80acb6060dd575f364/includes/payment-methods/class-wc-stripe-payment-request.php#L177

I hope this helps,

Thanks,

Thanks for this. I informed the theme developer about this.

But sorry, I still don’t understand why the stripe plugin is doing this break in every case, also when Apple Pay or Android Pay isn’t displayed on screen. Without the break everything would be ok.

Can you explain this please?

Hey @fox-didl

> I still don’t understand why the stripe plugin is doing this break in every case, also when Apple Pay or Android Pay isn’t displayed on screen. Without the break everything would be ok.

Ah! I see what you mean here! When the Stripe payment gateway is disabled, there isn’t a line break. When I use the Storefront theme and the Payment Request buttons are enabled, I can see the line break on Firefox even with no button.

I’ve logged this on GitHub – https://github.com/woocommerce/woocommerce-gateway-stripe/issues/855

I’ve had a play about with things and I think this code will work:

https://gist.github.com/dougaitken/79922e6a8e0999307dd719f25e98b36a

Add that code to your functions.php file of your child theme and this will change the display to this:

Screenshot – https://cld.wthms.co/23RIPL

As we have a solution and a logged bug report, I’ll mark this thread as Resolved.

Thanks,