在Stripe / Checkout中预填电子邮件地址

3

我正在一个网站上使用Stripe/Checkout来接受支付。Stripe在这方面相当简单,因为他们提供以下脚本嵌入网页:

<form id="monthly" action="/subscribe" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_xxxxxxxxx"
    data-image="http://mywebsite.com/assets/img/logo_raw.png"
    data-name="My Website"
    data-description="Monthly Subscription"
    data-amount="6900"
    data-email="email@example.com"
    data-allow-remember-me=false
    data-label="Subscribe" >
  </script>
</form> 

我希望能够预填电子邮件地址值(data-email =“email@example.com”),并使用我在custom.js jQuery脚本中拥有的变量。我熟练掌握jQuery,但我能否使用jQuery修改此嵌入式脚本?
2个回答

7
你需要使用自定义集成,并像这样执行:
<script src="https://checkout.stripe.com/checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
  var email = "customer@example.com"; // or use jQuery to dynamically populate the variable

  var handler = StripeCheckout.configure({
    key: 'pk_test_...',
    image: 'https://stripe.com/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.
    }
  });

  $('#customButton').on('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'Stripe.com',
      description: '2 widgets',
      amount: 2000,
      email: email
    });
    e.preventDefault();
  });

  // Close Checkout on page navigation:
  $(window).on('popstate', function() {
    handler.close();
  });
</script>

太好了!谢谢你。我甚至都没看过自定义集成。 - undefined
我现在遇到的问题是使用自定义集成增加了复杂性。设置结账很简单:我只需要在表单的“action”部分提供回调即可。看起来,使用自定义脚本,我需要在服务器端做更多的工作。 - undefined
1
使用简单集成与自定义集成不应该改变服务器端的任何内容。自定义集成只是让您使用JavaScript调用结账,而不是使用HTML标签,并允许您定义自己的回调函数来处理生成的令牌。 - undefined
如何从自定义结账表单中删除电子邮件字段 - undefined
@Coder 你不能这样做。你可以按照上面的解释传递一个值,这将把字段变成一个固定的标签,或者让用户自己填写字段,但是无法完全删除该字段。 - undefined
@Ywain 非常感谢 - undefined

1
data-email="email@example.com"

如问题中所提到的,现在的工作。

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接