Javascript 创建条带令牌时出现问题：402（需要付款）错误

大家好,

              <!-- Package name to be submitted to server -->
              <input type="hidden" id="packageName" value="{{ packageName|capitalize }}">

              <!-- Username to be submitted to server -->
              <input type="hidden" id="userName" value="{{ userName }}">
               <input type="hidden" id="customerName" value="{{ customerName }}">



              <div class="form-row">
                <label for="cardHolder">Cardholder Name</label><br>
                  <input type="text" id="cardHolder" size="20" data-stripe="name">
                </label>
              </div>
              <br><br>


              <div class="form-row">
                <label for="cardNumber">Card Number </label><br>
                  <input type="text" id="cardNumber" size="20" data-stripe="number">
                </label>
              </div>
              <br>
              <img src="/public/images/credit-card/visa.png" class="card-visa">
              <img src="/public/images/credit-card/mastercard.png" class="card-mastercard">
                <img src="/public/images/credit-card/american-express.png" class="card-aexpress">




              <br>

              <div class="form-row">
                <label for="cardExpiration"> Expiration (MM/YY)</label><br>
                  <input class="expirationNumber" type="text" size="2" id="cardExpiration" data-stripe="exp_month">
                </label>
                <span> / </span>
                <input class="expirationNumber" type="text" size="2" data-stripe="exp_year">
              </div>
              <br><br>

              <div class="form-row">
                <label for="cardCVC">CVC</label><br>
                  <input type="text" id="cardCVC" size="4" data-stripe="cvc">
                </label>
              </div>

              </div>
            </div>

             <input type="checkbox" id="checkbox"> 
             <label for="checkbox">By purchasing this package you are agreeing to our Terms & Conditions</label><br><br>
              <h4 id="checkboxError"></h4>
               <button type="submit" class="submit btn-tangerine">Submit Payment</button>

              </form>

以下是控制台中抛出的错误代码：

   (index):3 POST https://api.stripe.com/v1/tokens 402 (Payment Required)

(index):3 POST https://api.stripe.com/v1/tokens 402 (Payment Required)c @ (index):3e @ (index):3a @ (index):3Stripe.isDoubleLoaded.Stripe.xhr @ (index):3Stripe.a._rawRequest @ (index):2Stripe.a.request @ (index):2Stripe.token.a.create @ (index):2Stripe.card.b.createToken @ (index):2Stripe.a._channelListener @ (index):2incoming @ (index):2f @ (index):2

              <!-- Package name to be submitted to server -->
              <input type="hidden" id="packageName" value="{{ packageName|capitalize }}">

              <!-- Username to be submitted to server -->
              <input type="hidden" id="userName" value="{{ userName }}">
               <input type="hidden" id="customerName" value="{{ customerName }}">



              <div class="form-row">
                <label for="cardHolder">Cardholder Name</label><br>
                  <input type="text" id="cardHolder" size="20" data-stripe="name">
                </label>
              </div>
              <br><br>


              <div class="form-row">
                <label for="cardNumber">Card Number </label><br>
                  <input type="text" id="cardNumber" size="20" data-stripe="number">
                </label>
              </div>
              <br>
              <img src="/public/images/credit-card/visa.png" class="card-visa">
              <img src="/public/images/credit-card/mastercard.png" class="card-mastercard">
                <img src="/public/images/credit-card/american-express.png" class="card-aexpress">




              <br>

              <div class="form-row">
                <label for="cardExpiration"> Expiration (MM/YY)</label><br>
                  <input class="expirationNumber" type="text" size="2" id="cardExpiration" data-stripe="exp_month">
                </label>
                <span> / </span>
                <input class="expirationNumber" type="text" size="2" data-stripe="exp_year">
              </div>
              <br><br>

              <div class="form-row">
                <label for="cardCVC">CVC</label><br>
                  <input type="text" id="cardCVC" size="4" data-stripe="cvc">
                </label>
              </div>

              </div>
            </div>

             <input type="checkbox" id="checkbox"> 
             <label for="checkbox">By purchasing this package you are agreeing to our Terms & Conditions</label><br><br>
              <h4 id="checkboxError"></h4>
               <button type="submit" class="submit btn-tangerine">Submit Payment</button>

              </form>

