条纹结账链接 onClick 不处理付款

Question

我正在使用 Stripe 自定义集成来将导航元素链接到结帐弹出窗口。

我的客户端代码如下所示：

<!-- stripe stuff -->
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_(removed for Stackoverflow)',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
// 
// Dynamically create a form element to submit the results
// to your backend server
var form = document.createElement("form");
form.setAttribute('method', "POST");
form.setAttribute('action', "/create_subscription.php");
// Add the token ID as a hidden field to the form
var inputToken = document.createElement("input");
inputToken.setAttribute('type', "hidden");
inputToken.setAttribute('name', "stripeToken");
inputToken.setAttribute('value', token.id);
form.appendChild(inputToken);
// Add the email as a hidden field to the form
var inputEmail = document.createElement("input");
inputEmail.setAttribute('type', "hidden");
inputEmail.setAttribute('name', "stripeEmail");
inputEmail.setAttribute('value', token.email);
form.appendChild(inputEmail);
// Finally, submit the form
document.body.appendChild(form);
// Artificial 5 second delay for testing
setTimeout(function() {
window.onbeforeunload = null;
document.forms["payment-form"].submit()
}, 2000);
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Create New Account',
description: 'Voice Training - Month #1',
currency: 'usd',
amount: 2700
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>

我在create_subscription.php中的PHP代码看起来像这样：

<?php 
// If you're using Composer, use Composer's autoload:
require_once('stripe/init.php');
// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
StripeStripe::setApiKey("sk_test_(removed for Stackoverflow)");
// Token is created using Checkout or Elements!
// Get the payment token ID submitted by the form:
$token = $_POST['stripeToken'];
$charge = StripeCharge::create([
'amount' => 2700,
'currency' => 'usd',
'description' => 'Example charge',
'source' => $token,
]);
?>

目录 '/stripe/' 是存在的，并且其中包含最新的 Stripe 库。

当我单击结帐按钮时，弹出窗口(nice(，API请求显示为成功(nice(并记录如下：

请求：

{
"email": "(removed for Stackoverflow)",
"validation_type": "card",
"payment_user_agent": "Stripe Checkout v3 checkout-manhattan (stripe.js/e64eb2a)",
"referrer": "https://www.example.com/ (removed for Stackoverflow)",
"recaptcha_token": "03AL4dnxpSxs-T-AiQqMLLYOK_NvVEy3GRt6CzYttPDKyxpHk6UhNOUfP0vQG5w2Vst6w2HocYZ1BkRlzJGkPb2ia303vxTdCNjyQd63BK7WrfTnSTXkc3o5F5nUEoyjdrPXbRGa3MyEoT-_qDulr_z8QBuU5sapDeQVA6rtl2uigFLU4-0Ws5WZnIktIhyavI2RBWGAcpknLf4acP-9WPu_WLgxBnD6v0c1zD15Cr_leBdBuolTGtqt_LK_ow5VPQXNfqmiXYR1y1fcsd5EyQV3Nu74qeeJhfb-n49w0F_U3fk0SQCTc1y-g",
"card": {
"number": "************4242",
"exp_month": "12",
"exp_year": "18",
"cvc": "***",
"name": "(removed for Stackoverflow)"
},
"time_on_page": "16373",
"guid": "a915b44c-f821-4684-b587-6f7f8ff8b4e7",
"muid": "edce0eb2-f5ff-40ec-b278-31ff22933eec",
"sid": "24a738f0-1e31-4869-93a3-1caedd63456c",
"key": "(removed for Stackoverflow)"
}

响应：

{
"id": "tok_1DAJ8vELek0UlsDQiy5RK4L8",
"object": "token",
"card": {
"id": "card_1DAJ8uELek0UlsDQfU4rj87l",
"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": "pass",
"dynamic_last4": null,
"exp_month": 12,
"exp_year": 2018,
"funding": "credit",
"last4": "4242",
"metadata": {
},
"name": "(removed for Stackoverflow)",
"tokenization_method": null
},
"client_ip": "(removed for Stackoverflow)",
"created": 1536938617,
"email": "(removed for Stackoverflow)",
"livemode": false,
"type": "card",
"used": false
}

但是，不会产生任何测试费用。交易在 ->仪表板 -> 付款中不可见。

我感到一丝厄运，我错过了一些微不足道的东西。有人可以告诉我这里出了什么问题吗？

Answer 1

这可能是一个愚蠢的建议。你能不能去 Stripe 上的控制面板，看看"查看测试数据"开关是否打开。 由于这是测试费用，因此可能需要打开测试开关才能查看交易。

试一试，让我知道

Answer 2

附加的标记没有name-属性，因此当您尝试使用名称payment-form命名表单访问器提交它时，没有任何反应，因为该表单访问器不存在。

将以下行放在其他表单属性设置下应该可以解决您的问题。

form.setAttribute('name', "payment-form");