Stripe-Zahlungen in Next.js

In der sich ständig weiterentwickelnden Welt des E-Commerce ist die Integration sicherer und benutzerfreundlicher Zahlungsoptionen für Online-Unternehmen ein Muss. Stripe, eine beliebte Zahlungsverarbeitungsplattform, bietet eine entwicklerfreundliche Lösung zum Hinzufügen von Zahlungsfunktionalitäten zu Ihrer Next.js-Anwendung. In diesem Blog-Beitrag werden wir Sie durch eine einfache Implementierung von Stripe-Zahlungen in einer Next.js-Anwendung führen. Wir werden den Code aufschlüsseln und die Schlüsselkomponenten des Prozesses erklären.

Einrichten von Stripe.

Bevor wir in den Code eintauchen, stellen Sie sicher, dass Sie über die notwendigen Stripe-Anmeldeinformationen verfügen. Sie benötigen sowohl den Test-Publishable-Key als auch den Test-Secret-Key aus Ihrem Stripe-Konto. Diese Schlüssel werden aus Sicherheitsgründen als Umgebungsvariablen gespeichert.

Serverseitige Stripe-Konfiguration

Der Serverteil Ihrer Anwendung handhabt die Erstellung von Zahlungssitzungen und die Kommunikation mit Stripe. Hier ist eine Aufschlüsselung des serverseitigen Codes:

Stripe.tsx


import { loadStripe } from "@stripe/stripe-js";
loadStripe(process.env.NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLE_KEY);
import type { NextApiRequest, NextApiResponse } from 'next'
const stripe = require("stripe")(
    process.env.NEXT_PUBLIC_STRIPE_TEST_SECRET_KEY
);
export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<any>
) {
    if (req.method === "POST") {
        try {
           
            const session = await stripe.checkout.sessions.create({
                line_items: [
                    {
                        price: "price_key",
                        quantity: 1,
                    },
                ],
                mode: "payment",
                success_url: `${req.headers.origin}/generator/?success=true`,
                cancel_url: `${req.headers.origin}/generator/?canceled=true`,
            });
            return res.json(session.url)
        } catch (err: any) {
            return res.status(err.statusCode || 500).json(err.message);
        }
    } else {
        return res.status(500)
    }
}

Im obigen Code importieren wir die Stripe-JavaScript-Bibliothek und laden den veröffentlichten Schlüssel. Ersetzen Sie process.env.NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLE_KEY durch Ihren tatsächlichen Stripe-Test-Publishable-Key.

Hier erstellen wir eine serverlose Funktion (handler), die auf POST-Anfragen reagiert. Sie generiert einen eindeutigen Lizenzschlüssel und startet eine Stripe-Zahlungssitzung. Die success_url und cancel_url bestimmen, wohin Benutzer nach einer erfolgreichen oder abgebrochenen Zahlung umgeleitet werden. Ersetzen Sie "price_key" durch den tatsächlichen Stripe-Preisschlüssel, den Sie berechnen möchten.

Front-End-Integration

Schauen wir uns jetzt an, wie Sie Stripe-Zahlungen in Ihr Front-End mit React integrieren können:

StripeBuyScreen.tsx


import { useRouter } from 'next/router';
import { useEffect } from 'react';
import axios from "axios";
export default function StripeBuyScreen(props: any) {
    const router = useRouter()
    useEffect(() => {
        const query = new URLSearchParams(window.location.search);
        if (query.get('success')) {
            console.log('Order placed! You will receive an email confirmation.');
        }
    }, []);
    function openStripeBuyScreen() {
        axios
            .post('/api/stripe', {
                data: JSON.stringify(props)
            })
            .then(res => {
                router.push(res.data)
                console.log('res', res.data);
            })
            .catch(err => {
                console.log('error in request', err);
            });
    }
    return <div className="w-full  bg-white ">
        <button type="button" className="w-full text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl 
                focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-lg 
                px-5 py-2.5 text-center mr-2 mb-2"
            onClick={() => {
                openStripeBuyScreen()
            }}>Buy
        </button>
    </div>
}

Dieses React-Komponente behandelt Benutzerinteraktionen. Wenn auf die Schaltfläche "Kaufen" geklickt wird, wird eine POST-Anfrage an den serverseitigen Stripe-Handler gesendet. Nach einer erfolgreichen Zahlung werden Benutzer auf eine Bestätigungsseite umgeleitet, und es wird ein eindeutiger Lizenzschlüssel bereitgestellt.

Fazit

Stripe vereinfacht den Prozess des Hinzufügens von Zahlungsfunktionalitäten zu Ihrer Next.js-Anwendung. Diese Integration ermöglicht es Ihnen, Zahlungen sicher anzunehmen und eine nahtlose Benutzererfahrung zu bieten. Passen Sie diese Grundlage nach Belieben an, um Ihren spezifischen Geschäftsanforderungen gerecht zu werden. Viel Spaß beim Coden, und möge Ihr Online-Shop mit Stripe gedeihen!

Stripe-Zahlungen in Next.js

Einrichten von Stripe.

Serverseitige Stripe-Konfiguration

Front-End-Integration

Fazit

Kontakt

Seiten

Blog