How can I use JS to assign a value on an input based on a key?

Question

Okay, take two. Before you continue reading please note that I know basically ZERO JS so if I display some extreme stupidity, I'm trying my best.

I am attempting to implement PayPal into a website I'm creating and I found a button on the PayPal website that was basically exactly what I'm looking for.

I already have a working cart price calculation system that I've had in place for a while now and calculates Sales Tax/Shipping/The total price of the items in the cart TotalPrice and puts it into one h1 tag using document.getElementByID('ID').innerHTML = `$${localStorage.getItem('TotalPrice')}` This works perfectly well, and has for a few months.

The button code exactly from the PayPal website is as follows:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<!-- Identify your business so that you can collect the payments. --> <input type="hidden" name="business" value="herschelgomez@xyzzyu.com">
 <!-- Specify a Buy Now button. --> 
<input type="hidden" name="cmd" value="_xclick"> 
<!-- Specify details about the item that buyers will purchase. --> 
<input type="hidden" name="item_name" value="Hot Sauce-12oz. Bottle"> 
<input type="hidden" name="amount" value="5.95"> 
<input type="hidden" name="currency_code" value="USD"> 
<!-- Display the payment button. --> 
<input type="image" name="submit" border="0" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" alt="Buy Now"> 
<img alt="" border="0" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" > </form>

and the value that actually sets the price PayPal charges once the form is submitted is in the hidden input with the name "amount". I figured that it would be relatively easy to set the value of that input by adding an ID and using similar logic to the working cart system. Here is what I have now:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
                <!-- Identify your business so that you can collect the payments. --> 
                <input type="hidden" name="business" value="website@gmail.com"> 
                <!-- Specify a Buy Now button. --> 
                <input type="hidden" name="cmd" value="_xclick"> 
                <!-- Specify details about the item that buyers will purchase. --> 
                <input type="hidden" name="item_name" value="Checkout"> 
                <input type="hidden" name="amount" id="pricebutton" > 
                <input type="hidden" name="currency_code" value="USD"> 
                <!-- Display the payment button. --> 
                <input type="submit" name="submit" border="0" id="checkoutbtn" alt="Buy Now" value="Checkout Using Paypal" onclick="payPal()">
            </form>

I also added some JS

<script>
function payPal() {
    document.getElementById('pricebutton').value = localStorage.getItem('TotalPrice');
}
</script> 

What I tried to do was, when the button is clicked and the form is submitted, change the value of the form so that it matches the total value of the items in the cart, TotalPrice . What have I done wrong?

If you need more information, I will do my best to provide it through edits & comments. Thanks.

Answer 1

You're better off using a JS smart button ( code demo ).

Then in createOrder you can just replace the price with localStorage.getItem('TotalPrice')