BacodoBACODO

React Native 插件

React Native 的 Stripe 集成

將 @stripe/stripe-react-native Payment Sheet 新增至您現有的 React Native 應用程式中，無需從頭開始建立本機卡片表單、3-D 安全性和金鑰錯誤。 React Native 不託管 webhooks - 您的 API 託管。

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

起

$145

USD · React Native

查看示範

React Native 的 Stripe 集成 · React Native

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

Requirements

What React Native 的 Stripe 集成 needs

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

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

功能說明

React Native 應用程式中的付款表 - API 仍然擁有秘密

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

它解決的問題

React Native 應用程式無法安全地建立 PaymentIntents 或驗證 Webhook。它需要付款表和傳回客戶端密鑰的後端。建置錯誤的分裂會在二進位檔案中發送密鑰。

如何落地專案

我們新增 @stripe/stripe-react-native，從您現有的 React Native 結帳作業中顯示付款表，並連接您的 API 已經需要的 PaymentIntents 的 fetch 呼叫。 Webhook 驗證是在該 API 上進行的，而不是在 React Native 中進行的。

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

您的團隊跳過第一個生產 Stripe React Native 實作：付款表、SCA、本機配置以及記錄應用程式如何與 API 對話的移交。

它是為誰而設

已經擁有 React Native iOS/Android 應用程式和 API，並且想要可維護的 Stripe 路徑而無需在 Flutter 中重寫應用程式的開發人員和機構。

主要功能

React Native 的 Stripe 集成 包含什麼

React Native 中的付款表

Present Stripe Payment Sheet with @stripe/stripe-react-native from your React Native pay action. Card data stays on Stripe — not in React Native state you persist.

React Native fetches client secrets — never the secret key

React Native 應用程式僅使用 API 中的可發佈金鑰和短期用戶端金鑰。 Stripe Integration for React Native does not put STRIPE_SECRET_KEY in the JS bundle or native binary.

React Native 中的 Apple Pay 與 Google Pay

當您的 Stripe 帳戶、Apple 商家 ID 和 Google Pay 設定允許時，在付款表中啟用錢包。 React Native fallback stays on card Payment Sheet.

React Native 測試模式然後即時發布金鑰

Ship the React Native app with the Stripe test publishable key first.即時切換是記錄的環境/風格變更以及 API 上相符的即時金鑰。

Fulfillment 不是 React Native 成功螢幕

A React Native thank-you screen is not the source of truth. Your API verifies the Stripe webhook, then the React Native app reads paid state from that API.

反應本機錯誤和取消狀態

處理銀行卡被拒絕、付款單取消、網路故障和不完整的 3-D 安全，這樣 React Native UI 就不會讓客戶處於死屏狀態。

適用場景

何時適合使用 React Native 的 Stripe 集成

iOS 和 Android 上現有的 React Native 商店

您已經擁有一個 React Native 應用程式和一個 API。您需要付款單結帳，而無需在 Flutter 中重寫目錄。

Agency handing a React Native client app to production

You need a maintainable Stripe path in React Native, source in the client repo, and a documented live-key cutover instead of a snack demo.

React Native 中的 SaaS 付費牆

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

React Native 應用程式、Django 或 Node API 已就位

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

Demo

React Native 支付表流程預覽

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

運作方式

如何交付 React Native 的 Stripe 集成

標準 Bacodo 附加工作流程，具有針對 Expo 與 bare、iOS/Android 目標以及應用程式已呼叫的 API 的 React Native 特定檢查。

  1. 01

    選擇 React Native Stripe

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

  2. 02

    React Native 相容性檢查

    查看 React Native 版本、Expo 或裸工作流程、現有結帳 UI 以及應用程式已使用的後端語言。

  3. 03

    整合到 React Native

    將 @stripe/stripe-react-native、付款表演示、本機配置和取得合約新增至您的 PaymentIntent 端點。

  4. 04

    配置 React Native 應用程式

    透過 env 或flavor 連接可發佈的金鑰。金鑰和 Webhook 保留在 API 上。

  5. 05

    測試 React Native 支付路徑

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

  6. 06

    移交React Native源碼

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

架構

Stripe 如何連結到 React Native 項目

React Native 二進位檔案永遠不會儲存金鑰。付款表使用 API 中的客戶端金鑰。 Stripe 透過 webhook 通知 API。 React Native 然後讀取訂單狀態。

反應本機應用程式付款單您的APIStripe 支付意圖網路鉤子 → APIReact Native 讀取付費狀態

支援的技術

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

iOS 和 Android 上的 React Native

目前 Expo 上的 React Native 或一個簡單的工作流程。這不是一個 React 網站，也不是 Flutter——請參閱這些堆疊的 Stripe 登陸。

@stripe/stripe-react-native

用於支付表和錢包的官方 Stripe React Native SDK。

您現有的 API

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

React Native 應用程式的 Stripe 帳戶

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

所需後端

React Native 應用程式是一個客戶端。 Webhook 不能只存在於手機上。沒有 API 的純應用程式專案無法完成此結帳路徑。

交付內容

React Native 的 Stripe 整合包含哪些內容

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

不包含在附加價格中

  • Stripe 帳戶、API 金鑰和 Stripe 處理費 — 您擁有這些
  • 如果您沒有可以建立 PaymentIntents 的 API，則需要一個新後端
  • 從 React Native 到 Flutter 的重寫
  • Apple 或 Google 應用程式內購買替換
  • Marketplace Connect 或自訂計費，除非屬於自訂工作

Pricing

