POST请求中未发送条纹卡令牌

Question

This problem has had my mind running in circles for hours straight.

Here is my charge.js (which is being included on my page of course) -

var stripe = Stripe('pk_test_CFDzAKw1Ez7vYVppjhP0EHLj');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    lineHeight: '18px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var cardNumberElement = elements.create('cardNumber', {
  style: style,
  placeholder: '0000 0000 0000 0000',
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = elements.create('cardExpiry', {
  style: style,
  placeholder: 'MM/YY',
});
cardExpiryElement.mount('#card-expiry-element');

var cardCvcElement = elements.create('cardCvc', {
  style: style,
  placeholder: '123',
});
cardCvcElement.mount('#card-cvc-element');

// Handle real-time validation errors from the card Element.
cardNumberElement.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission.
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var options = {
    address_zip: document.getElementById('postal-code').value,
  };

  stripe.createToken(cardNumberElement,cardExpiryElement,cardCvcElement,     options).then(function(result) {
if (result.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);

}
  });
});

    function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the     server
    var form = document.getElementById('payment-form');

// Add Stripe Token to hidden input
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);

// Submit form
    form.submit();
}

Here is my payment form -

<form action="purchase.php?p='.$_GET["p"].'" method="post" id="payment-form" style="width:100%">
  <div class="form-group">
      <label>
        <span>Card number</span><br>
        <div id="card-number-element" class="field" style="width:185px"></div>
      </label><br>
      <label>
        <span>Expiry date</span><br>
        <div id="card-expiry-element" class="field" style="width:80px"></div>
      </label><br>
      <label>
        <span>CVC</span><br>
        <div id="card-cvc-element" class="field" style="width:60px"></div>
      </label><br>
      <label>
        <span>Billing ZIP/Postal</span><br>
        <input id="postal-code" maxlength="12" name="postal_code" class="field" placeholder="00000" style="color: #32325d;
    lineHeight: 18px;
    fontFamily: \'Helvetica Neue\', Helvetica, sans-serif;
    fontSmoothing: antialiased;
    fontSize: 16px;
    width:70px;"/>
      </label>
    <div id="card-errors" role="alert" style="width:100%"></div>
<input type="checkbox" class="form-check-input" name="agree" value="True" onchange="document.getElementById(\'myButton\').disabled = !this.checked;">
                  <label class="form-check-label" for="gdpr">I have read and I agree to the <a href="tos.php" >Terms of Service</a> and <a href="privacy.php">Privacy Policy</a> and I agree that I am at least 18 years old. I agree to be billed $0.99 now and then after the 24-hour trial period has ended, I agree to be billed $9.99 every month until this subscription is cancelled (unless I cancel my subscription before the trial period is over). I understand that I can cancel my subscription any time by nagivating to my account page and selecting the "Cancel Subscription" tab.</label>
  </div>
  <button type="submit" id="myButton" disabled="disabled" href="#" class="btn btn-lg btn-success" style="background-image: linear-gradient(to right, #00cc00, #009900); text-shadow: 2px 2px 2px #004d00; border: 0px solid;box-shadow: 3px 3px 5px #989898;" action="purchase.php?p='.$_GET['p'].'" >Submit Payment</a>
</form>

The exact problem here is that there IS indeed a POST request being submitted back to my server after the user submits their payment form, however, the POST request doesn't contain the stripeToken in it. What's boggling my mind is that this was working perfectly fine on my localhost web server, but when I transferred the code to my new remote linux server, this problem arose. I did not change the code at all . Perhaps I installed something on my local server that I haven't installed on my new linux server which I need to make stripe work? I have no idea. One thing that did change just in case it matters is the fact that my local server is running Debian (where the payment gateway was working on) and my remote server is running CentOS (where the payment gateway is not working on).

A couple of things that I don't think have to do with the problem:

• My remote server and localhost were both running on HTTP and not HTTPS, however I'm using Stripe's test API where it doesn't matter if you're not using HTTPS
• The token is for sure being created, I know this because I can go to my Stripe dashboard and see the logs of the request from my server and the response from Stripe's servers. Stripe's servers are definitely responding with the token object.

Here's a real response body that Stripe's servers have sent back in response to one of my requests (where the token id isn't being captured and sent in a POST request to my server for some reason) -

{
  "id": "tok_1DQL4bIAEZ0ObfZBhoVoU1T4",
  "object": "token",
  "card": {
    "id": "card_1DQL4aIAEZ0ObfZBDSWbPhrb",
    "object": "card",
    "address_city": null,
    "address_country": null,
    "address_line1": null,
    "address_line1_check": null,
    "address_line2": null,
    "address_state": null,
    "address_zip": null,
    "address_zip_check": null,
    "brand": "Visa",
    "country": "US",
    "cvc_check": "unchecked",
    "dynamic_last4": null,
    "exp_month": 4,
    "exp_year": 2024,
    "funding": "credit",
    "last4": "4242",
    "metadata": {
    },
    "name": null,
    "tokenization_method": null
  },
  "client_ip": "x.x.x.x",
  "created": 1540759285,
  "livemode": false,
  "type": "card",
  "used": false
}

I will greatly appreciate any help I can get.

Answer 1

So when I actually execute your code on a JSFiddle ( https://jsfiddle.net/jhx0tpgd/ ), I can see that there is in fact a token getting created and attached to the form as a hidden <input> -element with name="stripeToken" . This suggests that it is in fact submitting along with the form; however, your backend isn't correctly parsing it out. Care to update this with some of your backend code?