javascript - 在表格完成之前，如何禁用 Stripe 付款请求按钮？

Question

我将 Stripe 的付款请求按钮设置在与表单相同的页面上。表单上有验证。我需要能够在表单完成之前禁用付款请求按钮，但我一直无法找到执行此操作的方法。

付款请求按钮设置:

<script src="https://js.stripe.com/v3/"></script>
<div id="payment-request-button">
  <!-- A Stripe Element will be inserted here. -->
</div>
<script>
var stripe = Stripe('KEY');
var paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1000,
  },
  requestPayerName: true,
  requestPayerEmail: true,
});

var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
  paymentRequest: paymentRequest,
});

// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
  if (result) {
     prButton.mount('#payment-request-button');
   } else {
     document.getElementById('payment-request-button').style.display = 
 'none';
   }
 });

 paymentRequest.on('token', function(ev) {
   // Send the token to your server to charge it!
   fetch('/charges', {
     method: 'POST',
     body: JSON.stringify({token: ev.token.id}),
     headers: {'content-type': 'application/json'},
  })
  .then(function(response) {
    if (response.ok) {
      // Report to the browser that the payment was successful, prompting
      // it to close the browser payment interface.
      ev.complete('success');
    } else {
      // Report to the browser that the payment failed, prompting it to
      // re-show the payment interface, or show an error message and close
      // the payment interface.
      ev.complete('fail');
    }
  });
});
</script>

Answer 1

您可以在支付请求按钮的 click 事件的事件处理程序中执行表单验证。

Documentation

element.on('click', handler)

Triggered when the Element is clicked. This event is only emitted from a paymentRequestButton Element.

handler

When called it will be passed an event object with the following properties:

preventDefault

Calling this function synchronously prevents the browser's payment interface from being shown. This can be used to validate the form before the payment interface is shown.

例子

prButton.on('click', function(event) {
  if (!myForm.reportValidity()) {
    event.preventDefault();
    return;
  }
});