我的Stripe付款显示在我的仪表板上,但它们的状态为“未完成”,将鼠标悬停在上面会显示提示:“客户尚未输入他们的付款方式”。我以为我在session.create()方法中考虑了付款方式。
我的Angular组件创建一个StripeCheckout并将会话数据发送到我的API。然后,API将其包含在对浏览器的响应中(我的第一次尝试是使用此sessionId重定向到结帐,但我选择它是因为它更平滑)。
Angular / TS StripeCheckout和处理程序:
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仪表板上。当我希望它从卡中扣款时,付款显示为“未完成”。
谢谢。
答案 0 :(得分:1)
最新版本的Checkout使您可以直接在Stripe托管的付款页面上接受付款。这包括收集卡的详细信息,显示购物车中的内容以及确保客户付款后再重定向到您的网站。
但是,目前,您的代码在一个地方错误地混合了多个产品。您在客户端使用的代码使用Legacy Checkout。这是Stripe产品的旧版本,可用于安全地收集卡详细信息。这不再是您应该使用的东西。
然后,在服务器端,您正在通过创建Session
使用Checkout的较新版本。这部分是正确的,但您似乎从未使用过。
相反,您需要创建Session服务器端,然后在客户端,只需使用here中所述的redirectToCheckout
重定向到Stripe。