Stripe checkout form - 页面上的表单索引 - Ruby on Rails

Posted 2023-05-09

【中文标题】Stripe checkout form - 页面上的表单索引 - Ruby on Rails

【英文标题】：Stripe checkout form - Index of forms on the page - Ruby on Rails

【发布时间】：2018-03-11 15:20:15

【问题描述】：

在玩了我的代码之后，我有点太累了，我不小心删除了发票索引页面上一个完美运行的条纹结帐表单。将这些碎片重新组合在一起后，我似乎陷入了一个我以前没有遇到过的问题......

我有一个用户发票索引，其中列出了循环中的每张发票，然后除其他外，在索引页面上为用户提供了一个选项，可以使用 Stripe Checkout 弹出式付款表单支付发票。

  <% @user.invoices.where(payment_status: false).find_each do |invoice| %>

        <div class="col-sm-3 text-center">
          <p>Details</p>
          <%= link_to "View Details", invoice_path(invoice,user_id: current_user.id) %>
          <%= form_tag invoice_pay_path(invoice), method: :patch, value: 1 do %>
            <%=link_to "Pay Invoice", '#', class:"btn btn-success pay_button"%>
          <% end%>
        </div>

我使用了内联脚本，以便能够使用循环中的 invoice 变量：

<script>
var handler = StripeCheckout.configure(
key: $('meta[name="stripe-key"]').attr('content'),
image: "<%= image_path "half logo.png"%>",
locale: 'auto',
token: function(token) 
  // You can access the token ID with `token.id`.
  // Get the token ID to your server-side code for use.
  var token = token.id;
  //Inject the card token in a hidden field.
  theForm.append( $('<input type="hidden" name="stripe_card_token">').val(token) );
  //Submit form to our Rails app.
  theForm.get(0).submit();

);

$('.pay_button').click(function(e) 

var theForm = $(this).closest('form');

// Open Checkout with further options: 
handler.open(
  name: 'Fullstack Solutions',
  description: 'Invoice for Services',
  zipCode: false,
  currency: 'aud',
  amount: <%=invoice.total_amount*100%>,
  email: "<%=current_user.email%>"
);
e.preventDefault();
 );

// Close Checkout on page navigation:
window.addEventListener('popstate', function() 
handler.close();
);

</script>

这里的关键是表单变量只需要在点击事件之后定义，因为页面上有多个表单（发票索引）。在单击事件之后，theForm 由被单击按钮的父窗体定义。

昨晚运行良好，但现在令牌函数运行时未定义表单。

我确信这是一个简单的问题，我非常沮丧，因为它运行良好......

【问题讨论】：

您可能需要在$('.pay_button').click(function(e) ...) 中定义您的处理程序，以便它可以通过词法范围访问theForm。

似乎已与 theForm 一起使用，但现在 handler.close 功能无法正常工作。关闭弹出窗口后，iframe 保持原位，阻止所有网站功能

正确，因为现在处理程序仅在 click 处理程序中可用。你把这部分也移到函数里面怎么样？

是的，已经尝试过了。有趣的是，它适用于索引页面上列出的最后一张发票，但不适用于其他发票……可能是某种命名冲突？

您的意思是在您将 'popstate' 部分移到 'click' 回调函数中后，iframe 会在您关闭弹出窗口后保持原位，列表中的最后一张发票除外？

【参考方案1】：

我最终不得不将 theForm 定义为脚本中的全局变量（这可能是不好的做法，但它显着简化了 jQuery）。最终代码为：

<script>

var theForm;
var handler = StripeCheckout.configure(
key: $('meta[name="stripe-key"]').attr('content'),
image: "<%= image_path "half logo.png"%>",
locale: 'auto',
token: function(token) 
  // You can access the token ID with `token.id`.
  // Get the token ID to your server-side code for use.

  var token = token.id;
  //Inject the card token in a hidden field.
  theForm.append( $('<input type="hidden" name="stripe_card_token">').val(token) );
  //Submit form to our Rails app.
  theForm.get(0).submit();


);

$('.pay_button').click(function(e) 


theForm = $(this).closest('form');

// Open Checkout with further options: 
handler.open(
  name: 'Fullstack Solutions',
  description: 'Invoice for Services',
  zipCode: false,
  currency: 'aud',
  amount: <%=invoice.total_amount*100%>,
  email: "<%=current_user.email%>"
);


e.preventDefault();


); 
// Close Checkout on page navigation:
window.addEventListener('popstate', function() 
handler.close();
);