Question

I am trying to add a Checkout BuyNow button on my webpage.
The button appears as expected but nothing happens when I press it. Here is the code:

<span> 
<form 
action=https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/XXXXXXXXXXX id="BB_BuyButtonForm" method="post"  name="BB_BuyButtonForm" target="_top"> 
<input name="item_name_1" type="hidden" value=""/> 
<input name="item_description_1" type="hidden" value=""/> 
<input name="item_quantity_1" type="hidden" value="1"/> 
<input name="item_price_1" type="hidden" value="24.9"/> 
<input name="item_currency_1" type="hidden" value="USD"/> 
<input name="item_weight_1" type="hidden" value="3.0"/> 
<input name="item_weight_unit_1" type="hidden" value="LB"/> 
<input name="_charset_" type="hidden" value="utf-8"/> 
<input alt="" 
src="https://checkout.google.com/buttons/buy.gif?merchant_id=XXXXXXXXXXX&amp;w=117&amp;h=48&amp;style=white&amp;variant=text&amp;loc=en_US" 
type="image"/> 
</form> 
</span> 

Answer 1

Try hosting the button <form> inside a <div> element rahter than a <span> element.

Form is a block level element. A span is an inline element. You can’t have block elements inside inline ones. Depending on the browser, you may get different behavior when clicking on the button.