下面是javascript代码

// Generate the user token
$(function() {


      // Once the user has submited the form
      $(".submit").click(function(e) {

                  // Prevent the form from submiting by default
          e.preventDefault();

          // Ensure that checkbox is checked
          if($('#checkbox').is(":checked")) {

            // Prevent the form from submiting by default
            var $form = $('#payment-form');

            // Request a token from Stripe:
            Stripe.card.createToken($form, stripeResponseHandler);

            // Prevent the form from being submitted:
            return false;
          }
          else {

        // Display an error message to the user by writting directly into the header error tag
        document.getElementById('checkboxError').innerHTML = "You must kindly accept the terms and conditions to continue.";
          }
       });

      // Ensure that checkbox is checked
      if($('#checkbox').is(":checked")) {

        var appendedStripeToken = false;

        function stripeResponseHandler(status, response) {
          // Grab the form:
          var $form = $('#payment-form');

          if (response.error) { // Problem!

            // Scroll to the billing section
            $("#billingError").scrollTop();

            // Show the errors on the form:
            $form.find('.payment-errors').text(response.error.message);
            $form.find('.submit').prop('disabled', false); // Re-enable submission

          } else { // Token was created!

            // Get the token ID:
            var token = response.id;
            handleCall(token);

          }

          // What to do after the token has been generated.
          function handleCall(token) { 
           var $form = $('#payment-form');
            if (!appendedStripeToken) { 
                // Insert the token into the form so it gets submitted to the server
                appendedStripeToken = true; 
                phpCall(); 
            } 
          }

          // Post the package name, the token, and the user name information to the billing.php page
          function phpCall() {
           if( appendedStripeToken === true ){
             $.ajax({
              type: "POST",
              data: {run: true, packageName: $('#packageName').val(), token: token, userName: $('#userName').val(),customerName: $('#customerName').val() },
              url: '/app/functions/billing.php',
              success: function (response) {//response is value returned from php (for    your example it's "bye bye"
                            $('#payment-form').prop('disabled', true); // TODO: give your html-submit-input-tag an "id" attribute
              window.location = response;
                }
               });
             }
            } 
          }

      } 


});

              <!-- Package name to be submitted to server -->
              <input type="hidden" id="packageName" value="{{ packageName|capitalize }}">

              <!-- Username to be submitted to server -->
              <input type="hidden" id="userName" value="{{ userName }}">
               <input type="hidden" id="customerName" value="{{ customerName }}">



              <div class="form-row">
                <label for="cardHolder">Cardholder Name</label><br>
                  <input type="text" id="cardHolder" size="20" data-stripe="name">
                </label>
              </div>
              <br><br>


              <div class="form-row">
                <label for="cardNumber">Card Number </label><br>
                  <input type="text" id="cardNumber" size="20" data-stripe="number">
                </label>
              </div>
              <br>
              <img src="/public/images/credit-card/visa.png" class="card-visa">
              <img src="/public/images/credit-card/mastercard.png" class="card-mastercard">
                <img src="/public/images/credit-card/american-express.png" class="card-aexpress">




              <br>

              <div class="form-row">
                <label for="cardExpiration"> Expiration (MM/YY)</label><br>
                  <input class="expirationNumber" type="text" size="2" id="cardExpiration" data-stripe="exp_month">
                </label>
                <span> / </span>
                <input class="expirationNumber" type="text" size="2" data-stripe="exp_year">
              </div>
              <br><br>

              <div class="form-row">
                <label for="cardCVC">CVC</label><br>
                  <input type="text" id="cardCVC" size="4" data-stripe="cvc">
                </label>
              </div>

              </div>
            </div>

             <input type="checkbox" id="checkbox"> 
             <label for="checkbox">By purchasing this package you are agreeing to our Terms & Conditions</label><br><br>
              <h4 id="checkboxError"></h4>
               <button type="submit" class="submit btn-tangerine">Submit Payment</button>

              </form>

