Not able to specify "amount" per payment request on PayPal HTMLButton - paypal

Question

I am trying to integrate with PayPal using the "HTML Buttons" approach.
The checkout flow is rather simple,
user clicks "Buy Now" -> transferred to PayPal -> payment processed -> returned to the site.
Based on the item that the customer wants to "Buy Now", the "amount" in the submitted form will vary, and I am unable to get PayPal to accept the value I am sending. I always see a text input which is empty when redirected to PayPal.
I tried hosted and unhosted buttons but still not able to see the desired effect.
hosted button HTML example:
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="HOSTEDBTNVALUE">
<input type="image" src="https://www.sandbox.paypal.com/en_GB/SG/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal – The safer, easier way to pay online!" style="border: 0;">
<img alt="" src="https://www.sandbox.paypal.com/en_GB/i/scr/pixel.gif" style="border: 0; width: 1; height: 1;">
<input type="text" readonly="true" name="item_name" value="Test PayPal integration payment">
<div class="form-group" id="amount_field">
<label class="control-label col-md-2" for="amount">Amount</label>
<div class="col-md-5">
<input type="text" id="amount" name="amount" value="100" aria-describedby="amount_info_0" class="form-control"><span id="amount_info_0" class="help-block">Real</span></div>
</div>
<div class="form-group" id="txnRef_field">
<label class="control-label col-md-2" for="txnRef">Transaction Ref</label>
<div class="col-md-5">
<input type="text" id="txnRef" name="txnRef" value="8d724ad470af4d9d91d49f84068c4bab" aria-describedby="txnRef_info_0" class="form-control"><span id="txnRef_info_0" class="help-block">Required</span></div>
</div>
<input type="hidden" name="currency_code" value="SGD">
</form>
The "amount" above is a text input at the moment because this is my integration testing page, in the actual application it will be a hidden/readonly input embedded in the form.
Here is the unhosted button example code:
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----ReallyLongKey-----END PKCS7-----">
<input type="image" src="https://www.sandbox.paypal.com/en_GB/SG/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal – The safer, easier way to pay online!" style="border: 0;"><img alt="" src="https://www.sandbox.paypal.com/en_GB/i/scr/pixel.gif" style="border: 0; width: 1; height: 1;">
<input type="hidden" name="notify_url" value="https://myapplication.com/transaction/paypal/status">
<input type="hidden" name="currency_code" value="SGD">
<input type="hidden" name="custom" value="ad4a63e2f2f04b908ddb8e7c67f9c67a">
<input type="text" readonly="true" name="item_name" value="Test PayPal integration payment">
<div class="form-group" id="amount_field">
<label class="control-label col-md-2" for="amount">Amount</label>
<div class="col-md-5">
<input type="text" id="amount" name="amount" value="100" aria-describedby="amount_info_0" class="form-control"><span id="amount_info_0" class="help-block">Real</span></div>
</div>
<div class="form-group" id="txnRef_field">
<label class="control-label col-md-2" for="txnRef">Transaction Ref</label>
<div class="col-md-5">
<input type="text" id="txnRef" name="txnRef" value="ad4a63e2f2f04b908ddb8e7c67f9c67a" aria-describedby="txnRef_info_0" class="form-control"><span id="txnRef_info_0" class="help-block">Required</span></div>
</div>
</form>
I have screenshots below for the application page and what I see as a result on the PayPal payment page. Please excuse the lack of alignment and styling. This is meant to be a proof of concept before it is pretty.
my application test page for integration
paypal page where amount is expected to be fixed based on my request and not editable.
Not sure what I'm doing wrong here. Please help.
thanks.

Answer 1

I was able to get it going by making PayPal generate the button with the following settings:
1. Merchant account IDs: Use my primary email address [did not use secure merchant account ID]
2. unchecking the save button at PayPal checkbox. Also, in the html button generation interface, I clicked the link remove code protection which made the cmd value from _s-xclick to _xclick