条纹支付示例未显示

Posted 2023-04-18

技术标签:

【中文标题】条纹支付示例未显示【英文标题】：Stripe payment example is not displaying 【发布时间】：2017-08-18 21:21:51 【问题描述】：

我正在尝试创建一个使用 Stripe 支付的非常简单的示例。

这是我的代码：

// Create a Stripe client
var stripe = Stripe('pk_test_XSHE4IYLLy9qCPe7lW7pK4ZE');

// Create an instance of Elements
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = 
base: 
  color: '#32325d',
  lineHeight: '24px',
  fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
  fontSmoothing: 'antialiased',
  fontSize: '16px',
  '::placeholder': 
    color: '#aab7c4'
  
,
invalid: 
  color: '#fa755a',
  iconColor: '#fa755a'

;

// Create an instance of the card Element
var card = elements.create('card', style: style);

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) 
var displayError = document.getElementById('card-errors');
if (event.error) 
  displayError.textContent = event.error.message;
 else 
  displayError.textContent = '';

);

// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) 
event.preventDefault();

stripe.createToken(card).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);
  
);
);

.StripeElement 
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;


.StripeElement--focus 
box-shadow: 0 1px 3px 0 #cfd7df;


.StripeElement--invalid 
border-color: #fa755a;


.StripeElement--webkit-autofill 
background-color: #fefde5 !important;

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://js.stripe.com/v3/"></script>
    <title>test</title>
  </head>
  <body>
    <form action="/charge" method="post" id="payment-form">
      <div class="form-row">
        <label for="card-element">
          Credit or debit card
        </label>
        <div id="card-element">
          <!-- a Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors -->
        <div id="card-errors"></div>
      </div>

      <button>Submit Payment</button>
    </form>

  </body>
</html>

我按照Stripe的例子。

这是我从 javascript 控制台得到的错误：

Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().
     at new t (js.stripe.com/:1)
     at t.value (js.stripe.com/:1)

基于错误，我认为 Stripe JavaScript 找不到任何 #card-element，但它就在那里。

这可能是一个愚蠢的问题，但这是我第一次使用 Stripe，所以如果有人可以帮助我，那就太好了。非常感谢。

【问题讨论】：

有什么地方特别卡住了吗？从您的代码来看，您似乎仍然需要定义 stripeTokenHandler(result.token); 引用的 stripeTokenHandler --- 这里有一个示例 stripe.com/docs/elements#submit-token @duck 我只是完全按照他们的例子。我编辑了我的帖子显示你可以看到错误。非常感谢 hmm，如果您收到“无 DOM 元素”错误，是的，看起来您在页面上存在 #card-element 之前正在加载 JS。看看这里的一个例子jsbin.com/dukecivela/edit?html,output @duck 谢谢。现在可以了。你是对的。但我可以在页面末尾包含我的 js 库，但我从未在页面末尾编写过我的 js 脚本。可以吗？当然，@trinhdh，您可以在最后加载您的 JS，或者您可以将您的代码包装在 $(document).ready (JQuery) 或`document.addEventListener("DOMContentLoaded", function(event) ); 这样它不会在内容加载之前执行. developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded 【参考方案1】：

不要在头部添加脚本，而是在关闭正文之前添加它。

<html lang= "en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
    </head>
    <body>
        <form action="/charge" method="post" id="payment-form">
            <div class="form-row">
                <label for="card-element">
                    Credit or debit card
                </label>
                <div id="card-element">
                <!-- a Stripe Element will be inserted here. -->
                </div>
                <!-- Used to display form errors -->
                <div id="card-errors"></div>
            </div>
            <button>Submit Payment</button>
        </form>
        <script src="https://js.stripe.com/v3/"></script>
    </body>
</html>

将脚本放在底部可确保在执行脚本之前渲染 DOM，这样就可以解决问题！

【讨论】：

将它移到正文后，我遇到了 Stripe 没有为我的 JS 代码的其余部分定义【参考方案2】：

把你的脚本放在 html 之后，

 <form></form>
 //after your stripe form put stripe script 
 <script></script>

如下

<style type="text/css">
    * 
  font-family: "Helvetica Neue", Helvetica;
  font-size: 15px;
  font-variant: normal;
  padding: 0;
  margin: 0;


html 
  height: 100%;


body 
  background: #E6EBF1;
  align-items: center;
  min-height: 100%;
  display: flex;
  width: 100%;


form 
  width: 480px;
  margin: 20px auto;


.group 
  background: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
              0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 4px;
  margin-bottom: 20px;


label 
  position: relative;
  color: #8898AA;
  font-weight: 300;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  display: block;


.group label:not(:last-child) 
  border-bottom: 1px solid #F0F5FA;


label > span 
  width: 20%;
  text-align: right;
  float: left;


.field 
  background: transparent;
  font-weight: 300;
  border: 0;
  color: #31325F;
  outline: none;
  padding-right: 10px;
  padding-left: 10px;
  cursor: text;
  width: 70%;
  height: 40px;
  float: right;


