Question

我的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仪表板上。当我希望它从卡中扣款时，付款显示为“未完成”。

谢谢。

Answer 1

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

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

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

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

为什么条纹付款不完整？

1 个答案: