最初のStripeウェブフックは請求成功から847ミリ秒後に到着します。データベースはまだ「保留中」と表示されています。顧客がリフレッシュして再度「支払う」をクリックすると、今度は重複請求されます。3つの本番環境ストアで午前2時にこの競合状態をデバッグしました。Stripeの API は進化しました — チェックアウトセッションはワンクリック Link をサポートし、Payment Intent はネイティブに Apple Pay と Google Pay を処理し、ウェブフック署名検証はサーバーレス関数が生のボディを書き直すと無音で失敗します。このガイドは本番環境で機能する8つの統合パターンをカバーしています: チェックアウトセッション、Payment Intent、ウェブフック冪等性、サブスクリプションライフサイクルフック、ウォレット支払いセットアップ、および847ミリ秒の悪夢を防ぐ3つのアーキテクチャ決定です。ウェブフック処理から始める理由は、ほとんどの統合がそこで最初に失敗するためです。

2026年半ばの時点で、Stripeの API は 2025-12-18.acacia バージョン、Next.js 15.x は App Router がデフォルトで安定しており、@stripe/stripe-js と @stripe/react-stripe-js パッケージは大幅に成熟しています。古いバージョンで構築している場合、ほとんどがそれでも適用されますが、一部のサーバーアクションパターンは異なります。

目次

Stripe + Next.js ヘッドレスコマース: 2026統合ガイド

ヘッドレスコマースに Stripe + Next.js を使う理由

Stripeは年間1兆ドル以上の決済量を処理しています。Next.js は増え続けるeコマースストアフロントを支えています — Vercel は 2026年の新規 Next.js プロジェクトの40%以上が何らかの形式のコマース機能を持っていると報告しています。その組み合わせが意味を持つのは、いくつかの具体的な理由があるためです:

  • サーバーコンポーネントとサーバーアクション により、別の API レイヤーを構築することなく、サーバー側から Stripe SDK を呼び出すことができます。
  • Edge とサーバーレスデプロイ Vercel、Netlify、または AWS 上により、支払いエンドポイントが自動的にスケーリングします。
  • React サーバーコンポーネント により、Stripe の秘密鍵がサーバーに保持され、追加の調整なしに済みます。
  • App Router により、チェックアウトフローにうまくマップするレイアウト、ローディング状態、エラー境界が提供されます。

ヘッドレスコマースアーキテクチャを評価している場合は、Social Animal で何十もこれらを構築しました — Next.js 開発機能 と ヘッドレス CMS 開発 をチェックして、これらのピースがどのように適合するかについてさらに詳しく知ることができます。

アーキテクチャの概要

コードを書く前に、アーキテクチャを正しく理解しましょう。典型的なヘッドレスコマースセットアップではピースがどのように接続されるかを示します:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│   Next.js App   │────▶│  Stripe API      │────▶│  Webhooks   │
│  (App Router)   │◀────│  (Server-side)   │     │  Endpoint   │
└─────────────────┘     └──────────────────┘     └──────┬──────┘
        │                                                │
        │                                                ▼
        ▼                                        ┌─────────────┐
┌─────────────────┐                              │  Database /  │
│  Headless CMS   │                              │  Order Mgmt  │
│  (Products)     │                              └─────────────┘
└─────────────────┘

重要な決定は、チェックアウトセッション (Stripe ホステッドまたは埋め込み) または Payment Intent (完全にカスタム UI) を使用するかどうかです。各使用すべき時期は以下の通りです:

機能 チェックアウトセッション Payment Intent
開発速度 高速 — 日単位 遅い — 週単位
UI カスタマイズ 制限 (Stripe テーマ) 完全コントロール
PCI コンプライアンス範囲 SAQ A (最もシンプル) SAQ A-EP
支払い方法サポート 自動 (40+ 方法) 手動 (方法ごと)
サブスクリプションサポート 組み込み 追加コードが必要
Apple Pay / Google Pay 自動 Payment Request API 経由の手動
コンバージョン最適化 Stripe 最適化 自力で実施
価格への影響 Stripe 手数料と同じ Stripe 手数料と同じ

正直なレコメンデーション: 特に理由がない限りチェックアウトセッションから始めてください。 いつでも後で Payment Intent に移行できます。2026年の Stripe の埋め込みチェックアウトは優れています。

