将实时更新传递到条纹结账金额

Passing Real Time update to Stripe Checkout Amount

本文关键字：金额 实时更新      更新时间：2023-09-26

我正在尝试在 Stripe 结账 UI 中实现一个可变价格，该价格将由 Pusher 更新。

我首先将 Pusher 消息分配给一个名为 price 的全局变量。

  <script type="text/javascript">
      var pusher = new Pusher('7a5433c6fc39502a4a02');
      var channel = pusher.subscribe('the_channel');
      var price
      channel.bind('the_event', function(data) {
      price = data.message
      });
  </script>

如果我为数据量分配价格，那么我就会面临两个问题：

1-在进程方面，默认情况下该字段为空，仅在 Pusher 发送消息时填充。

2-语法方面，变量当前在推送时甚至不呈现消息 

<%= form_tag charges_path, class: 'stripeform' do %>
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
            data-amount= <%= @price %>
    </script>
<% end %>

怎么办？

我建议做的是在 Rails 控制器中为 @price 设置默认值。

然后按照 Stripe 上的文档进行操作，您可以使用这样的东西来创建价格可变的按钮。请记住，正如 Stripe 文档所说，您仍然需要创建具有正确金额的费用 

<script src="https://checkout.stripe.com/checkout.js"></script>
<div id="price-display">$<%= @price %></div>
<button id="customButton">Purchase</button>
<script>
  var price = parseInt("<%= @price %>");
  var pusher = new Pusher('7a5433c6fc39502a4a02');
  var channel = pusher.subscribe('the_channel');
  channel.bind('the_event', function(data) {
    price = parseInt(data.message);
    document.getElementById('price-display').innerHTML = "$" + data.message;
  });
  var handler = StripeCheckout.configure({
    key: "<%= Rails.configuration.stripe[:publishable_key] %>",
    image: '/square-image.png',
    token: function(token) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });
  $('#customButton').on('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'Demo Site',
      description: '2 widgets',
      amount: price
    });
    e.preventDefault();
  });
  // Close Checkout on page navigation
  $(window).on('popstate', function() {
    handler.close();
  });
</script>

有关更多条纹相关信息，请参阅此处：https://stripe.com/docs/checkout#integration-custom

相关文章：