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

Posted 2023-04-18

【中文标题】如何使用 Elements 将持卡人姓名添加到 Stripe 结账？

【英文标题】：How to add card holder's name to Stripe checkout using Elements?

【发布时间】：2018-04-17 02:56:02

【问题描述】：

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

我尝试了以下方式：

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>

但这不起作用，在其documentation 中只允许执行这些程序，仅验证四个元素或数据：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>

我想做的事：

【参考方案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/

【讨论】：

填写除名称外的所有数据时，发送表单时未显示字段名称错误，如何使用条带或 jQuery simple 的 javascript 代码进行验证跨度>

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

如果我早点找到这篇文章，它会节省我数小时浏览糟糕（尽管很广泛）的条带文档的时间。似乎元素缺乏它可以做的事情，并且它们并没有暗示额外的 UI 组件根本不存在的事实。感谢您提供此信息 koopajah。

我还没有在生产中使用它，它可以在测试环境中使用。如果 Stripe 不知道持卡人姓名，是否可以通过扣款？

@Adam：是的，持卡人不需要进行交易。

【参考方案2】：

当我在这件事上像个白痴一样挣扎了一段时间。截至 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);
                
              );
            );

【讨论】：

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

【参考方案3】：

如果您使用的是“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

【参考方案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