条纹元素形式在 Rails 应用程序中不可见答案

【问题标题】：Stripe element form is not visible in a rails app条纹元素形式在 Rails 应用程序中不可见
【发布时间】：2019-09-03 13:11:41
【问题描述】：

我正在使用 Stripe 元素，但我的 rails 应用程序中没有显示表单。我尝试了很多建议，但仍然没有改善。我是使用 ruby 2.3 和 Rails 5.2.3 但不是引导程序。

charges.js

    document.addEventListener("turbolinks:load", function() {
      const public_key = document.querySelector("meta[name='stripe-public- 
       key']").content;
       const stripe = Stripe(public_key);
       const elements = stripe.elements();

      const style = {
        base: {
        color: '#32325d',

        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };
   const card = elements.create('card', {style: style});

      card.mount('#card-element');

      card.addEventListener('change', ({error}) => {
        const displayError = document.getElementById('card-errors');
        if (error) {
          displayError.textContent = error.message;
        } else {
          displayError.textContent = '';
        }
      });


      const form = document.getElementById('new_job');
        form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const {token, error} = await stripe.createToken(card);

        if (error) {
          // Inform the customer that there was an error.
          const errorElement = document.getElementById('card-errors');
          errorElement.textContent = error.message;
        } else {
          // Send the token to your server.
          stripeTokenHandler(token);
        }
      });

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

        ["brand", "exp_month", "exp_year", "last4"].forEach(function(field) {
           addFieldToForm(form, token, field);
        });

        // Submit the form
        form.submit();
      }

      function addFieldToForm(form, token, field) {
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', "user[card_" + field + "]");
        hiddenInput.setAttribute('value', token.card[field]);
        form.appendChild(hiddenInput);
      }
    });

application.html.erb

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

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <%= stylesheet_link_tag 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css' %>
        <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', "https://js.stripe.com/v2/", "https://js.stripe.com/v3/", 'data-turbolinks-track': 'reload' %>

        <%= tag :meta, name: "stripe-public-key", content: Figaro.env.stripe_publishable_key %>
      </head>
    <body>
    </body
    </html>

付款表单

<div class="form-row">
    <label for="card-element" class="label">
      Enter credit or debit card
    </label>

    <div id="card-element" class="form-control">
      <!-- a Stripe Element will be inserted here. -->
    </div>
    <!-- used to display Element errors -->
    <div id="card-errors" role="alert"></div>
  </div>

【问题讨论】：

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

【解决方案1】：

要使用条带元素，您需要使用 https 运行您的应用程序，请阅读条带文档https://stripe.com/docs/stripe-js/elements/quickstart#http-requirements 中的更多信息

【讨论】：