Next.js SaaS Boilerplate + Adyen Payemnt

1

以下為可供參考的 Next.js 與 Adyen 整合相關資源表格。然而，必須注意的是，目前市面上較少有「完整的 Next.js SaaS Boilerplate」同時「原生支援 Adyen」的方案。多數案例是採用 Next.js 基礎範本，再額外整合 Adyen 的支付範例或 SDK。

下表列出部分相關範例與資源，您可能需自行將 Adyen 的範例程式碼整合至現有的 SaaS Boilerplate 中。

名稱/方案 GitHub 連結 功能特色 Adyen 整合狀態 授權
Adyen Next.js 範例 (官方) adyen-examples/adyen-nextjs-online-payments 提供 Next.js 環境下的 Adyen API、前端支付流程範例 已整合 Adyen API，方便嵌入您的 SaaS 專案 開源 (MIT)
nextjs-subscription-payments (Stripe為主) vercel/nextjs-subscription-payments 基於 Next.js + Supabase + Stripe 打造訂閱式支付 SaaS 範例 預設使用 Stripe，如要使用 Adyen 須自行改寫後端支付邏輯 開源 (MIT)
nextjs-saas-boilerplate (第三方) async-labs/saas 一個包含會員管理、帳號系統、付費牆等功能的 Next.js SaaS 範例 無原生 Adyen 支援，需自行整合 Adyen 前/後端流程 開源 (BSD)

建議整合方式：

  1. 選用您喜歡的 Next.js SaaS Boilerplate（如 async-labs/saas）作為基底。
  2. 從 Adyen 官方 Next.js 範例中擷取支付整合碼段（API 呼叫、前端支付元件）並嵌入該 Boilerplate 後端程式與前端 Checkout 頁面。
  3. 調整訂閱邏輯，將 Stripe 等既有支付管線替換為透過 Adyen 的 API 進行交易處理。

透過此方式，您可在最少的開發成本下，利用既有的 SaaS Boilerplate 基礎框架並整合 Adyen 範例達成 Next.js + Adyen 的 SaaS 支付功能。

2

List Next,js SaaS Boilerplate that support Adyen

Answer (GPT-4 Omni):

Here is a list of Next.js SaaS boilerplates that support or can be integrated with Adyen for payment processing. These boilerplates provide a solid foundation for building SaaS applications and include features like authentication, subscription management, and payment integration.

Next.js SaaS Boilerplates Supporting Adyen

Boilerplate Key Features Adyen Integration Source/Details
Magnus Wahlstrand’s Adyen Integration Example of integrating Adyen with Next.js, including session creation, Drop-in component setup, and payment confirmation webhook handling Direct implementation guide for Adyen integration using the Adyen Node SDK and Drop-in component GitHub , Blog
Makerkit User management, subscription handling, pre-built SaaS features Can be customized to integrate Adyen via its flexible payment architecture Boilerplate List
Nextbase Authentication, billing, subscription management Offers customizable templates that can be extended to include Adyen as a payment gateway Boilerplate List
SupaNexTail Authentication, subscription framework, financial transaction integration Can be tailored to integrate Adyen for payments Tenten.co
Nextless.js User authentication, billing, user management Supports custom integrations; can be extended to include Adyen Tenten.co
Bedrock Billing, analytics, team collaboration support Provides a robust framework that can be configured for Adyen integration Tenten.co

Notes:

  1. The boilerplate by Magnus Wahlstrand provides a direct example of how to integrate Adyen with a Next.js application. It includes session creation on the backend and frontend integration using the Drop-in component.
  2. Other boilerplates like Makerkit, Nextbase, SupaNexTail, and Nextless.js do not have built-in Adyen support but offer flexibility for custom payment gateway integrations.
  3. For developers looking for a ready-made solution with detailed guidance on Adyen integration, Magnus Wahlstrand’s project is highly recommended.

These boilerplates provide varying levels of flexibility and features. Choose based on your specific needs for ease of integration with Adyen and other SaaS functionalities.