为什么我的条纹元素表格在轨道上不起作用？答案

【问题标题】：Why does my stripe elements form not work on rails?为什么我的条纹元素表格在轨道上不起作用？
【发布时间】：2019-07-03 19:49:14
【问题描述】：

我正在尝试让 Stripe.js 在我的 rails 应用程序上运行。我正在使用条纹元素。我已按照条纹文档上的说明进行操作。表单卡输入未显示在应有的位置。它只显示提交按钮。

我正在尝试将 Stripe 表单放置在我现有的 rails 表单中。

<!DOCTYPE html>
<html>
<head>
<title>Bennett</title>
 <%= csrf_meta_tags %>
 <%= csp_meta_tag %>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://js.stripe.com/v3/"></script>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render '/home/nav' %>
<%= yield %>
</br>
<%= render '/home/footer' %>
</body>
</html>

访问/_FORM

<%= simple_form_for([@service, @visit]) do |f| %>

  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
  <%= f.input :visit_date, as: :date , :label => "Service date:"%>
  <%= f.input :visit_time, as: :time , :label => "Service time:" %>
  <%= f.input :note, :label => "Anything we should know?" %>

<%= render 'charges/payment-form' %>

<%= f.button :submit, class:'btn btn-bennett' %>

<% end %>

_PAYMENT-FORM

<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" role="alert"></div>
  </div>

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

CHARGE.JS

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

// Create an instance of Elements.
var elements = stripe.elements({
    fonts: [
      {
        cssSrc: 'https://fonts.googleapis.com/css?family=Roboto',
      },
    ],
    // Stripe's examples are localized to specific languages, but if
    // you wish to have Elements automatically detect your user's locale,
    // use `locale: 'auto'` instead.
    locale: window.__exampleLocale
  });


// 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: '18px',
    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);
    }
  });
});

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

我不知道为什么表格没有显示出来。

基本上，我的目标是拥有它，因此当我通过访问表单创建新的“访问”时，我还通过条带处理付款，所有这些都通过一个按钮提交。也许有人也可以帮助我？

【问题讨论】：

您的浏览器控制台在说什么？
(index):1 您可以通过 HTTP 测试您的 Stripe.js 集成。但是，实时 Stripe.js 集成必须使用 HTTPS。
(index):1 未捕获的错误：您指定的选择器 (#card-element) 适用于页面上当前没有的 DOM 元素。在调用 mount() 之前确保该元素存在于页面上。 at new t ((index):1) at t. ((index):1) at t.mount ((index):1) at charge.self-ba531b976abd4ce46390b4fb164b6eef76d156a648f0afc3058bf94ca7c40781.js?body=1:41跨度>
从 application.html.erb 中移除并添加到表单之后。should.work

标签： ruby-on-rails ruby-on-rails-5 stripe-payments

【解决方案1】：

我遇到了同样的问题，通过将其添加到我的 css 中解决了它：

.StripeElement{
    min-width: 300px;
}

【讨论】：

【解决方案2】：

您似乎没有等待页面加载来执行您的脚本，因此出现了找不到#card-element的错误。

您应该包装您的代码以等待页面加载：

document.addEventListener('turbolinks:load',function () {
 ....Your code
}

【讨论】：