Next.js 15 プロジェクトで Stripe をセットアップ

基礎をセットアップしましょう。App Router を持つ Next.js 15 プロジェクトがあると仮定しています。

npm install stripe @stripe/stripe-js @stripe/react-stripe-js

環境変数を作成します:

# .env.local
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

サーバー側 Stripe インスタンスをセットアップします。常に lib/stripe.ts ファイルに配置します:

// lib/stripe.ts
import Stripe from 'stripe';

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2025-12-18.acacia',
  typescript: true,
});

およびクライアント側ローダー:

// lib/stripe-client.ts
import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

人々がトリップする1つのこと: lib/stripe.ts をクライアントコンポーネントにインポートしないでください。 stripe npm パッケージは秘密鍵を含み、サーバー側でのみ実行されるべきです。Next.js 15 は 'use client' ファイルでうっかりインポートされた場合、ビルドエラーをスロー します。これは実際に優れたガードレールです。

Stripe + Next.js ヘッドレスコマース: 2026統合ガイド - アーキテクチャ

チェックアウトセッション: 高速パス

チェックアウトセッションは支払いを受け入れる最速の方法です。Stripe は支払いフォーム (またはそれを埋め込む) をホストし、PCI コンプライアンスを処理し、Apple Pay、Google Pay、Link を含む数十の支払い方法を自動的にサポートします。

サーバーアクションを使用したチェックアウトセッション作成

// app/actions/checkout.ts
'use server';

import { stripe } from '@/lib/stripe';
import { redirect } from 'next/navigation';

export async function createCheckoutSession(formData: FormData) {
  const priceId = formData.get('priceId') as string;
  const quantity = Number(formData.get('quantity')) || 1;

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    line_items: [
      {
        price: priceId,
        quantity,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/checkout/canceled`,
    automatic_tax: { enabled: true },
    // 関連するすべての支払い方法を有効にする
    payment_method_types: undefined, // Stripe に自動検出させる
  });

  redirect(session.url!);
}

埋め込みチェックアウト (2026年推奨アプローチ)

Stripe の埋め込みチェックアウトはユーザーをドメインに保ちます。これはコンバージョン率が向上します — Stripe 独自のデータによると、リターンカスタマーのリダイレクトベースのチェックアウトと比較して、10-15% の改善が見られます。

// app/checkout/embedded/page.tsx
'use client';

import { useCallback } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout,
} from '@stripe/react-stripe-js';

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

export default function CheckoutPage() {
  const fetchClientSecret = useCallback(async () => {
    const res = await fetch('/api/checkout/embedded', {
      method: 'POST',
      body: JSON.stringify({ priceId: 'price_xxx', quantity: 1 }),
    });
    const { clientSecret } = await res.json();
    return clientSecret;
  }, []);

  return (
    <div className="max-w-lg mx-auto py-12">
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={{ fetchClientSecret }}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  );
}

および API ルート:

// app/api/checkout/embedded/route.ts
import { stripe } from '@/lib/stripe';
import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  const { priceId, quantity } = await req.json();

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    line_items: [{ price: priceId, quantity }],
    ui_mode: 'embedded',
    return_url: `${process.env.NEXT_PUBLIC_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
  });

  return NextResponse.json({ clientSecret: session.client_secret });
}

Payment Intent: フルコントロールモード

完全カスタムチェックアウト UI が必要な場合 — ワンページチェックアウトを構築している、またはデザインチームに特定の要件がある場合 — Payment Intent は完全なコントロールを提供します。

トレードオフは本当です: より多くのコードを書き、より多くのエッジケースを処理し、わずかに高い PCI コンプライアンス負担を引き受けます。しかし、一部の製品については、それだけの価値があります。

サーバー側: Payment Intent 作成

// app/api/payment-intent/route.ts
import { stripe } from '@/lib/stripe';
import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  const { amount, currency = 'usd', metadata } = await req.json();

  const paymentIntent = await stripe.paymentIntents.create({
    amount, // セント単位
    currency,
    metadata,
    automatic_payment_methods: {
      enabled: true, // これにより Apple Pay、Google Pay、Link などが有効になります
    },
  });

  return NextResponse.json({
    clientSecret: paymentIntent.client_secret,
  });
}

