0

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);   }
 }
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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.