BacodoBACODO

Next.js 插件

Next.js 的 Stripe 集成

將 Stripe Checkout 或 Payment Element、PaymentIntents 和簽署的 Webhook 新增至現有的 Next.js App Router 專案中,無需從頭開始建立 checkout、3-D Secure 和 Route Handler 連線。

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

$145

USD · Next.js

查看示範

Next.js 的 Stripe 集成 · Next.js

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

Requirements

What Next.js 的 Stripe 集成 needs

  • 現有 Next.js 專案
  • Stripe 測試模式存取

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

功能說明

在 Next.js 應用程式中進行 Stripe 結帳

Bacodo 將 Stripe 整合到您已有的 Next.js 專案中。移交後,實施將保存在您的儲存庫中,以便您的團隊可以閱讀、更改和擴展它。您仍然擁有 Stripe 帳戶、API 密鑰和 Stripe 費用。

它解決的問題

Next.js 中的卡片和錢包結帳需要 PaymentIntents、Checkout 或 Payment Element、3-D Secure、僅伺服器金鑰以及驗證簽署的 Webhook Route Handler。從頭開始建造這條道路既緩慢又容易出錯。

如何落地專案

我們在 Next.js 用戶端上新增 Stripe.js、建立 PaymentIntents 或結帳會話的路由處理程序(或伺服器操作)、Webhook 驗證、成功/取消頁面以及 App Router 的測試/即時環境配置。

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

您的團隊跳過第一個生產 Stripe Next.js 實作:App Router 處理程序、SCA、錯誤狀態以及記錄如何傳送即時金鑰的移交。

它是為誰而設

已經擁有 Next.js 應用程式並希望有一個可以維護的生產支付路徑的開發人員、技術團隊、機構和新創公司。

主要功能

Next.js 的 Stripe 集成 包含什麼

Next.js 中的 Stripe 結帳或付款元素

使用託管的 Stripe Checkout 或 Next.js 結帳頁面上嵌入的付款元素。卡片輸入、3-D 安全性和錢包按鈕保留在 Stripe 的 PCI 路徑上,而不是您儲存的自訂卡。

PaymentIntents 的 Next.js 路由處理程序

在 Next.js 路由處理程序中建立結帳會話或 PaymentIntents。瀏覽器僅使用可發布金鑰和客戶端金鑰 - 金鑰永遠不會在客戶端元件中提供。

Next.js Checkout 中的 Apple Pay 和 Google Pay

驗證您的 Stripe 帳戶和網域後,啟用 Stripe Checkout 或 Payment Element 中的錢包按鈕。 Next.js 後備保留在卡片結帳上。

Next.js 測試模式然後即時 Stripe 鍵

使用 Stripe 測試金鑰、測試卡和記錄的即時金鑰切換來交付 Next.js 應用程式。 Next.js 環境變數不包含在客戶端套件中。

Next.js 訂單狀態的 Webhook 路由處理程序

Next.js UI 的支付成功並不是事實的來源。路由處理程序在履行之前驗證 Stripe 簽名並更新訂單或權利狀態。

Next.js 成功、取消與錯誤狀態

處理卡被拒絕、結帳取消、網路故障和不完整的 3-D 安全,這樣 Next.js UI 不會讓客戶處於死頁狀態。

適用場景

何時適合使用 Next.js 的 Stripe 集成

現有的 Next.js 商店或預訂網站

您已經在 Next.js 中接受訂單或預訂,並且需要刷卡結帳,而無需重寫目錄或預訂流程。

代理商將 Next.js 用戶端站點交付生產

您需要 Next.js 中的可維護 Stripe 路徑、客戶端儲存庫中的原始程式碼以及記錄的即時金鑰切換,而不是一次性的 Next.js 原型。

SaaS 或會員 Next.js 應用程式

Next.js 應用程式必須收取第一筆付款或更新付款方式,同時訂閱和發票保留在您的伺服器和 Stripe Billing 上(如果您已使用它們)。

Next.js 市場或服務稍後支付

從 Next.js 應用程式中的客戶費用開始。如果您的 Next.js 市場模型需要,Stripe Connect 或目標費用可以單獨確定範圍。

Demo

Next.js Stripe 結帳流程預覽

預覽 Next.js 結帳路徑:購物車或付款操作、結帳或付款元素、確認和失敗狀態。相容性檢查後,您的 Stripe 帳戶的即時沙箱即可使用。此頁面不處理實際費用。

運作方式

如何交付 Next.js 的 Stripe Integration

