Блог

Главная - Вопросы по программированию - Форма элемента Stripe не видна в приложении rails

Форма элемента Stripe не видна в приложении rails

#ruby-on-rails #ruby #stripe-payments

#ruby-on-rails #ruby #stripe-платежи

Вопрос:

Я использую элементы Stripe, и форма не отображается в моем приложении rails. Я перепробовал много предложений и до сих пор не улучшился. Я использую ruby 2.3 и Rails 5.2.3, но не bootstrap.

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>

Ответ №1:

Для использования элементов stripe вам необходимо запустить приложение с использованием https, подробнее читайте в документации stripe https://stripe.com/docs/stripe-js/elements/quickstart#http-requirements