[英]Using Stripe Checkout in React and Express js
我正在嘗試在我的反應應用程序中設置 Stripe Checkout,如果用戶單擊按鈕,它將通過 Stripe Checkout 將他們引導到 Stripe 托管的結賬頁面。 在前端,它需要會話 ID,我想從我的 nodejs/express 服務器獲取該 ID。 我仍然是 nodejs 的菜鳥,需要幫助正確設置它,以便我可以創建一個路由來發送會話 ID 的正確響應。 此外,此設置適用於每月訂閱
服務器.js
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const path = require("path");
const stripe = require("stripe")("sk_test_**********************");
if (process.env.NODE_ENV !== "production") require("dotenv").config();
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "client/build")));
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, "client/build", "index.html"));
});
}
app.post("/charge", (req, res) => {
(async () => {
const session = await stripe.checkout.sessions.create({
payment_method_type: ["card"],
subscription_data: {
items: [
{
plan: "plan_***********"
}
]
},
success_url:
"https://example.com/success?session_id={CHECKOUT_SESSION_ID}",
cancel_url: "https://example.com/cancel"
});
})();
});
app.listen(port, err => {
if (err) throw err;
console.log("Server running on port" + port);
});
結帳.js
import React, { useState, useEffect } from "react";
const Checkout = ({ price }) => {
const [isProcessing, setProcessingTo] = useState(false);
const [checkoutError, setChecoutError] = useState();
let sessionId;
const stripe = Stripe("pk_test_*******************************");
useEffect(() => {
fetch("/charge", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({})
})
.then(function(r) {
return r.json();
})
.then(function(response) {
sessionId = response.id;
});
});
const handleClick = e => {
e.preventDefault();
stripe.redirectToCheckout({
sessionId: sessionId
});
};
return (
<div>
<button onClick={handleClick}>Buy</button>
</div>
);
};
export default Checkout;
當您通過 Stripe API 創建會話對象時,您需要將結果返回給前端。 目前你沒有返回任何東西。
const session = await stripe.checkout.sessions.create({
...
...
...
});
res.send({ id: session.id }); // send an object back with the id
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.