我有一个Stripe 3D安全付款设置，之前我已经在多个站点使用它。但是，当通常使用它时，我将其仅限于3D安全卡，而没有其他限制。现在，我也希望能够接受不支持3D安全的信用卡。在当前的设置中，我将在下面的代码中完全附加它，我将创建3D安全源并将完成的源提交到我的chargeCard.php文件中以对卡进行充电。
我正在main.js和api.js文件中创建3D Secure源。在api.js文件中，它检查卡是否支持3D Secure。如果卡不支持3D安全设置，则会在第24至28行特别进行检查。在这里，我试图将卡源直接直接提交到表单，然后进行收费，例如不带3D安全的常规收费。但是什么也没发生，它一直在说“正在加载...请稍候...”，它被设置为在main.js中直到发生任何事情为止，这意味着在这种情况下什么也没有发生。
我的问题是，我将如何对其进行更改，以便整个3D安全系统都能正常工作。但是，如果提交的卡不支持3D安全并且仍然可以收费，那么如果没有3D安全就可以进行常规收费吗？
请注意，使用支持3D安全的卡运行脚本时，脚本可以完美运行。当使用不支持3D Secure的卡时，一切都按预期运行并收费，根本无法使用。
下面附有HTML表单，main.js，api.js和chargeCard.php
<form action="chargeCard.php" method="POST" id="payment-form" name="payment-form">
<input type="text" name="firstName" id="fName" placeholder="Firstname"><br>
<input type="text" name="lastName" id="lName" placeholder="Lastname"><br>
<input type="text" name="country" id="countryFr" placeholder="Country"><br>
<input type="text" name="emailPer" id="emailPer" placeholder="Email"><br>
<input type="text" name="cardNum" id="cardNumId" placeholder="Card number"><br>
<select name="expMonth" id="expMonthId" class="card-expiry-month">
<option value="">Exp: Month</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="expYear" id="expYearId" class="card-expiry-year">
<option value="">Exp: Year</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
<option value="2040">2040</option>
</select>
<br>
<input type="text" name="cvcCard" id="cvcID" placeholder="CVC"><br>
<br>
<input type="button" id="customButton" value="Finish" form="chargeForm" onClick="startAuthFunc();">
</form>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-6" id="iframe-payment">
</div><!-- iframe for the 3D secure checking-->
<div class="col-lg-3">
</div>
</div>
</div>
function startAuthFunc() {
const paymentRequest = {
cardNumber: document.getElementById('cardNumId').value,
expYear: document.getElementById('expYearId').value,
expMonth: document.getElementById('expMonthId').value,
cvc: document.getElementById('cvcID').value,
currency: 'USD',
amount: 1000,
nativeElement: document.querySelector('#iframe-payment')
};
paymentRequest.nativeElement.innerHTML = 'Loading... Please wait...';
doPayment(paymentRequest).then((result) => {
console.log('result --> ', result);
paymentRequest.nativeElement.innerHTML = 'Success! Your details are correct!';
}).catch((error) => {
console.error(error);
paymentRequest.nativeElement.innerHTML = 'We are unable to validate your details...';
alert('Something went wrong, sorry!' + error);
});
}
function doPayment(paymentRequest) {
return new Promise((resolve, reject) => {
const onCreateCardCallback = create3DSecure(paymentRequest, resolve, reject);
return Stripe.source.create({
type: 'card',
card: {
number: paymentRequest.cardNumber,
cvc: paymentRequest.cvc,
exp_month: paymentRequest.expMonth,
exp_year: paymentRequest.expYear
}
}, onCreateCardCallback);
});
}
function create3DSecure(paymentRequest, resolve, reject) {
return (status, cardResponse) => {
console.log('create3DSecure --> paymentRequest', paymentRequest);
console.log('create3DSecure --> status', status);
console.log('create3DSecure --> createSourceResponse', cardResponse);
if (status !== 200 || cardResponse.error) { // problem //Check if the 3D secure card status
reject(cardResponse.error);
}else if (cardResponse.card.three_d_secure === 'not_supported' && cardResponse.status === 'chargeable') {
//my attempt...
var $form = $('#payment-form');
$form.append($('<input type="hidden" name="stripeSource" />').val(source.id));
$form.get(0).submit();
} else if(cardResponse.card.three_d_secure === 'optional' || cardResponse.card.three_d_secure === 'required') {
const onCreate3DSecureCallback = createIframe(paymentRequest, resolve, reject);
Stripe.source.create({ //Create the 3D Secure source for 3D secure check and charge
type: 'three_d_secure',
amount: paymentRequest.amount, //Amount of payment
currency: paymentRequest.currency, //The currency of which the payment is done in
three_d_secure: { card: cardResponse.id }, //Source ID
redirect: { return_url: window.location.href } //Redirect to the location the checking started
}, onCreate3DSecureCallback);
}
else {
reject(cardResponse);
}
};
}
function createIframe(paymentRequest, resolve, reject) {
return (status, stripe3dsResponse) => {
console.log('Create the Iframe --> paymentRequest', paymentRequest);
console.log('Create the Iframe --> status', status);
console.log('Create the Iframe --> stripe3dsResponse', stripe3dsResponse);
if (status !== 200 || stripe3dsResponse.error) { // problem
reject(stripe3dsResponse.error);
} else {
paymentRequest.nativeElement.innerHTML =
'<iframe style="width:100%; height: 320px;" frameborder="0" src="' + stripe3dsResponse.redirect.url + '"></iframe>';
const onPollCallbackReal = onPollCallback(paymentRequest, resolve, reject);
Stripe.source.poll(stripe3dsResponse.id, stripe3dsResponse.client_secret, onPollCallbackReal);
}
};
}
function onPollCallback(paymentRequest, resolve, reject) {
return (status, source) => {
console.log('onPoolCallback --> ', source);
if (status !== 200 || source.error) {
console.log('onPoolCallback --> REJECT --> not 200 or error --> ', source);
reject(source.error);
} else if (source.status === 'canceled' || source.status === 'consumed' || source.status === 'failed') {
console.log('onPoolCallback --> REJECT --> canceled/consumed/fail --> ', source);
reject(source.status);
} else if (/* source.three_d_secure.authenticated && */ source.status === 'chargeable') {
/* some cards do not need to be authenticated, like the 4242 4242 4242 4242 */
// get the payment form
var $form = $('#payment-form');
console.log('onPoolCallback --> SUCCESS --> ', source);
resolve(source);
$form.append($('<input type="hidden" name="stripeSource" />').val(source.id));
$form.get(0).submit();
}
};
}
<?php
require_once('./stripe-php-4.4.0/init.php');
// Set your secret key: find on https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("sk_test_12345678910");
// Get the payment source submitted by the form:
$sourceGet = $_POST['stripeSource'];
$paymentAmount = 1000;
try {
$charge = \Stripe\Charge::create(array(
"amount" => $paymentAmount,
"currency" => "usd",
"source" => $sourceGet,
));
if (charge.succeeded) {
} else if (charge.failed) {
$message = "Something went wrong and the payment failed";
echo "<script type='text/javascript'>alert('$message');</script>";
}
} catch(\Stripe\Error\Card $e) {
$message2 = "The card was declined, when trying to make payment";
echo "<script type='text/javascript'>alert('$message2');</script>";
}
?>