使用另一个脚本的结果更新脚本中的数据属性

Question

我正在创建一个使用 Stripe Checkout 的订单。 Stripe 具有在页面中嵌入脚本的形式。它看起来像这样：

.... 
<input type="text" id="emailInput"> .....
<input type="text" id="postCodeInput"> .....

<form action="myNextPage.php" method="POST" id="stripePay">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_EXAMPLEKEYCODE1234"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets (.00)"
    data-image="/128x128.png"
    data-zipCode=""
    data-email=""
    data-locale="auto">
  </script>
</form>

我想更新数据电子邮件和数据邮政编码以反映同一页面上的文本输入。我一直在玩这些东西，但无法让它发挥作用。

var val1=$('#emailInput').val;
$('#stripePay').data('email', val1);

var val2=$('#postCodeInput').val;
$('#stripePay').data('zipCode', val2);

此表单不会放置在公开访问的页面上。

更新 - 解决方法
我使用 ajax 做了一个解决方法，使用在此页面上输入的数据动态创建 Stripe Checkout 按钮。我将条带支付按钮从表单中移除，并在输入 post 代码和电子邮件数据时检索它。我将在我的最终代码中结合使用这种方法和 Matthew 的自定义表单。对于这个例子，我没有包括任何验证来确保输入数据是完整的并且符合预期。

 .... 
<input type="text" id="emailInput"> .....
<input type="text" id="postCodeInput">


<div id="stripePayBtn">
    <!--ajax will place the stripe pay button here-->
</div>
<div>
    <button  id="nextBtn">
        Create Payment Button
    </button>
</div>
    ------

 // Script on this page:

 $("#nextBtn").click(function(){
     var zip = $("#postCodeInput").val();
     var email = $("#emailInput").val();
     var amount = $("#amount").val();
    $.ajax({
            url: 'stripePopulate.php',
            type: 'POST',
            data:{
                zip : zip,
                email : email,
                amount : amount,
            },
            dataType: 'html',
            success:function(data){
                $("#nextBtn").hide();
                $('#stripePayBtn').html(data);
            }
    });
});

然后，在 stripePopulate.php 页面上

<?php

$zip=$_POST[zip];
$email=$_POST[email];
$amount=$_POST[amount];


echo'<form action="myNextPage.php" method="POST" id="stripePay">
  <script
       src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="pk_test_EXAMPLEKEYCODE1234"
        data-amount="2000"
        data-name="Demo Site"
        data-description="2 widgets"
        data-image="/128x128.png"
       data-zipCode="'.$zip.'"
       data-amount="'.$amount.'"
       data-email="'.$email.'"
       data-locale="auto">
  </script>

</form>';

?>

Answer 1

您想使用数据电子邮件和数据邮编更新“.stripe-button”，请尝试以下操作：

var val1=$('#emailInput').val;
$('#stripePay .stripe-button').data('email', val1);

var val2=$('#postCodeInput').val;
$('#stripePay .stripe-button').data('zipCode', val2);

查看是否已添加运行:

console.log($('#stripePay .stripe-button').data('email'))
console.log($('#stripePay .stripe-button').data('zipCode'))

Answer 2

由于 Stripe 在首次解析 html 页面时自行配置，因此更新值不会反映在 Stripe 的配置中。如果你想做类似的事情，你需要使用 Stripe Checkout 的自定义集成，它允许你在用户通过 javascript.

单击结帐按钮时指定值

使用另一个脚本的结果更新脚本中的数据属性

Updating Data-Attributes in Script using results from another script

jquery

custom-data-attribute

stripe-payments