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

时间:2018-10-28 21:21:53

标签: javascript html json stripe-payments

这个问题使我的头脑连续几个小时跑动。

这是我的charge.js(当然,该文件已包含在我的页面中)-

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

这是我的付款表格-

<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>

这里的确切问题是,确实有一个POST请求在用户提交他们的付款表单后被提交回我的服务器,但是,POST请求中不包含stripeToken。令我感到困惑的是,这在我的本地主机Web服务器上运行得很好,但是当我将代码转移到我的 new 远程Linux服务器上时,出现了这个问题。我根本没有更改代码 。也许我在本地服务器上安装了一些我尚未安装的新服务器,但我需要使条纹工作吗?我不知道。万一发生问题,确实发生了改变的一件事是,我的本地服务器正在运行Debian(付款网关正在运行),而远程服务器正在运行CentOS(付款网关不在工作)。

我认为与该问题无关的几件事:

  • 我的远程服务器和本地主机都在HTTP而不是HTTPS上运行,但是我使用的是Stripe的测试API,如果您不使用HTTPS则没关系
  • 该令牌肯定已创建,我知道这一点,因为我可以转到我的Stripe仪表板,查看来自服务器的请求日志和来自Stripe服务器的响应日志。 Stripe的服务器肯定在响应令牌对象。

这是Stripe服务器响应我的一个请求而发送回的真实响应主体(由于某种原因,令牌ID未被捕获并通过POST请求发送到我的服务器)-

{
  "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
}

我将非常感谢我能提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

因此,当我实际上在JSFiddle(https://jsfiddle.net/jhx0tpgd/)上执行代码时,我可以看到实际上有一个令牌被创建为作为隐藏的{{ 1}}个元素,带有<input>。这表明它实际上是与表格一起提交的;但是,您的后端无法正确解析。想要使用您的一些后端代码来更新它吗?

Code Result