代码之家 › 专栏 › 技术社区 › HerrimanCoder

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

stripe-payments javascript

HerrimanCoder · 技术社区 · 6 年前

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

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

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

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

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

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

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>

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

有什么想法吗?

0 回复 | 直到 6 年前

Paul Asjes 6 年前

你可以把你的纺纱机藏起来 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');
    }
}