Question

我关注this tutorial，因为它具有自定义的结帐按钮

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

{“ utf8” =>“✓”，“ authenticity_token” =>“ sometokenvalue”， “ stripeToken” =>“”，“ amount” =>“ 40000”，“ item_id” =>“ 3”}

我怀疑我收到此错误

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

因此。

我的代码如下：

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

注意：为了简化目标，我将js代码放在同一页中。

谁能告诉我我的表单不产生stripeToken怎么了？还是我可能遗漏了一些要点？

注意：如果需要更多信息，请告诉我，所以我发布了谢谢

Answer 1

您的JS中有错字：

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

...应该改为...

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

然后，将以下代码移至该行下方的顶部：addEventListener

e.preventDefault();

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

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

最后，由于可以保证amount是正确的并且具有整数值，因此您不再需要以下内容，因此将其删除：

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

别忘了删除悬挂的} else { }代码

说明：

如果在看代码时我的理解是正确的，则由于输入错误，每当您单击“捐赠”按钮时，您的if (isNaN(amount))的计算结果基本上为if (isNaN("#{@item.price}")（即STRING ！！！），这就是isNaN("#{@item.price}")始终等于true（因为它不是数字！）的原因，因此else的条件就是...
```
handler.open({
  amount: Math.round(amount)
})
e.preventDefault();
```
...永远不会被呼叫。请注意，上面的e.preventDefault()永远不会被调用！ ...这意味着您的表单无需打开“条带化”模式即可提交“常规方式”。如果我的理论是正确的，这就是:stripeToken为空字符串的原因，因为hidden_tag :stripeToken的默认值为空值，这意味着''，而不是正确的方式：单击“捐赠”按钮，应弹出Stripe模式，并在Stripe事务完成后，将调用token函数回调：
```
token: function(token) {   
  $('input#stripeToken').val(token.id);
  $('form').submit();
}
```
...如上所示，它将更新您的stripeToken输入以具有正确的“令牌”值。然后也如您在上面看到的那样，将提交表单，但是现在stripeToken输入具有值，因为您刚刚对其进行了更新。

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

提交后，form_tag不会产生stripeToken

1 个答案:

说明：