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&w=117&h=48&style=white&variant=text&loc=en_US"
type="image"/>
</form>
</span>
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.