BacodoBACODO

反應附加元件

React 的 Stripe 集成

將 Stripe.js、Payment Element 和客戶端秘密結帳新增至您現有的 React SPA，無需從頭開始建立 Elements、3-D Secure 和金鑰錯誤。 React 不託管 webhook——你的 API 託管。

  • 包含完整原始碼並永久屬於您
  • 無需附加許可證密鑰或循環許可證
  • 生產就緒並經過測試
  • 整合到您現有的 React 專案和堆疊中
  • 包括移交後 30 天的技術支持
  • 可選 6 個月延長技術支持，價格為附加價格的 20%

起

$145

USD · React

查看示範

React 的 Stripe 集成 · React

完整原始碼無許可證密鑰生產就緒經過測試的集成30 天支持

Requirements

What React 的 Stripe 集成 needs

  • 現有 React 專案
  • Stripe 測試模式存取
  • 安全付款需要 backend

無需倉庫權限。僅在你希望我們直接整合時才需要專案存取權限。

功能說明

React SPA 中的 Stripe Elements — API 仍然擁有秘密

Bacodo 將 Stripe 整合到您已有的 React 專案（Vite、CRA 或類似專案）中。移交後，React 來源位於您的儲存庫中。密鑰和 Webhook 保留在您已經運行的後端上。您仍然擁有 Stripe 帳戶和 Stripe 費用。

它解決的問題

React SPA 無法安全地建立 PaymentIntents 或驗證 Webhook。它需要 Stripe.js、Elements 或 Checkout，以及傳回客戶端金鑰的後端。建置錯誤的拆分會在捆綁包中傳送密鑰。

如何落地專案

我們在 React 樹中新增了 @stripe/react-stripe-js，一個結帳螢幕，並且 fetch 呼叫您現有的 PaymentIntents 所需的 API。 Webhook 驗證連接在該 API 上，而不是在 React 內部。

為什麼它可以節省開發時間

您的團隊跳過第一個生產 Stripe React 實作：Elements、SCA、可發佈金鑰的 env，以及記錄 React 如何與您的 API 對話的移交。

它是為誰而設

已經擁有 React 前端和 API，並且想要可維護的 Stripe 路徑而不將 SPA 遷移到 Next.js 的開發人員和機構。

主要功能

React 的 Stripe 集成 包含什麼

React 中的支付元素

在 React 結帳路徑上使用 @stripe/react-stripe-js 安裝 Stripe Payment Element。卡片資料保留在 Stripe 上—而不是保留在 React 狀態。

React 取得客戶端秘密—而不是秘密金鑰

React 應用程式僅使用 API 中的可發佈金鑰和短期用戶端金鑰。 Stripe Integration for React 不會將 STRIPE_SECRET_KEY 放入瀏覽器隨附的 Vite 或 CRA env 中。

React Elements 中的 Apple Pay 和 Google Pay

當您的 Stripe 帳戶和網域允許時，在 Payment Element 中啟用錢包。 React 後備保留在卡片元素上。

反應測試模式然後即時發布密鑰

首先使用 Stripe 測試可發布金鑰發送 React SPA。即時切換是記錄的環境變更以及 API 上相符的即時金鑰。

履行不是 React 的感謝途徑

React 成功畫面並不是事實的來源。您的 API 驗證 Stripe webhook，然後 React 應用程式從該 API 讀取付費狀態。

反應錯誤和取消狀態

處理拒絕的卡片、取消的元素、網路故障和不完整的 3-D 安全，以便 React UI 不會讓客戶處於死屏狀態。

適用場景

何時適合使用 React 的 Stripe 集成

Vite 或 CRA 上現有的 React 店面

您已經擁有 React SPA 和 API。您需要 Elements checkout，而無需在 Next.js 中重寫目錄。

代理商將 React 用戶端 SPA 交付生產

您需要 React 中的可維護 Stripe 路徑、用戶端儲存庫中的原始程式碼以及記錄的即時金鑰切換，而不是 CodeSandbox 演示。

React 中的 SaaS 設定畫面

React 應用程式會收集第一種付款方式，而訂閱則保留在您的 API 和 Stripe Billing 上（如果您已經使用它們）。

React 前端、Django 或 Node API 已就位

Stripe Integration for React 是 SPA 端。如果您還需要建立 API，則其範圍是單獨的 - 這個價格不是新的後端。

Demo

React Stripe Elements 流程預覽

預覽 React 結帳路徑：付款操作、付款元素、確認和失敗狀態。相容性檢查後，您的 Stripe 帳戶的即時沙箱即可使用。此頁面不處理實際費用。

運作方式

Stripe Integration for React 是如何交付的

