title: Stripe.js and Laravel - Token not generated by Javascript or passed to server
body: <p>Query regarding stripe.js token. :)</p>
  
  <p>I have a basic checkout set up. I'm using Laravel and Stripe.js to process payments. I have followed a guide but seem to be having trouble getting Stripe.js to generate and pass a token to the server.</p>
  
  <p>Laravel Payment Form (validated with Parsley.js):</p>
  
  <pre><code>{!! Form::open(['url' =&gt; '/order/'.$order_info['script_id'].'/post', 'data-parsley-validate','id' =&gt; 'payment-form']) !!}
  
            &lt;div class="form-group" id="first-name-group"&gt;
                {!! Form::label('firstName', 'First Name:') !!}
                {!! Form::text('first_name', null, [
                    'class'                         =&gt; 'form-control',
                    'required'                      =&gt; 'required',
                    'data-parsley-required-message' =&gt; 'First name is required',
                    'data-parsley-trigger'          =&gt; 'change focusout',
                    'data-parsley-pattern'          =&gt; '/^[a-zA-Z]*$/',
                    'data-parsley-minlength'        =&gt; '2',
                    'data-parsley-maxlength'        =&gt; '32',
                    'data-parsley-class-handler'    =&gt; '#first-name-group'
                    ]) !!}
            &lt;/div&gt;
  
            &lt;div class="form-group" id="last-name-group"&gt;
                {!! Form::label('lastName', 'Last Name:') !!}
                {!! Form::text('last_name', null, [
                    'class'                         =&gt; 'form-control',
                    'required'                      =&gt; 'required',
                    'data-parsley-required-message' =&gt; 'Last name is required',
                    'data-parsley-trigger'          =&gt; 'change focusout',
                    'data-parsley-pattern'          =&gt; '/^[a-zA-Z]*$/',
                    'data-parsley-minlength'        =&gt; '2',
                    'data-parsley-maxlength'        =&gt; '32',
                    'data-parsley-class-handler'    =&gt; '#last-name-group'
                    ]) !!}
            &lt;/div&gt;
  
            &lt;div class="form-group" id="email-group"&gt;
                {!! Form::label('email', 'Email address:') !!}
                {!! Form::email('email', null, [
                    'class' =&gt; 'form-control',
                    'placeholder'                   =&gt; 'email@example.com',
                    'required'                      =&gt; 'required',
                    'data-parsley-required-message' =&gt; 'Email name is required',
                    'data-parsley-trigger'          =&gt; 'change focusout',
                    'data-parsley-class-handler'    =&gt; '#email-group'
                    ]) !!}
            &lt;/div&gt;
  
  
            &lt;div class="form-group" id="cc-group"&gt;
                {!! Form::label(null, 'Credit card number:') !!}
                {!! Form::text(null, null, [
                    'class'                         =&gt; 'form-control ',
                    'id'                            =&gt; 'card-number',
                    'required'                      =&gt; 'required',
                    'data-parsley-type'             =&gt; 'number',
                    'maxlength'                     =&gt; '16',
                    'data-parsley-trigger'          =&gt; 'change focusout',
                    'data-parsley-class-handler'    =&gt; '#cc-group'
                    ]) !!}
            &lt;/div&gt;
  
            &lt;div class="form-group" id="ccv-group"&gt;
                {!! Form::label(null, 'Card Validation Code (3 or 4 digit number):') !!}
                {!! Form::text(null, null, [
                    'class'                         =&gt; 'form-control',
                    'id'                            =&gt; 'card-cvc',
                    'required'                      =&gt; 'required',
                    'data-parsley-type'             =&gt; 'number',
                    'data-parsley-trigger'          =&gt; 'change focusout',
                    'maxlength'                     =&gt; '4',
                    'data-parsley-class-handler'    =&gt; '#ccv-group'
                    ]) !!}
            &lt;/div&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                &lt;div class="form-group" id="exp-m-group"&gt;
                    {!! Form::label(null, 'Ex. Month') !!}
                    {!! Form::selectMonth(null, null, [
                        'class'                 =&gt; 'form-control',
                        'id'                    =&gt; 'card-expiry-month',
                        'required'              =&gt; 'required'
                    ], '%m') !!}
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                &lt;div class="form-group" id="exp-y-group"&gt;
                    {!! Form::label(null, 'Ex. Year') !!}
                    {!! Form::selectYear(null, date('Y'), date('Y') + 10, null, [
                        'class'             =&gt; 'form-control',
                        'id'                =&gt; 'card-expiry-year',
                        'required'          =&gt; 'required'
                        ]) !!}
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
  
              &lt;div class="form-group"&gt;
                  {!! Form::submit('Place order!', ['class' =&gt; 'btn btn-primary btn-order', 'id' =&gt; 'submitBtn', 'style' =&gt; 'margin-bottom: 10px;']) !!}
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="col-md-12"&gt;
                    &lt;span class="payment-errors" style="color: red;margin-top:10px;"&gt;&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
          {!! Form::close() !!}
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  &lt;!-- Inlude Stripe.js --&gt;
  &lt;script type="text/javascript" src="https://js.stripe.com/v2/"&gt;&lt;/script&gt;
  &lt;script&gt;
      // This identifies your website in the createToken call below
      Stripe.setPublishableKey('{!! env('STRIPE_PK') !!}');
  
  
      jQuery(function($) {
          $('#payment-form').submit(function(event) {
              var $form = $(this);
  
              // Before passing data to Stripe, trigger Parsley Client side validation
              $form.parsley().subscribe('parsley:form:validate', function(formInstance) {
                  formInstance.submitEvent.preventDefault();
                  return false;
              });
  
              // Disable the submit button to prevent repeated clicks
              $form.find('#submitBtn').prop('disabled', true);
  
             Stripe.card.createToken({
                number: $('#card-number').val(),
                cvc: $('#card-cvc').val(),
                exp_month: $('#card-expiry-month').val(),
                exp_year: $('#card-expiry-year').val()
              }, stripeResponseHandler);
  
              // Prevent the form from submitting with the default action
              return false;
          });
      });
  
      function stripeResponseHandler(status, response) {
  
          console.log(token); //outputs "undefined" to console
  
          var $form = $('#payment-form');
  
          if (response.error) {
              // Show the errors on the form
              $form.find('.payment-errors').text(response.error.message);
              $form.find('.payment-errors').addClass('alert alert-danger');
              $form.find('#submitBtn').prop('disabled', false);
              $('#submitBtn').button('reset');
          } 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($('&lt;input type="hidden" name="stripeToken" /&gt;').val(token));
              // and submit
              $form.get(0).submit();
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller Action:</p>
  
  <pre><code>    public function postOrder(Request $request, $script_id){
  
      $validator = \Validator::make(\Input::all(), [
          'first_name' =&gt; 'required|string|min:2|max:32',
          'last_name' =&gt; 'required|string|min:2|max:32',
          'email' =&gt; 'required|email',
      ]);
  
      if ($validator-&gt;fails()) {
          return redirect()-&gt;back()
              -&gt;withErrors($validator);
      }
  
      $token = $request-&gt;input('stripeToken');
      //dd($token);
      $first_name = $request-&gt;input('first_name');
      $last_name = $request-&gt;input('last_name');
      $email = $request-&gt;input('email');
      $price = $request-&gt;input['price'];
      $emailCheck = User::where('email', $email)-&gt;value('email');
  
      //dd($emailCheck);
  
      \Stripe\Stripe::setApiKey(env('STRIPE_SK'));
  
      // If the email doesn't exist in the database create new customer and user record
      if (!isset($emailCheck)) {
          // Create a new Stripe customer
          try {
  
              $customer = \Stripe\Customer::create([
              'source' =&gt; $token,
              'email' =&gt; $email,
              'metadata' =&gt; [
                  "First Name" =&gt; $first_name,
                  "Last Name" =&gt; $last_name
              ]
              ]);
          } catch (\Stripe\Error\Card $e) {
              return "fail";
          }
      }
  
  
         // dd(Auth::user()-&gt;stripe_customer_id);
  
          if(Auth::user()-&gt;stripe_customer_id == ""){
              $user = Auth::user();
              $user-&gt;stripe_customer_id = $customer-&gt;id;
              $user-&gt;save();
              $customerID = $customer-&gt;id;
          }
  
          else{
              $customerID = Auth::user()-&gt;stripe_customer_id;
          }
  
      // charge customer
  
       //   dd($customerID);
  
      try {
          $charge = \Stripe\Charge::create([
              'amount' =&gt; $price,
              'currency' =&gt; 'usd',
              'customer' =&gt; $customerID,
              'metadata' =&gt; [
                  'product_name' =&gt; "Vidmaker Purchase"
              ]
              ]);
  
      } catch (\Stripe\Error\Card $e) {
         /* return redirect()-&gt;route('order')
              -&gt;withErrors($e-&gt;getMessage())
              -&gt;withInput();*/
              dd($e-&gt;getMessage());
      }
  
      Order::create([
          'user_id' =&gt; $user-&gt;id,
          'script_id' =&gt; $script_id,
          'amount' =&gt; $price,
          'stripe_transaction_id' =&gt; $charge-&gt;id,
      ]);
  
      /*return redirect()-&gt;route('order')
          -&gt;with('successful', 'Your purchase was successful!');*/
  
          return "Success";
  
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p>When I try use "stripeToken" on the server it is null - I checked it and it's not being passed in the POST method.</p>
  
  <p>I've been tinkering with the JS for hours. I even have the card details printing out to the console find. But when passed into Stripe.card.createToken() no token is generated.</p>
  
  <p>It proceeds to the server anyways and the Stripe::charge() action catches an error saying :</p>
  
  <blockquote>
    <p>"Cannot charge a customer that has no active card"</p>
  </blockquote>
  
  <p>Anyone have any idea? I've spend a good six hours and at this point I'm truly stumped. </p>
  
  <p>Cheers,
  Dean </p>