React Native 定價的 Stripe 集成

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

React Native 的 Stripe 集成

將生產就緒的 Stripe Payment Sheet 新增至現有的 React Native 應用程式並保留原始程式碼。

需求

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

$145

一次性

React Native

需要 backend？

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

安全結帳由stripe

交付與安全

React Native 交付與安全實踐

預計 React Native 交付

典型的 React Native Stripe 簽出範圍在 React Native 相容性檢查之後。時間表取決於 Expo 與 bare、當前結帳 UI 和 API。

移交前在 React Native 上進行測試

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

Stripe 秘密不存在於 React Native 二進位檔案中

只有可發布的金鑰位於客戶端。密鑰和 Webhook 密鑰保留在 React Native 應用程式呼叫的伺服器上。

Webhook 驗證是在 API 上進行的，而不是在 React Native 中進行的

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

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

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

FAQ

常見問題

React Native 的 Stripe 整合包含哪些內容？

React Native 的 Stripe 整合包括 @stripe/stripe-react-native 設定、現有 React Native 結帳中的付款表、PaymentIntent API 的取得合約、iOS 和 Android 測試覆蓋範圍以及移交註釋。您會在專案中收到 React Native 原始程式碼。 Stripe 費用、您的 Stripe 帳戶和建立新後端是分開的。

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

是的。 Stripe Integration for React Native 是為您已有的 React Native 專案建構的。我們將付款表和付款入口點放入您當前的 React Native 導航和結帳 UI 中，而不是將單獨的演示應用程式作為可交付成果提供。

React Native 的 Stripe 整合需要後端嗎？

對於生產 React Native Stripe 路徑是的。 PaymentIntents、金鑰和 Webhook 驗證必須位於伺服器上。 React Native 應用程式僅接收可發佈的金鑰和用戶端金鑰。如果您沒有 API，則該後端工作的範圍是單獨的，並且不包含在 React Native 附加價格中。

Stripe Integration for React Native 使用哪個 Stripe 套件？

Stripe Integration for React Native 使用@stripe/stripe-react-native（Stripe 的官方 React Native SDK）用於 iOS 和 Android 上的付款表和錢包按鈕。除非您明確需要一個，否則我們不會將 React Native 簽出封裝在未記錄的外掛程式中。

React Native 的 Stripe 整合是否支援 Apple Pay 和 Google Pay？

可以，只要您的 Stripe 帳戶、Apple 商家 ID、Google Pay 設定和裝置支援它們。在 React Native 中，錢包按鈕是可選範圍。 React Native 上的卡片付款表仍然是預設後備。

Expo 是否包含在 React Native 的 Stripe 整合中？

Expo 和裸露的 React Native 都是候選人。我們在 React Native 相容性檢查期間確認 Expo SDK、配置插件和本機模組相容性。 React 網站不是這個著陸點 - 請參閱 Stripe Integration for React。

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

React Native 客户端可以确认 PaymentIntent 或通过 Payment Sheet 收集付款方式。定期 Stripe Billing 產品、客戶入口網站和發票邏輯位於您的 API 上。订阅量大的 React Native 工作可能需要自定义报价。

Stripe 可发布密钥和密钥在 React Native 应用程序中位于何处？

React Native 应用程序仅使用 Stripe 可发布密钥，通常通过 env 或安全风格。金鑰和 Webhook 簽章金鑰保留在伺服器上。 React Native 的 Stripe Integration 不会将密钥放入 APK 或 IPA 中。

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

我們首先針對 Stripe 測試金鑰和測試卡實作 Stripe Integration for React Native。上線是 React Native 應用程式使用的 Stripe 儀表板和伺服器環境中記錄的密鑰和 Webhook 切換，而不是附加許可證啟動。

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

React Native Payment Sheet 和 PaymentIntents 通过 @stripe/stripe-react-native 处理 3-D Secure。 React Native 應用程式必須保持工作表流處於活動狀態，直到 Stripe 傳回最終狀態； React Native 的 Stripe Integration 明確連接這些狀態。

React Native 结账是否需要 Stripe webhook？

是的，用于在 React Native 付款表之后履行。 React Native UI 並不是事實的來源。您的後端驗證 Stripe webhook 簽名，然後將訂單標記為已付款、解鎖內容或通知履行。

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

是的。 React Native 的 Stripe Integration 通常会保留您的 React Native 产品、购物车和支付按钮，并从该操作中显示付款表。接触原始 PAN 数据的自定义 React Native 卡表单超出了默认范围，因为付款表是更安全的 PCI 路径。

Stripe Integration for React Native 价格是否包含 Stripe 帐户或费用？

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

React Native 的 Stripe 整合會取代 Apple 或 Google 應用程式內購嗎？

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

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

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

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

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

React Native 上如何處理 stripe-react-native 或 Stripe API 更新？

在 30 天的時間內，我們協助解決因記錄的 Stripe 或 @stripe/stripe-react-native 變更而導致的已交付 React Native 整合的損壞。此後持續的 React Native 軟體包升級是您的維護，或者是擴展技術支援（如果您購買）。

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

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

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

我們根據我們在整合時固定的 @stripe/stripe-react-native 版本確認您的 React Native 版本、Expo 或裸工作流程、iOS 部署目標和 Android minSdk。較舊或嚴重分叉的 React Native 運行時可能需要額外的範圍。

React Native Stripe 整合的 30 天支援與 6 個月擴展技術支援分別是什麼？

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

React Native 的 Stripe 集成

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

$145

新增到項目查看示範