前端 Next js 和后端 Express js 中的支付网关集成？

Question

我有一些问题。请帮帮我

1. 有没有什么方法可以集成支付网关 (Paypal & Stripe)，而无需通过他们的 API 发送登录信息和其他信息来重定向他们的网站。如果可以的话，你能举个清楚的例子吗？

如果不可能，那么我的第二个问题

1. 如何在我的网站中集成paypal（我多次使用条带，但我还没有使用贝宝）。在这里我看到Paypal rest sdk 可用。问题是我正在使用两个库来创建我的网站。
   • 在后端 - 我正在使用 express、graphql、apollo server express
   • 在前端 - 我正在使用 next js

那我应该在哪里集成 PayPal？

我有一个想法，我不确定它是否正确？我可以在我的后端应用程序中添加Paypal Rest Sdk。在这里，这个包为我创建了结帐并创建了会话 ID。 （我从条纹中得到这个想法）。然后我必须将会话 ID 发送到前端（创建 next js）。在前端接收该会话 ID 并重定向到 PayPal 网站进行付款。我可以在后端使用paypal rest sdk。但我不知道如何使用前端的结帐 ID 重定向到 PayPal 网站。这里有人请帮助我。

附加信息-

这是条带示例。

在后台 -

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)
//Here I use stripe sdk

const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
success_url: input.successUrl,
cancel_url: input.calcenlUrl,
customer_email: reqUserInfo.email,
client_reference_id: input.room,
metadata: {checkInDate, checkOutDate, daysOfStay},
line_items: [
   {
     name: room.name,
     images: [`${room.images[0].url}`],
     amount: input.amountPaid * 100,
     currency: 'usd',
     quantity: 1
    }
  ]
})
return {
 message: "You will be redirected shortly!",
 id: session.id  // sending session id to frontend application
}

在前端-

import {loadStripe} from "@stripe/stripe-js";

let stripePromise;

const getStripe = () => {
    if (!stripePromise) {
        stripePromise = loadStripe(process.env.STRIPE_API_KEY)
    }
    return stripePromise;
}

export default getStripe;

最后是 OnClicking 支付按钮

axios.post("./", data)
   .then (res=> {
     const stripe = await getStripe();
     stripe.redirectToCheckout({ sessionId: res.data.data.stripeCheckOut.id});
    }

但我不知道 PayPal。请帮帮我？

我的第三个问题是

1. 成功付款后，有什么方法可以在我的后端 API 中点击发布请求。我可以使用网络钩子。我多次使用条纹 webhook。但是有没有其他办法？

高级谢谢。

Answer 1

对于 PayPal 付款，请勿使用任何重定向。正如Set up standard payments（“添加和修改代码”部分）中所讨论的，在服务器上创建两条路由，一条用于“创建订单”，一条用于“捕获订单”documented here。您可以使用里面提到的 Checkout-NodeJS-SDK。这些路由应该只返回 JSON 数据（没有 HTML 或文本）。当捕获响应成功时，将其生成的付款详细信息存储在您的数据库中（特别是purchase_units[0].payments.captures[0].id，PayPal 交易 ID）并执行任何必要的业务逻辑（例如保留产品，或旋转线程/事件以发送确认电子邮件) 在返回的 JSON 被发送回调用路由的客户端浏览器之前。

将这两条路线与前端结账审批流程配对。这是 vanilla HTML/JS 中的示例，它显示了正确的客户端错误处理：https://developer.paypal.com/demo/checkout/#/pattern/server

要使用 React 代码做到这一点，您可以使用官方的 react-paypal-js 包。您需要实现相同的 createOrder 和 onApprove 函数来调用您的服务器路由并（在后一种情况下）处理该服务器响应中的任何错误情况，与 HTML/JS 演示模式示例中所示相同。