条带禁用“付款”按钮和微调器不起作用

问题描述

我正在尝试根据此处的官方文档实施Stripe：https://stripe.com/docs/payments/integration-builder

我设法使付款表格正常工作，除了在没有输入信用卡的情况下应禁用“付款”按钮，并且在字段中有抄送并按“付款”时，微调框也应接管。下面的代码：

<form id="payment-form">
    
   <div id="card-element" class="">
        <!-- Elements will create input elements here -->
    </div>
                    
    <button id="submit" data-secret="<%= @intent.client_secret %>" class="stripe-custom">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay Now</span>
    </button>
    <p id="card-error" role="alert"></p>
    <p class="result-message bold hidden">
        Payment Successful! 
            
</form>

<script>
    // Set up Stripe.js and Elements to use in checkout form
    var style = {
      base: {
        color: "#32325d",fontSmoothing: "antialiased",}
    };

    var card = elements.create("card",{ style: style });
    card.mount("#card-element");

    card.on("change",function (event) {
      // Disable the Pay button if there are no card details in the Element
      document.querySelector("button").disabled = event.empty;
      document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
    });
</script>

<script>
    // Show a spinner on payment submission
    var loading = function(isLoading) {
      if (isLoading) {
        // Disable the button and show a spinner
        document.querySelector("button").disabled = true;
        document.querySelector("#spinner").classList.remove("hidden");
        document.querySelector("#button-text").classList.add("hidden");
      } else {
        document.querySelector("button").disabled = false;
        document.querySelector("#spinner").classList.add("hidden");
        document.querySelector("#button-text").classList.remove("hidden");
      }
    };
</script>

运行以上命令时，控制台日志中没有看到任何错误。有任何想法吗？ TIA！

解决方法

在要提交的事件侦听器中，您必须调用由“ var loading = function（isLoading）”定义的loading函数。像这样：

var form = document.getElementById('payment-form');

form.addEventListener('submit',function(event) {
            loading(true);
});

我相信类似的方法应该对您有用。

,

当按钮收到 'click' 事件时，您可以调用该方法： 加载（真）;

//创建函数加载

const loading = function(isLoading) {
    if (isLoading) {
        // Disable the button and show a spinner
        document.querySelector("button").disabled = true;
        document.querySelector("#spinner").classList.remove("hidden");
        document.querySelector("#button-text").classList.add("hidden");
    } else {
        document.querySelector("button").disabled = false;
        document.querySelector("#spinner").classList.add("hidden");
        document.querySelector("#button-text").classList.remove("hidden");
    }
};

完整教程：https://stripe.com/docs/payments/integration-builder