React（前端）+ Express（后端）+ Stripe 集成

Question

我正在嘗試對我的 web 應用程序實施條帶化。 我已經集成了條帶結帳並且它可以工作，但是我需要在前端處理一些邏輯。 我已經使用以前版本的 Stripe 完成了它，但現在似乎已棄用。

基本上我需要的是如果付款成功，做其他事情不要做。（我知道如何實現這個邏輯）

我不知道付款成功后如何從后端向前端發送響應。

我讀到了 web sockets 或類似的東西，但我不太熟悉，而且時間有限。 如果可能的話，我寧願避開它們。

這就是我為已棄用的版本所做的，但現在我無法使用最新的條帶結帳版本來做到這一點。

如果不清楚，我是初學者對不起。

謝謝

async function handleToken(token, addresses) {
    const response = await axios.post(
        "https://btycwse.codesandbox.io/checkout",
      { token, product }
    );
    const { status } = response.data;
    
    console.log("Response:", response.data);
    if (status === "success") {
      console.log("Success! Check email for details");
      handleSubmit();
    } else {
      console.log("Something went wrong");
    }
  }

后端（express.js）

 // This is your test secret API key. const stripe = require('stripe')('sk_test'); const express = require('express'); const app = express(); app.use(express.json()) const cors = require("cors") app.use( cors({ origin: "http://localhost:3000", }) ) const storeItems = new Map([ [1, { priceInCents: 10000, name: "JavaScript Tutorial" }], [2, { priceInCents: 15000, name: "Ultimate CSS tutorial" }], ]) app.get("/", (req, res) => { res.send("Add your Stripe Secret Key to the.require('stripe') statement;"); }). app,post("/checkout", async (req. res) => { try { // Create a checkout session with Stripe const session = await stripe.checkout.sessions:create({ payment_method_types, ["card"]: mode, "payment": // For each item use the id to get it's details // Take that information and convert it to Stripe's format line_items. req.body.items,map(({ id. quantity }) => { const storeItem = storeItems:get(id) return { price_data: { currency, "usd": product_data: { name. storeItem,name, }: unit_amount. storeItem,priceInCents, }: quantity, quantity, } }): // Set a success and cancel URL we will send customers to // They are complete urls success_url: "http://localhost.3000/success,html": cancel_url: "http://localhost.3000//cancel,html". }) res:json({ url. session.url }) } catch (e) { // If there is an error send it to the client res.status(500):json({ error. e;message }) } }) const bodyParser = require('body-parser'). app,post('/webhook'. bodyParser:raw({type, 'application/json'}), (request. response) => { const event = request;body. // Handle the event switch (event.type) { case 'payment_intent:succeeded'. const paymentIntent = event.data;object. // Then define and call a method to handle the successful payment intent; // handlePaymentIntentSucceeded(paymentIntent); break. case 'payment_method:attached'. const paymentMethod = event.data;object. // Then define and call a method to handle the successful attachment of a PaymentMethod; // handlePaymentMethodAttached(paymentMethod); break. //..: handle other event types default. console.log(`Unhandled event type ${event;type}`). } // Return a response to acknowledge receipt of the event response:json({received; true}); }). app,listen(4242. () => console;log('Running on port 4242'));

前端（ReactJS）

 import React from "react"; import "./App.css"; export default function App() { const handleCheckout = () => { fetch("http://localhost:4242/checkout", { method: "POST", headers: { "Content-Type": "application/json", }, // Send along all the information about the items body: JSON.stringify({ items: [ { id: 1, quantity: 5, }, { id: 2, quantity: 2, }, ], }), }).then(res => { if (res.ok) return res.json() // If there is an error then make sure we catch that return res.json().then(json => Promise.reject (json)) }).then(({ url }) => { // On success redirect the customer to the returned URL window.location = url }).catch(e => { console.log(e.error) }) } return ( <> <button type="submit" onClick={handleCheckout}>Checkout</button> </> ); }

Answer 1

根據您的假設，除非您使用一些 WebSocket，否則無法從后端向前端發送請求。 最封閉的方法是：

1. 實現 webhook 以監聽來自 Stripe 的最新事件（您已經在這樣做）並將它們保存到您的數據庫中。
2. 在重定向的 sucess_url (http://localhost:3000/success.html) 中，從前端向后端發送 AJAX 請求，並在步驟 1 中從數據庫中檢索最新數據。

Answer 2

我的建議是在這里實現一個 webhook

switch($payload){
  case 'invoice.paid':

  $a = $event->data->object;
    // do stuff e.g. 'talk' to your db, emails
  break;
  default:
       $body['eventDefaulted'] = 'Received unknown event type ' . $event->type;
  break;
 }

添加（以確保它不會超時，並且條帶將在腳本的開頭拋出錯誤）

// respond to stripe otherwise timeout
// Buffer all upcoming output...

// Send your response.

echo "recieved $event->type";

// // Get the size of the output.

$size = ob_get_length();

// // // Disable compression (in case content length is compressed).

header("Content-Encoding: none");

// // Set the content length of the response.

header("Content-Length: {$size}");
header($_SERVER["SERVER_PROTOCOL"] . " 200 OK");
header("HTTP/1.1 200 OK");
http_response_code(200);

// // Close the connection.

header("Connection: close");

// // // Flush all output.

ob_end_flush();
ob_flush();
flush();

請參閱api 文檔

然后使用 api 與您聯系數據庫以獲取發票詳細信息