Php 带动态金额的条带自定义签出

我需要为注册系统实现一个条带解决方案。在本次注册中，用户一次性付款，并可选择捐款。 我的问题是如何使用checkout.js动态显示总金额（注册+捐赠）

付款在条纹仪表板上工作得很好。捐款+注册费加在一起。我的问题是动态地将金额放在结帐窗口上。在这个窗口上，只显示“支付”，我想知道是否有可能支付$amount

作为参考，我正在使用Wordpress

多谢各位

这是我的page.php：

<form action="myURL/charge.php" method="POST" id="payment-form">

<!-- //Header -->
<!--<div class="form-header"><p>Powered by Stripe</p></div>-->
<span  id="card-errors" class="payment-errors" style="color: red; font-size: 22px; "></span>

<!-- // First and Last Name -->
<div class="form-row left"><label for="firstname" class="next-line">First Name</label><input type="text" name="fname" value="<?php ( isset( $_POST['fname'] ) ? $first_name : null ) ?>"></div>
<div class="form-row right"><label for="lastname" class="next-line">Last Name</label><input type="text" name="lname" value="<?php ( isset( $_POST['lname'] ) ? $last_name : null ) ?>"></div>

<!-- //Email -->
<div><label for="email">Email <strong>*</strong></label><input type="text" name="email" value="<?php ( isset( $_POST['email'] ) ? $email : null ) ?>"></div>
<!-- //Phone-->
<div><label for="phone">Phone</label><input type="tel" name="phone" value="<?php ( isset( $_POST['phone'] ) ? $phone : null ) ?>"></div>
<select name="registration_fee" id="registration_fee" required>
    <option selected="selected" disabled>Choose registration </option>
    <option value="1200">18 - 29 year</option>
    <option value="1600">30 - 39 year</option>
</select>
    <div class="form-row left"><label for="donation" class="next-line">Donation</label><input type="text" name="donation" value="<?php ( isset( $_POST['donation'] ) ? $donation : null ) ?>"></div>


<div id="card-element">
  <!-- a Stripe Element will be inserted here. -->
</div>

<!--Submit-->
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="XXXXXXXxXXXXXXXX"
data-amount="$registration_fee + $donation"
data-name="XXXX XXXXX"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency="eur">

名字这是我的解决方案。使用jQuery/Javascript。我建议在捐赠输入字段中添加id=“捐赠”，并添加占位符=“10.00”作为捐赠输入的示例

jQuery(document).ready(function($) {
    var first_price = 0;
    var second_price = 0;
    var total_price = 0;

  $('#registration_fee').on( "change", function() {
    first_price = $('#registration_fee').val(); 
    first_price = parseInt( first_price );
    //console.log( first_price );
  });

  $('#donation').on( "change", function() {
    second_price = $('#donation').val(); 
    second_price = parseInt( second_price );
    //console.log( second_price );
  });

  $('#payment-form').on( "change", function() {
    total_price = first_price + second_price;
    //console.log( "total: " + total_price );
    $('.stripe-button-el span').html( "Pay with Card $" + total_price );
  });


});

jQuery(document).ready(function($) {
    var first_price = 0;
    var second_price = 0;
    var total_price = 0;

  $('#registration_fee').on( "change", function() {
    first_price = $('#registration_fee').val(); 
    first_price = parseInt( first_price );
    //console.log( first_price );
  });

  $('#donation').on( "change", function() {
    second_price = $('#donation').val(); 
    second_price = parseInt( second_price );
    //console.log( second_price );
  });

  $('#payment-form').on( "change", function() {
    total_price = first_price + second_price;
    //console.log( "total: " + total_price );
    $('.stripe-button-el span').html( "Pay with Card $" + total_price );
  });


});