クライアント側: 支払いフォーム

// components/PaymentForm.tsx
'use client';

import { useState } from 'react';
import {
  PaymentElement,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

export function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string | null>(null);
  const [processing, setProcessing] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!stripe || !elements) return;

    setProcessing(true);
    setError(null);

    const { error: submitError } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/checkout/success`,
      },
    });

    if (submitError) {
      setError(submitError.message ?? 'Payment failed');
      setProcessing(false);
    }
    // エラーがない場合、Stripe が自動的にリダイレクトします
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement
        options={{
          layout: 'accordion',
          wallets: {
            applePay: 'auto',
            googlePay: 'auto',
          },
        }}
      />
      {error && <p className="text-red-500 mt-2">{error}</p>}
      <button
        type="submit"
        disabled={!stripe || processing}
        className="mt-4 w-full bg-black text-white py-3 rounded-lg disabled:opacity-50"
      >
        {processing ? 'Processing...' : 'Pay now'}
      </button>
    </form>
  );
}

サーバー側の automatic_payment_methods: { enabled: true } に注意してください。これは支払い方法サポート処理の2026年の方法です。Stripe はカスタマーのデバイス、位置情報、通貨に基づいて、正しい支払い方法を自動的に表示します。支払い方法を手動でリストアップする必要はありません。

実際に機能するウェブフック処理

ウェブフックはほとんどの Stripe 統合が破損する場所です。ウェブフック署名を確認するのを忘れたため、または処理者が 200 を送り返す前にエラーをスロー したため、本番システムが注文を失ったのを見ました。

これは私の戦闘テスト済みウェブフック処理です:

// app/api/webhooks/stripe/route.ts
import { stripe } from '@/lib/stripe';
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';
import type Stripe from 'stripe';

export async function POST(req: Request) {
  const body = await req.text();
  const headersList = await headers();
  const signature = headersList.get('stripe-signature');

  if (!signature) {
    return NextResponse.json({ error: 'Missing signature' }, { status: 400 });
  }

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    console.error('Webhook signature verification failed:', err);
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
  }

  try {
    switch (event.type) {
      case 'checkout.session.completed': {
        const session = event.data.object as Stripe.Checkout.Session;
        await handleCheckoutComplete(session);
        break;
      }
      case 'payment_intent.succeeded': {
        const paymentIntent = event.data.object as Stripe.PaymentIntent;
        await handlePaymentSuccess(paymentIntent);
        break;
      }
      case 'payment_intent.payment_failed': {
        const paymentIntent = event.data.object as Stripe.PaymentIntent;
        await handlePaymentFailure(paymentIntent);
        break;
      }
      case 'customer.subscription.created':
      case 'customer.subscription.updated':
      case 'customer.subscription.deleted': {
        const subscription = event.data.object as Stripe.Subscription;
        await handleSubscriptionChange(subscription);
        break;
      }
      case 'invoice.payment_failed': {
        const invoice = event.data.object as Stripe.Invoice;
        await handleInvoiceFailure(invoice);
        break;
      }
      default:
        console.log(`Unhandled event type: ${event.type}`);
    }
  } catch (err) {
    console.error(`Error processing ${event.type}:`, err);
    // Stripe が再試行されないようにするために、200 を返します
    // 手動調査のためにエラーをログします
  }

  return NextResponse.json({ received: true });
}

厳しい方法で学んだウェブフック注意事項

  1. 処理失敗しても常に 200 を返します。 そうしないと Stripe が再試行し、同じイベントを複数回処理する可能性があります。エラーをログして非同期で対処します。

  2. ハンドラを冪等にします。 Stripe は同じイベントを複数回送信できます。イベント ID またはオブジェクトのメタデータを使用して、既に処理されているかどうかを確認します。

  3. 署名検証に req.json() ではなく req.text() を使用します。 署名は生ボディ文字列で計算されます。先に解析した場合、検証は常に失敗します。

  4. ローカルテストに Stripe CLI を設定します。 これは交渉の余地がありません。

stripe listen --forward-to localhost:3000/api/webhooks/stripe
  1. Vercel では、ウェブフックルートに特定の設定が必要です。 リクエストボディを変更する任意のミドルウェアの背後にルートがないことを確認します。Next.js 15 では、App Router の API ルートはデフォルトでこれを正しく処理しますが、カスタムミドルウェアがある場合は再確認してください。

サブスクリプションと定期請求

サブスクリプションは複雑さの層を追加します。1回限りの支払いを処理しているのではなく、ライフサイクルを管理しています: 試用期間、アップグレード、ダウングレード、キャンセル、失敗した支払い、ダンニング。

チェックアウトを使用したサブスクリプション作成

最も簡単なアプローチ:

// app/actions/subscribe.ts
'use server';

import { stripe } from '@/lib/stripe';
import { redirect } from 'next/navigation';

export async function createSubscriptionCheckout(
  customerId: string,
  priceId: string
) {
  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    customer: customerId,
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_URL}/account/billing?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
    subscription_data: {
      trial_period_days: 14,
      metadata: {
        plan: 'pro', // 独自メタデータ
      },
    },
    allow_promotion_codes: true,
    tax_id_collection: { enabled: true },
  });

  redirect(session.url!);
}

サブスクリプション管理

カスタマーポータルの場合 (アップグレード、ダウングレード、キャンセル、支払い方法の更新)、Stripe のカスタマーポータルは 2026年に本当に優れています:

// app/actions/billing.ts
'use server';

import { stripe } from '@/lib/stripe';
import { redirect } from 'next/navigation';

export async function createBillingPortalSession(customerId: string) {
  const session = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: `${process.env.NEXT_PUBLIC_URL}/account/billing`,
  });

  redirect(session.url);
}

キーサブスクリプションウェブフックイベント

イベント 発火時期 実施項目
customer.subscription.created 新規サブスクリプション アクセスプロビジョニング
customer.subscription.updated プラン変更、更新 アクセスレベル更新
customer.subscription.deleted キャンセル (期間終了) アクセス取り消し
invoice.payment_succeeded 成功した更新 請求記録更新
invoice.payment_failed 失敗した更新 ダンニングメール送信、アカウントフラグ設定
customer.subscription.trial_will_end 試用終了の3日前 リマインダーメール送信

API 呼び出しからのサブスクリプションステータスのみに依存しないでください。ウェブフックがサブスクリプション状態変更の信頼できるソースです。API を代わりにポーリングするチームを見たことがあり、速度が遅く、より脆弱です。

Stripe の 2026年 Payment Element の美しさは、ウォレット支払いがほぼ機能するということです。ただし、人々が見落とす設定要件がいくつかあります。

Apple Pay セットアップ

  1. ドメイン確認が必須です。 ドメインルートで .well-known/apple-developer-merchantid-domain-association ファイルをホストする必要があります。Stripe は Dashboard の設定 → 支払い方法 → Apple Pay の下でこのファイルを提供します。

  2. Next.js では、ファイルを public/.well-known/apple-developer-merchantid-domain-association に配置します。

  3. Stripe Dashboard でドメインを登録します。

  4. Apple Pay は Safari/iOS にのみ表示されます。テスト中に Chrome に表示されなくても、心配しないでください。

Google Pay セットアップ

Google Pay は設定がより少なくて済みます — Payment Element で Stripe アカウントが適切に設定されている限り、自動的に機能します。Chrome と Android デバイスで表示されます。

Link は Shop Pay への Stripe の答えです。顧客は支払い情報を一度保存し、Link を使用する任意の Stripe マーチャント全体でワンクリックでチェックアウトできます。

2026年の時点で、Link は新しい Stripe アカウントでデフォルトで有効になっています。コンバージョン向上は本当です — Stripe は返却 Link ユーザーのチェックアウト完了で大幅な改善を報告しています。リターン Link ユーザーの場合、さらに高いです。

Payment Element では Link は自動的に表示されます。チェックアウトセッションでも同じです。特別なことをする必要はありません。

// Link は Payment Element で自動ですが、カスタマイズできます:
<PaymentElement
  options={{
    wallets: {
      applePay: 'auto',
      googlePay: 'auto',
    },
    // Link はメールフィールドで自動的に表示されます
  }}
/>

Link は独自のセクションに値します。なぜなら、深刻なコンバージョンドライバーになったためです。仕組みは以下の通りです:

  1. 顧客はチェックアウトフォームにメールアドレスを入力します。
  2. Link アカウントがある場合、SMS 経由で確認コードを受け取ります。
  3. 確認後、保存されたアドレスと支払い方法が自動入力されます。
  4. 「支払う」をクリック — 完了。

重要な洞察: Link は複数のマーチャント全体で機能します。 カスタマーがまったく異なるサイトで Link を使用した場合、あなたのサイトでもワンクリック体験を得ます。Stripe のネットワーク効果は本当です — 2026年初期の時点で1億人以上の Link ユーザーを報告しています。

Link の採用を最大化するには、メールフィールドがチェックアウトフローでカスタマーが最初に操作する最初のことであることを確認します。Payment Element は accordion レイアウトでこれをうまく処理します。

さらに詳しく知りたい場合は、Express Checkout Element を使用して、Apple Pay、Google Pay、Link をフォームの上の目立つボタンとして表示できます:

// components/ExpressCheckout.tsx
'use client';

import { ExpressCheckoutElement } from '@stripe/react-stripe-js';

export function ExpressCheckout() {
  return (
    <ExpressCheckoutElement
      onConfirm={async (event) => {
        // Express 支払い確認を処理します
        console.log('Express checkout confirmed:', event);
      }}
      options={{
        buttonType: {
          applePay: 'buy',
          googlePay: 'buy',
        },
      }}
    />
  );
}

セキュリティ、テスト、ライブへの移行

セキュリティチェックリスト

  • Stripe 秘密鍵はサーバー側でのみ使用されます
  • ウェブフック署名はすべてのリクエストで検証されます
  • HTTPS は本番環境で強制されます
  • 金額計算はサーバー側で実行されます (クライアント送信金額を信頼しない)
  • API ルートにはレート制限があります
  • カスタマーデータはプライバシーポリシーに従って処理されます
  • CSP ヘッダーは Stripe のドメインを許可します (js.stripe.com、api.stripe.com)

テスト

Stripe のテストモードは優れています。以下のテストカード番号を使用します:

カード番号 シナリオ
4242 4242 4242 4242 成功した支払い
4000 0000 0000 3220 3D Secure が必須
4000 0000 0000 9995 拒否
4000 0025 0000 3155 認証が必須
4000 0000 0000 0341 カード添付が失敗 (保存カードの場合)

サブスクリプションテストの場合、Stripe のテストクロックを使用して、実際に待つことなく時間経過をシミュレートします。

ライブへの移行

  1. キーを sk_test_ から sk_live_ に、pk_test_ から pk_live_ に切り替えます。
  2. Stripe Dashboard でライブウェブフックエンドポイントをセットアップします。
  3. 本番環境用に Apple Pay ドメインを確認します。
  4. Stripe Dashboard で使用したい支払い方法を有効にします。
  5. Stripe アカウントが完全に有効化されていることを確認します (身分確認、銀行口座など)。

パフォーマンスに関する考慮事項

Stripe.js は約40KB 圧縮です。そんなに多くはありません。いくつかのヒント:

  • Stripe.js を遅延ロードします。 すべてのページで読み込まないでください — チェックアウト関連ページのみで。loadStripe 関数はこれをうまく処理します; スクリプトは呼び出すまでフェッチされません。

  • @stripe/stripe-js/pure を使用します スクリプトが正確にいつロードされるかを制御したい場合:

import { loadStripe } from '@stripe/stripe-js/pure';
// loadStripe() が呼ばれるまでスクリプトはロードされません

  • 製品ページ用のサーバーコンポーネント。 Stripe クライアントコードを製品リスティングと詳細ページから除外します。ユーザーが実際にチェックアウトを開始した場合のみクライアントコンポーネントを使用します。

  • API ルート用 Edge ランタイム。 Stripe の Node.js SDK は Edge ランタイムで機能します。export const runtime = 'edge' を Stripe API ルートに追加して、低遅延を実現できます。

高パフォーマンスヘッドレスストアフロントを構築するチームの場合、Astro のようなフレームワークはコンテンツが多いページに最適です。一方 Next.js は動的チェックアウトフローを処理します。私たちはいくつかのクライアント用にこのハイブリッドアプローチを実施しました — Astro 開発 と Next.js 開発 チームはこれらのアーキテクチャで定期的に協力しています。

FAQ

2026年の Stripe のトランザクション手数料は?

Stripe の標準価格は米国でのカード請求成功 1 件につき 2.9% + $0.30 です。ヨーロッパのカードの場合、1.5% + €0.25 です。年間 100 万ドル以上を処理するビジネスにはボリュームディスカウントがあります。標準プランに設定料金、月額料金、隠れた料金はありません。Stripe は手動入力カードに追加 0.5%、国際カードに 1% を請求します。

チェックアウトセッションまたは Payment Intent を使用すべきですか?

ほとんどの場合、チェックアウトセッションを使用します。実装がより速く、40+ の支払い方法を自動的にサポートし、PCI コンプライアンスを処理し、Stripe は継続的にコンバージョン率を最適化します。埋め込みチェックアウトでは実現できない完全カスタムチェックアウト UI が必要な場合、または支払いフロー (分割支払いや手動キャプチャなど) に対する細粒度制御が必要な場合は Payment Intent を使用します。

本番環境でウェブフック障害を処理するどうするか?

ウェブフック処理から常に 200 ステータスコードを返します。ビジネスロジックが失敗した場合でも。エラーをログして非同期で処理します。ハンドラを冪等にします。イベント ID をデータベースに照らして確認してから処理します。Stripe は指数バックオフで最大 3 日間ウェブフックを再試行します。Stripe Dashboard でウェブフック障害アラートをセットアップし、キュー (AWS SQS や Inngest など) を使用してウェブフックペイロードを非同期に処理することを検討します。

Stripe を Sanity や Contentful のようなヘッドレス CMS で使用できますか?

完全にできます。典型的なパターンは: ヘッドレス CMS で製品情報とコンテンツを保存し、Stripe で価格と支払いデータを保存し、共有製品 ID または SKU で接続します。Next.js フロントエンドが CMS からコンテンツを取得し、顧客が購入する準備ができたときに Stripe チェックアウトセッション または Payment Intent を作成します。ヘッドレス CMS 開発 で、このパターンを広く カバーしています。

ローカルで Apple Pay をテストするどうするか?

ローカルホストで Apple Pay を簡単にテストできません。HTTPS と ドメイン確認が必要なためです。最適なアプローチは、Payment Element で 4242 テストカードを使用して支払いフローをシミュレートすることです。実際の Apple Pay テストの場合、HTTPS を使用したステージング環境にデプロイします。Stripe CLI は Apple Pay トランザクションのウェブフックイベント転送もサポートしています。

Stripe Link は有効にする価値があります?

はい。Link はマーチャント向けに無料です — Stripe は追加料金を請求しません。Payment Element と Checkout Sessions で自動的に表示されます。Stripe は有効化の欠点がありません。Link ユーザーは 2026年に 100 万人を超えており、ネットワーク効果は重要です。

Next.js のメータリング請求を使用したサブスクリプションを処理するどうするか?

Stripe でメータリング価格を使用してサブスクリプションを作成します。次に、バックエンドから Usage Records API を使用して使用量を報告します。各請求期間の終了時に、Stripe が自動的に合計を計算して顧客に請求します。ウェブフック処理は invoice.payment_succeeded と invoice.payment_failed イベントをリッスンして、システムを同期させます。Cron ジョブまたはイベント駆動アーキテクチャを使用してバックエンド使用量を報告します。

国際顧客の通貨と価格を処理する最善の方法は?

Stripe Adaptive Pricing (2025年開始) はチェックアウト時に自動的に顧客の地元通貨に価格を変換します。基本通貨で価格を設定し、Stripe が変換、表示、決済を処理します。または、Stripe で異なる通貨の製品ごとに複数の価格を作成して、より詳細に制御できます。顧客の IP またはブラウザロケールを使用して、製品ページに表示する通貨を決定します。

Stripe とのヘッドレスコマース統合を構築するのにどのくらい費用がかかりますか?

スコープによります。基本的なチェックアウトセッション統合は数日で実施できます。サブスクリプション、カスタマーポータル、ウェブフック、カスタム UI を備えた完全機能のセットアップは通常、開発時間2-6週間かかります。具体的なニーズについて話し合いたい場合は、価格ページ をチェックするか お問い合わせ ください — 業界全体でこれらの統合を構築しており、現実的な見積を提供できます。