title: Working with payment
body: <p>I have a dilema, quite a big one.</p>
  
  <p>I am working stripe as my payment gateway and it works in a 2 way process.</p>
  
  <ol>
  <li>Collect billing info which generated a token</li>
  <li>charge the client using token</li>
  </ol>
  
  <p>problem is that token can only be used once and on step 1 i am unable to verify if client has sufficient fund, so if it doesn't then the card gets declined, and the problem is that i can't reused the token so i cant go back to the customer, and ask for their details again. So my question is how to i verify without charging the client that they have sufficient fund when generating the token.</p>
  
  <p>below is a quick look on how the code is generated:</p>
  
  <pre><code>function onSubmit() {
      var $form = $('#payment-form'); // TODO: give your html-form-tag an "id" attribute and type this id in this line. IMPORTANT: Don't replace the '#'!
  
      // Disable the submit button to prevent repeated clicks
    // TODO: give your html-submit-input-tag an "id" attribute
  
      Stripe.card.createToken($form, stripeResponseHandler);
  }
  </code></pre>
  
  <p>update:</p>
  
  <pre><code>   // This identifies your website in the createToken call below
    Stripe.setPublishableKey('CODE');
  
      var appendedStripeToken = false;
  
  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;
          handleCall(token);
      }
  };
  
  function handleCall(token) { 
     var $form = $('#payment-form');
      if (!appendedStripeToken) { 
          // Insert the token into the form so it gets submitted to the server
  $form.append($('&lt;input type="hidden" id="courseToken" name="stripeToken" /&gt;').val(token));
          appendedStripeToken = true; 
          phpCall(); 
  
      } 
  }
  
  function onSubmit() {
      var $form = $('#payment-form'); // TODO: give your html-form-tag an "id" attribute and type this id in this line. IMPORTANT: Don't replace the '#'!
  
      // Disable the submit button to prevent repeated clicks
    // TODO: give your html-submit-input-tag an "id" attribute
  
      Stripe.card.createToken($form, stripeResponseHandler);
  }
  
  
  function phpCall() {
   if( appendedStripeToken === true ){
     $.ajax({
      type: "POST",
      data: {run: true, priceFinal: $('#priceFinal').val(), courseProvider: $('#courseProvider').val(), 
      userEmail: $('#userEmail').val(), courseDelivery: $('#courseDelivery').val(), courseTitle: $('#courseTitle').val(), courseDate: $('#courseDate').val(), 
      courseToken: $('#courseToken').val(), cardname: $('#billingcardName').val(), finalCoupon: $('#finalCoupon').val(), couponDiscount: $('#couponDiscount').val() },
      url: 'functions/paymentEmail.php',
      success: function (response) {//response is value returned from php (for    your example it's "bye bye"
                    $('#payment-form').prop('disabled', true); // TODO: give your html-submit-input-tag an "id" attribute
  
  window.location = response;
      }
     });
   }
  } 
  </code></pre>