AmazonPay Payment Box Breaks Layout on Checkout Page

UPDATE: I figured out that to the left of the payment box would normally be the address box via Amazon. However, I don’t require addresses (only email and name) since my products are all digital.

However, the content underneath it isn’t lined up right: the section labeled “Product” should be under “Your Order.”

FOUND SOMETHING —

This CSS is created, I believe, by AmazonPay:

#amazon_customer_details.wc-amazon-payments-advanced-populated+#customer_details {
    display: none;
}

Using Chrome DevTools, when I comment out that CSS, the screen looks fine. But when I leave it active, then the order info is what you see for “Yes Amazon.”

I can use custom CSS to undo the display: none;, but if this is being created by Amazon’s addon, then…

1. Why?
2. Is it a bug?
3. Can it be removed/edited?

Workaround (not a solution)

This is the workaround I’m using. It’s not a fix, just a hack. Add the following CSS to your custom CSS file:

#amazon_customer_details.wc-amazon-payments-advanced-populated+#customer_details {
	display: unset;
}

I am having the same problem, i tried your workaround, it helped but didnt fully resolve my issues. Are you on the current version of amazonpay 1.9.1? i am on 1.8.5

I’m not seeing any issue. Maybe because you have the css enabled to fix it? Did you handcode that button in? You’re not using the Amazon plugin from WC at all right?

@serafinnyc
The CSS workaround I mentioned is still there, so that may be why you’re not seeing the problem.

@willbefore2000
Yes, I’m running 1.9.1. I didn’t remove the CSS workaround after upgrading, so I’m not sure if I need it. Right now it’s working, so I’m going to leave it alone.

• This reply was modified 5 years, 6 months ago by jrothra.

Got it. Maybe try using JS instead of CSS? Hard to advise without seeing it live.

Might work unless the user has JS disabled. The CSS is working.

If they have JS disabled then no payment gateway would work. Every single one relies on JS to be enabled.

Good point. ?? Still, the CSS worked perfectly.

Then you answered your own solution ??