[Support request] Stripe Payment request button (ApplePay and GooglePay)

[Sam]

Hi, I am trying to configure the Payment Request buttons for the Official Woocommerce Stripe plugin: https://docs.woocommerce.com/document/stripe/

These buttons are for Applepay and Googlepay buttons and are displayed on both the product pages and the cart page. As you can see from the screenshots, this displays fine on the cart page but messes up the add to cart button on the product page because it wants to insert itself before the add to cart button rather than after it. Plus, it also inserts that annoying separator.

Product page: https://www.dropbox.com/s/ttlw8aayat7jwl2/Screenshot%202019-06-25%20at%2017.02.08.png?dl=0
Cart Page: https://www.dropbox.com/s/3d5gr3q0amgqzwr/Screenshot%202019-06-25%20at%2017.01.46.png?dl=0

Can you help me work out how to style this so it displays properly on the product page? I fixed it on my previous theme by doing the following I just cannot work it out on GP:
1) hide the button on desktop displays on the product page
2) on mobile, stack the quantity, payment request button and add to cart buttons and make them full width.

Let me know if you think this is possible, I am surprised I could not find another forum post on this as it is one of the most popular payment gateways for WC.

Thanks
sam

[Tom]

Hi there,

Not sure I’m seeing what you showed in the screenshots. Did you change anything?

As for the screenshots, it looks like the only difference is the Add to Basket button isn’t full width? Is that correct?

[Sam]

Hi Tom, sorry I had to disable it as it is a live site and was messing up the display of the buy button.

In the meantime, I used the below code to hide the Applepay / GooglePay buttons on the product page where the issue was occurring. The button still appears on the cart page and displays ok, which is logical.

/*==== Stripe Apple Pay ====*/
.product .summary #wc-stripe-payment-request-button-separator {
	display: none !important;
}
.product .summary #wc-stripe-payment-request-wrapper {
	display: none !important;
}
.post-type-archive-product .woocommerce-products-header {
    display: none;
}

I do think it would be a good idea to add support for this as a feature request for GP, as it is an immensely popular plugin from WC.

Thanks
Sam

[Tom]

Was the issue the width of the button? Or were there more issues?

[Sam]

It was to do with that the stripe plugin inserts the applepay (payment request button) before the add to cart button so instead of sitting next to the quantity box it pushes it down the page (mobile and desktop). On desktop, this displaces the add to cart button and itself is full width so looks odd. On mobile, the payment request button itself is full width whereas the WC add to cart button and the quantity box are not so that again looks bad.

Sorry, it is hard to describe.

Like I say it was an issue with our previous them as well but the found a way to style it so it looked ok.

[Tom]

Cool. Let me know if you ever put it back up (on a staging site maybe) and I’ll see if there’s anything we can do 🙂

[Author]

Posts