BacodoBACODO

Next.js アドオン

Next.js の Stripe 統合

チェックアウト、3-D セキュア、およびルート ハンドラーの配線を最初から構築することなく、Stripe チェックアウトまたは支払い要素、PaymentIntents、署名付き Webhook を既存の Next.js App Router プロジェクトに追加します。

  • 完全なソースコードが含まれており、永久にあなたのものになります
  • アドオン ライセンス キーや定期ライセンスは必要ありません
  • 本番環境に対応し、テスト済み
  • 既存の Next.js プロジェクトとスタックに統合
  • 引き渡し後30日間のテクニカルサポートが含まれます
  • オプションの 6 か月延長テクニカル サポート (アドオン価格の 20%)

〜から

$145

USD · Next.js

デモを見る

Next.js の Stripe 統合 · Next.js

完全なソースコードライセンスキーがありません本番環境に対応テスト済みの統合30日間のサポート

Requirements

What Next.js の Stripe 統合 needs

  • 既存の Next.js プロジェクト
  • Stripe Test Mode アクセス

リポジトリ権限は不要です。Bacodo に直接組み込んでほしい場合のみ、一時的なプロジェクト権限が必要です。

できること

Next.js アプリ内のストライプ チェックアウト

Bacodo は、Stripe を既存の Next.js プロジェクトに統合します。引き継ぎ後、実装はリポジトリに保存されるため、チームはそれを読み取り、変更し、拡張できます。 Stripe アカウント、API キー、および Stripe 料金は引き続き所有されます。

解決する問題

Next.js でのカードとウォレットのチェックアウトには、PaymentIntents、Checkout または Payment Element、3-D Secure、サーバー専用の秘密キー、および署名を検証する Webhook Route Handler が必要です。その道をゼロから構築するのは時間がかかり、間違いやすいです。

プロジェクトに落とし込むまでの経緯

Next.js クライアントに Stripe.js、PaymentIntents または Checkout セッションを作成するルート ハンドラー (またはサーバー アクション)、Webhook 検証、成功/キャンセル ページ、App Router のテスト/ライブ環境構成を追加します。

開発時間を節約できる理由

あなたのチームは、最初の本番環境の Stripe Next.js 実装 (App Router ハンドラー、SCA、エラー状態、ライブ キーの配布方法を文書化したハンドオーバー) をスキップします。

誰のためのものなのか

すでに Next.js アプリを持っていて、維持できる運用上の支払いパスを必要としている開発者、技術チーム、代理店、スタートアップ企業。

主な機能

Next.js の Stripe 統合に含まれるもの

Next.js のストライプ チェックアウトまたは支払い要素

Next.js チェックアウト ページで、ホストされた Stripe Checkout または埋め込みの Payment 要素を使用します。カード入力、3-D セキュア、ウォレット ボタンは、保存するカスタム カード フォームではなく、Stripe の PCI パス上に残ります。

PaymentIntents の Next.js ルート ハンドラー

Next.js ルート ハンドラーでチェックアウト セッションまたは PaymentIntent を作成します。ブラウザは公開可能なキーとクライアント シークレットのみを使用します。秘密キーがクライアント コンポーネントに含まれることはありません。

Next.js Checkout の Apple Pay と Google Pay

Stripe アカウントとドメインが認証されたら、Stripe Checkout または Payment Element でウォレット ボタンを有効にします。 Next.js フォールバックはカードのチェックアウト時に残ります。

Next.js テストモードとライブストライプキー

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 パス、クライアント リポジトリ内のソース、および 1 回限りの Next.js プロトタイプの代わりに文書化されたライブキー カットオーバーが必要です。

SaaS またはメンバーシップ Next.js アプリ

Next.js アプリは、サブスクリプションと請求書がサーバーに残り、すでに使用している場合は Stripe Billing に残っている間に、最初の支払いを回収するか、支払い方法を更新する必要があります。

Next.js マーケットプレイスまたはサービスの支払いは後で

Next.js アプリで顧客の請求から始めます。 Next.js マーケットプレイス モデルで必要な場合は、Stripe Connect または宛先の料金を個別に範囲指定できます。

デモ

Next.js Stripe チェックアウト フローのプレビュー

Next.js チェックアウト パス (カートまたは支払いアクション、チェックアウトまたは支払い要素、確認、失敗状態) をプレビューします。 Stripe アカウントに対するライブ サンドボックスは、互換性チェック後に利用可能になります。このページでは実際の請求は処理されません。

仕組み

Stripe Integration for Next.js の提供方法

