title: Pass form to controller
body: <p>Im trying to use Stripe card Element Example. When I pass the form just receive by $_POST the TokenId. I need to pass all the information of  the form. 
  The form works and looks very well , but when I send the form in index.js in the last function stripeTokenHandler(token). 
  the form does not seem to be there. I've been spinning around, I can not understand it. I'd appreciate any suggestion or help..</p>
  
  <p>pass the form with name.</p>
  
  <p>The view and the form </p>
  
  <pre><code>                    &lt;form action="Stripe2/createCharge2" method="POST" id="payment-form"&gt;
                          &lt;div class="fieldset"&gt;
                              &lt;input id="example3-name" name="name" data-tid="elements_examples.form.name_label" class="field" type="text" placeholder="Nombre" required=""&gt;
                              &lt;input id="example3-email" name="email" data-tid="elements_examples.form.email_label" class="field half-width" type="email" placeholder="Correo electrónico" required=""&gt;
                              &lt;input id="example3-phone" name="phone" data-tid="elements_examples.form.phone_label" class="field half-width" type="tel" placeholder="Teléfono" required=""&gt;
                          &lt;/div&gt;
                          &lt;div class="fieldset"&gt;
                              &lt;div id="example3-card-number" class="field empty"&gt;&lt;/div&gt;
                              &lt;div id="example3-card-expiry" class="field empty half-width"&gt;&lt;/div&gt;
                              &lt;div id="example3-card-cvc" class="field empty half-width"&gt;&lt;/div&gt;
  
                          &lt;/div&gt;
                          &lt;button type="submit" data-tid="elements_examples.form.pay_button"&gt;Pay $25&lt;/button&gt;
                          &lt;div class="error" role="alert"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17"&gt;
                                  &lt;path class="base" fill="#000" d="M8.5,17 C3.80557963,17 0,13.1944204 0,8.5 C0,3.80557963 3.80557963,0 8.5,0 C13.1944204,0 17,3.80557963 17,8.5 C17,13.1944204 13.1944204,17 8.5,17 Z"&gt;&lt;/path&gt;
                                  &lt;path class="glyph" fill="#FFF" d="M8.5,7.29791847 L6.12604076,4.92395924 C5.79409512,4.59201359 5.25590488,4.59201359 4.92395924,4.92395924 C4.59201359,5.25590488 4.59201359,5.79409512 4.92395924,6.12604076 L7.29791847,8.5 L4.92395924,10.8739592 C4.59201359,11.2059049 4.59201359,11.7440951 4.92395924,12.0760408 C5.25590488,12.4079864 5.79409512,12.4079864 6.12604076,12.0760408 L8.5,9.70208153 L10.8739592,12.0760408 C11.2059049,12.4079864 11.7440951,12.4079864 12.0760408,12.0760408 C12.4079864,11.7440951 12.4079864,11.2059049 12.0760408,10.8739592 L9.70208153,8.5 L12.0760408,6.12604076 C12.4079864,5.79409512 12.4079864,5.25590488 12.0760408,4.92395924 C11.7440951,4.59201359 11.2059049,4.59201359 10.8739592,4.92395924 L8.5,7.29791847 L8.5,7.29791847 Z"&gt;&lt;/path&gt;
                              &lt;/svg&gt;
                              &lt;span class="message"&gt;&lt;/span&gt;&lt;/div&gt;
                   &lt;/form&gt;
  
  </code></pre>
  
  <p>The Example 3 . JS </p>
  
  <pre><code>(function () {
      'use strict';
  
      var elements = stripe.elements({
          fonts: [
              {
                  cssSrc: 'https://fonts.googleapis.com/css?family=Quicksand',
              },
          ],
          // Stripe's examples are localized to specific languages, but if
          // you wish to have Elements automatically detect your user's locale,
          // use `locale: 'auto'` instead.
          locale: window.es,
      });
  
      var elementStyles = {
          base: {
              color: '#fff',
              fontWeight: 600,
              fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif',
              fontSize: '16px',
              fontSmoothing: 'antialiased',
  
              ':focus': {
                  color: '#424770',
              },
  
              '::placeholder': {
                  color: '#9BACC8',
              },
  
              ':focus::placeholder': {
                  color: '#CFD7DF',
              },
          },
          invalid: {
              color: '#fff',
              ':focus': {
                  color: '#FA755A',
              },
              '::placeholder': {
                  color: '#FFCCA5',
              },
          },
      };
  
      var elementClasses = {
          focus: 'focus',
          empty: 'empty',
          invalid: 'invalid',
      };
  
      var cardNumber = elements.create('cardNumber', {
          style: elementStyles,
          classes: elementClasses,
      });
      cardNumber.mount('#example3-card-number');
  
      var cardExpiry = elements.create('cardExpiry', {
          style: elementStyles,
          classes: elementClasses,
      });
      cardExpiry.mount('#example3-card-expiry');
  
      var cardCvc = elements.create('cardCvc', {
          style: elementStyles,
          classes: elementClasses,
      });
      cardCvc.mount('#example3-card-cvc');
  
      registerElements([cardNumber, cardExpiry, cardCvc], 'example3');
  })();
  </code></pre>
  
  <p>The JS Index.js</p>
  
  <pre><code>function registerElements(elements, exampleName) {
      var formClass = '.' + exampleName;
      var example = document.querySelector(formClass);
  
      var form = example.querySelector('form');
      var resetButton = example.querySelector('a.reset');
      var error = form.querySelector('.error');
      var errorMessage = error.querySelector('.message');
  
      function enableInputs() {
          Array.prototype.forEach.call(
              form.querySelectorAll(
                  "input[type='text'], input[type='email'], input[type='tel']"
              ),
              function (input) {
                  input.removeAttribute('disabled');
              }
          );
      }
  
      function disableInputs() {
          Array.prototype.forEach.call(
              form.querySelectorAll(
                  "input[type='text'], input[type='email'], input[type='tel']"
              ),
              function (input) {
                  input.setAttribute('disabled', 'true');
              }
          );
      }
  
      // Listen for errors from each Element, and show error messages in the UI.
      elements.forEach(function (element) {
          element.on('change', function (event) {
              if (event.error) {
                  error.classList.add('visible');
                  errorMessage.innerText = event.error.message;
              } else {
                  error.classList.remove('visible');
              }
          });
      });
  
      // Listen on the form's 'submit' handler...
      var form = document.getElementById('payment-form');
      form.addEventListener('submit', function (e) {
          e.preventDefault();
          // stripe.createToken(elements[0].then(function(result){
          //     if (resuacalt.error) {
          //         // Inform the user if there was an error.
          //         var errorElement = document.getElementById('card-errors');
          //         errorElement.textContent = result.error.message;
          //         } else {
          //             // Send the token to your server.
          //             stripeTokenHandler(result.token);
          //         }
          //     });
          // });
          // Show a loading screen...
          example.classList.add('submitting');
  
  
  
          // Disable all inputs.
          disableInputs();
  
  
          // Gather additional customer data we may have collected in our form.
          var name = form.querySelector('#' + exampleName + '-name');
          var address1 = form.querySelector('#' + exampleName + '-address');
          var city = form.querySelector('#' + exampleName + '-city');
          var state = form.querySelector('#' + exampleName + '-state');
          var zip = form.querySelector('#' + exampleName + '-zip');
          var additionalData = {
              name: name ? name.value : undefined,
              address_line1: address1 ? address1.value : undefined,
              address_city: city ? city.value : undefined,
              address_state: state ? state.value : undefined,
              address_zip: zip ? zip.value : undefined,
          };
  
          // Use Stripe.js to create a token. We only need to pass in one Element
          // from the Element group in order to create a token. We can also pass
          // in the additional customer data we collected in our form.
          stripe.createToken(elements[0], additionalData).then(function (result) {
              // Stop loading!
              example.classList.remove('submitting');
  
              if (result.token) {
                  // If we received a token, show the token ID.
                  stripeTokenHandler(result.token);
                  example.querySelector('.token').innerText = result.token.id;
                  example.classList.add('submitted');
              } else {
                  // Otherwise, un-disable inputs.
                  enableInputs();
              }
          });
      });
  
      resetButton.addEventListener('click', function (e) {
          e.preventDefault();
          // Resetting the form (instead of setting the value to `''` for each input)
          // helps us clear webkit autofill styles.
          form.reset();
  
          // Clear each Element.
          elements.forEach(function (element) {
              element.clear();
          });
  
          // Reset error state as well.
          error.classList.remove('visible');
  
          // Resetting the form does not un-disable inputs, so we need to do it separately:
          enableInputs();
          example.classList.remove('submitted');
      });
      function stripeTokenHandler(token) {
          // Insert the token ID into the form so it gets submitted to the server
          var form = document.getElementById('payment-form');
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'stripeToken');
          hiddenInput.setAttribute('value', token.id);
          form.appendChild(hiddenInput);
  
          // Submit the form
          form.submit();
      }
  }
  </code></pre>
  
  <p>And Finally in my Class stripe2 function createCharge2()</p>
  
  <pre><code>   public function createCharge2()
      {
          \Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXX");
  
          print_r($_POST);
          exit();
  </code></pre>
  
  <p>Result  </p>
  
  <p>Array ( [stripeToken] => tok_1ENZWMEZa7Hruxtoa50HvXXXX )</p>
  
  <p>I expect the data of the form and the token in the $_POST</p>