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 ($20.00)"
    data-image="/128x128.png"
    data-zipCode=""
    data-email=""
    data-locale="auto">
  </script>
</form>

我想更新数据电子邮件和data-zipcode以在同一页面上镜像文本输入。我一直在玩这些东西，但无法让它发挥作用。

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

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

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

更新 - 解决方法
我使用ajax使用此页面上输入的数据动态创建Stripe Checkout按钮。我将条带付款按钮从表单中删除，并在输入邮政编码和电子邮件数据时检索它。我将在最终代码中结合使用这种方法和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

您要更新＆＃34; .stripe-button＆＃34;使用data-email和data-zipCode，请尝试以下：

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点击结帐按钮时指定值。

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

2 个答案: