Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Stripe ist eine Zahlungsabwicklungsplattform, mit der Sie einer Website eine vorgefertigte Checkout-Seite hinzufügen und Online-Zahlungen akzeptieren und verwalten können. Es ist aufgrund seiner Benutzerfreundlichkeit, umfangreichen Dokumentation, Unterstützung für lokale Zahlungen, Anpassungs- und Branding-Optionen, Abonnements, Rechnungsstellung und Betrugsprävention weit verbreitet.

Mit Stripe können Sie Zahlungen aus einer Vielzahl von Quellen akzeptieren, darunter Kredit- und Debitkarten, Apple Pay und Google Pay.

Hinzufügen von Stripe Checkout zu einer Next.js-Anwendung

Sie können Stripe Checkout in Anwendungen integrieren, die mit verschiedenen Technologien erstellt wurden, einschließlich Next.js.

Dieses Tutorial geht davon aus, dass Sie eine E-Commerce-Site von Next.js eingerichtet haben, und bietet nur eine Anleitung zum Hinzufügen von Stripe Checkout zur Site.

Einrichten eines Stripe-Kontos und Abrufen von API-Schlüsseln

Um Stripe Checkout zu verwenden, müssen Sie ein Stripe-Konto erstellen und die API-Schlüssel erhalten. Die API-Schlüssel bestehen aus einem veröffentlichbaren Schlüssel und einem geheimen Schlüssel, den Sie verwenden, um Anfragen von Ihrer Anwendung an die Stripe-API zu authentifizieren.

Befolgen Sie diese Schritte, um ein Stripe-Konto einzurichten:

  1. Gehen Sie zum Stripe-Website und klicken Sie auf die Schaltfläche "Anmelden".
  2. Geben Sie Ihre E-Mail-Adresse, Ihren vollständigen Namen, Ihr Land und Ihr Passwort ein und klicken Sie auf die Schaltfläche „Konto erstellen“.
  3. Bestätigen Sie Ihre E-Mail-Adresse, indem Sie den Anweisungen in der E-Mail folgen, die Stripe Ihnen zusendet.
  4. Klicken Sie auf dem Stripe-Dashboard auf „Zahlungen aktivieren“ und beantworten Sie die angezeigten Fragen, um die Kontoeinrichtung abzuschließen. Diese Fragen können sich auf den Firmennamen, die Adresse und die Bankverbindung beziehen. Verwenden Sie für Entwicklungszwecke den Testmodus.
  5. Kopieren Sie die API-Schlüssel von der Registerkarte „Entwickler“ in die .env-Datei in Ihrem App-Ordner.

Sie können jetzt mit den API-Schlüsseln auf das Stripe-Konto zugreifen.

Installieren des Stripe npm-Pakets

Führen Sie diesen Befehl aus, um das Stripe-npm-Paket zu installieren.

npm Streifen installieren

Importieren Sie die Stripe-Bibliothek in Ihre Checkout-Komponentenseite.

importieren Streifen aus'Streifen';

Erstellen Sie im API-Ordner eine neue Datei namens checkout-session.js file. Initialisieren Sie das Stripe-Objekt mit den API-Schlüsseln, die Sie von Ihrem Stripe-Dashboard abgerufen haben.

konst Streifen = erfordern('Streifen')(prozess.env. STRIPE_SECRET_KEY);

Rufen Sie in der Handler-Funktion die auszucheckenden Elemente aus den Body-Parametern ab.

ExportStandardasynchronFunktionHandler(erforderlich, res) {
konst { item } = req.body;
};

Erstellen Sie ein Checkout-Session-Objekt für die Handler-Funktion und übergeben Sie die Elemente.

konst Sitzung = erwarten stripe.checkout.sessions.create({
 Zahlungsmethode_Typen: ['Karte'],
 line_items: [
 Artikel,
 ],
 Modus: 'Zahlung',
 Erfolgs-URL: `${req.headers.origin}/?success=true`,
 Abbruch-URL: `${req.headers.origin}/?canceled=true`,
});

Folgendes bedeuten die Knoten, die Sie an das Sitzungsobjekt übergeben:

  • Zahlungsmethode_Typen: Die Zahlungsmethode, die die Checkout-Sitzung akzeptiert. Durchsuchen Sie die Liste der verfügbaren Zahlungsmethoden in der Stripe-Dokumentation.
  • line_items: Eine Liste der Artikel, die der Benutzer kauft.
  • Modus: Der Modus der Checkout-Sitzung. Wenn die Checkout-Artikel mindestens einen wiederkehrenden Artikel enthalten, geben Sie „Abonnement“ ein.
  • Erfolgs_URL: Der URL Stripe leitet Benutzer um, wenn die Zahlung erfolgreich ist
  • Abbruch_URL: Der URL Stripe leitet Benutzer weiter, wenn sie die Zahlung stornieren.

Insgesamt sollte die Datei checkout-session.js so aussehen:

ExportStandardasynchronFunktionHandler(erforderlich, res) {
Wenn (erforderliche Methode 'POST') {
konst { Warenkorb } = req.body;
versuchen {
konst Sitzung = erwarten stripe.checkout.sessions.create({
 line_items: [
 Wagen
 ],
 Modus: 'Zahlung',
 Erfolgs-URL: `${req.headers.origin}/success`,
 Abbruch-URL: `${req.headers.origin}/cancele`,
 });
 res.umleitung(303, session.url);
 } fangen (irren) {
 res.status (err.statusCode || 500).json (Fehlermeldung);
 }
 } anders {
 res.setHeader('Erlauben', 'POST');
 res.status(405).Ende('Methode nicht erlaubt');
 }
}

