‫Sprecher: In diesem letzten Teil des
‫Abschnitts akzeptieren wir jetzt
‫Kreditkartenzahlungen in unserer Anwendung mit
‫Stripe, damit unsere Benutzer tatsächlich Touren kaufen können.
‫Und so öffnen wir hier und dann einen
‫neuen Tab auf dem offenen Streifen. com.
‫Stripe ist also die beste und beliebteste und
‫auch am einfachsten zu bedienende Softwareplattform,
‫um Zahlungen in jede Website zu integrieren.
‫Und noch viel mehr darüber, wie es tatsächlich funktioniert, etwas
‫später, aber lassen Sie uns zunächst mit der Erstellung unseres kostenlosen Kontos beginnen.
‫Klicken Sie also hier auf kostenloses Konto
‫und eröffnen Sie dann Ihr eigenes kostenloses Konto.
‫Und sobald Sie sich erfolgreich angemeldet
‫haben, sollten Sie ein Dashboard sehen, das ungefähr so aussieht.
‫Wenn Sie also ein brandneues Konto
‫eröffnen, befinden Sie sich zunächst immer im Testmodus.
‫Das sehen Sie hier unten mit diesen Testdaten.
‫Sobald Sie nun wirklich
‫echte Zahlungen mit echtem Geld von
‫echten Kunden akzeptieren möchten, müssen Sie Ihr
‫Stripe-Konto aktivieren.
‫Und dafür müssen Sie Stripe dann
‫eine Reihe von Daten über Ihr Unternehmen bereitstellen.
‫Aber in diesem
‫Projekt werden wir das natürlich nicht tun, also werden
‫wir immer nur in dieser Art von Testentwicklungsmodus arbeiten, okay?
‫Aber ansonsten klickst Du einfach hier
‫auf Start oder aktivierst Deinen Account hier oben.
‫Jetzt ist dieses Dashboard meiner Meinung nach wirklich einfach
‫und super intuitiv zu bedienen.
‫Hier können Sie also Ihre Zahlungen sehen, was wiederum sehr
‫einfach ist, und denken
‫Sie daran, dass dies alles Testdaten sind.
‫Alle diese Beträge hier sind
‫natürlich nur Fake-Beträge.
‫Aber wie auch immer, Sie können Ihren Kunden hier
‫sehen, Sie können den Betrag sehen.
‫Und wenn Sie sie öffnen, erhalten Sie noch
‫mehr Informationen, wie die Zahlungsmethode hier, also die Kreditkartennummer.
‫Und wir bekommen übrigens nie Zugriff auf
‫die echte Kreditkartennummer des Kunden.
‫Wir sehen also immer nur diese
‫letzten vier Ziffern, aber nie die echte Kreditkartennummer, okay?
‫Dann erhalten Sie auch
‫die Übersicht, was tatsächlich gekauft wurde.
‫So zum Beispiel die Snow Adventurer Tour.
‫Und all das hier
‫stammt natürlich aus der Zeit, als
‫ich die Natours-Anwendung zum ersten Mal erstellte, okay?
‫All dies sind also nur Testkäufe.
‫Dann können wir auch unser gesamtes Guthaben sehen, also im
‫Grunde das gesamte Geld, das wir erhalten haben.
‫Und das alles sind nur Testdaten.
‫Dann haben wir unsere Kunden mit einer schönen Liste von allen.
‫Und ja, das alles funktioniert wirklich gut.
‫Bevor wir beginnen können, müssen
‫wir tatsächlich ein paar Einstellungen für
‫unser Konto definieren.
‫In Ihrem neuen Konto sollten Sie
‫also etwas wie "Unbenanntes Konto" oder ähnliches hier sehen.
‫Und so solltest du auch gerne ein Stiftsymbol oder sowas haben, wo
‫du dann einen Namen für das Konto erstellen kannst.
‫Also nennen Sie das bitte "Natours" oder so.
‫Und wenn Sie mehr Unternehmen haben,
‫können Sie für jedes dieser Unternehmen ein Konto hinzufügen, okay?
‫Oder wenn Sie hier kein Stiftsymbol haben, können
‫wir auch zu den
‫Einstellungen und dann zu den Kontoinformationen gehen.
‫Hier sollten Sie also den
‫Namen dieser Art von Geschäft eingeben.
‫Wir können auch ein paar andere Einstellungen definieren,
‫also lassen Sie uns hier das Branding
‫definieren, damit die Stripe Checkout-Seiten im
‫Grunde unserer Marke entsprechen.
‫Also fügen wir unsere Bilder hinzu.
‫Also öffentlich, Bild und dann für das Symbol, verwenden
‫wir dieses.
‫Und wir können auch ein
‫Logo hochladen, und dafür verwenden wir dieses.
‫Oh, und jetzt brauchen wir unser Passwort, um fortzufahren.
‫Und jetzt ändern wir auch hier unsere Farbe.
‫Also schnell die CSS-Datei öffentlich öffnen und
‫dann unser typisches Grün finden, das
‫hier ist.
‫Das sieht also etwas besser aus.
‫Speichern wir es
‫jetzt hier und damit können wir loslegen.
‫Als nächstes werfen wir einen Blick auf unsere API-Schlüssel.
‫Klicken Sie also hier auf API-Schlüssel und
‫wenn die Website zum Zeitpunkt
‫des Anschauens dieses Videos etwas anders
‫aussieht, dann sind die Schlüssel vielleicht hier bei den Entwicklern.
‫Hier haben Sie also auch etwas namens API-Schlüssel, okay?
‫Jedenfalls gibt es einen veröffentlichbaren Schlüssel und einen geheimen Schlüssel.
‫Dieser Schlüssel ist im Grunde genommen ein
‫öffentlicher Schlüssel, den wir am Front-End verwenden können,
‫und ein geheimer Schlüssel ist der, der am Back-End benötigt wird.
‫Und dazu mehr,
‫sobald wir mit der Umsetzung beginnen.
‫Und zum Schluss wollte ich
‫noch kurz mit Ihnen gemeinsam einen Blick in die Dokumentation werfen.
‫Und das ist hier oben,
‫und eigentlich ist
‫Stripe für seine hervorragende Dokumentation bekannt.
‫In dieser Dokumentation finden Sie ganz einfach,
‫wonach Sie suchen.
‫Aber wenn Sie gerade erst anfangen,
‫ist es natürlich sehr schwer zu
‫wissen, wonach Sie suchen, oder?
‫Und deshalb
‫implementieren wir diese Bezahlfunktion hier gemeinsam, oder?
‫Wir werden also die Zahlungsfunktionen von Stripe verwenden und
‫sie haben ein paar verschiedene Optionen.
‫Jetzt im Web können wir Stripe
‫Checkout verwenden, das im Grunde eine präformative Checkout-Seite verwendet.
‫Dies ist also diejenige, die wir
‫verwenden werden, oder Sie können auch
‫Stripe-Elemente
‫verwenden, wenn Sie wirklich Ihr eigenes Checkout-Erlebnis aufbauen möchten, okay?
‫Aber wir werden nur diesen Checkout verwenden,
‫der eigentlich ganz neu
‫und damit wirklich zukunftssicher an dieser Stelle ist.
‫Dies sind also die beiden Optionen für
‫das Web, aber Sie können auch Stripe auf iOS, Android und wirklich
‫jeder anderen Plattform verwenden.
‫An der Kasse können wir es dann
‫tatsächlich nur auf dem Client oder zusammen mit dem Server verwenden, okay?
‫Hier unten gibt es also einen Vergleich.
‫Wenn wir es also nur auf der Client-Seite verwenden,
‫brauchen wir nicht einmal einen Server.
‫Aber diese Art der Verwendung von Stripe ist nur
‫für wirklich sehr kleine Geschäfte gedacht,
‫in denen Sie also nur eine Handvoll Produkte
‫haben, deren Preis sich nie
‫ändert, und in denen
‫Sie all diese Produkte tatsächlich manuell zu Ihren Stripe-Dashboards hinzufügen müssen.
‫Wir wollen etwas
‫Komplexeres und nutzen dafür die Serverintegration, okay?
‫Also müssen wir natürlich
‫noch etwas auf der Client-Seite tun,
‫aber der größte Teil des Codes wird tatsächlich auf der Server-Seite sein.
‫Okay, Sie sehen also, dass es mit Stripe
‫wirklich viel zu tun gibt, und wir können sogar noch viel mehr tun.
‫Wir könnten also eine Abrechnung haben, wo wir Abonnements haben, wo wir
‫Rechnungen haben und all das gute Zeug.
‫Sie könnten also wirklich
‫ein riesiges Geschäft auf Stripe aufbauen und Abonnements
‫akzeptieren, Kunden in Datenbanken speichern
‫und all das in Stripe integrieren.
‫Aber auch hier verwenden wir
‫einfach den Checkout, aber die vollständigere
‫Version davon, indem wir den
‫Server Checkout verwenden.
‫Okay, aber bevor wir das
‫Stripe Checkout-Produkt tatsächlich in unsere Anwendung
‫integrieren, wollte
‫ich nur schnell den gesamten Workflow gestalten,
‫den wir in den nächsten Videos implementieren werden.
‫Alles beginnt also im Backend,
‫wo wir eine Route implementieren, um
‫eine sogenannte Stripe Checkout Session zu erstellen.
‫Und diese Sitzung wird eine Menge Daten
‫über das Objekt enthalten, das gekauft werden kann.
‫Und in unserem Beispiel ist das die Tour.
‫Die Sitzung enthält also den Tourpreis,
‫den Tournamen, ein Produktbild und auch einige andere Details
‫wie die Kunden-E-Mail.
‫Das werden wir also im nächsten Video sehen.
‫Dann erstellen wir im Front-End eine Funktion,
‫um die Checkout-Sitzung vom Server anzufordern, sobald der
‫Benutzer auf die Schaltfläche "Kaufen" klickt.
‫Sobald wir also den
‫Endpunkt erreicht haben, den wir im
‫Back-End erstellt haben, wird eine Sitzung erstellt und an
‫den Client zurückgesendet.
‫Basierend auf dieser
‫Sitzung erstellt Stripe dann automatisch eine Checkout-Seite für
‫uns, auf der der Benutzer dann
‫alle Details wie Kreditkartennummer, Ablaufdatum und all das eingeben kann.
‫Dann werden wir mit
‫The Session die Kreditkarte endgültig belasten.
‫Und dafür brauchen wir den öffentlichen Schlüssel, also
‫den, den wir gerade gesehen haben.
‫Also den geheimen Schlüssel, den wir auf dem
‫Server brauchen, wie Sie dort oben
‫im ersten Schritt sehen, und der öffentliche Schlüssel wird im Frontend verwendet.
‫Und was hier wirklich wichtig
‫ist, ist, dass
‫es wirklich Stripe ist,
‫der zusammen mit The Session die Kreditkarte
‫belastet und daher die Kreditkartendaten nie unseren Server erreichen,
‫was unser Leben als Entwickler viel einfacher macht,
‫weil dann Wir müssen uns nicht
‫mit all den Sicherheitssachen befassen, die mit
‫der Verwaltung und Aufbewahrung von Kreditkarten zu tun haben, okay?
‫Stripe nimmt uns das alles
‫ab, wir verwenden ihre API im Grunde einfach so.
‫Wie auch immer, sobald die Kreditkarte erfolgreich belastet wurde,
‫können wir in unserem Backend
‫sogenannte Stripe Webhooks verwenden, um neue Buchungen zu erstellen.
‫Dieser Teil des Workflows
‫funktioniert jetzt nur für bereitgestellte Websites, also
‫Websites, die bereits auf einem Server ausgeführt werden.
‫Also können wir
‫diesen Teil des Workflows erst
‫am Ende des nächsten Abschnitts implementieren, okay?
‫Aber im Moment
‫werden wir tatsächlich einen temporären Workaround
‫finden, der nicht wirklich sicher
‫ist, aber im Moment wird es gut funktionieren, okay?
‫Denken Sie also an dieses Diagramm und auch an dieses
‫Konzept, dass wir The Session tatsächlich verwenden, um eine Kreditkarte zu
‫belasten, und das tun wir nicht direkt.
‫Also, wir sehen uns im nächsten Video.