Stripe code with invalid token. Includes js, php, and the form used.

addService.js

Stripe.setPublishableKey('pk_test_Wfzrj4uDDPOcv7XxVJKXRERS');
var stripeResponseHandler = function(status, response) {
  if (response.error) {
    // show the errors on the form
    $("#stripe-errors").html(response.error.message);
  } else {
    var token = response['id'];
    var form$ = $("#addservice-form");
    form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
  }
}

 // do stuff when dom is ready
$(document).ready(function(){

// Add new service stuff.
  $('button#addservice-submit').click(function(event) {
    var $form = $('form#addservice-form');
    var chargeAmount = 1499;
    var l = Ladda.create( document.querySelector( '#addservice-submit' ) );
    l.start();
    //Get the data from all the fields
    var data = $("#addservice-form").serialize();
    
    //start the ajax
    $.ajax({
      //this is the php file that processes the data and send mail
      url: "/addService.php", 
      
      //GET method is used
      type: "POST",

      //pass the data     
      data: data,   
      
      //Do not cache the page
      cache: false,
      
      //success
      success: function (html) {
        l.stop();     
        //if process.php returned 1/true (send mail success)
        if (html=="good") {         
          //hide the form
          $('#serviceNameExists').hide();
          $('#notComplete').hide();
          $('#serviceAdded').show();
          Stripe.createToken({
            number: $('#thecard').val(),
            cvc: $('#thecvc').val(),
            exp_month: $('#themonth').val(),
            exp_year: $('#theyear').val()
          }, chargeAmount, stripeResponseHandler);
        } else if (html=="notComplete") {
          $('#serviceAdded').hide();
          $('#serviceNameExists').hide();
          $('#notComplete').show();
        } else if (html=="serviceNameExists") {
          $('#serviceAdded').hide();
          $('#notComplete').hide();
          $('#serviceNameExists').show();
        } else alert(html);       
      }   
    });
    return false;
  });

addService.php

<?php
require_once("/srv/www/mysite.com/public_html/includes/stripe-php/lib/Stripe.php");
  Stripe::setApiKey("sk_test_xxxxxxxxxxxxxxxxxxxxxxxx");
  
  // This line has got to have something to do with it. But the request from jQuery to this file sends info in POST.
  $token = ($_GET['stripeToken']) ?$_GET['stripeToken'] : $_POST['stripeToken'];
  Stripe_Customer::create(array(
    "card" => $token,
    "plan" => "standard",
    "email" => $customerInfo['email']
    )
  );
  // create a charge for $14.99, or 1,499 cents.
  Stripe_Charge::create(array(
  "amount" => 1499,
  "currency" => "usd",
  "card" => $token, // obtained with Stripe.js
  "description" => "New Mysite.com Service")
);
?>

theForm.html

<!-- Here's our form with id value of addservice-form, as the js expects -->
<form action="" method="POST" id="addservice-form">
<label>Service Name</label>
<input type="text" name="servicename" class="span3">
<label>API URL</label>
<input type="text" name="apiurl" class="span3">
<label>API Key</label>
<input type="text" name="apikey" class="span3">
<label>API Hash</label>
<input type="text" name="apihash" class="span3">
<label>Allowed IP's (comma separated list)</label>
<input type="text" name="allowedip" class="span3">
<label>Desired Status URL</label>
<div class="input-append">
  <input type="text" name="domain" class="span2" id="appendedInput">
  <span class="add-on">.myservice.com</span>
</div>
<label>Credit Card #</label>
<input type="text" data-stripe="number" id="thecard" placeholder="Card Number (eg: 1111222233334444)">
<label>Security Code</label>
<input type="text" data-stripe="cvc" id="thecvc" placeholder="CVC Code/Security Code (eg: 112)">
<label>Expiration Month</label>
<input type="text" data-stripe="exp-month" id="themonth" placeholder="Expiration Month (eg: 05)">
<label>Expiration Year</label>
<input type="text" data-stripe="exp-year" id="theyear" placeholder="Expiration Year (eg: 2013)">

<center><button type="submit" class="ladda-button btn btn-primary" data-style="expand-right" id="addservice-submit"><span class="ladda-label"><i class="icon-white icon-plus-sign"></i> Add Service</span><span class="ladda-spinner"></span></button></center>
<div class="clearfix"></div>
</form>

I see no reason why this won't work. And it's driving me insane.

A token isn't getting created for some reason. The javascript to append the hidden field named "stripeToken" to my #addservice-form looks like it should all be in working order.

The jQuery then runs addService.php sending the form contents as POST data.

Could the way I'm grabbing the form data and passing it to addService.php be the problem?

var data = $("#addservice-form").serialize();

That's how I'm doing it right now.

https://gist.github.com/tlongren/5924377#file-addservice-js-L18

Won't this code being here essentially submit my form twice?

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

Because the form gets submitted for real here when the button is clicked on:

var data = $("#addservice-form").serialize();

stripeResponseHandler isn't called until waaaay after the form has been sent via ajax.

I can append a hidden input form with stripeToken for the name and set token js variable. And modify stripeResponseHandler to just return false when it thinks it needs to add the form field and POST data.

I've also modified stripeResponseHandler to return false where it would normally try adding the hidden field, and showing stripe errors if there are any.

What should response be set to?

Getting Response Not Defined errors in Chrome.