新規投稿のお知らせを受信されたい方は、サブスクリプションをご登録ください:

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

2021-11-19

3分で読了
この投稿はEnglishおよび简体中文でも表示されます。

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

Announcing native support for Stripe’s JavaScript SDK in Cloudflare Workers

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 チャンネルで成果を共有してください。 — 招待リンクはこちらから

Cloudflareは企業ネットワーク全体を保護し、お客様がインターネット規模のアプリケーションを効率的に構築し、あらゆるWebサイトやインターネットアプリケーションを高速化し、DDoS攻撃を退けハッカーの侵入を防ぎゼロトラスト導入を推進できるようお手伝いしています。

ご使用のデバイスから1.1.1.1 にアクセスし、インターネットを高速化し安全性を高めるCloudflareの無料アプリをご利用ください。

より良いインターネットの構築支援という当社の使命について、詳しくはこちらをご覧ください。新たなキャリアの方向性を模索中の方は、当社の求人情報をご覧ください。
Full Stack WeekCloudflare WorkersJavaScript開発者Developer Platform

Xでフォロー

Kristian Freeman|@kristianf_
Cloudflare|@cloudflare

関連ブログ投稿

2024年10月31日 13:00

Moving Baselime from AWS to Cloudflare: simpler architecture, improved performance, over 80% lower cloud costs

Post-acquisition, we migrated Baselime from AWS to the Cloudflare Developer Platform and in the process, we improved query times, simplified data ingestion, and now handle far more events, all while cutting costs. Here’s how we built a modern, high-performing observability platform on Cloudflare’s network. ...

2024年10月24日 13:05

Build durable applications on Cloudflare Workers: you write the Workflows, we take care of the rest

Cloudflare Workflows is now in open beta! Workflows allows you to build reliable, repeatable, long-lived multi-step applications that can automatically retry, persist state, and scale out. Read on to learn how Workflows works, how we built it on top of Durable Objects, and how you can deploy your first Workflows application....