Stripe を Next.js プロジェクトに組み込んだ回数は数え切れません。毎回、状況は少しずつ変わります — 新しい API バージョン、新しい決済方法、朝 2 時にウェブフックが静かに失敗するという新しい落とし穴。このガイドは、ヘッドレスコマーススタックを最初に構築した時に存在していれば良かったと思うすべてです。Checkout Sessions、Payment Intents、ウェブフック、サブスクリプション、Apple Pay、Google Pay、Link、ワンクリックチェックアウトについて説明します。曖昧な説明はありません。実際のコード、実際のアーキテクチャ上の決定、実際の落とし穴です。

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

目次

Stripe + Next.js Headless Commerce: The 2026 Integration Guide

Stripe + Next.js がヘッドレスコマースに最適な理由

Stripe は毎年 1 兆ドル以上の決済額を処理しています。Next.js は成長するイーコマース店舗の一部を支えています — Vercel が報告した 2025 年の新規 Next.js プロジェクトの 40% 以上がある形式のコマース機能を持っていました。この組み合わせは、いくつかの具体的な理由で意味があります:

  • Server Components と Server Actions により、別の API レイヤーを構築せずに Stripe SDK をサーバー側で呼び出せます。
  • Edge およびサーバーレスデプロイメント (Vercel、Netlify、AWS) により、決済エンドポイントが自動的にスケールします。
  • React Server Components により、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)     │                              └─────────────┘
└─────────────────┘

重要な決定は、Checkout Sessions (Stripe ホスト型または埋め込み型) または Payment Intents (完全カスタム UI) のどちらを使用するかです。各機能を使用する場合は以下の通りです:

機能 Checkout Sessions Payment Intents
開発速度 高速 — 数日 遅い — 数週間
UI カスタマイズ 制限あり (Stripe テーマ) 完全にコントロール可能
PCI コンプライアンススコープ SAQ A (最も簡単) SAQ A-EP
決済方法のサポート 自動 (40+ 方法) 方法ごとに手動
サブスクリプションサポート 組み込み 追加コードが必要
Apple Pay / Google Pay 自動 Payment Request API 経由で手動
コンバージョン最適化 Stripe 最適化 自分でやる
価格への影響 同じ Stripe 手数料 同じ Stripe 手数料

正直なところ、推奨事項は 特に理由がない限り Checkout Sessions で開始することです。 後で Payment Intents に移行できますし、Stripe の埋め込みチェックアウトは 2025-2026 年に驚くほど良くなっています。

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!
);

人々をつまずかせるもの: lib/stripe.ts をクライアントコンポーネントにインポートしないでください。 stripe npm パッケージはシークレットキーを含んでおり、サーバー側でのみ実行する必要があります。誤ってクライアントファイルでインポートすると、Next.js 15 はビルドエラーをスローします。これは実際に良いガードレールです。

Stripe + Next.js Headless Commerce: The 2026 Integration Guide - architecture

Checkout Sessions: 最速パス

Checkout Sessions は決済を受け入れる最速の方法です。Stripe は支払いフォーム (または埋め込み) をホストし、PCI コンプライアンスを処理し、Apple Pay、Google Pay、Link を含む数十の決済方法を自動的にサポートしています。

Server Actions でのチェックアウトセッションの作成

// 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 の 2025 年自身のデータは、リダイレクトベースのチェックアウトと比べてリターンユーザーで 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 Intents: フルコントロールモード

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

トレードオフは実在します: より多くのコードを書き、より多くのエッジケースを処理し、若干高い PCI コンプライアンス負担を負う必要があります。しかし、一部の製品では、価値があります。

サーバー側: Payment Intents の作成

// 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 } に注意してください。これは 2025-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 ルートはデフォルトでこれを正しく処理しますが、カスタムミドルウェアがある場合は再度チェックしてください。

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

サブスクリプションは複雑さの層を追加します。単なるワンタイム決済ではなく、ライフサイクルを管理しています: トライアル、アップグレード、ダウングレード、キャンセル、失敗した決済、 dunning。

チェックアウト経由でのサブスクリプションの作成

最も簡単なアプローチ:

// 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 失敗した更新 dunning メール送信、アカウントフラグ
customer.subscription.trial_will_end トライアル終了 3 日前 リマインダーメール送信

API 呼び出しからのサブスクリプションステータスのみに頼らないでください。ウェブフックはサブスクリプション状態変化の真実の源です。API をポーリングするのではなくウェブフックを使用するチームを見ました。これは遅く、より脆弱です。

2025-2026 年の Stripe の Payment Element の美しさは、ウォレット決済がほとんど機能することです。しかし、いくつかのセットアップ要件があります。人々は見落とします。

Apple Pay のセットアップ

  1. ドメイン検証が必要です。 ドメインルートで .well-known/apple-developer-merchantid-domain-association ファイルをホストする必要があります。Stripe は Settings → Payment Methods → Apple Pay のダッシュボードにこのファイルを提供します。

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

  3. Stripe ダッシュボードでドメインを登録します。

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

Google Pay のセットアップ

