AJAX request combined with stripe

Question

I have reviewed a couple of threads Link 1 link 2.

I'm using stripe.js and I want to submit my custom made form and some other form with additional information with one button. The idea is to send two different messages, one to the client and one to the service provider.

I'would love to have both forms submitted with the make payment button (or on any form at this point), so I would be able pick up name as indexes inside my controller/model and then send an email, notifying both parties different things about the transaction.

The thing is, stripe handles all the forms submission on javascript and I'm bit confused on how to combine it with my own AJAX request to send both forms a the same time.

This is my JS code inside my view right now, if I do this the token does not get created and nothing gets done:

function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission

    } else { // Token was created!

      // Get the token ID:

      var token = response.id;  

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden"name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };


  function submitTwoForms() {

    var dataObject = {invoice: "invoice", name: "name", phone: "phone", email: "email", message: "message"};

      $.ajax({

        url  : base.url + '/index.php/contact',

        data : dataObject,

        type : "GET",

        success: $(function(){

              var $form = $('#payment-form');

              $form.submit(function(event) {

              // Disable the submit button to prevent repeated clicks:

              $form.find('.submit').prop('disabled', true);


              // Request a token from Stripe:

              Stripe.card.createToken($form, stripeResponseHandler);

              //to prevent submit

              return false;   

              });       

        })

      });

  }


  $('#customButton').submit(function() {

    submitTwoForms();

    return false;

  });

Any pointers are much appreciated.

score 0 · Accepted Answer · answered Jun 22 '16 at 18:59

I ended up redoing my code as follows and it's working for now.

<script>

 $("#customButton").on('click', function() {

  $('#contactForm')[0].submit(function(event){

    var formData = {

      'invoice'   :$('input[name=invoice]').val(),

      'name'      :$('input[name=name]').val(),

      'email'     :$('input[name=email]').val(),

      'phone'     :$('input[name=phone]').val(),

      'message'   :$('input[name=message]').val(),

    };


    $.ajax({

        type     : 'POST',

        url      : base.url + '/index.php/contact',

        data     : formData,

        dataType : 'json',

        encode   : true

    })

  });

})  

  function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission



    } else { // Token was created!

      // Get the token ID:

      var token = response.id;

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden" name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };

  $(function() {

    var $form = $('#payment-form');

    $form.submit(function(event) {

      // Disable the submit button to prevent repeated clicks:

      $form.find('.submit').prop('disabled', true);

      // Request a token from Stripe:

      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from being submitted:

      return false;

    });

  })

</script>

Hope Someone else can benefit.

AJAX request combined with stripe

1 Answers1