[minor improvement] hidden inputs in the pay button html form take space in the page

I noticed that the input of type hidden in the pay button form, while invisible, still take some space in a page.

I tested it with Firefox 62.0 and Opera 56.0.3051.36.

This can be annoying when you add more optional inputs and/or try to fit the pay button in a contrived space, for example a page footer in my case, as it add seemingly “blank” space on top of the button.

Only solution I came up with was to add a <div style="display: none;"> around the hidden lines (excluding the image obviously). For example :

<form action="https://btcpay.sosthene.net/api/v1/invoices" method="POST">
<input style="width: 209px;" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor" name="submit" src="https://btcpay.sosthene.net/img/paybutton/pay.png" type="image" />
<div style="display: none;">
<input name="storeId" type="hidden" value="2kUDmoLQMrwvxansY2YkhSaKoo2Y91skauJjtfVqzDYH" />
<input name="price" type="hidden" value="10" />
<input name="currency" type="hidden" value="USD" />
<input name="email" type="hidden" value="USD" />
<input name="currency" type="hidden" value="USD" />
</div>
</form>

I don’t know if there is downside to this solution, or a more obvious, simpler way to achieve this result. If not, I’d like to propose a pull request to add this by default when the button’s code is generated.

[Kukks]

I see that there are <br/> tags generated on your form after each input. You might have a script in your wordpress generating the extra html on input fields in forms…

[rockstardev]

❤️