Интеграция кнопки PayPal

Question

Я пытался найти похожую тему, но я не смог ее найти или плохо ее понял. Я новичок в кодировании, и в настоящее время я сталкиваюсь с проблемой, которую пытаюсь обойти в течение нескольких недель. Краткий обзор проблемы и ниже вы можете найти мой код:

Я хочу интегрировать кнопку PayPal на свой веб-сайт (см. Код ниже), но проблема в том, что я не могу заставить ее автоматически изменять значение суммы. Дело в том, что у меня есть несколько вариантов на странице оплаты, и я хочу, чтобы кнопка меняла свое значение в зависимости от того, что выбрал клиент. Ниже я публикую тестовый код, который включает кнопку PayPal. Официальная страница не будет такой же, но с похожим функционалом.

Надеюсь, ты сможешь мне помочь. Пожалуйста, объясните, как для начинающего.

<div class="buttons" align="center">

<button onclick="showTableOne()" id="monthly"> Monthly Subscription </button>
<button onclick="showTableTwo()" id="sixmonths"> 6-Months Subscription </button>
<button onclick="showTableThree()" id="yearly"> Yearly Subscription </button>

</div>


<div id="livesignals">
  <div id="checker">
    <span>
<input type="checkbox" onclick="displayValue()" id="livesignalsadded">
  <span>Would you like to add Live Signals to your Newsletter subscription <strong> for just 9,99 per month </strong></span>
 </input>
</span>
</div>


</div>

<div id="tableone">
<table id="monthlyoption" style="width:100%;" align="center">
  <tbody>

<tr class="subtotal">
<td id="subtotaltext" style="width: 50%"> Subscription Cost </td>
<td id="subtotalprice">31.99</td>

</tr>

<tr class="taxes">
  <td id="vat" style="width:50%">VAT (20%)</td>
  <td id="vatsum"> 7.99 </td>
</tr>

<tr class="final">
<td id="totaltext" style="width: 50%"> TOTAL </td>
<td id="totalprice">39.99</td>

</tr>
</tbody>
</table>
</div>

<style>

#monthlyoption {
text-align: center;
margin-top: 50px;
display: block;
}

.buttons {

  margin-top: 50px;

}

#tabletwo {

display: none;

}

#tablethree {

  display: none;
}

#livesignals {

margin-top: 50px;
text-align: center;

}
</style>

<script type="text/javascript">


var value1 = 31.99;
var value2 = 7.99;
var value3= 39.99;

function showTableTwo() {
document.getElementById('subtotalprice').innerHTML= value1 + 100;
document.getElementById('vatsum').innerHTML= value2 + 10.01; /* makes it in period have to fix that */
document.getElementById('totalprice').innerHTML= value3 + 110;
document.getElementById('livesignalsadded').checked = false;


}

function showTableThree() {

document.getElementById('subtotalprice').innerHTML = value1 + 300;
document.getElementById('vatsum').innerHTML = value2 + 30.01; /* makes it in period have to fix that */
document.getElementById('totalprice').innerHTML = value3 + 330;
document.getElementById('livesignalsadded').checked = false;


}
function showTableOne() {
document.getElementById('subtotalprice').innerHTML = value1;
document.getElementById('vatsum').innerHTML = value2;
document.getElementById('totalprice').innerHTML = value3;
document.getElementById('livesignalsadded').checked = false;

}


</script>


<div id="paypaloptions">

<div id="monthlynewsletter" style="display:none;">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>

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

<script>


    // Render the PayPal button

    paypal.Button.render({

        // Set your environment

        env: 'sandbox', // sandbox | production

        // Specify the style of the button

        style: {
            label: 'paypal',
            size:  'medium',    // small | medium | large | responsive
            shape: 'rect',     // pill | rect
            color: 'blue',     // gold | blue | silver | black
            tagline: false
        },

        // PayPal Client IDs - replace with your own
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create

        client: {
            sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
            production: '<insert production client id>'
        },

        payment: function(data, actions) {
            return actions.payment.create({
                payment: {
                    transactions: [
                        {
                            amount: { total: '0.01', currency: 'USD' }

                        }
                    ]
                }
            });
        },

        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                window.alert('Payment Complete!');
            });
        }

    }, '#paypal-button-container');

    </script>
    </div>

    </div>

Эта сумма должна автоматически изменяться нажатием различных кнопок: amount: { total: '0.01', currency: 'USD' }