‫Kursleiter: In dieser Vorlesung
‫lernen wir, wie Zahlungen mit Stripe
‫verarbeitet werden, wenn ein Benutzer auf eine Schaltfläche klickt.
‫Und um zu beginnen, konfigurieren wir diese Schaltfläche tatsächlich so,
‫dass sie nur angezeigt wird, wenn ein Benutzer
‫tatsächlich angemeldet ist.
‫Hier auf der Tourdetailseite
‫haben wir gerade einen Benutzer
‫angemeldet, und der Button sagt Tour jetzt buchen, aber
‫es sollte nur so sein,
‫wenn ein aktuell angemeldeter Benutzer
‫vorhanden
‫ist, andernfalls würde es uns weiterleiten zur Login-Seite.
‫Okay?
‫Lassen Sie uns das in der Tourvorlage implementieren.
‫Und das ist eigentlich genau hier, das
‫ist also dieser Button.
‫In Ordung?
‫Wenn derzeit ein Benutzer angemeldet
‫ist, bedeutet dies, dass wir Zugriff auf
‫die Benutzervariable haben, und wir können dies als Benutzer gut tun.
‫Und wenn kein Benutzer vorhanden ist, also sonst, naja,
‫dann wollen wir einfach einen Button anzeigen, der
‫uns auf die Login-Seite bringt.
‫Also loggen Sie sich ein, um
‫eine Tour zu buchen, und dieser sollte eigentlich ein
‫Link sein, und deshalb
‫brauchen wir ein A-Element für den Anker.
‫Lassen Sie uns dann auch die hf-Eigenschaft angeben, die
‫uns wieder auf die Anmeldeseite verweist,
‫in Ordnung?
‫Hier müssen wir jetzt auch noch eine ID
‫hinzufügen, Tour buchen, damit wir sie dann in unserem JavaScript auswählen können,
‫und noch etwas
‫sehr Wichtiges ist, dass wir die aktuelle Tour-ID
‫hier in dieses Element einfügen, Okay?
‫Warum ist das jetzt so wichtig?
‫Denken Sie daran, wie der API-Endpunkt, den wir gerade erstellt haben.
‫Diese hier braucht also die Tour-ID, und diese
‫Tour-ID muss im Grunde von irgendwoher kommen, und im Moment haben
‫wir diese Informationen nirgendwo auf dieser Seite,
‫und deshalb werden wir sie
‫hier direkt in dieses Element einfügen, also das
‫dann oder eine JavaScript-Datei kann es von hier
‫aus abrufen und
‫zusammen mit der Anfrage an die Checkout-Sitzungsroute senden, okay?
‫Genau wie wir es hier mit einer Karte
‫getan haben, verwenden wir ein Datenattribut, und das
‫sind Daten, und dann
‫im Grunde einen beliebigen Variablennamen, den wir
‫definieren möchten.
‫Und das ist in diesem Fall die Tour-ID.
‫Also Tour. id, in Ordnung?
‫Also in den Tresor
‫geben und das probieren wir jetzt mal aus.
‫Laden Sie also die Seite neu
‫und sehen wir
‫uns zuerst an, ob die Idee tatsächlich vorhanden
‫ist, und tatsächlich können wir loslegen.
‫Und jetzt, wenn wir uns ausloggen.
‫Dann sehen wir uns an, was wir haben, und
‫tatsächlich heißt es jetzt, loggen Sie sich
‫ein, um die Tour zu buchen.
‫Großartig, und das machen wir tatsächlich.
‫Nun gut?
‫Als nächstes erstellen wir also ein Skript, in
‫dem wir die Anfrage tatsächlich
‫ausführen und die Zahlung am Frontend verarbeiten.
‫Und so wird es wie zuvor öffentlich sein und
‫dann JavaScript.
‫Also noch ein Skript hier.
‫Und ich werde es Streifen nennen. js.
‫Und jetzt brauchen wir hier
‫tatsächlich wieder Zugriff auf die Stripe-Bibliothek, aber auf das
‫Paket, das wir gerade zuvor installiert haben.
‫Denken Sie also an das Stripe-MPM-Paket, das wir hier verwendet haben.
‫Dieser funktioniert also nur für das Backend, und
‫was wir am Frontend tun
‫müssen, ist tatsächlich ein Skript in den HTML-Code einzubinden, und da
‫wir dieses Skript nur hier auf der Tourseite benötigen, werden
‫wir es genauso machen wie wir tat mit dem Map-Box-Skript.
‫Also dieses hier
‫werden wir hier in diesem Headblock platzieren, in
‫Ordnung?
‫Welches Skript brauchen wir nun eigentlich?
‫Nun, das können wir ganz einfach der Dokumentation entnehmen, die wir
‫uns bereits zuvor angesehen haben, und
‫ich hoffe, Sie haben die nicht geschlossen, in Ordnung?
‫Und so erklärt dieser hier noch einmal, wie wir das
‫Checkout-Produkt sowohl auf dem Client als auch
‫auf dem Server verwenden.
‫Hier sehen wir also, dass wir
‫zwei Schritte haben, zuerst die Checkout-Sitzung auf dem Server
‫erstellen. Dies ist also
‫sehr ähnlich zu dem, was wir zuvor im
‫letzten Video gemacht haben, und müssen es jetzt auch zu unserem Frontend hinzufügen.
‫Und das Skript, das wir brauchen, ist dieses, in Ordnung?
‫Also kopieren wir das und gehen wir zurück.
‫Und das müssen wir jetzt ein bisschen anpassen.
‫Jetzt rechts?
‫Dies war also ein Stripe-Objekt für den globalen Geltungsbereich, und das
‫können wir jetzt in dieser Datei verwenden.
‫Also sagen
‫wir const stripe =, und
‫dann ist das das Objekt, das
‫wir aus dem Skript bekommen, das wir gerade eingefügt
‫haben, und dann brauchen wir hier unseren öffentlichen Schlüssel, in Ordnung?
‫Wir haben also bereits unseren geheimen Schlüssel im Backend verwendet,
‫jetzt ist es an der Zeit, unseren öffentlichen Schlüssel zu verwenden.
‫Gehen wir also zurück zum Dashboard, und
‫wenn Sie in der Dokumentation sind,
‫wird es bereits hier für Sie angezeigt,
‫also ist dies ein
‫wirklich nettes Feature der Stripe-Dokumentation.
‫Wenn Sie also
‫eingeloggt sind, ist dieser Schlüssel,
‫den Sie hier haben, tatsächlich Ihr öffentlicher Schlüssel.
‫Aber wenn Sie nicht auf dieser
‫Seite sind, können Sie Ihren API-Schlüssel natürlich auch
‫erhalten, indem Sie auf die Homepage
‫oder die Entwicklerseite gehen, versuchen
‫wir es tatsächlich.
‫Dann haben Sie
‫hier bei API-Schlüsseln Ihren öffentlichen Testschlüssel hier.
‫Also schnapp dir das, und
‫dann lass uns zurückgehen und es hier weitergeben.
‫Und genau wie
‫zuvor möchte ich eslint hier schnell deaktivieren.
‫Okay?
‫Und jetzt erstellen wir endlich eine Funktion,
‫die ich Buchtour nennen werde.
‫Okay?
‫Diese Funktion nimmt also eine Tour-ID auf.
‫Und so ist die Tour-ID diejenige, die von
‫dieser Benutzeroberfläche direkt hierher kommt.
‫Also gleich von hier, okay?
‫Genau wie zuvor werden
‫wir das aus dem Index holen. js, wo
‫wir dieses Buch dann auch Tour nennen,
‫okay?
‫Also sehr ähnlich zu dem, was wir vorher gemacht haben.
‫Wie auch immer, lassen Sie uns jetzt noch einmal die Schritte
‫spezifizieren, die wir hier unternehmen werden.
‫Der erste Schritt besteht also darin, die
‫Sitzung tatsächlich vom
‫Server abzurufen, und hier kommt nun diese Route ins Spiel, OK?
‫Dies ist also der Punkt, an dem wir
‫diesen Endpunkt verwenden werden, um unsere Checkout-Sitzung wirklich auf
‫die Clientseite zu bringen.
‫Okay?
‫Lassen Sie sich also die Sitzung auschecken.
‫Vom Endpunkt oder von der API ist es nicht wirklich wichtig.
‫Als zweiten
‫Schritt werden wir unser
‫Stripe-Objekt verwenden, um im Grunde automatisch das Checkout-Formular zu erstellen +
‫die Kreditkarte für uns zu verarbeiten oder
‫sagen wir + zu belasten, OK?
‫Und das ist
‫es eigentlich, also nur zwei einfache
‫Schritte, und Sie werden sehen, dass sie eigentlich ziemlich einfach sind.
‫Speichern wir also die Sitzung in einer Variablen namens session.
‫Und dann warten wir auf eine HTTP-Anfrage, was
‫wir wiederum mit axios tun werden.
‫In Ordung?
‫Also muss ich das hier packen.
‫Importieren Sie also Axios,
‫und ich verwende wieder die ES6-Modulsyntax.
‫Denken
‫Sie daran, von Axios.
‫Also genau wie wir es zum Beispiel beim Login oder
‫in den Update-Einstellungen gemacht haben, oder?
‫Jetzt müssen wir diese Funktion auch hier als async markieren.
‫Okay?
‫Und dann an
‫axios können wir einfach die URL
‫übergeben, wenn wir nur eine einfache GET-Anfrage machen wollen.
‫Okay?
‫Bisher haben
‫wir also immer die Methode, die
‫URL und die Daten angegeben, aber
‫jetzt machen wir nur eine GET-Anfrage, und
‫das ist dann viel einfacher.
‫Nehmen wir uns einfach die URL
‫hier, damit wir nicht noch mehr Zeit verlieren.
‫Dann ist es hier api/v1/bookings.
‫Dann checken Sie die Sitzung aus.
‫Und dann die Tour-ID.
‫Das ist also dieser hier,
‫der in eine Dysfunktion übergehen wird,
‫okay?
‫Und schauen wir uns
‫dieses Sitzungsobjekt in unserer Konsole einmal
‫an, um zu sehen, ob alles
‫funktioniert, okay?
‫So jetzt in unserem Index. js werden wir im
‫Grunde die grüne Schaltfläche mit der Dysfunktion verbinden, die wir gerade
‫innerhalb von Stripe erstellt haben. js.
‫Also importieren.
‫Tour ab Stripe buchen.
‫Dann wählen wir wie immer unser Element von der Webseite aus.
‫Buchen-Button ist also = Dokumentieren. Holen Sie sich das Element nach
‫ID, und die ID ist,
‫glaube ich, Tour buchen.
‫Also ja, das
‫ist also die ID, die wir gerade vor der Buch-ID hinzugefügt haben.
‫Und jetzt können wir diesen Event-Handler hinzufügen.
‫Wenn es also eine Buchschaltfläche gibt,
‫dann bookBtn. addeventlistener, warten
‫auf einen Klick, dann brauchen
‫wir auch das Ereignis, und jetzt müssen
‫wir diese Tour-ID von dieser Schaltfläche abrufen, Das ist also
‫tourid =, und wenn ich jetzt
‫hier streak, ist das z. Ziel,
‫und vielleicht kennen
‫Sie das, also Event. target ist im Grunde das Element, auf das
‫geklickt wurde, also dasjenige, das das Auslösen dieses Ereignis-Listeners
‫hier ausgelöst hat, in Ordnung?
‫Und das wird natürlich dieser Knopf sein.
‫Dann haben wir dort eine Tour-ID, und
‫so in
‫JavaScript wird das dann tatsächlich Tour
‫heißen, also lass es mich einfach aufschreiben.
‫Also Tour-ID, wenn also
‫ein -
‫vorhanden ist, wird es automatisch
‫in diese CamelCase-Notation umgewandelt.
‫Okay?
‫Also z. Ziel. Datensatz. tourt.
‫Aber da dieser Name jetzt genau derselbe ist, können wir
‫einfach die Strukturierung darauf verwenden.
‫Also noch einmal diesen netten Trick anwenden.
‫Und dann rufen wir Tour buchen mit dieser Tour-ID auf.
‫Und eine andere nette Sache, die wir
‫hier machen können, ist, den Text der Schaltfläche in
‫etwas wie Verarbeitung zu ändern, und so machen wir
‫es noch einmal, z. Ziel.
‫Also wieder das Element, auf das geklickt
‫wurde, also die Schaltfläche. textcontent, den
‫wir zuvor verwendet haben, um
‫den Text in einem
‫Element zu ändern, und ändern wir das in Verarbeitung,
‫okay?
‫Und
‫damit denke ich, haben wir alles richtig verbunden.
‫Also klicken wir auf
‫diese Schaltfläche, dann ändern wir den Text auf
‫dieser Schaltfläche, dann holen wir die
‫Tour-ID aus dem Datenattribut auf der
‫Schaltfläche und rufen mit dieser ID Tour buchen auf,
‫okay?
‫Und damit die ID dann an diese URL
‫weitergegeben wird, die wiederum eine Checkout-Sitzung zurückgeben sollte,
‫okay?
‫Und dann schauen wir uns das hier
‫einfach so an.
‫An dieser Stelle werden wir
‫das Checkout-Formular noch nicht erstellen, also belassen
‫wir es für den letzten Schritt dieses Videos.
‫Aber jetzt möchte ich mir das mal
‫ansehen, mal sehen,
‫ob Paket hier noch im Hintergrund läuft,
‫also bündeln wir alle unsere Skripte
‫zusammen, und es sieht
‫so aus, und also lasst uns das nicht wirklich testen.
‫Wir sind also eingeloggt, versuchen
‫wir es nun mit Park Camper.
‫Klicken Sie hier unten auf diese Schaltfläche.
‫Und es scheint, als ob wir keinen Fehler bekommen,
‫also das ist gut, jetzt
‫werfen wir einen Blick auf
‫unsere Konsole, und wir haben ein
‫Objekt, und das ist das Ergebnis dieses axios-Aufrufs,
‫also erstellt axios immer ein Objekt wie dieses
‫, wobei es ein Objekt namens data gibt, das die
‫eigentliche Antwort ist.
‫Und hier sehen Sie, dass wir tatsächlich unsere Sitzung haben.
‫Sie sehen also, wir haben die
‫Kunden-E-Mail, wir haben die aktuelle Tour-ID, wir
‫haben jetzt mal sehen, ob wir sie haben, (murmelt) Hier
‫haben wir
‫also einige Daten über die Tour.
‫Und so sieht hier jetzt alles richtig aus.
‫In Ordung?
‫Lassen Sie uns das
‫also schließen und nun als
‫letzten Schritt im Grunde genommen das Checkout-Formular erstellen und
‫die Kreditkarte belasten.
‫In Ordung?
‫Und eigentlich packen wir das alles
‫hier auch in einen try-catch-Block.
‫Denn natürlich haben wir hier einige asynchrone Aufrufe, und beide haben
‫in einer Sekunde einen weiteren,
‫und daher ist dies eine gute Vorgehensweise.
‫Um einen Try-Catch-Block zu haben.
‫In Ordung?
‫Aber lassen Sie uns nicht viel Zeit mit diesen Fehlern verschwenden.
‫Aber ich werde trotzdem tatsächlich eine Warnung
‫anzeigen, falls ein Fehler
‫auftritt, also zum Beispiel bei diesem API-Aufruf,
‫okay?
‫Damit der Benutzer grundsätzlich sehen kann,
‫dass etwas schief gelaufen ist.
‫Nehmen wir also einfach diesen Alert-Import.
‫In Ordung?
‫Und dann sagen Sie Benachrichtigung anzeigen, geben Sie
‫an, dass es sich um einen
‫Fehler handelt, und dann nur den Fehler selbst als Nachricht im Grunde.
‫In Ordung?
‫Wie auch immer, um diesen letzten Schritt jetzt zu tun,
‫ist es eigentlich sehr, sehr einfach, alles
‫was wir tun müssen, ist abzuwarten.
‫Streifen. redirectTocheck-out, lass mich
‫sehen, ob ich das falsch
‫gemacht habe, und lass mich sehen,
‫ob ich das richtig gemacht habe. Also redirect to check-out.
‫In Ordung?
‫Und dann Optionen, aber nur eine
‫Option, nämlich die Sitzungs-ID, und das kommt von
‫der Sitzung, und erinnern Sie sich, wie die
‫Sitzung in den Daten war, also gab
‫es dort ein Datenobjekt, das von Axios erstellt wurde,
‫erinnern Sie sich und so? ist dann alle Antwort selbst.
‫Und da drin haben wir eine Sitzung. Ich würde.
‫Und das war's,
‫okay?
‫Und so kommt jetzt der größte
‫Teil von allem, nämlich zu überprüfen, ob das funktioniert.
‫Wir sind also noch eingeloggt, laden
‫wir das noch einmal.
‫Klicken Sie auf eine Schaltfläche und warten Sie nun darauf.
‫Und tatsächlich kommen wir zu unserer Checkout-Seite, und wir bekommen
‫auch dieses schöne Bild hier, wir bekommen
‫hier das gesamte Logo der Natur, wir bekommen
‫hier alle Icons, also all
‫das, was wir vorher angegeben haben, wir
‫haben den Preis, den wir auch in
‫unserem angegeben haben
‫Checkout-Sitzung und wirklich alle anderen Details.
‫Also der Name, die Zusammenfassung und
‫natürlich das Bild.
‫Das ist wirklich erstaunlich, oder?
‫Dann ist hier noch eine tolle Sache, die ich bereits
‫erwähnt habe, dass
‫die E-Mail-Adresse bereits automatisch vorausgefüllt ist,
‫also ein weiteres wirklich nettes Feature.
‫Und jetzt müssen wir
‫hier nur noch diese Kreditkarteninformationen eingeben, und
‫so streifen wir beim Testen die Kreditkartennummer nur
‫vier zwei vier zwei vier zwei vier zwei
‫und so weiter, bis wir fertig sind , okay?
‫Dann funktioniert hier jeder Monat und jedes Jahr, also
‫setzen wir einfach zwei zwei zwei.
‫Also irgendetwas in der Zukunft, in Ordnung?
‫Wenn Sie sich diesen Kurs also nach Februar 2022 ansehen, wird
‫dieses Datum nicht funktionieren, also legen
‫Sie einfach etwas später ein,
‫okay?
‫Bis eine beliebige Nummer auch
‫funktioniert, hier funktioniert auch jeder
‫Name, sagen wir mal
‫Laura, das Land spielt natürlich auch keine Rolle, die
‫Leute füllen automatisch basierend auf deinem IP-Standort aus, also
‫bin ich
‫in Portugal, und so das bekomme ich.
‫Und jetzt sehen Sie diesen schönen grünen Knopf hier, und
‫er hat diesen schönen Effekt, und
‫wenn wir jetzt darauf
‫klicken, wird er verarbeitet und wir sind fertig.
‫Super, dann ist dies tatsächlich die Erfolgs-URL, die wir
‫auch in unserer Checkout-Sitzung angegeben haben, oder?
‫Also haben wir das
‫definiert, dass wir
‫im Erfolgsfall zu dieser Home-URL zurückkehren.
‫Und das werden wir hier etwas
‫später ändern, aber im Moment ist es wirklich das, was
‫wir wollten, und so hat es perfekt funktioniert.
‫Ich hoffe es
‫zumindest, also schauen wir uns jetzt alle Zahlungen an.
‫Und tatsächlich ist
‫dies die, die wir gerade gemacht haben.
‫So haben wir diese Zahlung jetzt erfolgreich auf
‫unserem Konto erhalten.
‫Sie sehen also in der E-Mail-Adresse den
‫Namen und tatsächlich die Park Camper Tour, die wir gerade gekauft haben.
‫Super, das ist wirklich toll.
‫Hier unten können Sie dann die Gebühren sehen, die Stripe einnimmt,
‫also müssen sie natürlich auch Geld verdienen, und
‫deshalb nehmen sie einen Schnitt,
‫was meiner Meinung nach wie 2 ist. 9% oder so ähnlich, aber natürlich können
‫Sie sich all das Zeug auf ihrer
‫Website ansehen.
‫Dann hast du hier auch die Zahlungsmethode, also die
‫Daten, die wir gerade
‫eingegeben haben, und du bekommst ein paar schöne
‫Daten zur Sitzung, und wahrscheinlich sollte sie auch hier bei deinen Kunden auftauchen.
‫Und ja, tatsächlich ist sie hier, und
‫ja, ich denke,
‫das ist jetzt ziemlich erfolgreich.
‫Oh, und was ich vergessen habe zu erwähnen,
‫ist, dass Ihre Benutzer tatsächlich auch
‫automatisch eine E-Mail erhalten.
‫Ich denke, dies sollte hier der Standard für
‫E-Mail-Bestätigungen sein. Gehen Sie
‫also zu Ihren Einstellungen für
‫E-Mail-Bestätigungen, und dann haben Sie hier E-Mail-Kunden
‫über erfolgreiche Zahlungen.
‫Und das ist auch ein
‫wirklich nettes Feature, das bedeutet, dass wir nicht manuell E-Mails
‫versenden müssen, wenn ein Benutzer eine Tour erfolgreich gekauft hat, okay?
‫Also noch eine Sache, die uns Stripe wegnimmt, Fantastic, also
‫nehmen wir uns jetzt eine kurze Minute Zeit, um den gesamten Prozess,
‫den wir gerade durchlaufen haben, zusammenzufassen.
‫Also haben wir damit begonnen, diese Checkout-Sitzung zu erstellen,
‫die als Eingabe die Tour-ID benötigt, damit
‫wir dann eine Reihe von Details über die Tour in dieser
‫Sitzung speichern können.
‫Also Sachen über
‫den Tournamen, die Zusammenfassung auch die Preisbilder.
‫Also all die Dinge, die wir auf
‫der Checkout-Seite, aber
‫auch in unserem Dashboard anzeigen möchten.
‫Dann fügen wir auch die E-Mail hinzu, damit der
‫Benutzer sie nicht an der Kasse ausfüllen muss,
‫und dann eine Reihe anderer Daten.
‫Denken Sie also an diese Client-Referenz-ID, die
‫viel mehr Sinn macht,
‫wenn wir sie tatsächlich verwenden.
‫Also erstellen wir diese
‫Sitzung immer dann, wenn jemand diese Check-out-Sitzungsroute trifft, in Ordnung?
‫Und genau das machen wir dann an unserem Frontend,
‫hier in Streifen. js.
‫Also bekommen wir unsere Sitzung
‫hier, und dann erstellen wir von dort aus
‫eine Kasse und belasten die Kreditkarte
‫mit Stripe. redirectTocheckout,
‫und das Stripe-Objekt
‫hier verwendet einfach die Stripe-Bibliothek
‫mit unserem öffentlichen Schlüssel, okay?
‫Woher kommt nun diese Tour-ID?
‫Nun, es wird hier direkt auf der Schaltfläche gespeichert, auf die
‫der Benutzer klickt, um eine neue Tour zu buchen.
‫Diese ID wird dann direkt hier im Index gelesen. js, wenn
‫jemand auf die Buchungsschaltfläche klickt, OK?
‫Also speichern wir das in
‫Tour-ID und übergeben es an
‫Tour buchen, was wiederum diese Funktion hier ist,
‫die sich um die eigentliche Verarbeitung der Zahlungen
‫im Frontend kümmert.
‫Und so ist das Ergebnis
‫von all dem,
‫was wir gerade gesehen haben, wo der Benutzer
‫wirklich die Kreditkarte belastet und
‫die Tour gekauft hat, so perfekt.
‫Hier fehlt
‫nun, dass wir eigentlich bei jeder
‫neuen Buchung einen neuen Buchungsbeleg in unserer Datenbank anlegen wollen.
‫So wie wir es vor langer Zeit
‫besprochen haben, als wir über
‫alle Datenmodelle in dieser Anwendung sprachen, oder?
‫Und dazu erstellen wir
‫gleich im nächsten Video das
‫Buchungsmodell, sortieren es
‫danach
‫und können dann bei
‫einem erfolgreichen Kauf neue Touren erstellen.