stripe-payments - 如何使用 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>

But this does not work, in its documentation only allows to perform these procedures validating only four elements or data: 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>

我想做什么:

Answer 1

Elements 目前不支持收集持卡人姓名。它专注于收集:

卡号

有效期

CVC

邮政编码(在某些国家/地区)

如果您想收集持卡人的姓名，您必须为该姓名构建自己的字段，并在 token 创建期间将其提交给 API:

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

你可以在 jsfiddle 上看到一个活生生的例子: https://jsfiddle.net/7w2vnyb5/