So fügen Sie Stripe zu Astro hinzu-js-Tutorial-php.cn

How to add Stripe to Astro

Stripe mit Astro integrieren: Eine Schritt-für-Schritt-Anleitung

In diesem Tutorial zeige ich Ihnen, wie Sie Stripe in einem Astro-Projekt einrichten, von der Erstellung eines neuen Projekts über die Handhabung von Webhooks bis hin zur Erstellung von Checkout-Sitzungen.

Schritt 1: Erstellen eines neuen Astro-Projekts

Um zu beginnen, müssen wir mit dem folgenden Befehl ein neues Astro-Projekt erstellen:

npm create astro@latest

Nach dem Login kopieren

Die verwendete Version von Astro ist 4.16.5

Schritt 2: Stripe installieren

Als nächstes installieren Sie das Stripe-Paket.

npm i stripe

Nach dem Login kopieren

Die verwendete Stripe-Version ist 17.2.0

Schritt 3: Stripe konfigurieren

Erstellen Sie eine Datei mit dem Namen src/lib/stripe.ts, um Stripe zu initialisieren und seine Konfiguration zu verwalten:

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',
});

Nach dem Login kopieren

Hier gibt es nichts Besonderes, nur die Tatsache, dass die apiVersion auf der Stripe-Version basiert (für 17.2.0 ist 2024-09-30.acacia)

Danach erstellen Sie eine neue Datei in src/lib/get-prices.ts und fügen Sie Folgendes hinzu:

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;
}

Nach dem Login kopieren

Hier konfigurieren wir die Preise.

Schritt 4: Einrichten der Stripe-CLI für Webhooks

Webhooks ermöglichen es Stripe, Ihren Server über Ereignisse (z. B. Zahlungsabschlüsse) zu benachrichtigen. Um diese Veranstaltungen vor Ort zu hören, benötigen wir Folgendes:

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

Nach dem Login kopieren

Sie müssen außerdem die Stripe-CLI installieren, die es Ihrem lokalen Server ermöglicht, Stripe-Ereignisse zu empfangen. Weitere Details zur Installation der Stripe CLI finden Sie unter https://docs.stripe.com/stripe-cli.

Danach führen Sie Folgendes aus:

npm run stripe:listen

Nach dem Login kopieren

Möglicherweise werden Sie aufgefordert, sich anzumelden, und danach sollte eine ähnliche Meldung angezeigt werden:

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

Nach dem Login kopieren

Schritt 5: Umgebungsvariablen konfigurieren

Erstellen Sie im Stammverzeichnis Ihres Projekts eine .env-Datei mit folgendem Inhalt:

STRIPE_SECRET_KEY=your_secret_key_from_stripe
STRIPE_SIGNING_SECRET=signing_key_from_stripe_cli

Nach dem Login kopieren

Schritt 6: Hinzufügen von Tailwind CSS und Node.js

Für den grundlegenden Stil und zur Bearbeitung der Backend-Anfragen fügen Sie Tailwind CSS- und Node.js-Integrationen zu Ihrem Projekt hinzu:

npx astro add tailwind
npx astro add node

Nach dem Login kopieren

Schritt 7: Stripe Checkout-Aktion erstellen

Weitere Informationen zu Aktionen in Astro finden Sie unter https://docs.astro.build/en/guides/actions/.

Wir werden nun eine Aktion erstellen, um den Checkout-Prozess abzuwickeln. Erstellen Sie eine Datei unter src/actions/index.ts mit dem folgenden Code:

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,
      };
    },
  }),
};

Nach dem Login kopieren

Hier übernehmen wir einfach die Preis-ID aus dem Frontend und suchen in unserer Preisliste danach. Wenn wir es finden, erstellen wir eine Stripe-Checkout-Sitzung und senden die URL an das Frontend. Für die Stripe-Sitzung müssen wir eine Erfolgs-/Abbruch-URL angeben, wohin der Benutzer nach der Zahlung weitergeleitet werden soll. Außerdem haben wir die Möglichkeit, zusätzliche Metadaten, die wir erhalten, in unseren Webhook einzufügen. Hier fügen Sie normalerweise die Preis-ID und die Benutzer-ID hinzu.

Schritt 8: Rendern des Checkout-Formulars

Lassen Sie uns nun Preiskarten anzeigen und den Checkout-Button integrieren. Fügen Sie den folgenden Code zu src/pages/index.astro hinzu:

---
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>

Nach dem Login kopieren

Hier rufen wir die Preise auf dem Server ab und erstellen Karten für jeden Preis. Dann haben wir für jeden Preis ein Formular, das die zuvor definierte Aktion aufruft, um die Stripe-Checkout-Sitzung zu erhalten. Danach leiten wir den Benutzer zur Stripe-Seite weiter.

Schritt 9: Erstellen eines Webhooks für Stripe

Abschließend behandeln Sie Stripe-Webhook-Ereignisse. Erstellen Sie die Datei src/pages/api/webhooks/stripe.ts mit dem folgenden Code:

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',
                },
            },
        );
    }
};

Nach dem Login kopieren

Dieser Webhook wartet auf das checkout.session.completed-Ereignis von Stripe. Nach Erhalt des Ereignisses können Sie Ihre Datenbank aktualisieren, Änderungen am Konto des Benutzers vornehmen oder eine andere Aktion nach der Zahlung auslösen.

Abschluss

Das ist es! Wenn Sie diese Schritte befolgen, können Sie Stripe erfolgreich in Ihr Astro-Projekt integrieren. Ziemlich einfach, oder?

Das obige ist der detaillierte Inhalt vonSo fügen Sie Stripe zu Astro hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!