標準 Bacodo 附加工作流程，具有針對 Vite/CRA、React Router 和 SPA 已呼叫的 API 的 React 特定檢查。

  1. 01

    選擇反應條紋

    確認 React Stripe 集成，並且您擁有（或將範圍）可以建立 PaymentIntents 的 API。

  2. 02

    反應相容性檢查

    查看 React 版本、捆綁程式、現有結帳 UI 以及 SPA 已使用的後端語言。

  3. 03

    整合到反應中

    將 Stripe.js、Elements、結帳元件和 fetch 合約新增至您的 PaymentIntent 端點。

  4. 04

    配置 React 應用程式

    透過 Vite/CRA 公共環境連接可發布金鑰。金鑰和 Webhook 保留在 API 上。

  5. 05

    測試React支付路徑

    執行 Stripe 測試卡、3-D Secure、取消/拒絕，並確認 React 應用程式讀取的 API Webhook 更新狀態。

  6. 06

    移交React源

    提供 React 原始碼、環境註釋和即時密鑰清單。 React 實作由您負責維護。

架構

Stripe 如何連結到 React 項目

React 套件從不持有秘密密鑰。 Elements 使用 API 中的客戶端金鑰。 Stripe 透過 webhook 通知 API。然後 React 讀取訂單狀態。

反應SPAStripe.js / 元素您的APIStripe 支付意圖網路鉤子 → APIReact 讀取付費狀態

支援的技術

React 的 Stripe 集成 實際使用的技術

反應SPA

目前 React 在 Vite、CRA 或類似的 SPA 捆綁器上。這不是 Next.js App Router 登陸 - 請參閱 Stripe Integration for Next.js 以了解該堆疊。

@stripe/react-stripe-js 和 Stripe.js

支付元素和錢包的官方 Stripe React 綁定。

您現有的 API

React 應用程式已呼叫後端的 PaymentIntent 建立和 Webhook 驗證。此附加元件不會用僅 Bacodo 的服務取代該 API。

React 應用程式的 Stripe 帳戶

您的 Stripe 帳戶、測試和即時金鑰、API 上的 Webhook 端點以及儀表板事件。

所需的託管拆分

React SPA 可以是靜態的。 Webhook 不能。沒有 API 的純靜態主機無法完成此結帳路徑。

交付內容

Stripe Integration for React 包含哪些內容

  • 整合到現有的 React 專案中
  • 儲存庫中的完整原始程式碼
  • 可發布密鑰環境和簽出組件
  • 將合約獲取到您的 PaymentIntent API
  • 移交前測試了 React 支付流程
  • 測試到上線切換的移交說明
  • 移交後30天技術支持

不包含在附加價格中

  • Stripe 帳戶、API 金鑰和 Stripe 處理費 — 您擁有這些
  • 如果您沒有可以建立 PaymentIntents 的 API，則需要一個新後端
  • 從 React 遷移到 Next.js
  • Marketplace Connect 或自訂計費，除非屬於自訂工作

Pricing

用於 React 定價的 Stripe 集成

此價格僅適用於 React SPA 平台。它不使用 Next.js、Django、Flutter 或 React Native 附加定價。

React 的 Stripe 集成

將生產就緒的 Stripe 付款添加到現有的 React SPA 並保留原始程式碼。

需求

  • 現有 React 專案
  • Stripe 測試模式存取
  • 安全付款需要 backend

$145

一次性

React

需要 backend？

  • 完整原始碼
  • 無授權費
  • 30 天支援
  • 完整整合

安全結帳由stripe

交付與安全

React 交付和安全實踐

預計 React 交付

典型的 React Stripe 簽出範圍是在 React 相容性檢查之後。時間表取決於您目前的 React 結帳 UI 和 API。

移交前在 React 上測試

在我們移交之前，會在 React SPA 上執行測試模式卡、3-D 安全性、取消和拒絕路徑。

Stripe 秘密不包含在 React 包中

只有可發布的密鑰是公開的。密鑰和 Webhook 密鑰保留在 React 應用程式呼叫的伺服器上。

Webhook 驗證在 API 上，而不是在 React 中

React 不驗證 Stripe-Signature。您的 API 執行此操作，然後 React 讀取結果。

沒有無法驗證的 React 安全聲明

我們不聲稱 PCI 認證或零詐欺。 React 透過 Stripe Elements 收集卡片，而不是我們儲存的自訂卡片形式。

FAQ

常見問題

Stripe Integration for React 包含哪些內容？

Stripe Integration for React 包括 Stripe.js、現有 React 結帳畫面上的 Payment Element、PaymentIntent API 的取得合約、測試覆蓋率和移交註解。您會在專案中收到 React 原始碼。 Stripe 費用、您的 Stripe 帳戶和建立新後端是分開的。

您會將 Stripe 整合到我們現有的 React 應用程式中嗎？

是的。 Stripe Integration for React 是為您已有的 React SPA（Vite、CRA 或類似）建構的。我們將支付元素和支付入口點放入您目前的 React 路由和 UI 中，而不是將單獨的演示應用程式作為可交付成果提供。

Stripe Integration for React 是否需要後端？

對於生產 React Stripe 路徑是的。 PaymentIntents、金鑰和 Webhook 驗證必須位於伺服器上。 React 瀏覽器僅接收可發佈的金鑰和用戶端金鑰。純靜態 React 主機無法完成此結帳路徑。

Stripe Integration for React 使用哪些 Stripe 套件？

Stripe Integration for React 使用官方 Stripe.js 和 @stripe/react-stripe-js 作為支付元素和錢包。除非您明確要求，否則我們不會將 React checkout 包裝在未記錄的插件中。