下面是HTML代码

              <!-- Package name to be submitted to server -->
              <input type="hidden" id="packageName" value="{{ packageName|capitalize }}">

              <!-- Username to be submitted to server -->
              <input type="hidden" id="userName" value="{{ userName }}">
               <input type="hidden" id="customerName" value="{{ customerName }}">



              <div class="form-row">
                <label for="cardHolder">Cardholder Name</label><br>
                  <input type="text" id="cardHolder" size="20" data-stripe="name">
                </label>
              </div>
              <br><br>


              <div class="form-row">
                <label for="cardNumber">Card Number </label><br>
                  <input type="text" id="cardNumber" size="20" data-stripe="number">
                </label>
              </div>
              <br>
              <img src="/public/images/credit-card/visa.png" class="card-visa">
              <img src="/public/images/credit-card/mastercard.png" class="card-mastercard">
                <img src="/public/images/credit-card/american-express.png" class="card-aexpress">




              <br>

              <div class="form-row">
                <label for="cardExpiration"> Expiration (MM/YY)</label><br>
                  <input class="expirationNumber" type="text" size="2" id="cardExpiration" data-stripe="exp_month">
                </label>
                <span> / </span>
                <input class="expirationNumber" type="text" size="2" data-stripe="exp_year">
              </div>
              <br><br>

              <div class="form-row">
                <label for="cardCVC">CVC</label><br>
                  <input type="text" id="cardCVC" size="4" data-stripe="cvc">
                </label>
              </div>

              </div>
            </div>

             <input type="checkbox" id="checkbox"> 
             <label for="checkbox">By purchasing this package you are agreeing to our Terms & Conditions</label><br><br>
              <h4 id="checkboxError"></h4>
               <button type="submit" class="submit btn-tangerine">Submit Payment</button>

              </form>

---

假设发生的事情其实很简单。当给出所有正确的信息时，就会创建令牌，然后令牌和其他信息通过ajax发布到服务器，PHP代码将使用这些信息创建费用。

我在为支付添加测试API密钥时也面临同样的问题，然后，该网站工作正常，当我添加live key时，该网站在控制台上显示相同的错误。

              <!-- Package name to be submitted to server -->
              <input type="hidden" id="packageName" value="{{ packageName|capitalize }}">

              <!-- Username to be submitted to server -->
              <input type="hidden" id="userName" value="{{ userName }}">
               <input type="hidden" id="customerName" value="{{ customerName }}">



              <div class="form-row">
                <label for="cardHolder">Cardholder Name</label><br>
                  <input type="text" id="cardHolder" size="20" data-stripe="name">
                </label>
              </div>
              <br><br>


              <div class="form-row">
                <label for="cardNumber">Card Number </label><br>
                  <input type="text" id="cardNumber" size="20" data-stripe="number">
                </label>
              </div>
              <br>
              <img src="/public/images/credit-card/visa.png" class="card-visa">
              <img src="/public/images/credit-card/mastercard.png" class="card-mastercard">
                <img src="/public/images/credit-card/american-express.png" class="card-aexpress">




              <br>

              <div class="form-row">
                <label for="cardExpiration"> Expiration (MM/YY)</label><br>
                  <input class="expirationNumber" type="text" size="2" id="cardExpiration" data-stripe="exp_month">
                </label>
                <span> / </span>
                <input class="expirationNumber" type="text" size="2" data-stripe="exp_year">
              </div>
              <br><br>

              <div class="form-row">
                <label for="cardCVC">CVC</label><br>
                  <input type="text" id="cardCVC" size="4" data-stripe="cvc">
                </label>
              </div>

              </div>
            </div>

             <input type="checkbox" id="checkbox"> 
             <label for="checkbox">By purchasing this package you are agreeing to our Terms & Conditions</label><br><br>
              <h4 id="checkboxError"></h4>
               <button type="submit" class="submit btn-tangerine">Submit Payment</button>

              </form>

