永远不会达到JQuery AJAX响应

Question

我为慈善机构开发了一个简单的Bootstrap网站，该网站接受信用卡捐赠，并由Stripe处理。

虽然所有的Stripe处理工作正常（我登录系统并可以看到付款），但似乎从未达到JQuery AJAX响应（即：在调试器中，我在AJAX响应上放置了一个换行符-但从未达到）。

因此，我很确定我的问题与JQuery AJAX调用有关，但我不确定在哪里。 否则，PHP返回其JSON数据就会出现问题。

HTML形式：

<form class="contact-form" id="payment-form" onsubmit="return onSubmitDo()">
              <div id="creditcard">
                <span class="payment-errors"></span>
                <div class="form-group has-feedback row">
                  <label for="card-number" class="col-sm-2 form-control-sm">Card Number: <span style="color:red;">*</span></label>
                  <div class="col-sm-5">
                    <input type="tel" autocomplete="off" class="form-control form-control-sm card-number cc-number" placeholder="•••• •••• •••• ••••" data-stripe="number" required>
                  </div>
                  <label for="card-cvc" class="col-sm-1 form-control-sm">CVC: <span style="color:red;">*</span></label>
                  <div class="col-sm-4">
                    <input type="tel" autocomplete="off" class="form-control form-control-sm card-cvc cc-cvc" placeholder="•••" data-stripe="card-cvc" required>
                  </div>
                </div>
                <div class="form-group has-feedback row">
                  <label for "card-expiry" class="col-sm-2 form-control-sm">Card Expiry: <span style="color:red;">*</span></label>
                  <div class="col-sm-2">
                    <input type="tel" autocomplete="off" class="form-control form-control-sm card-expiry cc-exp" placeholder="•• / ••" data-stripe="exp" required>
                    <input type="hidden" name="cardExpMonth" data-stripe="exp_month">
                    <input type="hidden" name="cardExpYear" data-stripe="exp_year">
                  </div>
                  <label for="cardname" class="col-sm-2 form-control-sm">Name on Card: <span style="color:red;">*</span></label>
                  <div class="col-sm-6">
                    <input type="text" class="form-control form-control-sm" size="20" autocomplete="off" name="cardname" id="cardname" data-stripe="name" required>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-4">
                    <div class="separator-2"></div>
                  </div>
                </div>

                <input type="hidden" name="stripeToken" id="stripeToken" value="">

                <h5>Select Donation Amount</h5>
                  <div class="form-group row">
                    <label for="inputAmount" class="col-sm-2 col-form-label form-control-sm ">Your Donation Amount: <span style="color:red;">*</span></label>
                    <div class="col-sm-10 col-12">
                      <div class="form-check form-check-inline">
                        <label class="form-check-label">
                          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="10"> $10
                        </label>
                      </div>
                      <div class="form-check form-check-inline">
                        <label class="form-check-label">
                          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="50"> $50
                        </label>
                      </div>
                      <div class="form-check form-check-inline">
                        <label class="form-check-label">
                          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="100"> $100
                        </label>
                      </div>
                      <div class="form-check form-check-inline">
                        <label class="form-check-label">
                          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="200"> $200
                        </label>
                      </div>
                      <div class="form-check form-check-inline">
                        <label class="form-check-label" for="inlineRadio5">
                          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="500"> $500
                        </label>
                      </div>
                      <div class="form-check form-check-inline">
                        <label class="form-check-label">
                          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="other"> Other
                        </label>
                        <label class="col-sm-3 col-4 form-control-sm">
                          <input type="tel" class="form-control form-control-sm" name="inputAmount" id="inputAmount" placeholder="">
                        </label>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-sm-4">
                      <div class="separator-2"></div>
                    </div>
                  </div>

                  <h5>Your Contact Information</h5>
                  <div class="form-group row">
                    <label for="firstname" class="col-sm-2 form-control-sm">First Name: <span style="color:red;">*</span></label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control form-control-sm" name="first-name" id="first-name" autocomplete="off" required>
                    </div>
                    <label for="lastname" class="col-sm-2 form-control-sm">Last Name: <span style="color:red;">*</span></label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control form-control-sm" name="last-name" id="last-name" autocomplete="off" required>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="email" class="col-sm-2 form-control-sm">Email: <span style="color:red;">*</span></label>
                    <div class="col-sm-10">
                      <input type="email" class="form-control form-control-sm" name="email" id="email" autocomplete="off" required>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="address" class="col-sm-2 form-control-sm">Address: <span style="color:red;">*</span></label>
                    <div class="col-sm-10">
                      <textarea name="address" class="form-control form-control-sm" id="address" required></textarea>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="city" class="col-sm-2 form-control-sm">City: <span style="color:red;">*</span></label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control form-control-sm" name="city" id="city" autocomplete="off" required>
                    </div>
                    <label for="phone" class="col-sm-2 form-control-sm">Phone: <span style="color:red;">*</span></label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control form-control-sm" name="phone" id="phone" autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="state" class="col-sm-2 form-control-sm">State: <span style="color:red;">*</span></label>
                    <div class="col-sm-4">
                      <select name="state" class="form-control form-control-sm">
                        <option value="VIC">VIC</option>
                        <option value="NSW">NSW</option>
                        <option value="ACT">ACT</option>
                        <option value="QLD">QLD</option>
                        <option value="SA">SA</option>
                        <option value="WA">WA</option>
                        <option value="NT">NT</option>
                        <option value="TAS">TAS</option>
                      </select>
                    </div>
                    <label for="zip" class="col-sm-2 form-control-sm">Post Code: <span style="color:red;">*</span></label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control form-control-sm" name="zip" id="zip" maxlength="4" required pattern="[0-9]{4}" autocomplete="off">
                    </div>
                  </div>
                  <div class="alert alert-dark" role="alert" style="display:none" id="waitMess"> Please wait while we process your donation... </div>
                  <div class="alert alert-primary" role="alert" style="display:none" id="compMess"> Thankyou for your donation, we greatly appreciate it. </div>
                  <div class="alert alert-danger" role="alert" style="display:none" id="errMess"> </div>
                  <div class="form-row form-submit">
                      <button type="submit" id="submit" class="btn btn-default submit-button">Submit Donation</button>
                  </div>
                </div>
              </form>

