working with if statements and queries

Question

I am try to simplify this as much as possible. When a user hit the submit button the following happens:

1. Validate if the credit card/expiry date/ cvc value are valid
2. A token is generated as an input
3. The value of the token is posted in the php code
4. the query runs and stores the value and page is relocated

I have been able to manage up until number 2. I am unable to post the value of the token, and hence the token value is not stored.

Constraints:

1. I cannot run the query if no token value is found or available
2. the php script cannot be run until the input token is generated
3. Once the php query has been executed, the token input needs to be destroyed

Below is the js function that generates the token:

 <script type="text/javascript">
    // This identifies your website in the createToken call below
  Stripe.setPublishableKey('CODE');

  var stripeResponseHandler = function(status, response) {
      var $form = $('#payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
      } else {
        // token contains id, last4, and card type
        var token = response.id;
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="text" name="stripeToken" />').val(token));
        // and re-submit
      }
    };

    jQuery(function($) {
      $('#payment-form').submit(function(e) {
        var $form = $(this);

        // Disable the submit button to prevent repeated clicks
        $form.find('button').prop('disabled', true);

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

        // Prevent the form from submitting with the default action
        return false;
      });
    });

  </script>

Below is the php code

 if(isset($_POST['paid'])){
          $course_token = $_POST['stripeToken'];

if (!empty($course_token)) {

    $course_price_final = $_POST['course_price_final'];
    $course_provider = $_POST['course_provider'];
    $user_email = $_POST['user_email'];
    $course_delivery = $_POST['course_delivery'];
    $order_date = date("Y-m-d");
    $insert_c = "insert into orders (course_title,course_price_final,course_provider,user_email,course_date,course_delivery,order_date,course_token) 
             values ('$crs_title','$course_price_final','$course_provider','$user_email','$course_date1','$course_delivery','$order_date','$course_token')";
    $run_c = mysqli_query($con, $insert_c);

ob_start();

}
}
?>

Thanks in advance, and for any clarification, let me know.

Answer 1

It looks like you're missing a submit in the stripeResponseHandler:

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

The return false in your submit function, as the comment indicates, prevents the form from being submitted. This is necessary to allow Stripe to process the request. You provide Stripe with the stripeResponseHandler function which it will call once it has had a chance to satisfy your request and return a valid token or fail with an error. Do not remove the

return false;

statement as that will interfere with the work-flow allowing Stripe to process the request properly.

Your stripeResponseHandler needs to handle any errors from Stripe and if none are found then it needs to submit the form. The code I have above is what I use on my web site to submit the form.

get(0) returns the DOM element and the submit issues the submit directly.

Answer 2

Remove the return false statement at the end of submit handler. It prevents the form from being posted.

You can actually append the input before submit and submit your form later.

jQuery(function($) {
  $('#payment-form').click(function(e) {
    var $form = $(this);

    // Disable the submit button to prevent repeated clicks
    $form.find('button').prop('disabled', true);

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

    // Prevent the form from submitting with the default action
    $form.submit();
  });
});