標準の Bacodo アドオン ワークフロー。Next.js と、App Router、Route Handler、および既存のデータ レイヤーに対する Stripe 固有のチェックを使用します。

  1. 01

    Next.js ストライプを選択します

    Next.js の Stripe 統合と、初日のチェックアウトがチェックアウトまたは支払い要素でホストされているかどうかを確認します。

  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 セキュア、パスのキャンセル/拒否、Webhook 確認を実行します。

  6. 06

    Next.js ソースを引き渡す

    Next.js ソース、構成メモ、ライブキー チェックリストを提供します。 Next.js 実装はあなたが保守します。

アーキテクチャ

Stripe が Next.js プロジェクトに接続する方法

Next.js ブラウザは、秘密キーを使用して Stripe と通信することはありません。チェックアウトまたは支払い要素は、ルート ハンドラーからのクライアント シークレットを使用します。 Stripe は、フルフィルメントする前に Next.js Webhook に通知します。

次の.jsページStripe.js / チェックアウトルートハンドラーStripe PaymentIntentsWebhook ルート ハンドラーデータベース/注文状態

対応技術

Next.js の Stripe 統合が実際に使うもの

Next.js アプリルーター

現在の安定した Next.js と App Router がデフォルトです。 Next.js リポジトリがすでに使用しているものであれば、Pages Router をスコープ指定できます。

Stripe.js とストライプ ノード SDK

Next.js クライアント上の公式 Stripe.js と、セッション、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 サーバーなど)。このチェックアウト パスには、静的のみのエクスポートでは十分ではありません。

含まれるもの

Stripe Integration for Next.js の内容

  • 既存の Next.js プロジェクトへの統合
  • リポジトリ内の完全なソースコード
  • 環境とルート ハンドラーの構成
  • このチェックアウト パスにはチェックアウトまたは支払い要素と Webhook の変更が必要です
  • 引き継ぎ前に Next.js の支払いフローをテストしました
  • テストからライブへの切り替えに関する引継ぎメモ
  • 引き渡し後30日間のテクニカルサポート

追加価格には含まれていません

  • Stripe アカウント、API キー、Stripe 処理手数料 - これらはお客様が所有します
  • 注文状態を保存する場所がない場合は、新しいデータベースまたは CMS
  • カスタム作業の範囲に含まれない限り、Marketplace Connect、カスタム課金製品、または In-App Purchase の代替品

Pricing

Next.js の Stripe 統合の価格

この価格は Next.js プラットフォームのみに適用されます。 Django や Flutter のアドオン価格は使用しません。

Next.js の Stripe 統合

本番環境に対応した Stripe 決済を既存の Next.js アプリに追加し、ソース コードを保持します。

前提条件

  • 既存の Next.js プロジェクト
  • Stripe Test Mode アクセス

$145

一回払い

Next.js

バックエンドが必要ですか?

  • ソースコード一式
  • ライセンス料なし
  • 30日間サポート
  • フル統合

安全な決済:stripe

納品とセキュリティ

Next.js の配信とセキュリティの実践

Next.js の推定配信予定数

一般的な Next.js Stripe チェックアウト統合は、Next.js 互換性チェックの後にスコープが設定されます。タイムラインは、現在の Next.js チェックアウト UI とデータ レイヤーに依存します。

引き継ぎ前に Next.js でテスト済み

テストモード カード、3-D セキュア、キャンセル、拒否のパスは、引き渡し前に Next.js アプリで実行されます。

Stripe シークレットは Next.js クライアント コンポーネントから除外されます

ストライプ秘密キーと Webhook 署名秘密はサーバー環境に残ります。 Next.js ブラウザーは、公開可能なキーと有効期間の短いクライアント シークレットのみを受け取ります。

Next.js 注文の Webhook 検証

Next.js Webhook ルート ハンドラーは、注文または資格の状態を更新する前に Stripe 署名を検証します。

検証できない Next.js のセキュリティ主張はありません

当社は、PCI 認証、不正行為ゼロ、承認率の保証などを主張するものではありません。 Next.js カード データは、当社が保存するカスタム カード フォームではなく、Stripe Checkout または Payment Element を通じて収集されます。

FAQ

よくある質問

Stripe Integration for Next.js には何が含まれますか?

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 に組み込みます。

Stripe Integration for Next.js にはサーバーが必要ですか?

本番環境の Next.js ストライプ パスの場合は「はい」です。 PaymentIntents、Checkout Sessions、および秘密キーはサーバー上に存在する必要があります。 Next.js ブラウザーは、公開可能なキーとクライアント シークレットのみを受け取ります。静的のみの Next.js エクスポートは、この Webhook パスをホストできません。

Stripe Integration for Next.js はどの Stripe パッケージを使用しますか?

Stripe Integration for Next.js は、クライアントでは公式の Stripe.js を使用し、Next.js ルート ハンドラーでは Stripe ノード SDK を使用します。明示的に必要としない限り、Next.js チェックアウトを文書化されていないプラグインでラップすることはありません。

Stripe Integration for Next.js は Apple Pay と Google Pay をサポートしていますか?