Diese Funktion verwendet jetzt Try/Catch, um Benutzer umzuleiten, wenn während des Bezahlvorgangs ein Fehler auftritt. Nachdem Sie nun die API-Route erstellt haben, die die Zahlung verarbeitet, besteht der nächste Schritt darin, eine Checkout-Komponente zu erstellen, um den Checkout-Prozess abzuwickeln.

Schauen Sie sich diesen Beitrag an Erstellen von API-Routen in Next.js für eine ausführlichere Erläuterung der Next.js-API-Routen.

Erstellen einer Checkout-Komponente

Um den Checkout zu verarbeiten, müssen Sie die @stripe/stripe-js-Bibliothek mit NPM installieren.

npm installiere @stripe/stripe-js

Die @stripe/stripe-js-Bibliothek ist ein Ladedienstprogramm, das Ihnen beim Laden der Stripe.js-Instanz hilft.

Erstellen Sie nach Abschluss der Installation eine neue Datei in Ihrem /components-Verzeichnis mit dem Namen /components/checkout.js. Rufen Sie dann die Funktion „loadstripe“ aus der @stripe/stripe-js-Bibliothek auf und übergeben Sie den veröffentlichbaren Schlüssel als Argument.

importieren {LoadStripe} aus'@stripe/stripe-js';
konst stripePromise = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

Loadstripe() gibt ein Promise zurück, das mit einem neu erstellten Stripe-Objekt aufgelöst wird, sobald Stripe.js geladen wurde.

Fügen Sie als Nächstes eine Funktion hinzu, um eine Checkout-Sitzung in der Komponente zu erstellen.

ExportStandardFunktionKasse({Wagen}) {
konst handleCheckout = asynchron () => {
versuchen {
konst Streifen = erwarten StreifenVersprechen;
konst checkoutSession = erwarten axios.post("/api/checkout-session", {
 Wagen,
 });


konst Ergebnis = erwarten stripe.redirectToCheckout({
 Sitzungs-ID: checkoutSession.data.id,
 });
Wenn (Ergebnis.Fehler) {
 alarm (result.error.message);
 }
 } fangen (Fehler) {
Konsole.log (Fehler);
 }
 };
zurückkehren (


 </div>
 );
}

Diese Funktion verwendet Axios zum Aufrufen der API Sie im Ordner /api erstellt haben, um die Checkout-Sitzung abzurufen.

Fügen Sie in der return-Anweisung eine Checkout-Schaltfläche hinzu, die die handleCheckout-Funktion auslöst, wenn sie angeklickt wird.

Sie können die Checkout-Komponente auf der Warenkorbseite aufrufen.

Handhabung der Umleitungen von Stripe

In der Checkout-API-Route haben Sie eine Erfolgs-URL und eine Abbruch-URL definiert, über die Stripe einen Benutzer umleiten soll, wenn der Vorgang erfolgreich ist oder fehlschlägt. Die Abbruch-URL ist der /cancel-Route zugeordnet, während die Erfolgs-URL der /success-Route zugeordnet ist. Fügen Sie im Ordner „/pages“ zwei Komponenten mit dem Namen „success“ und „cancel“ hinzu, um diese URLs zu verarbeiten.

Fügen Sie in pages/success.js die Erfolgskomponente hinzu.

ExportStandardFunktionErfolg() {
zurückkehren<div>Kasse erfolgreichdiv>;
}

Fügen Sie in pages/cancel.js die Cancel-Komponente hinzu.

ExportStandardFunktionStornieren() {
zurückkehren<div>Beim Auschecken ist ein Fehler aufgetretendiv>;
}

Jetzt leitet Stripe je nach Checkout-Status zu einer dieser Seiten weiter.

Wenn Sie Next.js 13 verwenden, lesen Sie dieses Tutorial weiter wie der App-Ordner in Next.js 13 funktioniert um vom Ordner /pages zu wechseln.

Zusätzliche Anpassungsoptionen für die Checkout-Seite

Über das Stripe-Dashboard können Sie die Checkout-Seite an das Aussehen Ihrer Marke anpassen. Sie können ein Logo, ein Symbol, eine Markenfarbe, eine Akzentfarbe hinzufügen und sogar Ihre eigene benutzerdefinierte Domain verwenden. Darüber hinaus können Sie beim Erstellen der Checkout-Sitzung die von Ihnen bevorzugten Zahlungsmethoden hinzufügen und auch die Sprache angeben, die Stripe auf der Checkout-Seite anzeigen soll. Mit all diesen Optionen können Sie den Checkout-Prozess an Ihre Anwendung anpassen.

Warum Stripe für die Checkout-Seite verwenden?

Sie können zwar Ihren eigenen Checkout-Bearbeitungsdienst aufbauen, aber die Verwendung einer Zahlungsplattform wie Stripe ist normalerweise eine bessere Option. Stripe Checkout hilft Ihnen, die Entwicklungszeit zu verkürzen, sodass Sie innerhalb kurzer Zeit mit der Annahme von Zahlungen beginnen können.

Darüber hinaus erhalten Sie zusätzliche Funktionen wie PCI-Konformität, Warenkorbwiederherstellung, Rabattfunktionen und die Möglichkeit, Versandinformationen zu sammeln und Nachzahlungsrechnungen zu senden.