为什么 Stripe 付款不完整？

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. 这部分是正确的，但你似乎从未使用过它。

相反，您需要在服务器端创建会话，然后在客户端，您只需使用此处redirectToCheckout记录的方法重定向到 Stripe 。