用于创建Stripe令牌的Javascript：

<script>
    Stripe.setPublishableKey('pk_test_************************');

    function onSubmitDo () {
      document.getElementById("waitMess").style.display="block";
      document.getElementById('submit').disabled = true;
      Stripe.card.createToken (document.getElementById('payment-form'), myStripeResponseHandler)
      return false;
    };

    function myStripeResponseHandler (status, response) {
      console.log(status);
      console.log(response);

      if (response.error) {
        document.getElementById('payment-error').innerHTML = response.error.message;
        alert (response.error.message);
      } else {
        var tokenInput = document.createElement("input");
        tokenInput.type = "hidden";
        tokenInput.name = "stripeToken";
        tokenInput.value = response.id;
        //alert(response.id);
        var paymentForm = document.getElementById('payment-form');
        paymentForm.appendChild(tokenInput);
        document.getElementById("stripeToken").value = response.id;
        submitPHP();
        //paymentForm.submit();

      }
    };
    </script>

jQuery AJAX：

function submitPHP() {
  var form = $('#payment-form');
  var formData = $(form).serialize();

  $.ajax({
    type: "POST",
    url: "php/donate.php",
    data: formData,
    dataType: "json",
    success: function (data) {
    if (data.paid == "yes") {
      $("#waitMess").css("display", "none");
      $("#errMess").css("display", "none");
      $("#compMess").css("display", "block");

    } else {
      $("#waitMess").css("display", "none");
      $("#compMess").css("display", "none");
      $("#errMess").css("display", "block");

    }
  }
})
};

提交Stripe付款的PHP（API密钥包含在config.php中）：

<?php

  require_once 'config.php';
  require_once 'stripe/init.php';

  //Receive the data posted
  var_dump($_POST);

  try {
    $token   = $_POST['stripeToken'];
    $email   = $_POST["email"];
    $firstname = $_POST["first-name"];
    $lastname = $_POST["last-name"];
    $name    = $firstname." ".$lastname;
    $address = $_POST["address"];
    $city = $_POST["city"];
    $phone = $_POST["phone"];
    $state = $_POST["state"];
    $postcode = $_POST["zip"];

    // get the value of either the radio button or input box
    if (empty($_POST["inputAmount"])) {
      $amount = $_POST["inlineRadioOptions"];
    } else {
      $amount = $_POST["inputAmount"];
    }

    // create a customer if our current user doesn't have one
    $customer = \Stripe\Customer::create(array(
            'source' => $_POST['stripeToken'],
            'email' => strip_tags(trim($_POST['email']))
        )
    );

    $customer_id = $customer->id;

    $charge = \Stripe\Charge::create(array(
         'customer' => $customer->id,
         'amount' => $amount * 100,  //sends amount in cents
         'currency' => 'aud',
         'description' => 'General Donation',
         'metadata' => array("Name" => $name, "Address" => $address,"City" => $city, "State" => $state, "PostCode" => $postcode, "Email" => $email, "Phone" => $phone)
    ));
    $stringMess = "Thankyou for your donation of ".$amount." ".$name." , we greatly appreciate it.";
    $result = array("paid"=>"yes","text"=>$stringMess);
  } catch (\Stripe\Error\ApiConnection $e) {
    $result = array("paid"=>"no","text"=>$e);
  } catch (\Stripe\Error\InvalidRequest $e) {
    $result = array("paid"=>"no","text"=>$e);
  } catch (\Stripe\Error\Api $e) {
    $result = array("paid"=>"no","text"=>$e);
  } catch (\Stripe\Error\Card $e) {
    $result = array("paid"=>"no","text"=>$e);
  }

  echo json_encode($result);
  ?>

Answer 1

在尝试调试最初发布的代码中的许多事情之后，我最终回到了原来的代码-然后突然工作了。

因此，看起来我在代码中的某个地方出现了“空白错误” 。