Cloudflare Workersで、StripeのJavaScript SDKをネイティブサポート

アプリの中で支払いを処理することは、オンラインビジネスを構築する上で非常に重要です。多くの開発者が決済のプラットフォームに選ぶのがStripeです。私が初めてStripeに出会ったのは約7年前ですが、このサービスは単純な支払い処理をはるかに超えて進化しています。昨年紹介したeコマースのサンプルアプリケーションでは、StripeはConnect製品を使って完全な販売者のマーケットプレイスを管理していました。単に支払いを受け取るだけでなく、それ以上のことをしたいと考えている開発者にとって、Stripeの製品スイートは素晴らしいものです。

StripeのSDKの初期バージョンは、多くの人気JavaScriptパッケージと同様に、コアとなるNode.jsに依存していました。Stripeの場合は、HTTPインタラクションを処理するために、`net/http`のようなNode.jsのコアライブラリと直接やりとりしていました。V8ベースのランタイムであるCloudflare Workersの場合、これは公式のStripe JSライブラリが動作しないことを意味し、Stripeの（ドキュメントが充実した）REST APIを使用するようにフォールバックする必要がありました。そうすると、StripeのネイティブJSライブラリを使用するメリットが失われてしまいます。例えば、エディタでの自動タイプチェックや、Stripeの様々な機能を操作するためのHTTPリクエストを手動で作成する代わりに、 stripe.customers.create()  のようなシンプルな関数呼び出しができるというメリットです。

4月には、Workersと互換性のあるJavaScriptパッケージの数をと書きました。

ユーザーが人気のあるNode.jsライブラリをシームレスにインポートできるようになるまで、私たちは努力を止めません。この取り組みは大規模かつ継続的なものですが、その価値は十分にあると当社では考えています。

Cloudflare Workers用 stripe JSパッケージの一般提供を発表できて嬉しく思います。お客様のプロジェクトにネイティブのStripe SDKを直接使用いただけるようになります。まずは、プロジェクトに 'stripe' をインストールしてください（ npm i stripe ）。

また、Cloudflare Pagesにサイトをデプロイしている開発者の方は、アプリケーションと共にStripeを使い始めることができるようになりました。今週発表されたCloudflare Pagesでのサーバーレス関数サポートにより、Pagesプロジェクトに数行のJavaScriptを追加するだけで、デジタル製品の支払いを受け付けたり、会員制サイトの購読を処理することができます。追加の設置は必要なく、Pagesサイトと同様に自動的に拡張も行われます。

この機能を紹介するために、オープンソースのリポジトリに Stripe Checkout をPagesアプリケーションに統合する方法の例を用意しました。昨日お知らせした通り、Pagesの新しいWorkers Functions機能では、プロジェクトに新しい functions フォルダを追加するだけで、無限に拡張可能な関数を展開することができます。 この機能は、 stripe.pages.devでご覧いただけます。 また、 GitHubのオープンソースリポジトリもご覧ください。

このSDKをインストールすれば、アプリケーションで直接支払いを受け付けることができます。以下の例では、新しいCheckout（支払い）セッションを開始して、ホストされたStripe支払いペー[1] ジへリダイレクトする方法を示しています。

Cloudflare WorkersではStripe SDKをネイティブにサポートしているため、決済処理だけでなく、様々な機能を利用することができます。Stripeの豊富なドキュメントに掲載されているJavaScriptのサンプルは、何の変更も必要なくWorkersで直接動作します。

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

// use web crypto 
export const webCrypto = Stripe.createSubtleCryptoProvider();

export function getStripe({env}){
  if(!env?.STRIPE_KEY){
    throw new Error('Can not initialize Stripe without STRIPE_KEY');
  }
  const client = Stripe(env.STRIPE_KEY, {
      httpClient: Stripe.createFetchHttpClient(), // ensure we use a Fetch client, and not Node's `http`
  });
  return client;
}



export default {
  async fetch(request, env) {
    const stripe = getStripe({ env })
    const session = await stripe.checkout.sessions.create({
      line_items: [{
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      }],
      payment_method_types: [
        'card',
      ],
      mode: 'payment',
      success_url: `${YOUR_DOMAIN}/success.html`,
      cancel_url: `${YOUR_DOMAIN}/cancel.html`,
    });

    return Response.redirect(session.url)
  }
}

特に、StripeのwebhookをWorkersで処理することで、新しいインフラを構築することなく、既存のプロジェクトがどのように機能しているかをよりよく把握することができます。以下の例では、Workers関数に送られてくるwebhookリクエストを安全に検証し、そのWebhook内のデータを解析してビジネスロジックを実行する方法を示しています。

当社はまた、Stripeとのパートナーシップにより、新しいWorkersのテンプレートを発表します。このテンプレートにより、StripeとWorkersを使って、ベスト・プラクティスを活用しながら、すぐに使い始めることができます。

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

// use web crypto 
export const webCrypto = Stripe.createSubtleCryptoProvider();

export function getStripe({env}){
  if(!env?.STRIPE_KEY){
    throw new Error('Can not initialize Stripe without STRIPE_KEY');
  }
  const client = Stripe(env.STRIPE_KEY, {
      httpClient: Stripe.createFetchHttpClient(), // ensure we use a Fetch client, and not Node's `http`
  });
  return client;
}

export default {
  async fetch(request, env) {
    const stripe = getStripe({ env })
    const body = await request.text()
    const sig = request.headers.get('stripe-signature')
    
const event = await stripe.webhooks.constructEventAsync(
      body
      sig,
      env.STRIPE_ENDPOINT_SECRET,
      undefined,
      webCrypto
    );


    // Handle the event
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        // Then define and call a method to handle the successful payment intent.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Then define and call a method to handle the successful attachment of a PaymentMethod.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      // ... handle other event types
      default:
        console.log(`Unhandled event type ${event.type}`);
    }

    // Return a response to acknowledge receipt of the event
    return new Response(JSON.stringify({ received: true }), {
      headers: { 'Content-type': 'application/json' }
    })
  }
}

5分以内に、次のデジタル製品や会員制ビジネスのための決済を開始することができます。また、単一のコードベースで、受信したWebhookをエッジで処理し、検証することができます。これには、初期費用やサーバーのプロビジョニングなど、スケーリングに関する標準的な問題は一切ありません。サーバーレス機能をCloudflareのエッジにデプロイして、お金儲けを始めましょう！

StripeではCloudflare Workersの大ファンです。エッジでの強力なパフォーマンスと素晴らしいサーバーレス開発エクスペリエンスの中で、皆様がStripeを使ってどんな斬新な方法で素敵なアプリを作るのかか、見るのが楽しみです。— Stripe、Brian Holt氏

StripeのJavaScript SDKにこのような素晴らしいアップデートが加えられたことを、大変嬉しく思います。WorkersでStripeをネイティブにサポートすることで、皆様がどのようなアプリを作ってくれるのか期待しています。当社のDiscordサーバーに参加して、#what-i-built チャンネルで成果を共有してください。 — 招待リンクはこちらから。