1 00:00:01,010 --> 00:00:02,600 ‫Kursleiter: In dieser Vorlesung 2 00:00:02,600 --> 00:00:04,910 ‫lernen wir, wie Zahlungen mit Stripe 3 00:00:04,910 --> 00:00:08,203 ‫verarbeitet werden, wenn ein Benutzer auf eine Schaltfläche klickt. 4 00:00:09,840 --> 00:00:12,860 ‫Und um zu beginnen, konfigurieren wir diese Schaltfläche tatsächlich so, 5 00:00:12,860 --> 00:00:15,350 ‫dass sie nur angezeigt wird, wenn ein Benutzer 6 00:00:15,350 --> 00:00:16,563 ‫tatsächlich angemeldet ist. 7 00:00:17,920 --> 00:00:19,763 ‫Hier auf der Tourdetailseite 8 00:00:21,260 --> 00:00:23,540 ‫haben wir gerade einen Benutzer 9 00:00:23,540 --> 00:00:27,250 ‫angemeldet, und der Button sagt Tour jetzt buchen, aber 10 00:00:27,250 --> 00:00:29,180 ‫es sollte nur so sein, 11 00:00:29,180 --> 00:00:31,450 ‫wenn ein aktuell angemeldeter Benutzer 12 00:00:31,450 --> 00:00:32,430 ‫vorhanden 13 00:00:32,430 --> 00:00:36,129 ‫ist, andernfalls würde es uns weiterleiten zur Login-Seite. 14 00:00:36,129 --> 00:00:37,240 ‫Okay? 15 00:00:37,240 --> 00:00:40,463 ‫Lassen Sie uns das in der Tourvorlage implementieren. 16 00:00:43,210 --> 00:00:45,570 ‫Und das ist eigentlich genau hier, das 17 00:00:45,570 --> 00:00:47,313 ‫ist also dieser Button. 18 00:00:48,300 --> 00:00:49,380 ‫In Ordung? 19 00:00:49,380 --> 00:00:52,300 ‫Wenn derzeit ein Benutzer angemeldet 20 00:00:52,300 --> 00:00:55,860 ‫ist, bedeutet dies, dass wir Zugriff auf 21 00:00:55,860 --> 00:01:00,860 ‫die Benutzervariable haben, und wir können dies als Benutzer gut tun. 22 00:01:02,440 --> 00:01:05,390 ‫Und wenn kein Benutzer vorhanden ist, also sonst, naja, 23 00:01:05,390 --> 00:01:08,260 ‫dann wollen wir einfach einen Button anzeigen, der 24 00:01:08,260 --> 00:01:10,143 ‫uns auf die Login-Seite bringt. 25 00:01:13,490 --> 00:01:16,540 ‫Also loggen Sie sich ein, um 26 00:01:16,540 --> 00:01:20,610 ‫eine Tour zu buchen, und dieser sollte eigentlich ein 27 00:01:20,610 --> 00:01:23,060 ‫Link sein, und deshalb 28 00:01:23,060 --> 00:01:26,583 ‫brauchen wir ein A-Element für den Anker. 29 00:01:27,801 --> 00:01:31,970 ‫Lassen Sie uns dann auch die hf-Eigenschaft angeben, die 30 00:01:31,970 --> 00:01:34,873 ‫uns wieder auf die Anmeldeseite verweist, 31 00:01:34,873 --> 00:01:35,990 ‫in Ordnung? 32 00:01:35,990 --> 00:01:39,173 ‫Hier müssen wir jetzt auch noch eine ID 33 00:01:41,710 --> 00:01:46,200 ‫hinzufügen, Tour buchen, damit wir sie dann in unserem JavaScript auswählen können, 34 00:01:46,200 --> 00:01:47,860 ‫und noch etwas 35 00:01:47,860 --> 00:01:50,700 ‫sehr Wichtiges ist, dass wir die aktuelle Tour-ID 36 00:01:50,700 --> 00:01:53,020 ‫hier in dieses Element einfügen, Okay? 37 00:01:53,020 --> 00:01:55,200 ‫Warum ist das jetzt so wichtig? 38 00:01:55,200 --> 00:01:58,913 ‫Denken Sie daran, wie der API-Endpunkt, den wir gerade erstellt haben. 39 00:01:59,780 --> 00:02:02,840 ‫Diese hier braucht also die Tour-ID, und diese 40 00:02:02,840 --> 00:02:06,970 ‫Tour-ID muss im Grunde von irgendwoher kommen, und im Moment haben 41 00:02:06,970 --> 00:02:09,470 ‫wir diese Informationen nirgendwo auf dieser Seite, 42 00:02:09,470 --> 00:02:11,410 ‫und deshalb werden wir sie 43 00:02:11,410 --> 00:02:14,380 ‫hier direkt in dieses Element einfügen, also das 44 00:02:14,380 --> 00:02:17,440 ‫dann oder eine JavaScript-Datei kann es von hier 45 00:02:17,440 --> 00:02:19,050 ‫aus abrufen und 46 00:02:19,050 --> 00:02:22,140 ‫zusammen mit der Anfrage an die Checkout-Sitzungsroute senden, okay? 47 00:02:22,140 --> 00:02:24,700 ‫Genau wie wir es hier mit einer Karte 48 00:02:24,700 --> 00:02:27,170 ‫getan haben, verwenden wir ein Datenattribut, und das 49 00:02:27,170 --> 00:02:28,417 ‫sind Daten, und dann 50 00:02:29,548 --> 00:02:31,880 ‫im Grunde einen beliebigen Variablennamen, den wir 51 00:02:31,880 --> 00:02:32,913 ‫definieren möchten. 52 00:02:33,940 --> 00:02:36,753 ‫Und das ist in diesem Fall die Tour-ID. 53 00:02:40,810 --> 00:02:44,113 ‫Also Tour. id, in Ordnung? 54 00:02:45,380 --> 00:02:47,010 ‫Also in den Tresor 55 00:02:47,010 --> 00:02:50,210 ‫geben und das probieren wir jetzt mal aus. 56 00:02:50,210 --> 00:02:52,400 ‫Laden Sie also die Seite neu 57 00:02:52,400 --> 00:02:53,960 ‫und sehen wir 58 00:02:53,960 --> 00:02:56,640 ‫uns zuerst an, ob die Idee tatsächlich vorhanden 59 00:02:56,640 --> 00:02:58,950 ‫ist, und tatsächlich können wir loslegen. 60 00:02:58,950 --> 00:03:00,793 ‫Und jetzt, wenn wir uns ausloggen. 61 00:03:04,240 --> 00:03:06,160 ‫Dann sehen wir uns an, was wir haben, und 62 00:03:06,160 --> 00:03:07,740 ‫tatsächlich heißt es jetzt, loggen Sie sich 63 00:03:07,740 --> 00:03:09,183 ‫ein, um die Tour zu buchen. 64 00:03:10,080 --> 00:03:13,153 ‫Großartig, und das machen wir tatsächlich. 65 00:03:19,080 --> 00:03:20,490 ‫Nun gut? 66 00:03:20,490 --> 00:03:23,130 ‫Als nächstes erstellen wir also ein Skript, in 67 00:03:23,130 --> 00:03:25,320 ‫dem wir die Anfrage tatsächlich 68 00:03:25,320 --> 00:03:27,603 ‫ausführen und die Zahlung am Frontend verarbeiten. 69 00:03:28,580 --> 00:03:32,690 ‫Und so wird es wie zuvor öffentlich sein und 70 00:03:32,690 --> 00:03:34,163 ‫dann JavaScript. 71 00:03:35,510 --> 00:03:36,943 ‫Also noch ein Skript hier. 72 00:03:38,550 --> 00:03:41,233 ‫Und ich werde es Streifen nennen. js. 73 00:03:44,440 --> 00:03:46,540 ‫Und jetzt brauchen wir hier 74 00:03:46,540 --> 00:03:49,650 ‫tatsächlich wieder Zugriff auf die Stripe-Bibliothek, aber auf das 75 00:03:49,650 --> 00:03:52,500 ‫Paket, das wir gerade zuvor installiert haben. 76 00:03:52,500 --> 00:03:56,293 ‫Denken Sie also an das Stripe-MPM-Paket, das wir hier verwendet haben. 77 00:03:57,240 --> 00:04:00,080 ‫Dieser funktioniert also nur für das Backend, und 78 00:04:00,080 --> 00:04:01,930 ‫was wir am Frontend tun 79 00:04:01,930 --> 00:04:05,720 ‫müssen, ist tatsächlich ein Skript in den HTML-Code einzubinden, und da 80 00:04:05,720 --> 00:04:09,160 ‫wir dieses Skript nur hier auf der Tourseite benötigen, werden 81 00:04:09,160 --> 00:04:12,643 ‫wir es genauso machen wie wir tat mit dem Map-Box-Skript. 82 00:04:13,740 --> 00:04:14,860 ‫Also dieses hier 83 00:04:14,860 --> 00:04:18,170 ‫werden wir hier in diesem Headblock platzieren, in 84 00:04:18,170 --> 00:04:19,260 ‫Ordnung? 85 00:04:19,260 --> 00:04:21,760 ‫Welches Skript brauchen wir nun eigentlich? 86 00:04:21,760 --> 00:04:25,330 ‫Nun, das können wir ganz einfach der Dokumentation entnehmen, die wir 87 00:04:25,330 --> 00:04:27,600 ‫uns bereits zuvor angesehen haben, und 88 00:04:27,600 --> 00:04:30,850 ‫ich hoffe, Sie haben die nicht geschlossen, in Ordnung? 89 00:04:30,850 --> 00:04:33,830 ‫Und so erklärt dieser hier noch einmal, wie wir das 90 00:04:33,830 --> 00:04:36,040 ‫Checkout-Produkt sowohl auf dem Client als auch 91 00:04:36,040 --> 00:04:37,740 ‫auf dem Server verwenden. 92 00:04:38,940 --> 00:04:41,090 ‫Hier sehen wir also, dass wir 93 00:04:41,090 --> 00:04:44,120 ‫zwei Schritte haben, zuerst die Checkout-Sitzung auf dem Server 94 00:04:44,120 --> 00:04:45,630 ‫erstellen. Dies ist also 95 00:04:45,630 --> 00:04:48,170 ‫sehr ähnlich zu dem, was wir zuvor im 96 00:04:48,170 --> 00:04:52,140 ‫letzten Video gemacht haben, und müssen es jetzt auch zu unserem Frontend hinzufügen. 97 00:04:52,140 --> 00:04:56,760 ‫Und das Skript, das wir brauchen, ist dieses, in Ordnung? 98 00:04:56,760 --> 00:04:59,513 ‫Also kopieren wir das und gehen wir zurück. 99 00:05:02,980 --> 00:05:05,143 ‫Und das müssen wir jetzt ein bisschen anpassen. 100 00:05:12,940 --> 00:05:14,280 ‫Jetzt rechts? 101 00:05:14,280 --> 00:05:18,790 ‫Dies war also ein Stripe-Objekt für den globalen Geltungsbereich, und das 102 00:05:18,790 --> 00:05:21,960 ‫können wir jetzt in dieser Datei verwenden. 103 00:05:21,960 --> 00:05:22,863 ‫Also sagen 104 00:05:24,760 --> 00:05:26,427 ‫wir const stripe =, und 105 00:05:27,510 --> 00:05:29,300 ‫dann ist das das Objekt, das 106 00:05:29,300 --> 00:05:31,940 ‫wir aus dem Skript bekommen, das wir gerade eingefügt 107 00:05:31,940 --> 00:05:35,410 ‫haben, und dann brauchen wir hier unseren öffentlichen Schlüssel, in Ordnung? 108 00:05:35,410 --> 00:05:38,180 ‫Wir haben also bereits unseren geheimen Schlüssel im Backend verwendet, 109 00:05:38,180 --> 00:05:41,040 ‫jetzt ist es an der Zeit, unseren öffentlichen Schlüssel zu verwenden. 110 00:05:41,040 --> 00:05:43,620 ‫Gehen wir also zurück zum Dashboard, und 111 00:05:43,620 --> 00:05:45,910 ‫wenn Sie in der Dokumentation sind, 112 00:05:45,910 --> 00:05:48,530 ‫wird es bereits hier für Sie angezeigt, 113 00:05:48,530 --> 00:05:50,290 ‫also ist dies ein 114 00:05:50,290 --> 00:05:52,310 ‫wirklich nettes Feature der Stripe-Dokumentation. 115 00:05:52,310 --> 00:05:53,467 ‫Wenn Sie also 116 00:05:53,467 --> 00:05:55,350 ‫eingeloggt sind, ist dieser Schlüssel, 117 00:05:55,350 --> 00:05:57,850 ‫den Sie hier haben, tatsächlich Ihr öffentlicher Schlüssel. 118 00:05:57,850 --> 00:06:00,220 ‫Aber wenn Sie nicht auf dieser 119 00:06:00,220 --> 00:06:03,078 ‫Seite sind, können Sie Ihren API-Schlüssel natürlich auch 120 00:06:03,078 --> 00:06:05,510 ‫erhalten, indem Sie auf die Homepage 121 00:06:05,510 --> 00:06:07,440 ‫oder die Entwicklerseite gehen, versuchen 122 00:06:07,440 --> 00:06:09,200 ‫wir es tatsächlich. 123 00:06:09,200 --> 00:06:11,020 ‫Dann haben Sie 124 00:06:11,020 --> 00:06:14,450 ‫hier bei API-Schlüsseln Ihren öffentlichen Testschlüssel hier. 125 00:06:14,450 --> 00:06:16,210 ‫Also schnapp dir das, und 126 00:06:16,210 --> 00:06:18,983 ‫dann lass uns zurückgehen und es hier weitergeben. 127 00:06:22,080 --> 00:06:23,470 ‫Und genau wie 128 00:06:23,470 --> 00:06:26,603 ‫zuvor möchte ich eslint hier schnell deaktivieren. 129 00:06:31,220 --> 00:06:32,053 ‫Okay? 130 00:06:32,053 --> 00:06:35,503 ‫Und jetzt erstellen wir endlich eine Funktion, 131 00:06:36,860 --> 00:06:39,343 ‫die ich Buchtour nennen werde. 132 00:06:40,670 --> 00:06:41,510 ‫Okay? 133 00:06:41,510 --> 00:06:44,763 ‫Diese Funktion nimmt also eine Tour-ID auf. 134 00:06:46,220 --> 00:06:50,030 ‫Und so ist die Tour-ID diejenige, die von 135 00:06:50,030 --> 00:06:52,870 ‫dieser Benutzeroberfläche direkt hierher kommt. 136 00:06:52,870 --> 00:06:57,160 ‫Also gleich von hier, okay? 137 00:06:57,160 --> 00:06:58,430 ‫Genau wie zuvor werden 138 00:06:58,430 --> 00:07:01,420 ‫wir das aus dem Index holen. js, wo 139 00:07:01,420 --> 00:07:05,560 ‫wir dieses Buch dann auch Tour nennen, 140 00:07:05,560 --> 00:07:06,393 ‫okay? 141 00:07:06,393 --> 00:07:08,960 ‫Also sehr ähnlich zu dem, was wir vorher gemacht haben. 142 00:07:08,960 --> 00:07:11,850 ‫Wie auch immer, lassen Sie uns jetzt noch einmal die Schritte 143 00:07:11,850 --> 00:07:13,550 ‫spezifizieren, die wir hier unternehmen werden. 144 00:07:13,550 --> 00:07:16,150 ‫Der erste Schritt besteht also darin, die 145 00:07:16,150 --> 00:07:17,860 ‫Sitzung tatsächlich vom 146 00:07:17,860 --> 00:07:22,580 ‫Server abzurufen, und hier kommt nun diese Route ins Spiel, OK? 147 00:07:22,580 --> 00:07:25,260 ‫Dies ist also der Punkt, an dem wir 148 00:07:25,260 --> 00:07:28,040 ‫diesen Endpunkt verwenden werden, um unsere Checkout-Sitzung wirklich auf 149 00:07:28,040 --> 00:07:29,443 ‫die Clientseite zu bringen. 150 00:07:31,550 --> 00:07:32,383 ‫Okay? 151 00:07:33,230 --> 00:07:36,573 ‫Lassen Sie sich also die Sitzung auschecken. 152 00:07:39,810 --> 00:07:43,933 ‫Vom Endpunkt oder von der API ist es nicht wirklich wichtig. 153 00:07:45,600 --> 00:07:47,410 ‫Als zweiten 154 00:07:47,410 --> 00:07:49,260 ‫Schritt werden wir unser 155 00:07:49,260 --> 00:07:54,260 ‫Stripe-Objekt verwenden, um im Grunde automatisch das Checkout-Formular zu erstellen + 156 00:07:57,657 --> 00:08:01,023 ‫die Kreditkarte für uns zu verarbeiten oder 157 00:08:02,490 --> 00:08:05,110 ‫sagen wir + zu belasten, OK? 158 00:08:05,110 --> 00:08:06,350 ‫Und das ist 159 00:08:06,350 --> 00:08:08,020 ‫es eigentlich, also nur zwei einfache 160 00:08:08,020 --> 00:08:11,023 ‫Schritte, und Sie werden sehen, dass sie eigentlich ziemlich einfach sind. 161 00:08:12,200 --> 00:08:16,983 ‫Speichern wir also die Sitzung in einer Variablen namens session. 162 00:08:17,850 --> 00:08:21,500 ‫Und dann warten wir auf eine HTTP-Anfrage, was 163 00:08:21,500 --> 00:08:24,323 ‫wir wiederum mit axios tun werden. 164 00:08:26,170 --> 00:08:27,130 ‫In Ordung? 165 00:08:27,130 --> 00:08:28,793 ‫Also muss ich das hier packen. 166 00:08:29,840 --> 00:08:32,260 ‫Importieren Sie also Axios, 167 00:08:32,260 --> 00:08:35,810 ‫und ich verwende wieder die ES6-Modulsyntax. 168 00:08:35,810 --> 00:08:36,693 ‫Denken 169 00:08:38,310 --> 00:08:40,200 ‫Sie daran, von Axios. 170 00:08:40,200 --> 00:08:43,620 ‫Also genau wie wir es zum Beispiel beim Login oder 171 00:08:43,620 --> 00:08:46,033 ‫in den Update-Einstellungen gemacht haben, oder? 172 00:08:47,440 --> 00:08:50,093 ‫Jetzt müssen wir diese Funktion auch hier als async markieren. 173 00:08:52,240 --> 00:08:53,240 ‫Okay? 174 00:08:53,240 --> 00:08:54,660 ‫Und dann an 175 00:08:54,660 --> 00:08:57,300 ‫axios können wir einfach die URL 176 00:08:57,300 --> 00:09:00,660 ‫übergeben, wenn wir nur eine einfache GET-Anfrage machen wollen. 177 00:09:00,660 --> 00:09:01,493 ‫Okay? 178 00:09:01,493 --> 00:09:02,420 ‫Bisher haben 179 00:09:02,420 --> 00:09:04,510 ‫wir also immer die Methode, die 180 00:09:04,510 --> 00:09:06,740 ‫URL und die Daten angegeben, aber 181 00:09:06,740 --> 00:09:09,110 ‫jetzt machen wir nur eine GET-Anfrage, und 182 00:09:09,110 --> 00:09:11,053 ‫das ist dann viel einfacher. 183 00:09:13,220 --> 00:09:15,520 ‫Nehmen wir uns einfach die URL 184 00:09:15,520 --> 00:09:18,413 ‫hier, damit wir nicht noch mehr Zeit verlieren. 185 00:09:19,840 --> 00:09:23,693 ‫Dann ist es hier api/v1/bookings. 186 00:09:26,550 --> 00:09:27,993 ‫Dann checken Sie die Sitzung aus. 187 00:09:30,360 --> 00:09:32,273 ‫Und dann die Tour-ID. 188 00:09:33,690 --> 00:09:35,680 ‫Das ist also dieser hier, 189 00:09:35,680 --> 00:09:38,203 ‫der in eine Dysfunktion übergehen wird, 190 00:09:39,320 --> 00:09:40,153 ‫okay? 191 00:09:41,440 --> 00:09:43,170 ‫Und schauen wir uns 192 00:09:43,170 --> 00:09:45,623 ‫dieses Sitzungsobjekt in unserer Konsole einmal 193 00:09:46,630 --> 00:09:48,850 ‫an, um zu sehen, ob alles 194 00:09:48,850 --> 00:09:49,840 ‫funktioniert, okay? 195 00:09:49,840 --> 00:09:52,490 ‫So jetzt in unserem Index. js werden wir im 196 00:09:52,490 --> 00:09:56,013 ‫Grunde die grüne Schaltfläche mit der Dysfunktion verbinden, die wir gerade 197 00:09:56,013 --> 00:09:59,263 ‫innerhalb von Stripe erstellt haben. js. 198 00:10:01,650 --> 00:10:02,633 ‫Also importieren. 199 00:10:05,330 --> 00:10:08,097 ‫Tour ab Stripe buchen. 200 00:10:11,760 --> 00:10:16,323 ‫Dann wählen wir wie immer unser Element von der Webseite aus. 201 00:10:18,240 --> 00:10:23,213 ‫Buchen-Button ist also = Dokumentieren. Holen Sie sich das Element nach 202 00:10:24,290 --> 00:10:26,313 ‫ID, und die ID ist, 203 00:10:28,680 --> 00:10:30,423 ‫glaube ich, Tour buchen. 204 00:10:31,450 --> 00:10:32,390 ‫Also ja, das 205 00:10:32,390 --> 00:10:35,623 ‫ist also die ID, die wir gerade vor der Buch-ID hinzugefügt haben. 206 00:10:39,770 --> 00:10:43,023 ‫Und jetzt können wir diesen Event-Handler hinzufügen. 207 00:10:44,800 --> 00:10:48,047 ‫Wenn es also eine Buchschaltfläche gibt, 208 00:10:49,986 --> 00:10:52,486 ‫dann bookBtn. addeventlistener, warten 209 00:10:55,430 --> 00:10:57,310 ‫auf einen Klick, dann brauchen 210 00:10:57,310 --> 00:10:59,720 ‫wir auch das Ereignis, und jetzt müssen 211 00:10:59,720 --> 00:11:02,990 ‫wir diese Tour-ID von dieser Schaltfläche abrufen, Das ist also 212 00:11:02,990 --> 00:11:05,170 ‫tourid =, und wenn ich jetzt 213 00:11:08,820 --> 00:11:12,230 ‫hier streak, ist das z. Ziel, 214 00:11:12,230 --> 00:11:14,170 ‫und vielleicht kennen 215 00:11:14,170 --> 00:11:18,860 ‫Sie das, also Event. target ist im Grunde das Element, auf das 216 00:11:18,860 --> 00:11:21,700 ‫geklickt wurde, also dasjenige, das das Auslösen dieses Ereignis-Listeners 217 00:11:21,700 --> 00:11:23,530 ‫hier ausgelöst hat, in Ordnung? 218 00:11:23,530 --> 00:11:26,273 ‫Und das wird natürlich dieser Knopf sein. 219 00:11:27,910 --> 00:11:30,210 ‫Dann haben wir dort eine Tour-ID, und 220 00:11:30,210 --> 00:11:31,400 ‫so in 221 00:11:31,400 --> 00:11:33,573 ‫JavaScript wird das dann tatsächlich Tour 222 00:11:35,270 --> 00:11:37,860 ‫heißen, also lass es mich einfach aufschreiben. 223 00:11:37,860 --> 00:11:39,420 ‫Also Tour-ID, wenn also 224 00:11:39,420 --> 00:11:40,750 ‫ein - 225 00:11:40,750 --> 00:11:42,640 ‫vorhanden ist, wird es automatisch 226 00:11:42,640 --> 00:11:44,363 ‫in diese CamelCase-Notation umgewandelt. 227 00:11:46,040 --> 00:11:47,100 ‫Okay? 228 00:11:47,100 --> 00:11:51,297 ‫Also z. Ziel. Datensatz. tourt. 229 00:11:53,820 --> 00:11:57,660 ‫Aber da dieser Name jetzt genau derselbe ist, können wir 230 00:11:57,660 --> 00:11:59,793 ‫einfach die Strukturierung darauf verwenden. 231 00:12:02,700 --> 00:12:05,313 ‫Also noch einmal diesen netten Trick anwenden. 232 00:12:07,630 --> 00:12:12,203 ‫Und dann rufen wir Tour buchen mit dieser Tour-ID auf. 233 00:12:13,400 --> 00:12:15,470 ‫Und eine andere nette Sache, die wir 234 00:12:15,470 --> 00:12:18,140 ‫hier machen können, ist, den Text der Schaltfläche in 235 00:12:18,140 --> 00:12:20,920 ‫etwas wie Verarbeitung zu ändern, und so machen wir 236 00:12:20,920 --> 00:12:24,230 ‫es noch einmal, z. Ziel. 237 00:12:24,230 --> 00:12:26,960 ‫Also wieder das Element, auf das geklickt 238 00:12:26,960 --> 00:12:30,190 ‫wurde, also die Schaltfläche. textcontent, den 239 00:12:30,190 --> 00:12:33,070 ‫wir zuvor verwendet haben, um 240 00:12:33,070 --> 00:12:35,450 ‫den Text in einem 241 00:12:35,450 --> 00:12:40,310 ‫Element zu ändern, und ändern wir das in Verarbeitung, 242 00:12:40,310 --> 00:12:41,143 ‫okay? 243 00:12:41,143 --> 00:12:41,976 ‫Und 244 00:12:41,976 --> 00:12:45,190 ‫damit denke ich, haben wir alles richtig verbunden. 245 00:12:45,190 --> 00:12:46,680 ‫Also klicken wir auf 246 00:12:46,680 --> 00:12:49,840 ‫diese Schaltfläche, dann ändern wir den Text auf 247 00:12:49,840 --> 00:12:52,110 ‫dieser Schaltfläche, dann holen wir die 248 00:12:52,110 --> 00:12:54,570 ‫Tour-ID aus dem Datenattribut auf der 249 00:12:54,570 --> 00:12:58,170 ‫Schaltfläche und rufen mit dieser ID Tour buchen auf, 250 00:12:58,170 --> 00:12:59,003 ‫okay? 251 00:12:59,003 --> 00:13:02,143 ‫Und damit die ID dann an diese URL 252 00:13:03,000 --> 00:13:06,520 ‫weitergegeben wird, die wiederum eine Checkout-Sitzung zurückgeben sollte, 253 00:13:06,520 --> 00:13:07,353 ‫okay? 254 00:13:07,353 --> 00:13:09,243 ‫Und dann schauen wir uns das hier 255 00:13:10,450 --> 00:13:11,620 ‫einfach so an. 256 00:13:11,620 --> 00:13:14,010 ‫An dieser Stelle werden wir 257 00:13:14,010 --> 00:13:16,770 ‫das Checkout-Formular noch nicht erstellen, also belassen 258 00:13:16,770 --> 00:13:20,133 ‫wir es für den letzten Schritt dieses Videos. 259 00:13:21,400 --> 00:13:23,950 ‫Aber jetzt möchte ich mir das mal 260 00:13:23,950 --> 00:13:25,330 ‫ansehen, mal sehen, 261 00:13:25,330 --> 00:13:27,960 ‫ob Paket hier noch im Hintergrund läuft, 262 00:13:27,960 --> 00:13:30,370 ‫also bündeln wir alle unsere Skripte 263 00:13:30,370 --> 00:13:32,030 ‫zusammen, und es sieht 264 00:13:32,030 --> 00:13:35,823 ‫so aus, und also lasst uns das nicht wirklich testen. 265 00:13:37,320 --> 00:13:38,830 ‫Wir sind also eingeloggt, versuchen 266 00:13:38,830 --> 00:13:40,603 ‫wir es nun mit Park Camper. 267 00:13:42,740 --> 00:13:45,793 ‫Klicken Sie hier unten auf diese Schaltfläche. 268 00:13:47,120 --> 00:13:50,240 ‫Und es scheint, als ob wir keinen Fehler bekommen, 269 00:13:50,240 --> 00:13:52,070 ‫also das ist gut, jetzt 270 00:13:52,070 --> 00:13:54,073 ‫werfen wir einen Blick auf 271 00:13:54,970 --> 00:13:57,230 ‫unsere Konsole, und wir haben ein 272 00:13:57,230 --> 00:14:00,350 ‫Objekt, und das ist das Ergebnis dieses axios-Aufrufs, 273 00:14:00,350 --> 00:14:03,140 ‫also erstellt axios immer ein Objekt wie dieses 274 00:14:03,140 --> 00:14:06,560 ‫, wobei es ein Objekt namens data gibt, das die 275 00:14:06,560 --> 00:14:08,230 ‫eigentliche Antwort ist. 276 00:14:08,230 --> 00:14:11,623 ‫Und hier sehen Sie, dass wir tatsächlich unsere Sitzung haben. 277 00:14:12,830 --> 00:14:15,330 ‫Sie sehen also, wir haben die 278 00:14:15,330 --> 00:14:18,090 ‫Kunden-E-Mail, wir haben die aktuelle Tour-ID, wir 279 00:14:18,090 --> 00:14:22,138 ‫haben jetzt mal sehen, ob wir sie haben, (murmelt) Hier 280 00:14:22,138 --> 00:14:23,100 ‫haben wir 281 00:14:23,100 --> 00:14:25,653 ‫also einige Daten über die Tour. 282 00:14:26,670 --> 00:14:29,953 ‫Und so sieht hier jetzt alles richtig aus. 283 00:14:31,240 --> 00:14:32,610 ‫In Ordung? 284 00:14:32,610 --> 00:14:34,290 ‫Lassen Sie uns das 285 00:14:34,290 --> 00:14:36,070 ‫also schließen und nun als 286 00:14:36,070 --> 00:14:39,310 ‫letzten Schritt im Grunde genommen das Checkout-Formular erstellen und 287 00:14:39,310 --> 00:14:40,893 ‫die Kreditkarte belasten. 288 00:14:44,950 --> 00:14:46,250 ‫In Ordung? 289 00:14:46,250 --> 00:14:48,650 ‫Und eigentlich packen wir das alles 290 00:14:48,650 --> 00:14:51,043 ‫hier auch in einen try-catch-Block. 291 00:14:52,080 --> 00:14:55,750 ‫Denn natürlich haben wir hier einige asynchrone Aufrufe, und beide haben 292 00:14:55,750 --> 00:14:57,830 ‫in einer Sekunde einen weiteren, 293 00:14:57,830 --> 00:15:00,000 ‫und daher ist dies eine gute Vorgehensweise. 294 00:15:00,000 --> 00:15:01,603 ‫Um einen Try-Catch-Block zu haben. 295 00:15:04,750 --> 00:15:05,610 ‫In Ordung? 296 00:15:05,610 --> 00:15:09,613 ‫Aber lassen Sie uns nicht viel Zeit mit diesen Fehlern verschwenden. 297 00:15:11,790 --> 00:15:14,590 ‫Aber ich werde trotzdem tatsächlich eine Warnung 298 00:15:14,590 --> 00:15:16,010 ‫anzeigen, falls ein Fehler 299 00:15:16,010 --> 00:15:18,870 ‫auftritt, also zum Beispiel bei diesem API-Aufruf, 300 00:15:18,870 --> 00:15:19,703 ‫okay? 301 00:15:19,703 --> 00:15:21,460 ‫Damit der Benutzer grundsätzlich sehen kann, 302 00:15:21,460 --> 00:15:22,993 ‫dass etwas schief gelaufen ist. 303 00:15:24,500 --> 00:15:29,063 ‫Nehmen wir also einfach diesen Alert-Import. 304 00:15:31,530 --> 00:15:32,600 ‫In Ordung? 305 00:15:32,600 --> 00:15:35,633 ‫Und dann sagen Sie Benachrichtigung anzeigen, geben Sie 306 00:15:38,000 --> 00:15:40,630 ‫an, dass es sich um einen 307 00:15:40,630 --> 00:15:44,940 ‫Fehler handelt, und dann nur den Fehler selbst als Nachricht im Grunde. 308 00:15:44,940 --> 00:15:46,250 ‫In Ordung? 309 00:15:46,250 --> 00:15:49,220 ‫Wie auch immer, um diesen letzten Schritt jetzt zu tun, 310 00:15:49,220 --> 00:15:51,460 ‫ist es eigentlich sehr, sehr einfach, alles 311 00:15:51,460 --> 00:15:53,673 ‫was wir tun müssen, ist abzuwarten. 312 00:15:56,060 --> 00:15:58,837 ‫Streifen. redirectTocheck-out, lass mich 313 00:16:02,950 --> 00:16:04,683 ‫sehen, ob ich das falsch 314 00:16:06,360 --> 00:16:08,250 ‫gemacht habe, und lass mich sehen, 315 00:16:08,250 --> 00:16:11,700 ‫ob ich das richtig gemacht habe. Also redirect to check-out. 316 00:16:11,700 --> 00:16:12,630 ‫In Ordung? 317 00:16:12,630 --> 00:16:15,560 ‫Und dann Optionen, aber nur eine 318 00:16:15,560 --> 00:16:18,870 ‫Option, nämlich die Sitzungs-ID, und das kommt von 319 00:16:18,870 --> 00:16:22,053 ‫der Sitzung, und erinnern Sie sich, wie die 320 00:16:23,140 --> 00:16:26,280 ‫Sitzung in den Daten war, also gab 321 00:16:26,280 --> 00:16:30,140 ‫es dort ein Datenobjekt, das von Axios erstellt wurde, 322 00:16:30,140 --> 00:16:34,020 ‫erinnern Sie sich und so? ist dann alle Antwort selbst. 323 00:16:34,020 --> 00:16:37,793 ‫Und da drin haben wir eine Sitzung. Ich würde. 324 00:16:38,810 --> 00:16:40,430 ‫Und das war's, 325 00:16:40,430 --> 00:16:41,540 ‫okay? 326 00:16:41,540 --> 00:16:44,210 ‫Und so kommt jetzt der größte 327 00:16:44,210 --> 00:16:48,150 ‫Teil von allem, nämlich zu überprüfen, ob das funktioniert. 328 00:16:48,150 --> 00:16:50,620 ‫Wir sind also noch eingeloggt, laden 329 00:16:50,620 --> 00:16:52,793 ‫wir das noch einmal. 330 00:16:54,470 --> 00:16:57,343 ‫Klicken Sie auf eine Schaltfläche und warten Sie nun darauf. 331 00:16:59,220 --> 00:17:02,810 ‫Und tatsächlich kommen wir zu unserer Checkout-Seite, und wir bekommen 332 00:17:02,810 --> 00:17:05,590 ‫auch dieses schöne Bild hier, wir bekommen 333 00:17:05,590 --> 00:17:08,540 ‫hier das gesamte Logo der Natur, wir bekommen 334 00:17:08,540 --> 00:17:10,560 ‫hier alle Icons, also all 335 00:17:10,560 --> 00:17:13,270 ‫das, was wir vorher angegeben haben, wir 336 00:17:13,270 --> 00:17:15,710 ‫haben den Preis, den wir auch in 337 00:17:15,710 --> 00:17:17,540 ‫unserem angegeben haben 338 00:17:17,540 --> 00:17:19,690 ‫Checkout-Sitzung und wirklich alle anderen Details. 339 00:17:19,690 --> 00:17:22,550 ‫Also der Name, die Zusammenfassung und 340 00:17:22,550 --> 00:17:24,336 ‫natürlich das Bild. 341 00:17:24,336 --> 00:17:27,610 ‫Das ist wirklich erstaunlich, oder? 342 00:17:27,610 --> 00:17:31,230 ‫Dann ist hier noch eine tolle Sache, die ich bereits 343 00:17:31,230 --> 00:17:32,690 ‫erwähnt habe, dass 344 00:17:32,690 --> 00:17:35,100 ‫die E-Mail-Adresse bereits automatisch vorausgefüllt ist, 345 00:17:35,100 --> 00:17:37,463 ‫also ein weiteres wirklich nettes Feature. 346 00:17:38,560 --> 00:17:40,380 ‫Und jetzt müssen wir 347 00:17:40,380 --> 00:17:43,250 ‫hier nur noch diese Kreditkarteninformationen eingeben, und 348 00:17:43,250 --> 00:17:46,410 ‫so streifen wir beim Testen die Kreditkartennummer nur 349 00:17:46,410 --> 00:17:49,640 ‫vier zwei vier zwei vier zwei vier zwei 350 00:17:49,640 --> 00:17:52,970 ‫und so weiter, bis wir fertig sind , okay? 351 00:17:52,970 --> 00:17:55,850 ‫Dann funktioniert hier jeder Monat und jedes Jahr, also 352 00:17:55,850 --> 00:17:58,290 ‫setzen wir einfach zwei zwei zwei. 353 00:17:58,290 --> 00:18:01,060 ‫Also irgendetwas in der Zukunft, in Ordnung? 354 00:18:01,060 --> 00:18:05,600 ‫Wenn Sie sich diesen Kurs also nach Februar 2022 ansehen, wird 355 00:18:05,600 --> 00:18:08,120 ‫dieses Datum nicht funktionieren, also legen 356 00:18:08,120 --> 00:18:09,973 ‫Sie einfach etwas später ein, 357 00:18:11,510 --> 00:18:12,343 ‫okay? 358 00:18:12,343 --> 00:18:14,530 ‫Bis eine beliebige Nummer auch 359 00:18:14,530 --> 00:18:16,667 ‫funktioniert, hier funktioniert auch jeder 360 00:18:16,667 --> 00:18:18,580 ‫Name, sagen wir mal 361 00:18:18,580 --> 00:18:22,000 ‫Laura, das Land spielt natürlich auch keine Rolle, die 362 00:18:22,000 --> 00:18:25,390 ‫Leute füllen automatisch basierend auf deinem IP-Standort aus, also 363 00:18:25,390 --> 00:18:26,580 ‫bin ich 364 00:18:26,580 --> 00:18:29,240 ‫in Portugal, und so das bekomme ich. 365 00:18:29,240 --> 00:18:32,080 ‫Und jetzt sehen Sie diesen schönen grünen Knopf hier, und 366 00:18:32,080 --> 00:18:34,100 ‫er hat diesen schönen Effekt, und 367 00:18:34,100 --> 00:18:35,500 ‫wenn wir jetzt darauf 368 00:18:36,870 --> 00:18:39,400 ‫klicken, wird er verarbeitet und wir sind fertig. 369 00:18:39,400 --> 00:18:43,281 ‫Super, dann ist dies tatsächlich die Erfolgs-URL, die wir 370 00:18:43,281 --> 00:18:46,880 ‫auch in unserer Checkout-Sitzung angegeben haben, oder? 371 00:18:46,880 --> 00:18:48,893 ‫Also haben wir das 372 00:18:50,390 --> 00:18:52,250 ‫definiert, dass wir 373 00:18:52,250 --> 00:18:54,697 ‫im Erfolgsfall zu dieser Home-URL zurückkehren. 374 00:18:55,863 --> 00:18:57,780 ‫Und das werden wir hier etwas 375 00:18:57,780 --> 00:19:00,450 ‫später ändern, aber im Moment ist es wirklich das, was 376 00:19:00,450 --> 00:19:02,640 ‫wir wollten, und so hat es perfekt funktioniert. 377 00:19:02,640 --> 00:19:04,370 ‫Ich hoffe es 378 00:19:04,370 --> 00:19:07,963 ‫zumindest, also schauen wir uns jetzt alle Zahlungen an. 379 00:19:10,270 --> 00:19:11,330 ‫Und tatsächlich ist 380 00:19:11,330 --> 00:19:13,470 ‫dies die, die wir gerade gemacht haben. 381 00:19:13,470 --> 00:19:15,890 ‫So haben wir diese Zahlung jetzt erfolgreich auf 382 00:19:15,890 --> 00:19:17,193 ‫unserem Konto erhalten. 383 00:19:19,810 --> 00:19:22,380 ‫Sie sehen also in der E-Mail-Adresse den 384 00:19:22,380 --> 00:19:26,410 ‫Namen und tatsächlich die Park Camper Tour, die wir gerade gekauft haben. 385 00:19:26,410 --> 00:19:28,423 ‫Super, das ist wirklich toll. 386 00:19:29,370 --> 00:19:32,990 ‫Hier unten können Sie dann die Gebühren sehen, die Stripe einnimmt, 387 00:19:32,990 --> 00:19:35,830 ‫also müssen sie natürlich auch Geld verdienen, und 388 00:19:35,830 --> 00:19:37,950 ‫deshalb nehmen sie einen Schnitt, 389 00:19:37,950 --> 00:19:42,440 ‫was meiner Meinung nach wie 2 ist. 9% oder so ähnlich, aber natürlich können 390 00:19:42,440 --> 00:19:44,800 ‫Sie sich all das Zeug auf ihrer 391 00:19:44,800 --> 00:19:45,893 ‫Website ansehen. 392 00:19:46,770 --> 00:19:49,690 ‫Dann hast du hier auch die Zahlungsmethode, also die 393 00:19:49,690 --> 00:19:51,313 ‫Daten, die wir gerade 394 00:19:52,480 --> 00:19:54,823 ‫eingegeben haben, und du bekommst ein paar schöne 395 00:19:55,860 --> 00:19:59,763 ‫Daten zur Sitzung, und wahrscheinlich sollte sie auch hier bei deinen Kunden auftauchen. 396 00:20:00,770 --> 00:20:04,180 ‫Und ja, tatsächlich ist sie hier, und 397 00:20:04,180 --> 00:20:06,260 ‫ja, ich denke, 398 00:20:06,260 --> 00:20:09,033 ‫das ist jetzt ziemlich erfolgreich. 399 00:20:10,880 --> 00:20:14,010 ‫Oh, und was ich vergessen habe zu erwähnen, 400 00:20:14,010 --> 00:20:16,580 ‫ist, dass Ihre Benutzer tatsächlich auch 401 00:20:16,580 --> 00:20:18,600 ‫automatisch eine E-Mail erhalten. 402 00:20:18,600 --> 00:20:22,510 ‫Ich denke, dies sollte hier der Standard für 403 00:20:22,510 --> 00:20:24,540 ‫E-Mail-Bestätigungen sein. Gehen Sie 404 00:20:24,540 --> 00:20:27,160 ‫also zu Ihren Einstellungen für 405 00:20:27,160 --> 00:20:30,240 ‫E-Mail-Bestätigungen, und dann haben Sie hier E-Mail-Kunden 406 00:20:30,240 --> 00:20:31,920 ‫über erfolgreiche Zahlungen. 407 00:20:31,920 --> 00:20:34,080 ‫Und das ist auch ein 408 00:20:34,080 --> 00:20:37,730 ‫wirklich nettes Feature, das bedeutet, dass wir nicht manuell E-Mails 409 00:20:37,730 --> 00:20:41,580 ‫versenden müssen, wenn ein Benutzer eine Tour erfolgreich gekauft hat, okay? 410 00:20:41,580 --> 00:20:45,360 ‫Also noch eine Sache, die uns Stripe wegnimmt, Fantastic, also 411 00:20:45,360 --> 00:20:50,000 ‫nehmen wir uns jetzt eine kurze Minute Zeit, um den gesamten Prozess, 412 00:20:50,000 --> 00:20:52,460 ‫den wir gerade durchlaufen haben, zusammenzufassen. 413 00:20:52,460 --> 00:20:55,760 ‫Also haben wir damit begonnen, diese Checkout-Sitzung zu erstellen, 414 00:20:55,760 --> 00:20:58,440 ‫die als Eingabe die Tour-ID benötigt, damit 415 00:20:58,440 --> 00:21:02,270 ‫wir dann eine Reihe von Details über die Tour in dieser 416 00:21:02,270 --> 00:21:03,840 ‫Sitzung speichern können. 417 00:21:03,840 --> 00:21:05,684 ‫Also Sachen über 418 00:21:05,684 --> 00:21:09,460 ‫den Tournamen, die Zusammenfassung auch die Preisbilder. 419 00:21:09,460 --> 00:21:11,610 ‫Also all die Dinge, die wir auf 420 00:21:11,610 --> 00:21:12,840 ‫der Checkout-Seite, aber 421 00:21:12,840 --> 00:21:14,970 ‫auch in unserem Dashboard anzeigen möchten. 422 00:21:14,970 --> 00:21:17,750 ‫Dann fügen wir auch die E-Mail hinzu, damit der 423 00:21:17,750 --> 00:21:20,040 ‫Benutzer sie nicht an der Kasse ausfüllen muss, 424 00:21:20,040 --> 00:21:22,190 ‫und dann eine Reihe anderer Daten. 425 00:21:22,190 --> 00:21:24,760 ‫Denken Sie also an diese Client-Referenz-ID, die 426 00:21:24,760 --> 00:21:26,510 ‫viel mehr Sinn macht, 427 00:21:26,510 --> 00:21:28,443 ‫wenn wir sie tatsächlich verwenden. 428 00:21:29,610 --> 00:21:31,520 ‫Also erstellen wir diese 429 00:21:32,500 --> 00:21:36,150 ‫Sitzung immer dann, wenn jemand diese Check-out-Sitzungsroute trifft, in Ordnung? 430 00:21:36,150 --> 00:21:39,770 ‫Und genau das machen wir dann an unserem Frontend, 431 00:21:39,770 --> 00:21:42,610 ‫hier in Streifen. js. 432 00:21:42,610 --> 00:21:44,230 ‫Also bekommen wir unsere Sitzung 433 00:21:44,230 --> 00:21:46,930 ‫hier, und dann erstellen wir von dort aus 434 00:21:46,930 --> 00:21:48,760 ‫eine Kasse und belasten die Kreditkarte 435 00:21:48,760 --> 00:21:51,017 ‫mit Stripe. redirectTocheckout, 436 00:21:52,051 --> 00:21:53,560 ‫und das Stripe-Objekt 437 00:21:53,560 --> 00:21:55,800 ‫hier verwendet einfach die Stripe-Bibliothek 438 00:21:55,800 --> 00:21:58,240 ‫mit unserem öffentlichen Schlüssel, okay? 439 00:21:58,240 --> 00:22:01,610 ‫Woher kommt nun diese Tour-ID? 440 00:22:01,610 --> 00:22:04,500 ‫Nun, es wird hier direkt auf der Schaltfläche gespeichert, auf die 441 00:22:04,500 --> 00:22:07,050 ‫der Benutzer klickt, um eine neue Tour zu buchen. 442 00:22:07,050 --> 00:22:10,770 ‫Diese ID wird dann direkt hier im Index gelesen. js, wenn 443 00:22:10,770 --> 00:22:14,130 ‫jemand auf die Buchungsschaltfläche klickt, OK? 444 00:22:14,130 --> 00:22:16,020 ‫Also speichern wir das in 445 00:22:16,020 --> 00:22:17,940 ‫Tour-ID und übergeben es an 446 00:22:17,940 --> 00:22:20,730 ‫Tour buchen, was wiederum diese Funktion hier ist, 447 00:22:20,730 --> 00:22:23,410 ‫die sich um die eigentliche Verarbeitung der Zahlungen 448 00:22:23,410 --> 00:22:24,740 ‫im Frontend kümmert. 449 00:22:24,740 --> 00:22:26,450 ‫Und so ist das Ergebnis 450 00:22:26,450 --> 00:22:27,960 ‫von all dem, 451 00:22:27,960 --> 00:22:30,480 ‫was wir gerade gesehen haben, wo der Benutzer 452 00:22:30,480 --> 00:22:32,380 ‫wirklich die Kreditkarte belastet und 453 00:22:32,380 --> 00:22:34,420 ‫die Tour gekauft hat, so perfekt. 454 00:22:34,420 --> 00:22:35,670 ‫Hier fehlt 455 00:22:35,670 --> 00:22:38,440 ‫nun, dass wir eigentlich bei jeder 456 00:22:38,440 --> 00:22:42,540 ‫neuen Buchung einen neuen Buchungsbeleg in unserer Datenbank anlegen wollen. 457 00:22:42,540 --> 00:22:45,060 ‫So wie wir es vor langer Zeit 458 00:22:45,060 --> 00:22:46,940 ‫besprochen haben, als wir über 459 00:22:46,940 --> 00:22:49,420 ‫alle Datenmodelle in dieser Anwendung sprachen, oder? 460 00:22:49,420 --> 00:22:51,090 ‫Und dazu erstellen wir 461 00:22:51,090 --> 00:22:52,960 ‫gleich im nächsten Video das 462 00:22:52,960 --> 00:22:54,240 ‫Buchungsmodell, sortieren es 463 00:22:54,240 --> 00:22:55,250 ‫danach 464 00:22:55,250 --> 00:22:56,970 ‫und können dann bei 465 00:22:56,970 --> 00:22:59,193 ‫einem erfolgreichen Kauf neue Touren erstellen.