title: Setting up Stripe Elements in PHP? Seems like my php code is not communicating properly with my JS
body: <p>I'm trying to set up Stripe Elements, and I'm quite new to this.</p>
  
  <p>So, I included every bit of JS which was on the stripe docs about elements, I installed the Stripe API, and required it, also linked to the Stripe JS. This is how far I came, the PHP is on the top in the index.php file which also contains the HTML and js below the PHP.</p>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?php 
  
  require('C:/xampp2/htdocs/stripe/vendor/stripe/stripe-php/init.php');
  
  
  // Set your secret key: remember to change this to your live secret key in production
  // See your keys here: https://dashboard.stripe.com/account/apikeys
  \Stripe\Stripe::setApiKey("my_test_key");
  
  // Token is created using Checkout or Elements!
  // Get the payment token ID submitted by the form:
  $token = $_POST['stripeToken'];
  
  // Charge the user's card:
  $charge = \Stripe\Charge::create(array(
    "amount" =&gt; 1000,
    "currency" =&gt; "usd",
    "description" =&gt; "Example charge",
    "source" =&gt; $token,
  ));
  
  ?&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form action="/charge" method="post" id="payment-form"&gt;
    &lt;div class="form-row"&gt;
      &lt;label for="card-element"&gt;
        Credit or debit card
      &lt;/label&gt;
      &lt;div id="card-element"&gt;
        &lt;!-- a Stripe Element will be inserted here. --&gt;
      &lt;/div&gt;
  
      &lt;!-- Used to display Element errors --&gt;
      &lt;div id="card-errors" role="alert"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button&gt;Submit Payment&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var stripe = Stripe('pk_test_wzqlUMA7qtsfN4RZnm9IOSkQ');
  var elements = stripe.elements();
  
  // Custom styling can be passed to options when creating an Element.
  var style = {
    base: {
      // Add your base input styles here. For example:
      fontSize: '16px',
      lineHeight: '24px'
    }
  };
  
  // Create an instance of the card Element
  var card = elements.create('card', {style: style});
  
  // Add an instance of the card Element into the `card-element` &lt;div&gt;
  card.mount('#card-element');
  
  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });
  
  // Create a token or display an error when the form is submitted.
  var form = document.getElementById('payment-form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();
  
    stripe.createToken(card).then(function(result) {
      if (result.error) {
        // Inform the customer that 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);
      }
    });
  });
  
  on 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();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm kinda lost in this whole thing... Could you give me some idiotproof guidelines, please?</p>
  
  <p>I also tried to change the action of the  to a custom .php file which contains the php code above, but same result. Seems like my php code cannot communicate with the javascript. Chrome devtool console shows no general javascript errors.</p>
  
  <p>Thanks in advance for any help</p>