但问题是，我正在用测试信用卡号码测试实时密钥。也许你也犯了同样的错误

              <!-- Package name to be submitted to server -->
              <input type="hidden" id="packageName" value="{{ packageName|capitalize }}">

              <!-- Username to be submitted to server -->
              <input type="hidden" id="userName" value="{{ userName }}">
               <input type="hidden" id="customerName" value="{{ customerName }}">



              <div class="form-row">
                <label for="cardHolder">Cardholder Name</label><br>
                  <input type="text" id="cardHolder" size="20" data-stripe="name">
                </label>
              </div>
              <br><br>


              <div class="form-row">
                <label for="cardNumber">Card Number </label><br>
                  <input type="text" id="cardNumber" size="20" data-stripe="number">
                </label>
              </div>
              <br>
              <img src="/public/images/credit-card/visa.png" class="card-visa">
              <img src="/public/images/credit-card/mastercard.png" class="card-mastercard">
                <img src="/public/images/credit-card/american-express.png" class="card-aexpress">




              <br>

              <div class="form-row">
                <label for="cardExpiration"> Expiration (MM/YY)</label><br>
                  <input class="expirationNumber" type="text" size="2" id="cardExpiration" data-stripe="exp_month">
                </label>
                <span> / </span>
                <input class="expirationNumber" type="text" size="2" data-stripe="exp_year">
              </div>
              <br><br>

              <div class="form-row">
                <label for="cardCVC">CVC</label><br>
                  <input type="text" id="cardCVC" size="4" data-stripe="cvc">
                </label>
              </div>

              </div>
            </div>

             <input type="checkbox" id="checkbox"> 
             <label for="checkbox">By purchasing this package you are agreeing to our Terms & Conditions</label><br><br>
              <h4 id="checkboxError"></h4>
               <button type="submit" class="submit btn-tangerine">Submit Payment</button>

              </form>

---

很抱歉英语不好。

不要认为stripe希望表单使用jQuery对象。。。请尝试

$form[0]

谢谢，您的意思是var$form[0]=$（“#付款单”）@charlietfl我使用此代码，并为表单提供jQuery对象。中的示例使用jQuery对象。@jon220在尝试获取令牌之前是否调用了

stripe.setPublishableKey（）

？

              <!-- Package name to be submitted to server -->
              <input type="hidden" id="packageName" value="{{ packageName|capitalize }}">

              <!-- Username to be submitted to server -->
              <input type="hidden" id="userName" value="{{ userName }}">
               <input type="hidden" id="customerName" value="{{ customerName }}">



              <div class="form-row">
                <label for="cardHolder">Cardholder Name</label><br>
                  <input type="text" id="cardHolder" size="20" data-stripe="name">
                </label>
              </div>
              <br><br>


              <div class="form-row">
                <label for="cardNumber">Card Number </label><br>
                  <input type="text" id="cardNumber" size="20" data-stripe="number">
                </label>
              </div>
              <br>
              <img src="/public/images/credit-card/visa.png" class="card-visa">
              <img src="/public/images/credit-card/mastercard.png" class="card-mastercard">
                <img src="/public/images/credit-card/american-express.png" class="card-aexpress">




              <br>

              <div class="form-row">
                <label for="cardExpiration"> Expiration (MM/YY)</label><br>
                  <input class="expirationNumber" type="text" size="2" id="cardExpiration" data-stripe="exp_month">
                </label>
                <span> / </span>
                <input class="expirationNumber" type="text" size="2" data-stripe="exp_year">
              </div>
              <br><br>

              <div class="form-row">
                <label for="cardCVC">CVC</label><br>
                  <input type="text" id="cardCVC" size="4" data-stripe="cvc">
                </label>
              </div>

              </div>
            </div>

             <input type="checkbox" id="checkbox"> 
             <label for="checkbox">By purchasing this package you are agreeing to our Terms & Conditions</label><br><br>
              <h4 id="checkboxError"></h4>
               <button type="submit" class="submit btn-tangerine">Submit Payment</button>

              </form>