Stripe

Is anyone here good with Stripe? For some reason I'm not getting a stipetoken passed to my php script...

The JS code below. The only thing to note is that the form isn't present on page load, it's echoed out after a few steps. I don't think that's the problem though. I've tried this tons of times... I have no idea why it's all of a sudden not working now...

// This identifies your website in the createToken call below
  Stripe.setPublishableKey('key here');
  // ...

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

  // Disable the submit button to prevent repeated clicks
  $form.find('button').prop('disabled', true);
  alert("THIS FORM FuNCTIN");
  Stripe.card.createToken($form, stripeResponseHandler);

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

function stripeResponseHandler(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 {
  // response contains id and card, which contains additional card details
  var token = response.id;
  // Insert the token into the form so it gets submitted to the server
  $form.append($('<input type="hidden" name="stripeToken" />').val(token));
  // and submit
  $form.get(0).submit();
  }
};   

Code (JavaScript):

Form

// card form
  echo '<form class="card_form" id="payment-form" method="post" action="gateway/code/php/process_listing_upgrade_payment.php">
       <label>Card Number</label><br/>
       <input class="postinput 4pxmarginB" data-stripe="number" type="text" />
       <img alt="locked_visa" src="gateway/images/payment/credit_card.png" /><br/>
       <label>Expiration month</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="exp-month" pattern="\d{2}" placeholder="MM"/>
       <img alt="locked_visa" src="gateway/images/payment/calendar.png" /><br/>
       <label>Expiration year</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="exp-year" pattern="\d{4}" placeholder="YYYY"/>
       <img alt="locked_visa" src="gateway/images/payment/calendar.png" /><br/>
       <label>CVC</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="cvc"/>
       <img alt="locked_visa" src="gateway/images/payment/sm_lock_32.png" /><br/>
       <br/>';
    
       echo '<button type="submit" style="padding:4px; margin-top:8px;">Submit</button>
       <input type="hidden" name="feeDollars" value="'.$fee.'"/>
       <input type="hidden" name="listingToken" value ="'.$listingToken.'" /><br/><br/>';
    
         if(isset($_GET['paymenterror']))
       {
    
         $error = url_decode($_GET['paymenterror']);
      
         echo '<p id="payment-errors" class="payment-errors" style="background-color:yellow;">'.$error.'</p><br/>';      
    
       }else{
    
         echo '<br/><br/><p id="payment-errors" class="payment-errors" style="background-color:yellow;"></p><br/>';
    
       }
    
        // send current url with updated ammounts with form.     
    
    echo '</form>';

Code (markup):

 

I don't either js functions are being called. I can't echo anything out from responsehandler...

 

No $(document).ready(function() {}) ?

 

Have you read the documents, where they have given API information, i think there its written very clearly.