prevent stripe from checkout if other inputs are empty

Question

so i am doing simple "booking" function with stripe and i got this following problem: here is my form code

<form id="formid" action="/checkout" method="POST">
    <input type="text" name="kurtuma" id="zaza">
    <script 
    src="//checkout.stripe.com/v2/checkout.js",
    class="stripe-button",
    data-key="{{{keyPublishable}}}",
    data-locale="auto",
    data-description="Sample Charge",
    data-amount="500"
    data-label="გადახდა">
    </script>
  <button type="submit">book</button>
</form>

and this is how i am sending data to server

  $(document).ready(()=>{
  form.submit((e)=>{
    e.preventDefault()
    const data = $('#formid').serialize();
    $.ajax({
      method: 'POST',
      url: "/checkout",
      data: data,
      success: (r)=>{
          alert(r.success)
      },
      error: (xhr,textStatus,error)=>{
         //alerting error
      }
  })
 })
})

and if user submits form without filling "kurtuma" field and stripe form it opens stripe form on submit and also alerts that user must fill in kurtuma field

but the main problem is that if user fills stripe form it successfully makes transaction and only after redirecting it shows error alerting user to fill the kurtumo field. what I want is to prevent stripe from transacting if other fields are empty. here is how i handle server side validation

app.post('/checkout', async (req,res)=>{
    try{
    const {kurtuma} = req.body
    if(!kurtuma){
        return res.status(409).send({
            message: 'geliko sheavse kurtuma fieldi'
        })
    }
    stripe.customers.create({
        email: req.body.stripeEmail,
        source: req.body.stripeToken
    })
    .then(customer =>{
        stripe.charges.create({
            amount: 500,
            description: '5$ charge',
            currency: 'usd',
            customer: customer.id
        })
     })
    return res.status(200).send({success: true}).

Thank You!

Answer 1

If you're using Stripe's Checkout and want to make form submission contingent upon completion of another <input> , you should use the Custom (Javascript) Checkout integration , rather than the form block here.

This allows you to setup a click handler, you can run your own validations and if they succeed, you can tell Checkout to open and complete.

<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_xxxyyyy',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  e.preventDefault();

  // if form validation succeeds
  if(myFormValidates()) {
    // Open Checkout with further options:
    handler.open({
      name: 'Business Cats',
      description: '2 widgets',
      zipCode: true,
      amount: 2000
    });
  }
});
</script>