如何使用 Elements 将持卡人姓名添加到 Stripe 结帐?

2024-05-18

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

我尝试了以下方式:

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>

但这是行不通的,在其文档 https://stripe.com/docs/stripe-js/reference#element-options只允许执行仅验证四个元素或数据的这些过程:cardNumber、cardExpiry、cardCvc、postalCode。

如何添加信用卡名称并使用它进行验证stripe.js

My code:

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>

我想做的事:


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

  • 卡号
  • 截止日期
  • CVC
  • 邮政编码(在某些国家/地区)

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Elements 将持卡人姓名添加到 Stripe 结帐? 的相关文章

随机推荐