Astro に Stripe を追加する方法

Stripe と Astro の統合: ステップバイステップ ガイド

このチュートリアルでは、新しいプロジェクトの作成から Webhook の処理、チェックアウト セッションの作成まで、Astro プロジェクトで Stripe をセットアップする方法を説明します。

ステップ 1: 新しい Astro プロジェクトの作成

始めるには、次のコマンドを使用して新しい Astro プロジェクトを作成する必要があります:

npm create astro@latest

使用されている Astro のバージョンは 4.16.5 です

ステップ 2: Stripe のインストール

次に、Stripe パッケージをインストールします。

npm i stripe

使用されている Stripe のバージョンは 17.2.0 です

ステップ 3: ストライプの構成

Stripe を初期化し、その構成を処理するために、src/lib/ストライプ.ts というファイルを作成します。

import Stripe from 'stripe';

if (!import.meta.env.STRIPE_SECRET_KEY) {
    throw new Error('Missing Stripe secret key');
}

export const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY, {
    apiVersion: '2024-09-30.acacia',
});

ここでは特別なことは何もありません。apiVersion がストライプ バージョン (17.2.0 の場合は 2024-09-30.acacia ) に基づいているという事実だけです

その後、src/lib/get-prices.ts に新しいファイルを作成し、次の内容を追加します。

export async function getPrices() {
    const data = [
        {
            id: 1,
            amount: 1000,
            title: 'One time Price 1',
        },
        {
            id: 2,
            amount: 1000,
            title: 'One time Price 2',
        },
        {
            id: 3,
            amount: 1500,
            credits: 10,
            title: '10 credits',
        },
        {
            id: 4,
            amount: 3000,
            credits: 25,
            title: '25 credits',
        },
    ];
    return data;
}

ここで価格を設定します。

ステップ 4: Webhook 用の Stripe CLI のセットアップ

Webhook を使用すると、Stripe はサーバーにイベント (支払い完了など) を通知できます。これらのイベントをローカルでリッスンするには、次のものが必要です:

"stripe:listen": "stripe listen --forward-to http://localhost:4321/api/webhooks/stripe"

ローカル サーバーが Stripe イベントを受信できるようにする Stripe CLI もインストールする必要があります。 Stripe CLI のインストール方法の詳細については、https://docs.ストライプ.com/ストライプ-cli を参照してください。

その後、次を実行します:

npm run stripe:listen

ログインを求められる場合があり、その後、同様のメッセージが表示されます。

Ready! You are using Stripe API Version. Your webhook signing secret is whsec_something

ステップ 5: 環境変数の構成

プロジェクトのルートに、次の内容を含む .env ファイルを作成します。

STRIPE_SECRET_KEY=your_secret_key_from_stripe
STRIPE_SIGNING_SECRET=signing_key_from_stripe_cli

ステップ 6: Tailwind CSS と Node.js を追加する

基本的なスタイルを設定し、バックエンド リクエストを処理するには、Tailwind CSS と Node.js の統合をプロジェクトに追加します。

npx astro add tailwind
npx astro add node

ステップ 7: Stripe チェックアウト アクションの作成

Astro のアクションの詳細については、https://docs.astro.build/en/guides/actions/ をご覧ください。

ここで、チェックアウトプロセスを処理するアクションを作成します。次のコードを使用して src/actions/index.ts にファイルを作成します:

import { ActionError, defineAction } from "astro:actions";
import { z } from "astro:schema";
import { getPrices } from "../lib/get-prices";
import { stripe } from "../lib/stripe";

export const server = {
  createCheckout: defineAction({
    input: z.object({
      priceId: z.number(),
    }),
    accept: "form",
    handler: async (input) => {
      const prices = await getPrices();
      const price = prices.find((p) => p.id === input.priceId);

      if (!price) {
        throw new ActionError({
          code: "NOT_FOUND",
          message: "Price not found.",
        });
      }

      const baseUrl = 'http://localhost:4321'; // replace with your production URL

      const stripeSession = await stripe.checkout.sessions.create({
        mode: "payment",
        payment_method_types: ["card"],
        line_items: [
          {
            quantity: 1,
            price_data: {
              unit_amount: price.amount,
              currency: "usd",
              product_data: {
                name: price.title,
                description: `Buy ${price.title} product`,
              },
            },
          },
        ],
        metadata: {
          priceId: price.id,
        },
        success_url: `${baseUrl}/?stripe=success`,
        cancel_url: `${baseUrl}/?stripe=cancel`,
      });

      if (!stripeSession.url) {
        throw new ActionError({
          code: "NOT_FOUND",
          message: "Could not create Stripe session",
        });
      }

      return {
        url: stripeSession.url,
      };
    },
  }),
};

