亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 react 和 stripe 創建測試支付網關

使用 react 和 stripe 創建測試支付網關

開滿天機 2023-05-19 14:32:36
嘿,我正在我的網站上使用 react 制作支付網關,所以我正在使用 stripe js(用于測試)我已經將我的支付組件包裝在 app.js 的 Elements 中const promise = loadStripe("my stipe publishable key")<Route path='/payment'>           <Header/>           <Elements stripe={promise}>           <Payment/>           </Elements>         </Route>我在支付組件中的代碼是我使用 firebase 托管作為后端,所以我的運行命令 firebase init 創建了一個名為函數的文件夾(“因為我在運行 firebase init 后選擇了函數選項”)并且對于 axios 我已經在我的 axios.js 文件中編寫了這段代碼import axios from "axios";const instance = axios.create({    baseURL: "http://localhost:5001/*****/******/api"});export default instance;和這里使用的 baseURL 我通過在運行 firebase init 創建的函數文件夾中的 index.js 中編寫一些代碼來獲得我在 index.js 中編寫的代碼是const functions = require('firebase-functions');const express = require("express");const cors = require("cors");const stripe = require("stripe")('my stripe secret key here')//API//App configconst app = express();//Middlewaresapp.use(cors({origin: true}));app.use(express.json());//API routesapp.get('/', (request, response) => response.status(200).send('hello world'))app.post('/payment/create', async(request, response) => {    const total = request.query.total;    console.log('Payment Request Recieved BOOM!!! for this amount', total)    const paymentIntent = await stripe.paymentIntents.create({        amount: total,        currency: "usd",    });    //OK Created    response.status(201).send({        clientSecret: paymentIntent.client_secret,    })})//Listen commandexports.api = functions.https.onRequest(app)從這里我得到了我的 api,它在終端函數 [api] 中用作基本 url :http 函數已初始化(http://localhost:5001/abcdabcdabcd/abcabcd/api)。
查看完整描述

1 回答

?
四季花海

TA貢獻1811條經驗 獲得超5個贊

這里需要考慮以下幾點:

  1. /payment/create通過掛鉤調用useEffect,您將在每次組件更新時創建一個新的 PaymentIntent。這是非常低效的,并且會給您留下許多未使用的 PaymentIntents,使您的 Stripe 帳戶變得混亂。相反,您應該只在用戶打算購買某物時創建 PaymentIntent,例如當他們單擊“購買”按鈕時。

  2. 您正在傳遞要從客戶那里收取的總金額。這意味著惡意用戶將許多東西添加到他們的購物車然后編輯該請求以確保他們被收取的費用比您預期的少得多是微不足道的。所有與計算總金額有關的邏輯都應該在服務器上完成,而不是客戶端。

  3. 您的服務器日志沒有顯示任何實際付款失敗。由于您是在客戶端進行確認,因此您可能在那里遇到錯誤,但在看到錯誤之前進行了重定向。您應該監聽錯誤對象而不是立即重定向:

stripe.confirmCardPayment(clientSecret, {

  payment_method: {

    card: elements.getElement(CardElement)

  }

}).then((result) => {

  if (result.error) {

    // payment failed, do something with the error

    console.log(result.error.message);

  } else {

    setSucceeded(true);

    setError(null)

    setProcessing(false)

    history.replace('/order')

});

您還可以通過查看儀表板來檢查您的 Stripe 日志:https://dashboard.stripe.com/test/logs


查看完整回答
反對 回復 2023-05-19
  • 1 回答
  • 0 關注
  • 202 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號