JS help - Paypal button

Good Afternoon
I am adding paypal buttons to the page (i got the SDK API working but like the PayPal smart buttons)

I can get it all to work except dynamically updating the Value attached to the button… so the parts i have are…

Simple form to capture information

<?php $form = ActiveForm::begin(['id' => 'Pay-form']); ?>

    <?= $form->field($model, 'description')?>
    <?= $form->field($model, 'total')->textinput()?>
 
<?php ActiveForm::end(); ?>

<div id="paypal-button-container"></div>

JS to capture field value

 <?php
$this->registerJs('
    jQuery(document).on("change" ,"#'. Html::getInputId($model ,'total') .'" ,function(){
        var first = $("#'. Html::getInputId($model ,'total') .'").val();
       alert(first)
    });
');
?>

Show PayPal buttons:

 <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=GBP"></script>
  <?php 
$this->registerJs('
    
  paypal.Buttons({
    createOrder: function(data, action) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: 0.01
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function(details) {
        // This function shows a transaction success message to your buyer.
        window.location.href= "../";
        // alert("Transaction completed by" + details.payer.name.given_name);
      });
    }
  }).render("#paypal-button-container");
  //This function displays Smart Payment Buttons on your web page.
');?>

so what im looking to do is change the Value field in paypal button to the value form the text field

I could make them a single JS but i want the buttons to be visible from the start then just update the value once its entered

thank you in advanced