首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >购物车输入未在条形图窗体中正确显示

购物车输入未在条形图窗体中正确显示
EN

Stack Overflow用户
提问于 2019-03-23 01:25:40
回答 1查看 2.6K关注 0票数 3

我一直在复制和粘贴这个页面的第一个代码:https://stripe.com/docs/stripe-js/elements/quickstart (超文本标记语言、css和javascript),我不知道为什么,但我的卡片输入没有正确显示:https://ibb.co/cLPzrzD

错误的英文翻译:“自动输入信用卡号码被禁用。因为此表格使用的连接不安全”。

如果有人知道为什么会出现这个问题,它会对我有很大帮助。提前谢谢你!

下面是我的html代码:

代码语言:javascript
复制
 <div class="container">
    <h2 class="my-4 text-center">Réservation Standard</h2>
    <form action="standardSuccessfulPaiement.php" method="POST" id="payment-form">
      <div class="form-row">
        <input type="text" name="firstName" class="form-control mb-3 StripeElement StripeElement--empty" placeholder="Votre nom">
        <input type="text" name="lastName" class="form-control mb-3 StripeElement StripeElement--empty" placeholder="Votre prénom">
        <input type="email" name="email" class="form-control mb-3 StripeElement StripeElement--empty" placeholder="Votre email">
        <div id="card-element">
          <!-- A Stripe Element will be inserted here. -->
        </div>

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

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

下面是我的javascript代码:

代码语言:javascript
复制
// Create a Stripe client.
var stripe = Stripe('XXXXX');

// 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',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
  color: '#aab7c4'
 }
 },
  invalid: {
  color: '#fa755a',
  iconColor: '#fa755a'
}

};

代码语言:javascript
复制
 document.querySelector('#payment-form button').classList = 'btn btn-primary btn-block mt-4';

// 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);
 }
 });
 });

// Submit the form with the token ID.
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();
}
EN

回答 1

Stack Overflow用户

发布于 2019-03-25 09:00:16

删除注释部分..如果使用的是bootstrap,则添加

代码语言:javascript
复制
<div id="card-element" class="form-control">

--

将表单控件添加到所有可视输入

票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55304881

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档