Google Pay は必要なセットアップが少なくなります — Stripe アカウントが適切に設定されている限り、Payment Element で自動的に動作します。Chrome および Android デバイスに表示されます。

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

2026 年の時点で、Link は新しい Stripe アカウントでデフォルトで有効になっています。コンバージョン上昇は実在します — Stripe は、Link が利用可能な場合、リターンユーザーのチェックアウト完了が 7% 高いと報告しています。

Payment Element では、Link は自動的に表示されます。Checkout Sessions では、それも自動です。特に何をする必要はありません。

// 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) => {
        // エクスプレス決済確認を処理する
        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 ダッシュボードで本番ウェブフックエンドポイントをセットアップします。
  3. 本番環境に Apple Pay ドメインを検証します。
  4. Stripe ダッシュボードで必要な決済方法を有効にします。
  5. Stripe アカウントが完全にアクティベートされていることを確認します (身元確認、銀行口座など)。

パフォーマンスの考慮事項

Stripe.js は gzip 圧縮で約 40KB です。これはわずかではありません。以下がいくつかのヒントです:

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

  • @stripe/stripe-js/pure を使用して スクリプトが正確にいつ読み込まれるかを制御したい場合:

import { loadStripe } from '@stripe/stripe-js/pure';
// loadStripe() が呼び出されるまでスクリプトは読み込まれません

  • 製品ページ用 Server Components。 Stripe クライアントコードを製品リストと詳細ページから削除してください。ユーザーが実際にチェックアウトを開始する場合にのみクライアントコンポーネントを持ち込みます。

  • API ルート用 Edge ランタイム。 Stripe の Node.js SDK は 2025 年の時点で Edge ランタイムで動作します。Stripe API ルートに export const runtime = 'edge' を追加して、より低いレイテンシーを得ることができます。

高性能なヘッドレスストアフロントを構築するチームの場合、Astro などのフレームワークは、コンテンツが豊富なページに適している可能性があります。 チェックアウトフローを処理する Next.js。これらのハイブリッドアプローチをいくつかのクライアントで実施しました — 私たちの Astro 開発 と Next.js 開発 チームはこれらのアーキテクチャで協力しています。

FAQ

2026 年の Stripe の取引手数料はいくらですか?

Stripe の標準価格は、米国の成功したカード請求あたり 2.9% + $0.30 です。ヨーロッパのカードでは 1.5% + €0.25 です。年間 100 万ドルを超える金額を処理するビジネスではボリューム割引が利用可能です。標準プランではセットアップ手数料、月額料金、隠れた請求はありません。Stripe は手動で入力されたカードに追加 0.5%、国際カードに 1% を請求します。

Checkout Sessions または Payment Intents を使用すべきですか?

大部分のケースでは Checkout Sessions を使用してください。これらはより速く実装でき、自動的に 40 以上の決済方法をサポートし、PCI コンプライアンスを処理します。Payment Intents は、完全にカスタムなチェックアウト UI が必要な場合に使用してください。埋め込まれたチェックアウトでは実現できないか、または決済フローを細かく制御する必要があります (分割決済や手動キャプチャなど)。

本番環境でウェブフック障害を処理するにはどうすればよいですか?

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

Sanity または Contentful などのヘッドレス CMS で Stripe を使用できますか?

絶対的に。典型的なパターンは: ヘッドレス CMS に製品情報とコンテンツを保存し、Stripe に価格と決済データを保存し、共有の製品 ID または SKU を介してそれらを接続します。Next.js フロントエンドはヘッドレス CMS からコンテンツを取得し、顧客が購入する準備ができたときに Stripe Checkout Sessions または Payment Intents を作成します。我々の ヘッドレス CMS 開発 作業でこのパターンを広範にカバーしています。

ローカル環境で Apple Pay をテストするにはどうすればよいですか?

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

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

はい。Link はマーチャント向けは無料です — Stripe は追加費用を請求しません。Payment Element と Checkout Sessions に自動的に表示されます。有効にすることによるデメリットはなく、2026 年に 1 億人以上の Link ユーザーがいると考えると、ネットワーク効果は重要です。

Next.js でメータリング請求を含むサブスクリプションを処理するにはどうすればよいですか?

Stripe でメータリング価格を含むサブスクリプションを作成します。その後、バックエンドから Usage Records API を使用して使用状況を報告します。各請求期間の終了時に、Stripe は合計を自動的に計算し、顧客に請求します。ウェブフックハンドラーは invoice.payment_succeeded および invoice.payment_failed イベントをリッスンして、システムを同期に保つ必要があります。使用状況をサーバー側から cron ジョブまたはイベント駆動型アーキテクチャを使用して報告してください。

国際的な顧客向けの通貨と価格設定を処理する最適な方法は何ですか?

Stripe Adaptive Pricing (2025 年発売) はチェックアウト時に価格を自動的に顧客のローカル通貨に変換します。基本通貨で価格を設定し、Stripe が変換、表示、決済を処理します。または、さらに制御するために Stripe でさまざまな通貨で製品あたり複数の価格を作成できます。顧客の IP またはブラウザーのロケールを使用して、製品ページで表示する通貨を決定してください。

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

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