.field::-webkit-input-placeholder  color: #CFD7E0; 
.field::-moz-placeholder  color: #CFD7E0; 
.field:-ms-input-placeholder  color: #CFD7E0; 

button 
  float: left;
  display: block;
  background: #666EE8;
  color: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
              0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 4px;
  border: 0;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  height: 40px;
  line-height: 38px;
  outline: none;


button:focus 
  background: #555ABF;


button:active 
  background: #43458B;


.outcome 
  float: left;
  width: 100%;
  padding-top: 8px;
  min-height: 24px;
  text-align: center;


.success, .error 
  display: none;
  font-size: 13px;


.success.visible, .error.visible 
  display: inline;


.error 
  color: #E4584C;


.success 
  color: #666EE8;


.success .token 
  font-weight: 500;
  font-size: 13px;

</style>

<form action="subscription.php" method="post">
  <div class="group">
    <label>
      <span>Name</span>
      <input name="cardholder-name" class="field" placeholder="Jane Doe" />
    </label>
    <label>
      <span>Phone</span>
      <input class="field" placeholder="(123) 456-7890" type="tel" />
    </label>
  </div>
  <div class="group">
    <label>
      <span>Card</span>
      <div id="card-element" class="field"></div>
    </label>
  </div>
  <button type="submit">Pay $25</button>
  <div class="outcome">
    <div class="error" role="alert"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">

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

var card = elements.create('card', 
  style: 
    base: 
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSize: '15px',

      '::placeholder': 
        color: '#CFD7E0',
      ,
    ,
  
);

card.mount('#card-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) 
    // Use the token to create a charge or a customer
    // https://stripe.com/docs/charges
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');
   else if (result.error) 
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  


card.on('change', function(event) 
  setOutcome(event);
);

document.querySelector('form').addEventListener('submit', function(e) 
  e.preventDefault();
  var form = document.querySelector('form');
  var extraDetails = 
    name: form.querySelector('input[name=cardholder-name]').value,
  ;
  stripe.createToken(card, extraDetails).then(setOutcome);
);
</script>

【讨论】：

【参考方案3】：

对于遇到同样问题的其他人 - Stripe 文档中的代码 sn-p 不完整。因此，实际上可能需要上述建议的修复以确保正确的操作顺序，但除非您定义 stripeTokenHandler 方法，否则整个事情将无法正常工作。

Stripe 的文档将方法（页面下方）定义为：

function stripeTokenHandler(token) 
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();

【讨论】：

var form = document.getElementById('payment-form');正在返回“未定义” 您的表单标签是什么样的？在 Stripe 文档（和 OP 的代码）中，它是：是的。 【参考方案4】：

Stripe.js 在 iFrame 中呈现信用卡号、到期日、CVC 的输入。您无法使用 JavaScript 创建或获取它们。但是，您可以根据需要为容器设置样式，这将使您能够与网站的 UI 非常接近 - Bootstrap、MDC-Web 或其他。

如果您的元素未显示，请尝试以下操作开始。

<div class="stripe-custom-element">
    <label for="stripe-card">Card Number</label>
    <div class="" id="stripe-card"></div>
</div>
<div class="stripe-custom-element">
    <label for="stripe-exp">Expiration</label>
    <div class="" id="stripe-exp"></div>
</div>
<div class="stripe-custom-element">
    <label for="stripe-cvc">CVC</label>
    <div class="" id="stripe-cvc"></div>
</div>

var cardNumberElement = doc.getElementById("stripe-card");
var cardExpiryElement = doc.getElementById("stripe-exp");
var cardCvcElement = doc.getElementById("stripe-cvc");

var cardNumber = elements.create('cardNumber', );
var cardExpiry = elements.create('cardExpiry', );
var cardCvc = elements.create('cardCvc', );

cardNumber.mount(cardNumberElement);
cardExpiry.mount(cardExpiryElement);
cardCvc.mount(cardCvcElement);        

registerElements([cardNumber, cardExpiry, cardCvc]);

【讨论】：

【参考方案5】：

我可能迟到了，但这对我有用，请确保在条带脚本下方添加charge.js 脚本，另外，在结束正文标记之前添加它们

<html lang= "en">
    <head>
      
    
      <link rel="stylesheet" href="style.css"/>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
    </head>

    <body>
        <form action="/charge" method="post" id="payment-form">
            <div class="form-row">
                <label for="card-element">
                    Credit or debit card
                </label>
                <div id="card-element">
                <!-- a Stripe Element will be inserted here. -->
                </div>
                <!-- Used to display form errors -->
                <div id="card-errors"></div>
            </div>
            <button>Submit Payment</button>
        </form>
        <script type ="text/javascript" src="https://js.stripe.com/v3/"></script>
        <script src="charge.js"></script>

    </body>
</html>

【讨论】：

以上是关于条纹支付示例未显示的主要内容，如果未能解决你的问题，请参考以下文章

不同人的多次条纹支付尝试。他们应该共享相同的“clientSecret”吗？