How to disable a form button in DrupalGap after it is clicked?

Question

I am experimenting with the Stripe Cordova plugin that seems to provide for an easy addition of Stripe payments to a Phonegap app.

I have created a form with the necessary fields (name, amount, CC numer, CVC, expiration month and year). It is of course important to prevent double clicking/double charging.

What is the most reliable way to disable the submit button immediately after it is clicked and prevent double charges?

Scenario 1:

/**
 * Define the form's submit function.
*/
function stripe_payment_form_submit(form, form_state) {
  try {
    var points = form_state.values['points'];
    var number = form_state.values['number'];
    var exp_month = form_state.values['exp_month'];
    var exp_year = form_state.values['exp_year'];
    var cvc = form_state.values['cvc'];
    var fullname = form_state.values['name'];
    chargeCard(points, number, exp_month, exp_year, cvc, fullname);
}
  catch (error) { console.log('stripe_payment_form_submit - ' + error); }
}

function chargeCard(points, number, exp_month, exp_year, cvc, fullname){
  stripe.charges.create({
  amount : points,
  currency : 'usd',
  card : {
    number : number,
    exp_month : exp_month,
    exp_year : exp_year,
    cvc : cvc,
    name : fullname
    },
   description : "Stripe Test Trasnfer"
},
  function(result){
    // asynchronously called
  });

}

Scenario 2:

/**
 * Define the form's submit function.
*/
function stripe_payment_form_submit(form, form_state) {
 try {      
   stripe.charges.create({
   amount : form_state.values['points'],
   currency : 'usd',
  card : {
   number : form_state.values['number'],
   exp_month : form_state.values['exp_month'],
   exp_year : form_state.values['exp_year'],
   cvc : form_state.values['cvc'],
   name : form_state.values['name']
  },
  description : "Stripe Test Trasnfer"
 },
 function(result){
  // asynchronously called
 });
   }
  catch (error) { console.log('stripe_payment_form_submit - ' + error);   }
 }

Answer 1

Senario 1 or 2 would both be fine, the trick is to disable the button immediately before the ASYNC call begins. This can be easily accomplished with a little jQuery:

$('#my-submit-button').prop('disabled', true);

Then I'd recommend re-enabling it in the success and error handlers for the ASYNC call to Stripe:

$('#my-submit-button').prop('disabled', false);