title: How to load payment success message without reloading page
body: <p>I'm using a custom stripe payment form to process a payment. The payment and everything goes through all good but my problem is that the page is reloading and then displaying the success message. I'd like to incorporate some type of jquery ajax if possible but my method doesn't seem work. It still just reloads.</p>
  
  <p>Here is the breakdown of my code. All the code is located on the same page but I'll breakdown the main areas below.</p>
  
  <p>FORM:</p>
  
  <pre><code>&lt;form action="" method="POST" id="payment-form" class="form-horizontal"&gt;
  
  
    &lt;div class="username-info"&gt;
      &lt;input type="text" name="name" maxlength="70" placeholder="Your full name" class="name form-control" value="Test Name"&gt;
    &lt;/div&gt;
  
    &lt;div class="email-info"&gt;
      &lt;input type="text" name="email" maxlength="65" placeholder="Email address" class="email form-control" value="testemail@email.com"&gt;
    &lt;/div&gt;
  
    &lt;div class="password-info"&gt;
      &lt;input type="password" name="password" maxlength="70" placeholder="Password (min 6 characters)" class="password form-control" value="password123"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-row"&gt;
      &lt;label&gt;
        &lt;span&gt;Card Number&lt;/span&gt;
        &lt;input type="text" size="20" data-stripe="number"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="form-row"&gt;
      &lt;label&gt;
        &lt;span&gt;Expiration (MM/YY)&lt;/span&gt;
        &lt;input type="text" size="2" data-stripe="exp_month"&gt;
      &lt;/label&gt;
      &lt;span&gt; / &lt;/span&gt;
      &lt;input type="text" size="2" data-stripe="exp_year"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-row"&gt;
      &lt;label&gt;
        &lt;span&gt;CVC&lt;/span&gt;
        &lt;input type="text" size="4" data-stripe="cvc"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  
  &lt;/form
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              // this identifies your website in the createToken call below
              Stripe.setPublishableKey('test_key_goes_here');
  
              function stripeResponseHandler(status, response) {
                  if (response.error) {
                      // re-enable the submit button
                      $('.submit-button').removeAttr("disabled");
                      // show hidden div
                      document.getElementById('a_x200').style.display = 'block';
                      // show the errors on the form
                      $(".payment-errors").html(response.error.message);
                  } else {
                      var form$ = $("#payment-form");
                      // token contains id, last4, and card type
                      var token = response['id'];
                      var posted = document.getElementById("post-price").value
                      // insert the token into the form so it gets submitted to the server
                      form$.append("&lt;input type='hidden' name='stripeToken' value='" + token + "' /&gt;");
                      form$.append("&lt;input type='hidden' name='posted' value='" + posted + "' /&gt;");
                      // and submit
                      form$.get(0).submit();
                  }
              }
  &lt;/script&gt;
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?php
  require 'lib/Stripe.php';
  
  $error = '';
  $success = '';
  
  if ($_POST) {
  Stripe::setApiKey("test_key_goes_here");
  
  try {
  if (empty($_POST['name']) || empty($_POST['password']) || empty($_POST['email']))
      throw new Exception("Fill out all required fields.");
    if (!isset($_POST['stripeToken']))
      throw new Exception("The Stripe Token was not generated correctly");
    Stripe_Charge::create(array("amount" =&gt; $_POST['posted'],
                                "currency" =&gt; "cad",
                                "card" =&gt; $_POST['stripeToken'],
               "description" =&gt; $_POST['email']));
    $success = '&lt;div class="alert alert-success"&gt;
                &lt;strong&gt;Success!&lt;/strong&gt; Your payment was successful.
       &lt;/div&gt;';
  }
  catch (Exception $e) {
  $error = '&lt;div class="alert alert-danger"&gt;
       &lt;strong&gt;Error!&lt;/strong&gt; '.$e-&gt;getMessage().'
       &lt;/div&gt;';
  }
  }
  ?&gt;
  
  
  
  &lt;div class="alert alert-danger" id="a_x200" style="display: none;"&gt; &lt;strong&gt;Error!&lt;/strong&gt; &lt;span class="payment-errors"&gt;&lt;/span&gt; &lt;/div&gt;
  &lt;span class="payment-success"&gt;
  &lt;?= $success ?&gt;
  &lt;?= $error ?&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Also here is the jquery ajax request I was trying :</p>
  
  <p><strong>Updated to include URL</strong></p>
  
  <pre><code>  $("#payment-form").submit(function(e) {
  
        e.preventDefault();
        var url = "pricing.php";  
  
        $.ajax({
               type: "POST",
               url: url,
               data: $("#payment-form").serialize(),
               success: function(data)
               {
                   alert(data);
               }
             });
  
    });
  </code></pre>