简体   繁体   English

使用条纹元素时如何将电子邮件传递给条纹?

[英]How to pass email to stripe when using stripe elements?

By default, when using stripe in popup ( stripe-checkout ) the Email field is sent as card[name] .默认情况下,在弹出窗口 ( stripe-checkout ) 中使用 stripe 时,电子邮件字段作为card[name]发送。

But when I'm using stripe elements (stripe fields as inline fields, without popup) there is no email field and if I add my own email field it seems to be ignored by stripe.但是当我使用条纹元素(条纹字段作为内联字段,没有弹出窗口)时,没有电子邮件字段,如果我添加自己的电子邮件字段,它似乎被条纹忽略。 It results in customer being added on stripe without email which makes it tedious to identify one customer from another.这会导致客户在没有电子邮件的情况下被添加到条带上,这使得从另一个客户中识别一个客户变得乏味。

How can I modify this code to pass email to stripe?如何修改此代码以将电子邮件传递给 Stripe? demo: https://jsfiddle.net/ywain/foc0L56q/演示: https : //jsfiddle.net/ywain/foc0L56q/

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

<body>
  <form action="//httpbin.org/post" method="POST">
    <input type="hidden" name="token" />
    <div class="group">
      <label>
        <span>Card</span>
        <div id="card-element" class="field"></div>
      </label>
    </div>
    <div class="group">
      <label>
        <span>Email</span>
        <input id="email" name="email" class="field" placeholder="jane.doe@example.com" />
      </label>
    </div>
    <button type="submit">Pay $25</button>
    <div class="outcome">
      <div class="error"></div>
      <div class="success">
        Success! Your Stripe token is <span class="token"></span>
      </div>
    </div>
  </form>
</body>
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var card = elements.create('card');
card.mount('#card-element');

function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    var form = document.querySelector('form');
    form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    form.submit();
  } else if (result.error) {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}

card.on('change', function(event) {
  setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(card).then(setOutcome);
});

You would do this in backend code, not in frontend Javascript.您将在后端代码中执行此操作,而不是在前端 Javascript 中执行此操作。 When your backend receives the payment token and email address from the POST data the form sends, you'd use that to set the email property when creating a customer.当您的后端从表单发送的 POST 数据中收到付款令牌和电子邮件地址时,您将在创建客户时使用它来设置email属性。 [0] It would be similar to this(in PHP as an example) [0] 与此类似(以 PHP 为例)

  $token  = $_POST['token'];
  $email  = $_POST['email'];

  $customer = \Stripe\Customer::create([
      'email' => $email,
      'source'  => $token,
  ]);

  $charge = \Stripe\Charge::create([
      'customer' => $customer->id,
      'amount'   => 5000,
      'currency' => 'usd',
  ]);

[0] - https://stripe.com/docs/api/customers/create#create_customer-email [0] - https://stripe.com/docs/api/customers/create#create_customer-email

Add a hidden field in you form for email在您的表单中为电子邮件添加一个隐藏字段

<input name="email" type="hidden" value="<?php echo "your_email";?>"/>

Get it in post function in php code在 php 代码的 post 函数中获取它

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM