从表单中预先填充Stripe Checkout中的电子邮件

时间:2016-04-30 10:40:21

标签: javascript html stripe-payments

我有一个表单,其中一个表单字段如下:

<input type="email" id="email" name="email" required>

我在表单底部有一个提交按钮,可以调用javascript并加载Stripe Checkout。

<input type="button" id="charge-button" class="button radius member_button" value="Continue">

Javascript调用Stripe。

<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
  var handler = StripeCheckout.configure({
    key: '<?php echo $stripe['publishable_key']; ?>',
    image: '/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(token) {
      // You can access the token ID with `token.id`.
      // Get the token ID to your server-side code for use.
    $.post("", {token: token, type: 'charge'}, function(res){
        if(res.status){
            $('form').submit();
        }
    },"json");
      console.log(token);
    }
  });

$('#charge-button').on('click', function(e) {
    handler.open({
      image: '/logo.png',
      name: 'Shop.com',
      description: 'Product',
      email: 'example@email.com',
      currency: 'gbp',
      amount: 2000
    });
    e.preventDefault();
  });
 $(window).on('popstate', function() {
    handler.close();
  }); 

</script>

我希望能够从表单字段中获取值并将其传递到我目前拥有的example@email.com。

我是新手编码,所以感谢您的耐心等待。

非常感谢,

约翰

2 个答案:

答案 0 :(得分:6)

您可以通过在用户提交表单时存储电子邮件地址来执行此操作。所以你的代码看起来像这样 -

 <input type="email" id="email" name="email" required>

    $('#charge-button').on('click', function(e) {

       var userEmail = $('#email').val();

        handler.open({
          image: '/logo.png',
          name: 'Shop.com',
          description: 'Product',
          email: userEmail,
          currency: 'gbp',
          amount: 2000
        });
        e.preventDefault();
      });
     $(window).on('popstate', function() {
        handler.close();
      });

答案 1 :(得分:1)

我是这样做的

<form action="YOUR_URL" method="POST">
    <script
        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="pk_test_123eqweqweqweqwe12g"
        data-amount="AMOUNT_YOU_EXPECTED_TO_CHARGE"
        data-email="ECHO_EMAIL_ADDESS_HERE"
        data-name="Hey Title"
        data-description="DESCRIPTION_FOR_FORM"
        data-image="/profilePics/default.jpg"
        data-locale="auto">
    </script>
</form>