为什么条纹付款不完整

Question

我的Stripe付款显示在我的仪表板上，但它们的状态为"未完成"，悬停在上面会显示提示，"客户尚未输入他们的付款方式。"我以为我在session.create((方法中考虑了付款方式。

我的Angular组件创建了一个StripeCheckout，并将会话数据发送到我的API。API随后将其包含在对浏览器的响应中(我的第一次尝试是使用此sessionId重定向到签出，但我选择此选项是因为它更平滑(。

Angular/TS StripeCheckout and handler:

let headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append(
"authentication",
`Bearer ${this.authServ.getAuthenticatedUserToken()}`
);
this.handler = StripeCheckout.configure({
key: environment.stripe_public_key,
locale: "auto",
source: async source => {
this.isLoading = true;
this.amount = this.amount * 100;
this.sessionURL = `${this.stringValServ.getCheckoutSessionStripeURL}/${this.activeUser.id}/${this.amount}`;
const session = this.http
.get(this.sessionURL, {
headers: new HttpHeaders({
"Content-Type": "application/json",
authentication: `Bearer ${this.authServ.getAuthenticatedUserToken()}`
})
})
.subscribe(res => {
console.log(res);
});
}
});
//so that the charge is depicted correctly on the front end
this.amount = this.amount / 100;
}
async checkout(e) {
this.stripeAmountEvent.emit(this.amount);
this.handler.open({
name: "[REDACTED]",
amount: this.amount * 100,
description: this.description,
email: this.activeUser.email
});
e.preventDefault();
}

NodeJS API获取

exports.getCheckoutSession = catchAsync(async (req, res, next) => {
const currentUserId = req.params.userId;
const paymentAmount = req.params.amount;
const user = await User.findById(currentUserId);
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
success_url: `${process.env.CLIENT_URL}`,
cancel_url: `${process.env.CLIENT_URL}`,
customer_email: user.email,
client_reference_id: user.userId,
line_items: [
{
name: `Donation from ${user.userName}`,
description: '[REDACTED]',
amount: paymentAmount,
currency: 'usd',
quantity: 1,
customer: user.userId
}
]
});
const newPayment = await Payment.create({
amount: paymentAmount,
createdAt: Date.now(),
createdById: user._id
});
res.status(200).send({
status: 'success',
session
});
});

付款在我的数据库中创建，付款显示在我的Stripe仪表板上。当我期望它向卡收费时，付款显示为"未完成"。

提前谢谢。

Answer 1

Checkout的最新版本允许您直接在Stripe托管的支付页面上接受付款。这包括收集卡的详细信息，显示您的购物车中的内容，并确保客户在重定向到您的网站之前付款。

不过，目前，您的代码在一个地方错误地混合了多个产品。客户端的代码使用LegacyCheckout。这是Stripe产品的旧版本，您可以使用它来安全地收集卡的详细信息。这不是你应该再使用的东西。

然后在服务器端，您通过创建Session来使用Checkout的新版本。这个部分是正确的，但你似乎从来没有使用过它

相反，您需要在服务器端创建Session，然后在客户端创建。您只需要使用redirectToCheckout重定向到Stripe，如本文所述。