読み込み中...

カテゴリー

トラブルシューティング設定・環境構築実装設計学習メモ技術勉強会日常

アーカイブ

トラブルシューティング

2026年2月26日

Cloudflare TypeScript

【トラブルシューティング】Stripe SDK を Cloudflare Workers で動かす

はじめに
この記事でわかること
対象読者
前提条件
1. エラーの内容
2. 解決策: Fetch API ベースの HTTP クライアント
3. Workers での Webhook 設定
4. 検証したフロー
Tips
まとめ

💡

Stripe SDK を Cloudflare Workers で使うと接続エラーが発生します。Stripe.createFetchHttpClient() で Fetch API ベースに切り替える解決策と、Webhook 設定までの全フローを解説します。

はじめに

Stripe Checkout でサブスクリプション決済を実装しているアプリを Cloudflare Workers に移行したところ、Stripe API への接続でエラーが発生しました。原因と解決策を共有します。

この記事でわかること

Workers で Stripe SDK が動かない原因
Stripe.createFetchHttpClient() による解決方法
Workers 環境での Stripe Webhook 設定
デバッグのコツ

対象読者

Stripe SDK を Cloudflare Workers で使おうとしてエラーになった方
サーバーレス環境で Stripe を動かしたい方

前提条件

Stripe SDK v12+
Cloudflare Workers デプロイ環境
Stripe アカウント

1. エラーの内容

Workers 上で Stripe Checkout Session を作成すると、以下のエラーが発生します。

An error occurred with our connection to Stripe.
Request was retried 2 times.

原因

Stripe SDK はデフォルトで Node.js の http/https モジュールを使って HTTP リクエストを送信します。Cloudflare Workers にはこれらのモジュールが存在しないため、接続エラーになります。

2. 解決策: Fetch API ベースの HTTP クライアント

Stripe SDK に内蔵されている Fetch API ベースのクライアントを使用します。

// src/lib/stripe.ts
import Stripe from "stripe";

if (!process.env.STRIPE_SECRET_KEY) {
  throw new Error("STRIPE_SECRET_KEY is not set");
}

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  typescript: true,
  httpClient: Stripe.createFetchHttpClient(),
});

💡

Stripe.createFetchHttpClient() は Stripe SDK v12+ に内蔵されている Fetch API ベースのクライアントです。Workers の Fetch API と完全互換で、この 1 行を追加するだけで解決します。

3. Workers での Webhook 設定

Stripe CLI で Webhook エンドポイントを作成します。

# Webhook エンドポイント作成
stripe webhook_endpoints create \
  --url https://your-app.workers.dev/api/stripe/webhook \
  --enabled-events checkout.session.completed,customer.subscription.updated,customer.subscription.deleted

Webhook Secret を Workers の環境変数に設定します。

npx wrangler secret put STRIPE_WEBHOOK_SECRET

4. 検証したフロー

以下の全フローが Workers 上で動作することを確認しました。

/api/stripe/checkout → Stripe 決済ページにリダイレクト
テストカード（4242 4242 4242 4242）で決済完了
Webhook で checkout.session.completed イベント受信
DB のユーザープランが pro に更新
/api/stripe/portal → Customer Portal でプラン管理

Tips

1️⃣

Stripe のエラーメッセージは「connection to Stripe」としか出ないため、原因特定が難しいです。デバッグ時はレスポンスボディにエラー詳細を一時的に含めると原因特定しやすいです。

2️⃣

Workers Secret の設定は wrangler secret put コマンドで行います。wrangler.jsonc には書かないでください。

まとめ

Stripe SDK はデフォルトで Node.js http を使うため Workers でエラー
Stripe.createFetchHttpClient() で Fetch API ベースに切り替えて解決
Webhook Secret は wrangler secret put で設定
エラーメッセージが曖昧なので、デバッグ時はレスポンスに詳細を含めるのがコツ

すべて見る

設定・環境構築

kt-tech.blog

最新記事

カテゴリー

タグ

アーカイブ

目次

【トラブルシューティング】Stripe SDK を Cloudflare Workers で動かす

はじめに

この記事でわかること

対象読者

前提条件

1. エラーの内容

原因

2. 解決策: Fetch API ベースの HTTP クライアント

3. Workers での Webhook 設定

4. 検証したフロー

Tips

まとめ

関連記事

【設定・環境構築】OpenNext でNext.js SSGサイトをCloudflare Workersにデプロイする完全ガイド

【実装】Notion calloutブロックをNext.jsでカラフルなUIコンポーネントとして表示する

【トラブルシューティング】Cloudflare Pages → Workers 移行で遭遇したEdge Runtime問題集