Javascript 单击按钮后如何在条纹中显示微调器？

我有一个带有条纹元素的网页。一切正常。但我想在点击支付按钮后显示一个微调器，但前提是所有信用卡字段都已完成并验证。问题是Stripe的客户端API/结构阻止我使用javascript检查这些字段。通过执行以下操作，我可以轻松点击按钮：

$("#btnPay").click(function() {
    // show spinner
});

但除非所有信用卡字段都填写完整，否则我永远不想显示微调器。否则，当字段仍然为空时，微调器将弹出，等等

Stripe Elements API中有没有一种方法可以注入我的js，在Stripe验证表单之后，但在它调用ajax获取令牌之前，启动微调器

以下是我的页面的一些部分：

一些js：

<script>
function setOutcome(result) {
    var successElement = document.querySelector('.success');
    var errorElement = document.querySelector('.error');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
        // my ajax here
    } else if (result.error) {
        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
    }
}
</script>

功能设置结果（结果）{
var successElement=document.querySelector（'.success'）；
var errorElement=document.querySelector（'.error'）；
successElement.classList.remove（'visible'）；
errorElement.classList.remove（'visible'）；
if（result.token）{
//我的阿贾克斯在这里
}else if（result.error）{
errorElement.textContent=result.error.message；
errorElement.classList.add（'visible'）；
}
}

HTML格式：

<form action="//httpbin.org/post" method="POST">
   <input type="hidden" name="token" />
   <div class="group">
      <label>
         <span>Credit Card</span>
         <div id="card-element" class="field"></div>
      </label>
   </div>
   <div class="group">
      <label>
      <span>Name on Card</span>
      <input id="name" name="name" class="field" placeholder="Your name here" />
      </label>
   </div>
   <button type="submit" id="btnPay" style="cursor: pointer; width: 200px; margin-left: 155px;">Pay $115.00</button>
</form>

信用卡
卡片上的名字
支付115.00美元

更多js：

<script>
    var stripe = Stripe('pk_test_3Z8D***********C');
    var elements = stripe.elements();

var card = elements.create('card', {
    hidePostalCode: true,
    style: {
        base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontFamily: 'Helvetica Neue',
            fontSize: '15px',

            '::placeholder': {
                color: '#CFD7E0',
            },
        },
    }
});
card.mount('#card-element');

card.on('change', function (event) {
    setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();

    var options = {
        name: document.getElementById('name').value,
    };

    stripe.createToken(card, options).then(setOutcome);
}); 
</script>

var stripe=stripe（“pk_测试_3Z8D***************C”）；
var elements=stripe.elements（）；
var card=元素。创建（'card'{
hidePostalCode:true，
风格：{
基数：{
iconColor:“#666EE8”，
颜色：“#31325F”，
线宽：“40px”，
重量：300，
fontFamily:“Helvetica Neue”，
fontSize:'15px'，
“：：占位符”：{
颜色：“#CFD7E0”，
},
},
}
});
卡。挂载（“#卡元素”）；
卡片打开（“更改”，功能（事件）{
结果（事件）；
});
document.querySelector（'form'）。addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
变量选项={
名称：document.getElementById（'name'）。值，
};
stripe.createToken（卡，选项）。然后（setOutput）；
}); 

---

有什么想法吗？

如果

result.token

未定义，您可以隐藏微调器。令牌存在表示表单已提交

大概是这样的：

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();

    var options = {
        name: document.getElementById('name').value,
    };

    // show the spinner on submit
    showSpinner();

    stripe.createToken(card, options).then(setOutcome);

});

function setOutcome(result, wasSubmitted) {
    var successElement = document.querySelector('.success');
    var errorElement = document.querySelector('.error');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
        // hide the spinner if this was called after a form submit
        hideSpinner();

        // my ajax here
    } else if (result.error) {
        // also hide the spinner on error
        hideSpinner();

        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
    }
} 

---

请问你最终是怎么解决的？正如保罗所解释的，我正试图达到同样的效果。

result.token

就是答案。