form_tag 在提交时不产生 stripeToken | stripeToken

stripeToken

关注(28)粉丝(399)

form_tag 在提交时不产生 stripeToken

本文介绍了form_tag 在提交时不产生 stripeToken的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在关注本教程以获得自定义结帐按钮

我根据需要更改了教程，当我检查 params 时，stripeToken 为空

{"utf8"=>"✓", "authenticity_token"=>"sometokenvalue","stripeToken"=>"", "amount"=>"40000", "item_id"=>"3"}

我怀疑我收到此错误

无效的源对象:必须是字典或非空字符串.看API 文档位于 https://stripe.com/docs'

因此.

我的代码如下:

<div class="容器"><div class="row"><div class="col-md-12"><p><strong>名称:</strong><%[email protected] %></p><p><strong>价格:</strong><%[email protected] %></p><script src="https://checkout.stripe.com/checkout.js"></script><%= form_tag item_charges_path(@item, amount: @item.price), id: 'paying-form' do %><%结束%><文章></文章><文章><%= hidden_field_tag :stripeToken %></文章><button id='donateButton' class='btn btn-primary'>Pay</button><%结束%><%= link_to '编辑', edit_item_path(@item) %>|<%= link_to '返回'，items_path %><脚本>var handler = StripeCheckout.configure({key: '',语言环境:'自动'，令牌:功能(令牌){$('input#stripeToken').val(token.id);$('form').submit();}});<脚本>document.getElementById('donateButton').addEventListener('click', function(e) {//e.preventDefault();$('#error_explanation').html('');var amount = "#{@item.price}";数量 = 数量.replace(/\$/g, '').replace(/\,/g, '')金额 = parseFloat(金额);如果(isNaN(金额)){$('#error_explanation').html('<p>请输入有效的美元金额 ($).</p>');}别的 {金额 = 金额 * 100；//必须是整数！handler.open({金额:Math.round(金额)})e.preventDefault();}});$(window).on('popstate', function() {handler.close();});

注意:为了简单起见，我将 js 代码放在同一页面中.

谁能告诉我我的表单不生成 stripeToken 有什么问题?或者可能是我遗漏了一些要点?

注意:如果需要更多信息，请告诉我，以便我发布谢谢

解决方案

你的 JS 中有一个错字:

var amount = "#{@item.price}";

...应该是...

var amount = ;

然后，将以下代码移动到该行下方的顶部:addEventListener

e.preventDefault();

然后，删除以下内容，因为您不再需要它了，因为 @item.price 直接来自您的数据库:

amount = amount.replace(/\$/g, '').replace(/\,/g, '')金额 = parseFloat(金额);

最后，因为 amount 保证是正确的并且有一个整数值，那么你不再需要以下内容，所以删除它们:

if (isNaN(amount)) {$('#error_explanation').html('<p>请输入有效的美元金额 ($).</p>');}

不要忘记删除悬空的} else { }代码

说明:

如果我在查看您的代码时的理解是正确的，那么每当您单击捐赠"按钮时，由于输入错误，您的 if (isNaN(amount)) 基本上评估为 if (isNaN("#{@item.price}")(这是一个字符串！！！)，这就是为什么 isNaN("#{@item.price}") 总是等于 true(因为它不是一个数字！)，因此 else 条件是...
```
handler.open({金额:Math.round(金额)})e.preventDefault();
```
...永远不会被调用.请注意，上面的 e.preventDefault() 永远不会被调用！...这意味着您的表单以正常方式"提交而无需打开Stripe"模式.如果我的理论是正确的，这就是为什么 :stripeToken 是空字符串的原因，因为您的 hidden_tag :stripeToken 的默认值是空值，这意味着 ''，而不是正确的方式:点击Donate按钮后，会弹出Stripe模式，在Stripe交易完成后，会调用token函数回调:
```
令牌:函数(令牌){$('input#stripeToken').val(token.id);$('form').submit();}
```
...其中正如您在上面看到的那样，将更新您的 stripeToken 输入以具有正确的令牌"值.然后正如你在上面看到的，表单将被提交，但现在 stripeToken 输入现在有一个值，因为你刚刚更新了它.

P.S.本身还没有使用过 Stripe

I am following this tutorial for having customized checkout button

I changed the tutorial for my need, and when I check my params , stripeToken is empty

I suspect I get this error

owing to that.

my code as follows :

<p id="notice"><%= notice %></p>
<div class="container">
  <div class="row">
    <div class="col-md-12"><p>
      <strong>Name:</strong>
        <%= @item.name %>
      </p>  
      <p>
        <strong>Price:</strong>
        <%= @item.price %>
      </p>

       <script src="https://checkout.stripe.com/checkout.js"></script>

      <%= form_tag item_charges_path(@item, amount: @item.price), id: 'paying-form' do %>
          <% if flash[:error].present? %>
            <div id="error_explanation">
              <p><%= flash[:error] %></p>
            </div>
          <% end %>
        <article>
        </article>
        <article>      
          <%= hidden_field_tag :stripeToken  %>
        </article>
        <button id='donateButton' class='btn btn-primary'>Pay</button>
      <% end %>

        <%= link_to 'Edit', edit_item_path(@item) %> |
        <%= link_to 'Back', items_path %>


          <script>
            var handler = StripeCheckout.configure({
              key: '<%= Rails.configuration.stripe[:publishable_key] %>',
              locale: 'auto',
              token: function(token) {   
                $('input#stripeToken').val(token.id);
                $('form').submit();
              }
            });
          </script>
          <script>
          document.getElementById('donateButton').addEventListener('click', function(e) {
              //e.preventDefault();

              $('#error_explanation').html('');

              var amount = "#{@item.price}";
              amount = amount.replace(/\$/g, '').replace(/\,/g, '')

              amount = parseFloat(amount);

              if (isNaN(amount)) {
                $('#error_explanation').html('<p>Please enter a valid amount in USD ($).</p>');
              }
              else {
                amount = amount * 100; // Needs to be an integer!
                handler.open({
                  amount: Math.round(amount)
                })
                e.preventDefault();
              }
            });

            $(window).on('popstate', function() {
              handler.close();
            });

          </script>
    </div>
  </div>
</div>

Note: I put the js codes in the same page for simplicity goals.

Could anyone tell me what is wrong that my form does not produce stripeToken?or May be I am missing some points?

Note: please if more info is needed,let me know so I postThank you

解决方案

You have a typo in your JS:

var amount = "#{@item.price}";

...should instead be...

var amount = <%= @item.price %>;

Then, move the following code at the top just below the line: addEventListener

e.preventDefault();

Then, remove the following because you don't need it anymore because the @item.price comes directly from your database:

amount = amount.replace(/\$/g, '').replace(/\,/g, '')
amount = parseFloat(amount);

Lastly, because amount is guaranteed to be correct and has an Integer value, then you don't need the following anymore and so remove them:

if (isNaN(amount)) {
  $('#error_explanation').html('<p>Please enter a valid amount in USD ($).</p>');
}

don't forget to remove the dangling } else { } code

Explanation:

If my understanding is correct upon looking at your code, whenever you click the "Donate" button, because of the typo, your if (isNaN(amount)) basically evaluates to if (isNaN("#{@item.price}") (which is a STRING!!!), and this is why isNaN("#{@item.price}") always equals true (because it's Not-A-Number!), and therefore the else condition which is...
```
handler.open({
  amount: Math.round(amount)
})
e.preventDefault();
```
...never gets called. Take note that the e.preventDefault() above never gets called! ...which means that your form submits "the normal way" without opening up the "Stripe" modal. If my theory is correct, this is why :stripeToken is empty string because the default value for your hidden_tag :stripeToken is empty-value which means '', instead of the correct way: which is that after you click the Donate button, the Stripe modal should pop up, and after the Stripe transaction has been completed, the token function callback will be called:
```
token: function(token) {   
  $('input#stripeToken').val(token.id);
  $('form').submit();
}
```
...of which as you would see above, will update your stripeToken input to have the correct "token" value. And then also as you could see above, the form will then be submitted but now the stripeToken input now has a value because you just updated it.

P.S. Haven't used Stripe per se

这篇关于form_tag 在提交时不产生 stripeToken的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-18 14:51