admin管理员组

文章数量:1287561

I have Stripe's payment request button set up on the same page as a form. The form has validation on it. I need to be able to disable the payment request button until the form has been pleted but I haven't been able to find a way to do this.

Payment request button set up:

<script src="/"></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.
      evplete('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.
      evplete('fail');
    }
  });
});
</script>

I have Stripe's payment request button set up on the same page as a form. The form has validation on it. I need to be able to disable the payment request button until the form has been pleted but I haven't been able to find a way to do this.

Payment request button set up:

<script src="https://js.stripe./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.plete('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.plete('fail');
    }
  });
});
</script>

• javascript
• stripe-payments

Share Improve this question Follow edited Dec 10, 2018 at 15:08 tay asked Dec 10, 2018 at 14:15 taytay 16833 silver badges1515 bronze badges 4

• Depends on what exactly is inserted in the place of <!-- A Stripe Element will be inserted here. --> - if the button renders inside an iframe that loads its content from a different domain, then you have no access at all to it. You could only disable this button, if it was actually part of your own document. – misorude Commented Dec 10, 2018 at 15:20
• Yep the button is generated inside an iframe. – tay Commented Dec 10, 2018 at 16:12
• Just don't call prButton.mount until you are ready to allow the user to checkout. So move that code to only run after you've successfully validated the rest of the input. – karllekko Commented Dec 10, 2018 at 17:30
• Problem is I want the button to be displayed so that if you click on it and the form is invalid it will alert you to this so I need the button to be shown regardless of the current state of the form. – tay Commented Dec 10, 2018 at 19:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

You can perform form validation in an event handler for the click event of the payment request button.

Example

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

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.

本文标签： javascriptHow can I disable the Stripe payment request button until a form is completeStack Overflow