我正在为慈善机构开发一个简单的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>
用于创建条纹令牌的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);
?>
答案 0 :(得分：0)
在尝试调试最初发布的代码后做了很多事情之后，我最终回到了原来的代码-然后突然生效了。
所以看起来我在代码中的某个地方有一个“空白错误” 。