条纹禁用支付按钮和微调器不工作

Posted 2023-03-05

【中文标题】条纹禁用支付按钮和微调器不工作

【英文标题】：Stripe Disable Pay Button and Spinner Not Working

【发布时间】：2020-12-04 01:11:50

【问题描述】：

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

我已经设法使付款表单正常工作，只是在没有输入信用卡时付款按钮应该禁用，并且当字段中有 CC 并按下付款时，微调器应该接管。代码如下：

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

运行上述命令时，我在控制台日志中没有看到任何错误。有任何想法吗？蒂亚！

【问题讨论】：

您可能想尝试给button 一个ID，然后通过它来获取它，而不是仅仅获取button。

@floatingLomas 在向按钮添加 ID 时不走运...

【参考方案1】：

在提交的事件监听器中，您必须调用由“var loading = function (isLoading)”定义的加载函数。像这样：

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

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

我相信这样的事情应该适合你。

【讨论】：

我将“加载”函数传递给布尔值 true 以确保微调器正常工作。您还可以将返回布尔值 true 或 false 的方法调用的结果传递给“加载”函数。例如，您可以将用户密码创建的结果或类似的结果传递给“加载”函数。希望这会有所帮助！

【参考方案2】：

当按钮收到“点击”事件时，您可以调用该方法： 加载（真）；

//创建函数加载

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