標準 Bacodo 附加工作流程,帶有 Next.js 和 Stripe 特定的針對 App Router、路由處理程序和現有資料層的檢查。

  1. 01

    選擇 Next.js Stripe

    確認 Next.js 的 Stripe 整合以及第一天結帳是否託管 Checkout 或 Payment Element。

  2. 02

    Next.js 相容性檢查

    查看 Next.js 版本、App Router 與 Pages Router、現有結帳 UI、資料庫以及您是否已經擁有 Stripe 帳戶。

  3. 03

    整合到 Next.js

    新增 Stripe.js、結帳頁面、會話或 PaymentIntents 的路由處理程序以及簽署的 Webhook 處理程序。

  4. 04

    配置 Next.js 應用程式

    連接 Next.js 測試金鑰、Webhook 端點和特定於環境的伺服器配置。

  5. 05

    測試 Next.js 支付路徑

    在 Next.js 應用程式上執行 Stripe 測試卡、3-D Secure、取消/拒絕路徑和 Webhook 確認。

  6. 06

    移交Next.js源碼

    提供 Next.js 原始碼、設定說明和即時金鑰清單。 Next.js 實作由您負責維護。

架構

Stripe 如何連接 Next.js 項目

Next.js 瀏覽器從不使用金鑰與 Stripe 對話。結帳或付款元素使用來自路由處理程序的客戶端機密。在您執行之前,Stripe 會通知您的 Next.js Webhook。

Next.js 頁面Stripe.js / 結帳路由處理程式Stripe 支付意圖Webhook 路由處理程序資料庫/訂單狀態

支援的技術

Next.js 的 Stripe 集成 實際使用的技術

Next.js 應用程式路由器

目前穩定的 Next.js 與 App Router 是預設值。如果您的 Next.js 儲存庫已使用 Pages Router,則可以對其範圍進行限制。

Stripe.js 和 Stripe Node SDK

Next.js 用戶端上的官方 Stripe.js 和伺服器上的 stripe 用於會話、PaymentIntents 和 Webhook 驗證。

您的 Next.js 資料層

訂單或權利更新保留在您的 Next.js 應用程式已使用的資料庫或 API 中。我們不會用僅 Bacodo 的服務替換您的後端。

Next.js 應用程式的 Stripe 帳戶

您的 Stripe 帳戶、Next.js、webhook 端點和儀表板事件使用的測試和即時金鑰。 Stripe 處理費由 Stripe 負擔。

所需的 Next.js 託管設置

可以運行 Next.js 路由處理程序並接收 Stripe Webhook 的主機(例如 Vercel 或 Node 伺服器)。對於此結帳路徑,僅靜態導出是不夠的。

交付內容

Next.js 的 Stripe 整合包含哪些內容

  • 整合到現有的 Next.js 專案中
  • 儲存庫中的完整原始程式碼
  • 環境和路由處理程序配置
  • 此結帳路徑所需的結帳或付款元素以及 Webhook 更改
  • 移交前測試了 Next.js 支付流程
  • 測試到上線切換的移交說明
  • 移交後30天技術支持

不包含在附加價格中

  • Stripe 帳戶、API 金鑰和 Stripe 處理費 — 您擁有這些
  • 如果您沒有地方儲存訂單狀態,則需要新的資料庫或 CMS
  • Marketplace Connect、自訂計費產品或應用程式內購買替換,除非屬於自訂工作

Pricing

Next.js 定價的 Stripe 集成

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

Next.js 的 Stripe 集成

將生產就緒的 Stripe 付款添加到現有的 Next.js 應用程式並保留原始程式碼。

需求

  • 現有 Next.js 專案
  • Stripe 測試模式存取

$145

一次性

Next.js

需要 backend?

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

安全結帳由stripe

交付與安全

Next.js 交付與安全實踐

預計 Next.js 交貨量

典型的 Next.js Stripe 結帳整合的範圍是在 Next.js 相容性檢查之後。時間軸取決於您目前的 Next.js 結帳 UI 和資料層。

移交前在 Next.js 上進行測試

在我們移交之前,會在 Next.js 應用程式上執行測試模式卡、3-D 安全、取消和拒絕路徑。

Stripe 秘密不存在於 Next.js 用戶端元件中

Stripe 金鑰和 Webhook 簽章金鑰保留在伺服器環境中。 Next.js 瀏覽器僅接收可發佈的金鑰和短期的用戶端金鑰。

Next.js 訂單的 Webhook 驗證

Next.js webhook 路由處理程序在更新訂單或權利狀態之前先驗證 Stripe 簽章。

沒有無法驗證的 Next.js 安全性聲明

我們不主張 PCI 認證、零欺詐或保證批准率。 Next.js 卡資料是透過 Stripe Checkout 或 Payment Element 收集的,而不是我們儲存的自訂卡表單。

FAQ

常見問題

Next.js 的 Stripe 整合包含哪些內容?

Next.js 的 Stripe 整合包括 Stripe.js、現有 Next.js 結帳頁面上的結帳或付款元素、路由處理程序中的 PaymentIntent 或結帳會話建立、簽署的 Webhook 處理程序、測試覆蓋率和移交註釋。您會在專案中收到 Next.js 原始程式碼。 Stripe 費用和您的 Stripe 帳戶是分開的。

