如何使用Elements在Stripe结账时添加持卡人姓名？

Question

我需要在我的自定义表单中添加一个额外的字段，我想要添加信用卡的名称。

我尝试了以下方式：

var cardNameElement = elements.create('cardName', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNameElement.mount('#card-name-element');

<div id="card-name-element" class="field"></div>

但是这样不行，在其文档中只允许验证四个元素或数据：cardNumber、cardExpiry、cardCvc、postalCode。 如何添加信用卡名称并使用stripe.js进行验证？ 我的代码:

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

var style = {
  base: {
    iconColor: '#666EE8',
    color: '#31325F',
    lineHeight: '40px',
    fontWeight: 300,
    fontFamily: 'Helvetica Neue',
    fontSize: '15px',

    '::placeholder': {
      color: '#CFD7E0',
    },
  },
};

var cardNumberElement = elements.create('cardNumber', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = elements.create('cardExpiry', {
  style: style
});
cardExpiryElement.mount('#card-expiry-element');

var cardCvcElement = elements.create('cardCvc', {
  style: style
});
cardCvcElement.mount('#card-cvc-element');

/*var postalCodeElement = elements.create('postalCode', {
  style: style
});
postalCodeElement.mount('#postal-code-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');
  }
}
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(cardNumberElement).then(setOutcome);
});

<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>

  <form action="" method="POST">
   <input type="hidden" name="token" />
   <div class="group">
    <div class="card-container1">
     <label>
      <span class="title-card">Card number</span>
         <div id="card-number-element" class="field"></div>
         <span class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></span>
        </label>
       </div>
    <div class="card-details">
     <div class="expiration">
      <label>
       <span class="title-card">Expiry date</span>
       <div id="card-expiry-element" class="field"></div>
      </label>
     </div>
     <div class="cvv">
      <label>
       <span class="title-card">CVC</span>
       <div id="card-cvc-element" class="field"></div>
      </label>
     </div>
    </div>
   </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>

我想做什么：

- user8880927

Answer 1

目前，Elements不支持收集持卡人姓名。它专注于收集以下信息：

• 卡号
• 过期日期
• CVC
• 邮政编码（某些国家）

如果您想要收集持卡人姓名，则必须自己构建该字段，并在令牌创建期间将其提交给API：

var card_name = document.getElementById('card_name').value;
stripe.createToken(card, {name: card_name}).then(setOutcome);

您可以在此处查看jsfiddle上的实时示例: https://jsfiddle.net/7w2vnyb5/

- koopajah

---

当填写所有数据（除了名称）时，表单被发送而不显示字段名称的错误，我该如何使用条纹或jQuery简单的JavaScript代码进行验证？ - user8880927

@StaOne 只需在您的代码中添加一些逻辑，以查看该字段是否为空，并仅在其不为空时创建一个令牌。 - koopajah

如果我早些发现这篇文章，就可以省下几个小时去查看贫乏（尽管广泛）的Stripe文档了。似乎Elements在功能上有所欠缺，并且他们没有暗示额外的UI组件根本不存在。感谢您提供这些信息，koopajah。 - Neil Watson

@Adam：是的，交易时不需要持卡人。 - koopajah

弹奏需要手动输入姓名，而理想情况下，一键点击可以自动填充姓名和信用卡信息；https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill - patrick

Answer 2

如果您正在使用“PaymentIntents”，并且您在欧盟 / SCA合规方面，那么这个格式又有了微小的更改...

stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

stripe.confirmCardPayment 文档：

https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment

billing_details 对象文档：

https://stripe.com/docs/api/payment_methods/create#create_payment_method-billing_details

- Jim Morrison

Answer 3

由于我像个傻瓜一样挣扎了一段时间。自2019年2月起，您可以添加tokenData对象，其中包含有关卡片详细信息的信息。例如：

let custData = {
                          name: 'Firstname Lastname',
                          address_line1: '21 Great Street',
                          address_line2: 'Shilloong',
                          address_city: 'Chicago',
                          address_state: 'Illinois',
                          address_zip: '12345',
                          address_country: 'US'
              };

              stripe.createToken(card, custData).then(function(result) {
                if (result.error) {
                  // Inform the user if there was an error.
                  var errorElement = document.getElementById('card-errors');
                  errorElement.textContent = result.error.message;
                } else {
                  // Send the token to your server.
                  stripeTokenHandler(result.token);
                }
              });
            });

- Tragaknight

---

现在我想知道如何发送电子邮件？你知道吗？ - outline4

Answer 4

我使用元数据来创建自定义字段，例如持卡人姓名：

... create({
              amount: myAmount,
              currency: 'USD,
              description: "Put your full discription here",
              source: tokenid,
              metedata: {any: "set of", key: "values", that: "you want", cardholder: "name"}
           },
             idempotency_key "my_idempotency_key"
           )}

资源：https://stripe.com/docs/payments/charges-api#storing-information-in-metadata

- whatbox