Stripe アカウント、ドメイン検証、デバイスがそれらをサポートしている場合は、はい。 Next.js では、ウォレット ボタンはオプションのスコープです。 Next.js の Card Checkout または Payment 要素は、デフォルトのフォールバックのままです。

Pages Router は、Stripe Integration for Next.js に含まれていますか?

Next.js のデフォルトの Stripe 統合スコープは App Router です。 Pages Router API ルートは、Next.js リポジトリがすでに使用しているものであり、Next.js 互換性チェック中に同意する場合に含めることができます。

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 は、クライアント コンポーネントに秘密キーを置きません。

Next.js では Stripe テスト モードとライブ モードはどのように機能しますか?

最初に、Stripe テスト キーとテスト カードに対して Next.js の Stripe Integration を実装します。ライブ化とは、Stripe Dashboard および Next.js サーバー環境における文書化されたキーと Webhook のカットオーバーであり、アドオン ライセンスのアクティベーションではありません。

Stripe Integration for Next.js は 3-D セキュア / SCA をどのように処理しますか?

Stripe Checkout および Payment Element は、Stripe.js を通じて 3-D セキュアを処理します。 Next.js ページは、Stripe が最終ステータスを返すまでチェックアウト フローを維持する必要があります。 Stripe Integration for Next.js は、これらの状態を明示的に結び付けます。

Next.js チェックアウトには Stripe Webhook が必要ですか?

Next.js チェックアウトまたは支払い要素後のフルフィルメントの場合ははい。 Next.js UI は真実の情報源ではありません。ルート ハンドラーは、Stripe Webhook 署名を検証し、注文に支払い済みのマークを付け、コンテンツのロックを解除するか、フルフィルメントを通知します。

現在の Next.js チェックアウト UI を Stripe で維持できますか?

はい。 Stripe Integration for Next.js は通常、Next.js 製品、カート、および支払いボタンを保持し、そのアクションからチェックアウトを開くか支払い要素をマウントします。 Checkout または Payment Element がより安全な PCI パスであるため、生の PAN データを扱うカスタム Next.js カード フォームはデフォルトの範囲外です。

Stripe Integration for Next.js の価格には、Stripe アカウントまたは手数料が含まれますか?

いいえ。Stripe アカウント、API キー、および Stripe 処理料金を作成して所有するのはお客様です。 Next.js アドオンの価格は、Bacodo 支払いライセンスではなく、Next.js プロジェクトへの実装です。

Next.js の Stripe Integration は Apple または Google のアプリ内購入に代わるものになりますか?

いいえ、アプリ ストア内で販売されるデジタル商品には依然として IAP が必要なことがよくあります。 Next.js 用の Stripe 統合は、製品タイプに対して Stripe が許可されている支払いパスである Next.js Web サイトまたは Web アプリでの Stripe チェックアウト用です。

Next.js で Stripe のレシートとメタデータをカスタマイズできますか?

はい。 PaymentIntent または Checkout セッションのメタデータ、顧客レコード、および Webhook 確認後に保持するフィールドは、Stripe Integration for Next.js 中に既存の Next.js 注文モデルに合わせて調整されます。

What Next.js support is included after Stripe handover?

Next.js ソースはリポジトリにあるため、チームはそれを保守できます。含まれている 30 日間のサポートは、無関係な Next.js 機能の作業ではなく、提供された Next.js の Stripe Integration の範囲における技術的な質問と欠陥をカバーします。

How are Stripe.js or Stripe API updates handled on Next.js?

During the 30-day window we help with breakage in the delivered Next.js integration caused by a documented Stripe or Stripe.js change.それ以降の継続的な Next.js パッケージのアップグレードはメンテナンス、または購入した場合は延長テクニカル サポートになります。

What if Stripe payments fail in a production Next.js app?

We document how to read PaymentIntent or Checkout Session status, Stripe Dashboard logs, and webhook delivery from the Next.js checkout path. 30-day support includes troubleshooting declines, 3-D Secure drops, and misconfigured keys for the delivered Next.js flow.

Which Next.js versions are compatible with Stripe Integration for Next.js?

We confirm your Next.js version, App Router or Pages Router, and Node runtime against the Stripe SDK we pin at integration time. Older or heavily forked Next.js runtimes may need extra scope.

What is 30-day support versus 6-month Extended Technical Support for Stripe Integration for Next.js?

30 days after handover is included for the delivered Next.js Stripe path.延長テクニカル サポートはオプションで、この Next.js アドオン価格の 20% で、新しい製品のビルドではなく、同じ Next.js 統合に関するさらに 6 か月のテクニカル サポートがカバーされます。

Next.js の Stripe 統合

本番環境に対応した Stripe 決済を既存の Next.js アプリに追加し、ソース コードを保持し、チェックアウトを最初から構築する必要はありません。

$145