令牌创建在条带上不起作用

Question

I'm trying to create and then submit to my server side code, but when I click on the submit button, the $_POST['stripeToken'] doesn't exist and I have no idea why.

Here is my code:

<div class="ui main container">
  <form action="paiement.php" class="ui form" id="payment_form" method="post">
    <div class="field">
      <input type="text" name="clientNom" required placeholder="Votre nom" value="John Kennedy">
    </div>
    <div class="field">
      <input type="email" name="clientEmail" required placeholder="votre@email.fr" value="john.kennedy@gmail.com">
    </div>
    <input type="hidden" name="commandeTotal" value="<?php echo $somme ?>">
    <div class="field">
      <input type="tel" name="clientTelephone" required placeholder="votre@email.fr" value="0102030405">
    </div>
    <div class="field">
      <input type="text" placeholder="Votre code de carte bleu" data-stripe="number" value="4242 4242 4242 4242">
    </div>
    <div class="field">
      <input type="text" placeholder="MM" data-stripe="exp_month" value="10">
    </div>
    <div class="field">
      <input type="text" placeholder="YY" data-stripe="exp_year" value="18">
    </div>
    <div class="field">
      <input type="text" placeholder="CVC" data-stripe="cvc" value="123">
    </div>
    <p>
      <button class="ui button" type="submit">Acheter</button>
    </p>
  </form>
</div>

Stripe.setPublishableKey('pk_test_my publishable key')
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);
    }
  });
});

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();
}

The server side code is just an echo of the values of my form. Thanks for your answers.

Answer 1

The reason of this is that in your JavaScript you refer to form by id payment-form but in your html form you have id payment_form (underscore _ instead of hyphen - ).

By the way there is no need for var form = document.getElementById('payment-form'); inside the stripeTokenHandler function because you already have that assigned earlier.