条纹令牌未从Rails vue.js表单返回

Question

我有一个使用vue.js的Rails 5应用程序。我有一个输入表单，除了在其中添加了条纹元素之外，还收集了基本信息。 stripeV3元素加载没有问题，客户端控制台不会显示任何javascript错误。当我填写表单并提交表单时，会省略应该从stripe返回的期望stripeToken参数。我不知道为什么。

checkout.html.erb

<section class="hero">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-8 mx-auto">
        <div class="card border-none">
          <div class="card-body">
            <p class="mt-4 lead text-center">
              Shipping Address
            </p>
            <div class="mt-4 clearfix">
              <%= form_for :customer_order, html: {id: 'payment-form'}, url: { action: "process_order" }  do |f| %>
                <div class="form-group">
                  <%= f.text_field :full_name, :class=>"form-control", :placeholder=>"Full Name" %>
                </div>
                <%if !current_user%>
                <div class="form-group">
                  <%= f.text_field :guest_email, :class=>"form-control", :placeholder=>'Email' %>
                </div>
                <%end%>
                <div class="form-group">
                  <%= f.text_field :street_address1, :class=>"form-control", :placeholder=>"Street and number, P.O. box" %>
                </div>
                <div class="form-group">
                  <%= f.text_field :street_address2, :class=>"form-control", :placeholder=>"Apartment, suite, unit, building, floor, etc" %>
                </div>
                <div class="form-group">
                  <%= f.text_field :city, :class=>"form-control", :placeholder=>"City" %>
                </div>
                <div class="form-group">
                  <%= f.select(:state, options_for_select(['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'])) %>
                </div>
                <div class="form-group">
                  <%= f.text_field :zip_code, :class=>"form-control", :placeholder=>"Zip code" %>
                </div>
                <div class="form-group">
    <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>
  <br><br>
                <%= f.submit 'Continue Checkout', :class=>"btn btn-primary float-right" %>
              <% end %>
            </div>
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</section>

<% content_for :javascript_section do %>
 <script type="text/javascript">
  var stripe = Stripe('pk_test_a_valid_test_token');

  // 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: '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);
      }
    });
  });
  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();
  }
  </script>
<% end %>

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require bootstrap
//= require turbolinks
//= require rails-ujs
//= require popper
//= require_tree .
//= require_self
//= require vue.min.js
//= require vue-carousel.js
//= require_directory ./components

Vue.use(VueCarousel);
const Carousel = VueCarousel.Carousel;
const Slide = VueCarousel.Slide;

$(document).on('turbolinks:load', function() {
    new Vue({
        el: '#app',
        components: {
            Carousel,
            Slide,
            Slider,
        }
    });
});