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

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月09日 13:00

Improving platform resilience at Cloudflare through automation

We realized that we need a way to automatically heal our platform from an operations perspective, and designed and built a workflow orchestration platform to provide these self-healing capabilities across our global network. We explore how this has helped us to reduce the impact on our customers due to operational issues, and the rich variety of similar problems it has empowered us to solve....

2024年9月27日 13:00

AI Everywhere with the WAF Rule Builder Assistant, Cloudflare Radar AI Insights, and updated AI bot protection

This year for Cloudflare’s birthday, we’ve extended our AI Assistant capabilities to help you build new WAF rules, added new AI bot & crawler traffic insights to Radar, and given customers new AI bot blocking capabilities...