条纹元素表单在 rails 应用程序中不可见 [英] Stripe element form is not visible in a rails app

问题描述

我正在使用 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-键']").content;const stripe = Stripe(public_key);const 元素 = stripe.elements();常量样式 = {根据: {颜色:'#32325d'，}},无效的: {颜色:'#fa755a'，iconColor: '#fa755a'}};const card = elements.create('card', {style: style});card.mount('#card-element');card.addEventListener('change', ({error}) => {const displayError = document.getElementById('card-errors');如果(错误){displayError.textContent = error.message;} 别的 {displayError.textContent = '';}});const form = document.getElementById('new_job');form.addEventListener('submit', async (event) => {event.preventDefault();const {token, error} = await stripe.createToken(card);如果(错误){//通知客户有错误.const errorElement = document.getElementById('card-errors');errorElement.textContent = error.message;} 别的 {//将令牌发送到您的服务器.stripeTokenHandler(令牌)；}});const stripeTokenHandler = (token) =>{//将令牌 ID 插入到表单中，以便将其提交给服务器const form = document.getElementById('new_job');const hiddenInput = document.createElement('input');hiddenInput.setAttribute('type', '隐藏');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);});//提交表单表单提交()；}函数 addFieldToForm(form, token, field) {var hiddenInput = document.createElement('input');hiddenInput.setAttribute('type', '隐藏');hiddenInput.setAttribute('name', "user[card_" + field + "]");hiddenInput.setAttribute('value', token.card[field]);form.appendChild(hiddenInput);}});

application.html.erb

 <头><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 %><身体></正文</html>

付款表格

<label for="card-element" class="label">输入信用卡或借记卡<div id="card-element" class="form-control"><!-- 将在此处插入条纹元素.-->
<!-- 用于显示元素错误--><div id="card-errors" role="alert"></div>

解决方案

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

I am using Stripe elements and the form is not displaying in my rails app. I have tried many suggestions and still no improvement. I am using ruby 2.3 & Rails 5.2.3 but not 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>

payments form

<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>

解决方案

For using stripe elements, you need to run your application with https, read more in stripe documentations https://stripe.com/docs/stripe-js/elements/quickstart#http-requirements

这篇关于条纹元素表单在 rails 应用程序中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！