ここでは、フロントエンドからpriceIdを取得しているだけです。価格リスト内でそれを探します。見つかった場合は、ストライプ チェックアウト セッションを作成し、その URL をフロントエンドに送信します。ストライプ セッションの場合、支払い後にユーザーがリダイレクトされる成功/キャンセル URL を指定する必要があります。また、Webhook に受信する追加のメタデータを追加する可能性もあります。通常、ここにpriceIdとuserIdを追加します。

ステップ 8: チェックアウト フォームのレンダリング

次に、価格カードを表示し、チェックアウト ボタンを統合しましょう。次のコードを src/pages/index.astro に追加します:

---
import Layout from '../layouts/Layout.astro';
import { getPrices } from '../lib/get-prices';
import { actions } from 'astro:actions';

const prices = await getPrices();

const result = Astro.getActionResult(actions.createCheckout);
if (result && !result.error) {
    return Astro.redirect(result.data.url)
}
---

<Layout title="Welcome to Astro.">
    <h1 class="text-center text-5xl font-bold text-gray-200">Pricing</h1>
    <ul class="mt-12 grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 p-4">
        {
            prices.map((price) => (
                <li class="mx-auto w-full max-w-5xl space-y-4 rounded-lg bg-gray-900 p-8 text-white">
                    <h2 class="text-2xl font-bold">{price.title}</h2>
                    <p class="mt-4 text-3xl font-bold">${price.amount / 100}</p>
                    <form method="POST" action={actions.createCheckout}>
                        <input type="hidden" name="priceId" value={price.id} />
                        <button class="bg-blue-500 text-white hover:bg-blue-600 p-4">
                            Buy
                        </button>
                    </form>
                </li>
            ))
        }
    </ul>
</Layout>

ここでは、サーバー上の価格を取得し、価格ごとにカードを作成しています。次に、価格ごとに、ストライプ チェックアウト セッションを受信するために、前に定義したアクションを呼び出すフォームがあります。その後、ユーザーをストライプページにリダイレクトします。

ステップ 9: Stripe 用の Webhook の作成

最後に、Stripe Webhook イベントを処理します。次のコードを使用して、ファイル src/pages/api/webhooks/ストライプ.ts を作成します:

import type { APIRoute } from 'astro';
import type Stripe from 'stripe';
import { stripe } from '../../../lib/stripe';

type Metadata = {
    priceId: string;
};

export const POST: APIRoute = async ({ request }) => {
    const signature = request.headers.get('stripe-signature');
    if (!signature) {
        return new Response(JSON.stringify({ error: 'Invalid signature' }), {
            status: 400,
            headers: {
                'Content-Type': 'application/json',
            },
        });
    }

    const stripeSigningSecret = import.meta.env.STRIPE_SIGNING_SECRET as string;
    try {
        const event = stripe.webhooks.constructEvent(
            await request.text(),
            signature,
            stripeSigningSecret,
        );

        const completedEvent = event.data.object as Stripe.Checkout.Session & {
            metadata: Metadata;
        };

        if (event.type === 'checkout.session.completed') {
            console.log('Paid', completedEvent.amount_total);
            console.log('Metadata', completedEvent.metadata);

            // Update your database or user status here
        }
        return new Response(JSON.stringify({ success: true, error: null }), {
            status: 200,
            headers: {
                'Content-Type': 'application/json',
            },
        });
    } catch (err) {
        return new Response(
            JSON.stringify({
                success: false,
                error: (err as { message: string }).message,
            }),
            {
                status: 500,
                headers: {
                    'Content-Type': 'application/json',
                },
            },
        );
    }
};

この Webhook は、Stripe からの checkout.session.completed イベントをリッスンします。イベントを受信すると、データベースを更新したり、ユーザーのアカウントに変更を適用したり、その他の支払い後のアクションをトリガーしたりできます。

結論

それだけです!これらの手順に従うことで、Stripe を Astro プロジェクトに正常に統合できます。とても簡単ですよね?

以上がAstro に Stripe を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。