您會將 Stripe 整合到我們現有的 Next.js 應用程式中嗎?

是的。 Stripe Integration for Next.js 是為您已有的 Next.js 專案建立的。我們將結帳和付款入口點融入您目前的 Next.js 路由和 UI 中,而不是將單獨的演示應用程式作為可交付成果交付。

Next.js 的 Stripe Integration 是否需要伺服器?

對於生產 Next.js Stripe 路徑是的。 PaymentIntents、Checkout Session 和金鑰必須位於伺服器上。 Next.js 瀏覽器僅接收可發佈金鑰和客戶端金鑰。僅靜態 Next.js 匯出無法託管此 Webhook 路徑。

Stripe Integration for Next.js 使用哪些 Stripe 套件?

Next.js 的 Stripe 整合在客戶端使用官方 Stripe.js,並在 Next.js 路由處理程序中使用 Stripe Node SDK。除非您明確要求,否則我們不會將 Next.js checkout 包裝在未記錄的插件中。

Next.js 的 Stripe 整合是否支援 Apple Pay 和 Google Pay?

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

Next.js 的 Stripe Integration 是否包含 Pages Router?

Next.js 範圍的預設 Stripe 整合是 App Router。如果您的 Next.js 儲存庫已經使用了 Pages Router API 路由,並且我們在 Next.js 相容性檢查期間同意了,則可以包含 Pages Router API 路由。

Stripe Integration for Next.js 可以收取訂閱付款嗎?

Next.js 用戶端可以透過 Stripe.js 確認 PaymentIntent 或啟動 Checkout 會話。定期 Stripe Billing 產品、客戶入口網站和發票邏輯位於伺服器上。訂閱量大的 Next.js 工作可能需要自訂報價。

Stripe 可發布密鑰和秘密密鑰位於 Next.js 應用程式中的什麼位置?

Next.js 瀏覽器僅使用 Stripe 可發佈金鑰。金鑰和 Webhook 簽章金鑰保留在路由處理程序使用的伺服器環境變數中。 Stripe Integration for Next.js 不會將金鑰放入客戶端元件中。

Stripe 測試模式和即時模式在 Next.js 中如何運作?

我們先針對 Stripe 測試金鑰和測試卡實作 Stripe Integration for Next.js。上線是您的 Stripe Dashboard 和 Next.js 伺服器環境中記錄的密鑰和 Webhook 切換,而不是附加許可證啟動。

Stripe Integration for Next.js 如何處理 3-D Secure / SCA?

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

Next.js 結帳是否需要 Stripe webhook?

是,用於在 Next.js Checkout 或 Payment Element 之後履行。 Next.js UI 並不是事實的來源。路由處理程序驗證 Stripe Webhook 簽名,然後將訂單標記為已付款、解鎖內容或通知履行。

我們可以使用 Stripe 保留目前的 Next.js 結帳 UI 嗎?

是的。 Next.js 的 Stripe Integration 通常會保留您的 Next.js 產品、購物車和付款按鈕,並從該操作中開啟結帳或安裝付款元素。涉及原始 PAN 資料的自訂 Next.js 卡表單超出了預設範圍,因為結帳或付款元素是更安全的 PCI 路徑。

Next.js 的 Stripe 整合價格是否包含 Stripe 帳戶或費用?

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

Next.js 的 Stripe 整合會取代 Apple 或 Google 應用程式內購嗎?

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

我們可以在 Next.js 中自訂 Stripe 收據和元資料嗎?

是的。 PaymentIntent 或 Checkout 會話元資料、客戶記錄以及 Webhook 確認後保留的欄位在 Stripe Integration for Next.js 期間與您現有的 Next.js 訂單模型保持一致。

Stripe 移交後包含哪些 Next.js 支援?

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

Next.js 如何處理 Stripe.js 或 Stripe API 更新?

在 30 天的期限內,我們協助解決因記錄的 Stripe 或 Stripe.js 變更而造成的已交付 Next.js 整合的損壞。之後持續的 Next.js 軟體包升級是您的維護,或者是擴展技術支援(如果您購買)。

如果在生產 Next.js 應用程式中 Stripe 付款失敗怎麼辦?

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

哪些 Next.js 版本與 Stripe Integration for Next.js 相容?

我們根據我們在整合時固定的 Stripe SDK 確認您的 Next.js 版本、App Router 或 Pages Router 以及 Node 執行時間。較舊或嚴重分叉的 Next.js 運行時可能需要額外的範圍。

Next.js Stripe 整合的 30 天支援與 6 個月擴充技術支援分別是什麼?

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

Next.js 的 Stripe 集成

將生產就緒的 Stripe 付款添加到現有的 Next.js 應用程序,保留原始程式碼,並跳過從頭開始建立結帳。

$145