Stripe Integration for React 支援 Apple Pay 和 Google Pay 嗎？

是的，當您的 Stripe 帳戶、網域驗證和裝置支援它們時。在 React 中，錢包按鈕是可選範圍。 React 上的卡片支付元素仍然是預設後備。

Next.js 是否包含在 Stripe Integration for React 中？

不。 Stripe Integration for React 是一條 SPA 路徑。 Next.js 應用程式路由器和路由處理程序是 Next.js 的 Stripe 整合。我們不會在此 React 附加價格內將 React SPA 遷移到 Next.js。

Stripe Integration for React 可以收取訂閱付款嗎？

React 用戶端可以透過 Stripe.js 確認 PaymentIntent 或收集付款方式。定期 Stripe Billing 產品、客戶入口網站和發票邏輯位於您的 API 上。訂閱量大的 React 工作可能需要自訂報價。

Stripe 可發布密鑰和秘密密鑰位於 React 應用程式中的什麼位置？

React 瀏覽器僅透過 Vite 或 CRA 公共環境使用 Stripe 可發布金鑰。金鑰和 Webhook 簽章金鑰保留在您的 API 上。 Stripe Integration for React 不會將金鑰放入 React 套件中。

Stripe 測試模式和即時模式在 React 中如何運作？

我們先針對 Stripe 測試鍵和測試卡實作 Stripe Integration for React。上線是 React 中記錄的可發布密鑰變更加上 API 上匹配的即時密鑰和 Webhook，而不是附加許可證啟動。

Stripe Integration for React 如何處理 3-D Secure / SCA？

Stripe Payment Element 透過 Stripe.js 處理 3-D Secure。 React 頁面必須保持結帳流程處於活動狀態，直到 Stripe 返回最終狀態；Stripe Integration for React 明確連接這些狀態。

React 結帳是否需要 Stripe webhook？

是，用於在 React Payment Element 之後實現。 React UI 並不是事實的來源。您的 API 驗證 Stripe Webhook 簽名，然後將訂單標記為已付款、解鎖內容或通知履行。然後 React 讀取該狀態。

我們可以使用 Stripe 保留目前的 React 結帳 UI 嗎？

是的。 Stripe Integration for React 通常會保留您的 React 產品、購物車和付款按鈕，並從該操作安裝付款元素。接觸原始 PAN 資料的自訂 React 卡表單超出了預設範圍，因為 Payment Element 是更安全的 PCI 路徑。

Stripe Integration for React 價格是否包含 Stripe 帳戶或費用？

不需要。您建立並擁有 Stripe 帳戶、API 金鑰和 Stripe 處理費。 React 附加元件的價格是在您的 React 專案中實施的價格，而不是 Bacodo 支付授權的價格。

Stripe Integration for React 會取代 Apple 或 Google 應用程式內購嗎？

不會。在應用程式商店內銷售的數位商品通常仍需要 IAP。 Stripe Integration for React 用於在 React 網站或 SPA 中進行 Stripe 結帳，其中 Stripe 是您的產品類型允許的付款路徑。

我們可以在 React 中自訂 Stripe 收據和元資料嗎？

是的。 PaymentIntent 元資料、客戶記錄以及 Webhook 確認後保留的欄位在 Stripe Integration for React 期間與您現有的訂單模型保持一致。 React 應用程式僅顯示您的 API 傳回的內容。

Stripe 移交後包含哪些 React 支援？

React 來源位於您的儲存庫中，因此您的團隊可以維護它。包含的 30 天支援涵蓋了已交付的 Stripe Integration for React 範圍中的技術問題和缺陷，而不是不相關的 React 功能工作。

React 上如何處理 Stripe.js 或 Stripe API 更新？

在 30 天的期限內，我們協助解決因記錄的 Stripe 或 Stripe.js 變更而導致的已交付 React 整合的損壞。此後持續的 React 套件升級是您的維護，或者是擴展技術支援（如果您購買）。

如果在生產 React 應用程式中 Stripe 支付失敗怎麼辦？

我們記錄如何從 React 結帳路徑讀取 PaymentIntent 狀態、Stripe 儀表板日誌和 Webhook 傳遞。 30 天支援包括對所交付的 React 流程的拒絕、3-D 安全拒絕以及錯誤配置的金鑰進行故障排除。

哪些 React 版本與 Stripe Integration for React 相容？

我們確認您的 React 版本、捆綁器（Vite、CRA 或類似）以及 SPA 已針對我們在整合時固定的 Stripe.js 版本所呼叫的 API。較舊或嚴重分叉的 React 運行時可能需要額外的範圍。

Stripe Integration for React 的 30 天支援與 6 個月擴充技術支援分別是什麼？

交付的 React Stripe 路徑包含移交後 30 天。擴展技術支援是可選的，費用為 React 附加價格的 20%，涵蓋針對相同 React 整合（而不是新產品建置）的六個月以上的技術協助。

React 的 Stripe 集成

將生產就緒的 Stripe 付款添加到您現有的 React SPA，保留原始程式碼，並保守 API 的秘密。

$145

新增到項目查看示範