1 00:00:01,130 --> 00:00:03,770 ‫Sprecher: In diesem letzten Teil des 2 00:00:03,770 --> 00:00:06,160 ‫Abschnitts akzeptieren wir jetzt 3 00:00:06,160 --> 00:00:08,770 ‫Kreditkartenzahlungen in unserer Anwendung mit 4 00:00:08,770 --> 00:00:12,233 ‫Stripe, damit unsere Benutzer tatsächlich Touren kaufen können. 5 00:00:14,080 --> 00:00:16,320 ‫Und so öffnen wir hier und dann einen 6 00:00:18,160 --> 00:00:21,730 ‫neuen Tab auf dem offenen Streifen. com. 7 00:00:21,730 --> 00:00:25,080 ‫Stripe ist also die beste und beliebteste und 8 00:00:25,080 --> 00:00:27,910 ‫auch am einfachsten zu bedienende Softwareplattform, 9 00:00:27,910 --> 00:00:30,810 ‫um Zahlungen in jede Website zu integrieren. 10 00:00:30,810 --> 00:00:34,210 ‫Und noch viel mehr darüber, wie es tatsächlich funktioniert, etwas 11 00:00:34,210 --> 00:00:38,040 ‫später, aber lassen Sie uns zunächst mit der Erstellung unseres kostenlosen Kontos beginnen. 12 00:00:38,040 --> 00:00:40,540 ‫Klicken Sie also hier auf kostenloses Konto 13 00:00:40,540 --> 00:00:43,303 ‫und eröffnen Sie dann Ihr eigenes kostenloses Konto. 14 00:00:44,510 --> 00:00:46,810 ‫Und sobald Sie sich erfolgreich angemeldet 15 00:00:46,810 --> 00:00:49,990 ‫haben, sollten Sie ein Dashboard sehen, das ungefähr so aussieht. 16 00:00:49,990 --> 00:00:52,210 ‫Wenn Sie also ein brandneues Konto 17 00:00:52,210 --> 00:00:55,150 ‫eröffnen, befinden Sie sich zunächst immer im Testmodus. 18 00:00:55,150 --> 00:00:59,250 ‫Das sehen Sie hier unten mit diesen Testdaten. 19 00:00:59,250 --> 00:01:01,380 ‫Sobald Sie nun wirklich 20 00:01:01,380 --> 00:01:04,250 ‫echte Zahlungen mit echtem Geld von 21 00:01:04,250 --> 00:01:07,530 ‫echten Kunden akzeptieren möchten, müssen Sie Ihr 22 00:01:07,530 --> 00:01:08,960 ‫Stripe-Konto aktivieren. 23 00:01:08,960 --> 00:01:11,350 ‫Und dafür müssen Sie Stripe dann 24 00:01:11,350 --> 00:01:14,220 ‫eine Reihe von Daten über Ihr Unternehmen bereitstellen. 25 00:01:14,220 --> 00:01:15,580 ‫Aber in diesem 26 00:01:15,580 --> 00:01:18,360 ‫Projekt werden wir das natürlich nicht tun, also werden 27 00:01:18,360 --> 00:01:21,680 ‫wir immer nur in dieser Art von Testentwicklungsmodus arbeiten, okay? 28 00:01:21,680 --> 00:01:24,010 ‫Aber ansonsten klickst Du einfach hier 29 00:01:24,010 --> 00:01:26,940 ‫auf Start oder aktivierst Deinen Account hier oben. 30 00:01:26,940 --> 00:01:29,980 ‫Jetzt ist dieses Dashboard meiner Meinung nach wirklich einfach 31 00:01:29,980 --> 00:01:31,890 ‫und super intuitiv zu bedienen. 32 00:01:31,890 --> 00:01:35,660 ‫Hier können Sie also Ihre Zahlungen sehen, was wiederum sehr 33 00:01:35,660 --> 00:01:37,360 ‫einfach ist, und denken 34 00:01:37,360 --> 00:01:40,280 ‫Sie daran, dass dies alles Testdaten sind. 35 00:01:40,280 --> 00:01:42,270 ‫Alle diese Beträge hier sind 36 00:01:42,270 --> 00:01:44,110 ‫natürlich nur Fake-Beträge. 37 00:01:44,110 --> 00:01:46,460 ‫Aber wie auch immer, Sie können Ihren Kunden hier 38 00:01:46,460 --> 00:01:48,463 ‫sehen, Sie können den Betrag sehen. 39 00:01:49,490 --> 00:01:52,440 ‫Und wenn Sie sie öffnen, erhalten Sie noch 40 00:01:52,440 --> 00:01:55,670 ‫mehr Informationen, wie die Zahlungsmethode hier, also die Kreditkartennummer. 41 00:01:55,670 --> 00:01:58,640 ‫Und wir bekommen übrigens nie Zugriff auf 42 00:01:58,640 --> 00:02:01,420 ‫die echte Kreditkartennummer des Kunden. 43 00:02:01,420 --> 00:02:04,230 ‫Wir sehen also immer nur diese 44 00:02:04,230 --> 00:02:07,630 ‫letzten vier Ziffern, aber nie die echte Kreditkartennummer, okay? 45 00:02:07,630 --> 00:02:09,620 ‫Dann erhalten Sie auch 46 00:02:09,620 --> 00:02:12,110 ‫die Übersicht, was tatsächlich gekauft wurde. 47 00:02:12,110 --> 00:02:14,630 ‫So zum Beispiel die Snow Adventurer Tour. 48 00:02:14,630 --> 00:02:16,360 ‫Und all das hier 49 00:02:16,360 --> 00:02:18,410 ‫stammt natürlich aus der Zeit, als 50 00:02:18,410 --> 00:02:21,133 ‫ich die Natours-Anwendung zum ersten Mal erstellte, okay? 51 00:02:22,000 --> 00:02:24,570 ‫All dies sind also nur Testkäufe. 52 00:02:24,570 --> 00:02:27,420 ‫Dann können wir auch unser gesamtes Guthaben sehen, also im 53 00:02:27,420 --> 00:02:30,150 ‫Grunde das gesamte Geld, das wir erhalten haben. 54 00:02:30,150 --> 00:02:33,610 ‫Und das alles sind nur Testdaten. 55 00:02:33,610 --> 00:02:37,060 ‫Dann haben wir unsere Kunden mit einer schönen Liste von allen. 56 00:02:37,060 --> 00:02:39,653 ‫Und ja, das alles funktioniert wirklich gut. 57 00:02:40,650 --> 00:02:42,500 ‫Bevor wir beginnen können, müssen 58 00:02:42,500 --> 00:02:44,830 ‫wir tatsächlich ein paar Einstellungen für 59 00:02:44,830 --> 00:02:46,400 ‫unser Konto definieren. 60 00:02:46,400 --> 00:02:48,867 ‫In Ihrem neuen Konto sollten Sie 61 00:02:48,867 --> 00:02:52,120 ‫also etwas wie "Unbenanntes Konto" oder ähnliches hier sehen. 62 00:02:52,120 --> 00:02:55,740 ‫Und so solltest du auch gerne ein Stiftsymbol oder sowas haben, wo 63 00:02:55,740 --> 00:02:59,010 ‫du dann einen Namen für das Konto erstellen kannst. 64 00:02:59,010 --> 00:03:02,160 ‫Also nennen Sie das bitte "Natours" oder so. 65 00:03:02,160 --> 00:03:04,700 ‫Und wenn Sie mehr Unternehmen haben, 66 00:03:04,700 --> 00:03:08,690 ‫können Sie für jedes dieser Unternehmen ein Konto hinzufügen, okay? 67 00:03:08,690 --> 00:03:11,510 ‫Oder wenn Sie hier kein Stiftsymbol haben, können 68 00:03:11,510 --> 00:03:13,220 ‫wir auch zu den 69 00:03:13,220 --> 00:03:15,570 ‫Einstellungen und dann zu den Kontoinformationen gehen. 70 00:03:15,570 --> 00:03:18,030 ‫Hier sollten Sie also den 71 00:03:18,030 --> 00:03:20,610 ‫Namen dieser Art von Geschäft eingeben. 72 00:03:20,610 --> 00:03:23,150 ‫Wir können auch ein paar andere Einstellungen definieren, 73 00:03:23,150 --> 00:03:25,350 ‫also lassen Sie uns hier das Branding 74 00:03:25,350 --> 00:03:27,390 ‫definieren, damit die Stripe Checkout-Seiten im 75 00:03:27,390 --> 00:03:29,233 ‫Grunde unserer Marke entsprechen. 76 00:03:30,470 --> 00:03:32,383 ‫Also fügen wir unsere Bilder hinzu. 77 00:03:35,880 --> 00:03:39,850 ‫Also öffentlich, Bild und dann für das Symbol, verwenden 78 00:03:39,850 --> 00:03:41,163 ‫wir dieses. 79 00:03:43,830 --> 00:03:46,140 ‫Und wir können auch ein 80 00:03:46,140 --> 00:03:49,033 ‫Logo hochladen, und dafür verwenden wir dieses. 81 00:03:51,310 --> 00:03:53,913 ‫Oh, und jetzt brauchen wir unser Passwort, um fortzufahren. 82 00:03:56,220 --> 00:03:59,033 ‫Und jetzt ändern wir auch hier unsere Farbe. 83 00:04:00,180 --> 00:04:03,640 ‫Also schnell die CSS-Datei öffentlich öffnen und 84 00:04:04,510 --> 00:04:07,150 ‫dann unser typisches Grün finden, das 85 00:04:07,150 --> 00:04:08,663 ‫hier ist. 86 00:04:12,000 --> 00:04:13,623 ‫Das sieht also etwas besser aus. 87 00:04:15,570 --> 00:04:16,950 ‫Speichern wir es 88 00:04:19,200 --> 00:04:22,150 ‫jetzt hier und damit können wir loslegen. 89 00:04:22,150 --> 00:04:25,130 ‫Als nächstes werfen wir einen Blick auf unsere API-Schlüssel. 90 00:04:25,130 --> 00:04:27,660 ‫Klicken Sie also hier auf API-Schlüssel und 91 00:04:27,660 --> 00:04:29,550 ‫wenn die Website zum Zeitpunkt 92 00:04:29,550 --> 00:04:31,690 ‫des Anschauens dieses Videos etwas anders 93 00:04:31,690 --> 00:04:35,113 ‫aussieht, dann sind die Schlüssel vielleicht hier bei den Entwicklern. 94 00:04:36,180 --> 00:04:41,180 ‫Hier haben Sie also auch etwas namens API-Schlüssel, okay? 95 00:04:41,840 --> 00:04:45,860 ‫Jedenfalls gibt es einen veröffentlichbaren Schlüssel und einen geheimen Schlüssel. 96 00:04:45,860 --> 00:04:48,270 ‫Dieser Schlüssel ist im Grunde genommen ein 97 00:04:48,270 --> 00:04:50,820 ‫öffentlicher Schlüssel, den wir am Front-End verwenden können, 98 00:04:50,820 --> 00:04:54,430 ‫und ein geheimer Schlüssel ist der, der am Back-End benötigt wird. 99 00:04:54,430 --> 00:04:56,020 ‫Und dazu mehr, 100 00:04:56,020 --> 00:04:58,420 ‫sobald wir mit der Umsetzung beginnen. 101 00:04:58,420 --> 00:05:00,310 ‫Und zum Schluss wollte ich 102 00:05:00,310 --> 00:05:04,120 ‫noch kurz mit Ihnen gemeinsam einen Blick in die Dokumentation werfen. 103 00:05:04,120 --> 00:05:05,940 ‫Und das ist hier oben, 104 00:05:05,940 --> 00:05:07,390 ‫und eigentlich ist 105 00:05:07,390 --> 00:05:09,470 ‫Stripe für seine hervorragende Dokumentation bekannt. 106 00:05:09,470 --> 00:05:11,700 ‫In dieser Dokumentation finden Sie ganz einfach, 107 00:05:11,700 --> 00:05:13,170 ‫wonach Sie suchen. 108 00:05:13,170 --> 00:05:15,470 ‫Aber wenn Sie gerade erst anfangen, 109 00:05:15,470 --> 00:05:17,740 ‫ist es natürlich sehr schwer zu 110 00:05:17,740 --> 00:05:19,830 ‫wissen, wonach Sie suchen, oder? 111 00:05:19,830 --> 00:05:21,550 ‫Und deshalb 112 00:05:21,550 --> 00:05:25,270 ‫implementieren wir diese Bezahlfunktion hier gemeinsam, oder? 113 00:05:25,270 --> 00:05:28,530 ‫Wir werden also die Zahlungsfunktionen von Stripe verwenden und 114 00:05:28,530 --> 00:05:31,000 ‫sie haben ein paar verschiedene Optionen. 115 00:05:31,000 --> 00:05:33,630 ‫Jetzt im Web können wir Stripe 116 00:05:33,630 --> 00:05:36,820 ‫Checkout verwenden, das im Grunde eine präformative Checkout-Seite verwendet. 117 00:05:36,820 --> 00:05:39,170 ‫Dies ist also diejenige, die wir 118 00:05:39,170 --> 00:05:41,800 ‫verwenden werden, oder Sie können auch 119 00:05:41,800 --> 00:05:42,633 ‫Stripe-Elemente 120 00:05:42,633 --> 00:05:46,400 ‫verwenden, wenn Sie wirklich Ihr eigenes Checkout-Erlebnis aufbauen möchten, okay? 121 00:05:46,400 --> 00:05:48,640 ‫Aber wir werden nur diesen Checkout verwenden, 122 00:05:48,640 --> 00:05:50,110 ‫der eigentlich ganz neu 123 00:05:50,110 --> 00:05:52,633 ‫und damit wirklich zukunftssicher an dieser Stelle ist. 124 00:05:53,990 --> 00:05:56,060 ‫Dies sind also die beiden Optionen für 125 00:05:56,060 --> 00:05:59,850 ‫das Web, aber Sie können auch Stripe auf iOS, Android und wirklich 126 00:05:59,850 --> 00:06:01,563 ‫jeder anderen Plattform verwenden. 127 00:06:02,700 --> 00:06:05,840 ‫An der Kasse können wir es dann 128 00:06:05,840 --> 00:06:10,223 ‫tatsächlich nur auf dem Client oder zusammen mit dem Server verwenden, okay? 129 00:06:11,070 --> 00:06:13,593 ‫Hier unten gibt es also einen Vergleich. 130 00:06:14,610 --> 00:06:17,600 ‫Wenn wir es also nur auf der Client-Seite verwenden, 131 00:06:17,600 --> 00:06:20,000 ‫brauchen wir nicht einmal einen Server. 132 00:06:20,000 --> 00:06:22,890 ‫Aber diese Art der Verwendung von Stripe ist nur 133 00:06:22,890 --> 00:06:25,060 ‫für wirklich sehr kleine Geschäfte gedacht, 134 00:06:25,060 --> 00:06:27,600 ‫in denen Sie also nur eine Handvoll Produkte 135 00:06:27,600 --> 00:06:29,420 ‫haben, deren Preis sich nie 136 00:06:29,420 --> 00:06:31,040 ‫ändert, und in denen 137 00:06:31,040 --> 00:06:34,730 ‫Sie all diese Produkte tatsächlich manuell zu Ihren Stripe-Dashboards hinzufügen müssen. 138 00:06:34,730 --> 00:06:37,250 ‫Wir wollen etwas 139 00:06:37,250 --> 00:06:41,460 ‫Komplexeres und nutzen dafür die Serverintegration, okay? 140 00:06:41,460 --> 00:06:43,160 ‫Also müssen wir natürlich 141 00:06:43,160 --> 00:06:45,010 ‫noch etwas auf der Client-Seite tun, 142 00:06:45,010 --> 00:06:48,720 ‫aber der größte Teil des Codes wird tatsächlich auf der Server-Seite sein. 143 00:06:48,720 --> 00:06:52,220 ‫Okay, Sie sehen also, dass es mit Stripe 144 00:06:52,220 --> 00:06:56,930 ‫wirklich viel zu tun gibt, und wir können sogar noch viel mehr tun. 145 00:06:56,930 --> 00:07:01,210 ‫Wir könnten also eine Abrechnung haben, wo wir Abonnements haben, wo wir 146 00:07:01,210 --> 00:07:04,050 ‫Rechnungen haben und all das gute Zeug. 147 00:07:04,050 --> 00:07:06,040 ‫Sie könnten also wirklich 148 00:07:06,040 --> 00:07:09,330 ‫ein riesiges Geschäft auf Stripe aufbauen und Abonnements 149 00:07:09,330 --> 00:07:11,350 ‫akzeptieren, Kunden in Datenbanken speichern 150 00:07:11,350 --> 00:07:13,543 ‫und all das in Stripe integrieren. 151 00:07:14,940 --> 00:07:16,850 ‫Aber auch hier verwenden wir 152 00:07:16,850 --> 00:07:19,040 ‫einfach den Checkout, aber die vollständigere 153 00:07:19,040 --> 00:07:21,090 ‫Version davon, indem wir den 154 00:07:21,090 --> 00:07:22,963 ‫Server Checkout verwenden. 155 00:07:24,640 --> 00:07:27,130 ‫Okay, aber bevor wir das 156 00:07:27,130 --> 00:07:29,690 ‫Stripe Checkout-Produkt tatsächlich in unsere Anwendung 157 00:07:29,690 --> 00:07:31,210 ‫integrieren, wollte 158 00:07:31,210 --> 00:07:34,353 ‫ich nur schnell den gesamten Workflow gestalten, 159 00:07:34,353 --> 00:07:37,920 ‫den wir in den nächsten Videos implementieren werden. 160 00:07:37,920 --> 00:07:40,200 ‫Alles beginnt also im Backend, 161 00:07:40,200 --> 00:07:42,850 ‫wo wir eine Route implementieren, um 162 00:07:42,850 --> 00:07:45,600 ‫eine sogenannte Stripe Checkout Session zu erstellen. 163 00:07:45,600 --> 00:07:48,170 ‫Und diese Sitzung wird eine Menge Daten 164 00:07:48,170 --> 00:07:50,970 ‫über das Objekt enthalten, das gekauft werden kann. 165 00:07:50,970 --> 00:07:53,070 ‫Und in unserem Beispiel ist das die Tour. 166 00:07:53,070 --> 00:07:55,480 ‫Die Sitzung enthält also den Tourpreis, 167 00:07:55,480 --> 00:07:59,640 ‫den Tournamen, ein Produktbild und auch einige andere Details 168 00:07:59,640 --> 00:08:01,450 ‫wie die Kunden-E-Mail. 169 00:08:01,450 --> 00:08:04,530 ‫Das werden wir also im nächsten Video sehen. 170 00:08:04,530 --> 00:08:07,370 ‫Dann erstellen wir im Front-End eine Funktion, 171 00:08:07,370 --> 00:08:10,580 ‫um die Checkout-Sitzung vom Server anzufordern, sobald der 172 00:08:10,580 --> 00:08:13,120 ‫Benutzer auf die Schaltfläche "Kaufen" klickt. 173 00:08:13,120 --> 00:08:14,550 ‫Sobald wir also den 174 00:08:14,550 --> 00:08:16,350 ‫Endpunkt erreicht haben, den wir im 175 00:08:16,350 --> 00:08:19,360 ‫Back-End erstellt haben, wird eine Sitzung erstellt und an 176 00:08:19,360 --> 00:08:20,720 ‫den Client zurückgesendet. 177 00:08:20,720 --> 00:08:22,590 ‫Basierend auf dieser 178 00:08:22,590 --> 00:08:26,010 ‫Sitzung erstellt Stripe dann automatisch eine Checkout-Seite für 179 00:08:26,010 --> 00:08:28,640 ‫uns, auf der der Benutzer dann 180 00:08:28,640 --> 00:08:32,670 ‫alle Details wie Kreditkartennummer, Ablaufdatum und all das eingeben kann. 181 00:08:32,670 --> 00:08:34,760 ‫Dann werden wir mit 182 00:08:34,760 --> 00:08:37,360 ‫The Session die Kreditkarte endgültig belasten. 183 00:08:37,360 --> 00:08:39,700 ‫Und dafür brauchen wir den öffentlichen Schlüssel, also 184 00:08:39,700 --> 00:08:41,830 ‫den, den wir gerade gesehen haben. 185 00:08:41,830 --> 00:08:44,270 ‫Also den geheimen Schlüssel, den wir auf dem 186 00:08:44,270 --> 00:08:46,330 ‫Server brauchen, wie Sie dort oben 187 00:08:46,330 --> 00:08:49,820 ‫im ersten Schritt sehen, und der öffentliche Schlüssel wird im Frontend verwendet. 188 00:08:49,820 --> 00:08:51,730 ‫Und was hier wirklich wichtig 189 00:08:51,730 --> 00:08:53,180 ‫ist, ist, dass 190 00:08:53,180 --> 00:08:54,930 ‫es wirklich Stripe ist, 191 00:08:54,930 --> 00:08:57,480 ‫der zusammen mit The Session die Kreditkarte 192 00:08:57,480 --> 00:09:00,720 ‫belastet und daher die Kreditkartendaten nie unseren Server erreichen, 193 00:09:00,720 --> 00:09:03,800 ‫was unser Leben als Entwickler viel einfacher macht, 194 00:09:03,800 --> 00:09:05,870 ‫weil dann Wir müssen uns nicht 195 00:09:05,870 --> 00:09:08,500 ‫mit all den Sicherheitssachen befassen, die mit 196 00:09:08,500 --> 00:09:12,000 ‫der Verwaltung und Aufbewahrung von Kreditkarten zu tun haben, okay? 197 00:09:12,000 --> 00:09:14,450 ‫Stripe nimmt uns das alles 198 00:09:14,450 --> 00:09:18,030 ‫ab, wir verwenden ihre API im Grunde einfach so. 199 00:09:18,030 --> 00:09:21,840 ‫Wie auch immer, sobald die Kreditkarte erfolgreich belastet wurde, 200 00:09:21,840 --> 00:09:24,460 ‫können wir in unserem Backend 201 00:09:24,460 --> 00:09:28,210 ‫sogenannte Stripe Webhooks verwenden, um neue Buchungen zu erstellen. 202 00:09:28,210 --> 00:09:30,090 ‫Dieser Teil des Workflows 203 00:09:30,090 --> 00:09:32,710 ‫funktioniert jetzt nur für bereitgestellte Websites, also 204 00:09:32,710 --> 00:09:35,900 ‫Websites, die bereits auf einem Server ausgeführt werden. 205 00:09:35,900 --> 00:09:37,770 ‫Also können wir 206 00:09:37,770 --> 00:09:39,690 ‫diesen Teil des Workflows erst 207 00:09:39,690 --> 00:09:42,830 ‫am Ende des nächsten Abschnitts implementieren, okay? 208 00:09:42,830 --> 00:09:44,310 ‫Aber im Moment 209 00:09:44,310 --> 00:09:46,270 ‫werden wir tatsächlich einen temporären Workaround 210 00:09:46,270 --> 00:09:47,770 ‫finden, der nicht wirklich sicher 211 00:09:47,770 --> 00:09:50,870 ‫ist, aber im Moment wird es gut funktionieren, okay? 212 00:09:50,870 --> 00:09:54,060 ‫Denken Sie also an dieses Diagramm und auch an dieses 213 00:09:54,060 --> 00:09:57,410 ‫Konzept, dass wir The Session tatsächlich verwenden, um eine Kreditkarte zu 214 00:09:57,410 --> 00:09:59,940 ‫belasten, und das tun wir nicht direkt. 215 00:09:59,940 --> 00:10:01,803 ‫Also, wir sehen uns im nächsten Video.