Javascript 将实时更新传递到条带签出金额

我正在尝试在Stripe Checkout UI中实现一个可变价格，它将由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>

var推进器=新推进器（'7a5433c6fc39502a4a02'）；
var channel=pusher.subscribe（'u channel'）；
var价格
channel.bind（'the_event'，function（data）{
price=data.message
});

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

1-进程方面，该字段默认为空，仅在推送程序发送消息时填充

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 docs所说的，您仍然需要创建正确金额的费用

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


$
购买
var价格=parseInt（“”）；
var推进器=新推进器（'7a5433c6fc39502a4a02'）；
var channel=pusher.subscribe（'u channel'）；
channel.bind（'the_event'，function（data）{
price=parseInt（data.message）；
document.getElementById（'price-display'）。innerHTML=“$”+data.message；
});
var handler=StripeCheckout.configure({
关键字：“，
图像：'/square image.png'，
令牌：函数（令牌）{
//使用令牌通过服务器端脚本创建费用。
//您可以使用`token.ID'访问令牌ID`
}
});
$（'#customButton'）。在（'单击'）上，函数（e）{
//打开带有更多选项的签出
handler.open({
名称：“演示站点”，
描述：“2个小部件”，
金额：价格
});
e、 预防默认值（）；
});
//关闭页面导航上的签出
$（窗口）.on（'popstate'，function（））{
handler.close（）；
});

更多与条纹相关的信息，请参见此处：
我可以将此拆分为两个吗？我不知道为什么不能。试一试：）