javascript - Submit form after creating stripe token


Unable to submit form using jquery with stripe.js plugin. I want to submit form after creating stripe token. Jquery validation is working good. It showing an error message in console "object is not a function" , i am able to create token.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  <html xmlns="" xml:lang="en" lang="en">

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.21" />

    <script type="text/javascript" src=""></script>
      <script src=""></script>
    <script src=""></script>

  <!-- ///////////////////////////////////////////////////////////////////////////////// -->
    <!-- CONTACT FORM -->
    <div >

       <h3 >Say Hello! Ask something?</h3>        

  <form id="signupForm" method="post" action="">
        <legend>Validating a complete form</legend>
          <label for="firstname">Firstname</label>
          <input id="firstname" name="firstname" type="text">
          <label for="lastname">Lastname</label>
          <input id="lastname" name="lastname" type="text">
          <label for="username">Username</label>
          <input id="username" name="username" type="text">

       <div >
       <span ></span>
       <div >
         <label>Card Number</label>
         <input type="text" size="20" autocomplete="off" value="4242424242424242">
       <div >
         <input type="text" size="4" autocomplete="off" value="424">
       <div >
         <label>Expiration (MM/YYYY)</label>
         <input type="text" size="2" placeholder="MM" value="05">

         <input type="text" size="4" placeholder="YYYY" value="2018">

          <input type="submit" name="submit" id="submit" value="Submit"/>



    function stripeResponseHandler(status, response) {
     var $form = $('#signupForm');

     if (response.error) {
      // Show the errors on the form
      $form.find('#submit').prop('disabled', false);
     } else {
      // response contains id and card, which contains additional card details
      var token =;
      // Insert the token into the form so it gets submitted to the server
      $form.append($('<input type="hidden" name="stripeToken" />').val(token));
      // and submit

    $().ready(function() {
        rules: {
          firstname: "required",
          lastname: "required",
          username: {
            required: true,
            minlength: 2
        messages: {
          firstname: "Please enter your firstname",
          lastname: "Please enter your lastname",
          username: {
            required: "Please enter a username",
            minlength: "Your username must consist of at least 2 characters"
      submitHandler: function(form) {

            number: $('.card-number').val(),
            cvc: $('.card-cvc').val(),
            exp_month: $('.card-expiry-month').val(),
            exp_year: $('.card-expiry-year').val()
          }, stripeResponseHandler);
          return false; // submit from callback





@matthew-arkin helped me to fix this problem. Just remove the name and id attributes from the submit button.its conflicting with the default .submit() action

Use :

<input class="btn" type="submit" value="Submit"/>

Instead of :

<input class="btn" type="submit" name="submit" id="submit" value="Submit"/>

People are also looking for solutions to the problem: php - The use of UrlEncodedFormEntity to send passwords


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.