How to pass PHP variable in PayPal JavaScript as payment amount

Question

So I have this application which I am trying to implement [PayPal Express][1]

[1]: https://developer.paypal.com/demo/checkout/#/pattern/client but my problem is I cannot be able to pick the price variable from php to javascript 'value'

I have tried value: '<?php echo $order_amount;?>' to no avail.

This is the PayPal JS:

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '88.44'
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                // Successful capture! For demo purposes:
                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                var transaction = orderData.purchase_units[0].payments.captures[0];
                alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

                // Replace the above to show a success message within this page, e.g.
                // const element = document.getElementById('paypal-button-container');
                // element.innerHTML = '';
                // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                // Or go to another URL:  actions.redirect('thank_you.html');
            });
        }


    }).render('#paypal-button-container');
</script>

How do I call this $order_amount as the value in the js so that I can process the payment?

Answer 1

I was able to solve my problem, thanks to @David's guidance.

I was failing to define the value id on PayPal's js.

Right at the top I created a hidden input field with an id like so:

<input type="hidden" id="t_amount" value="<?php echo $orders['order_amount']; ?>">

This is what I added:

 var amountt= document.getElementById("t_amount").value; 
        console.log(amountt);

I then put amountt as the value and it worked like charm.

Here is my whole code:

<script>
        var amountt= document.getElementById("t_amount").value; 
        console.log(amountt);
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    
                    amount: {
                        value: amountt
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                // Successful capture! For demo purposes:
                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                var transaction = orderData.purchase_units[0].payments.captures[0];
                alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

                // Replace the above to show a success message within this page, e.g.
                // const element = document.getElementById('paypal-button-container');
                // element.innerHTML = '';
                // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                // Or go to another URL:  actions.redirect('thank_you.html');
            });
        }


    }).render('#paypal-button-container');
</script>