如何使用 Elements 将持卡人的姓名添加到 Stripe 结账? [英] How to add card holder's name to Stripe checkout using Elements?

问题描述

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

我尝试了以下方法:

var cardNameElement = elements.create('cardName', {风格:风格//, placeholder: '自定义卡号占位符',});cardNameElement.mount('#card-name-element');<div id="card-name-element" class="field"></div>

<块引用>

但这不起作用，在其

解决方案

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

• 卡号
• 有效期
• CVC
• 邮政编码(在某些国家/地区)

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

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

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

I need to add an additional field to my custom form, I want to add the name of the credit card.

I tried in the following way:

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.

How can I add the name of the credit card and validate it using 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>

What I want to do:

解决方案

Elements does not support collecting the cardholder's name at the moment. It focuses on collecting:

• Card number
• Expiration date
• CVC
• ZIP code (in some countries)

If you want to collect the cardholder's name you have to build your own field for the name and submit it to the API during token creation:

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

You can see a live example on jsfiddle here: https://jsfiddle.net/7w2vnyb5/

这篇关于如何使用 Elements 将持卡人的姓名添加到 Stripe 结账?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！