Stripe-Zahlungen mit PHP

1. Einführung: Willkommen in dieser Klasse zur Integration von Streikzahlungen mit PHP. Gut abgedeckt sichere Kundenauthentifizierung, wiederkehrende Zahlungen, einmalige Zahlungen, digitale Geldbörsen auf mehr, um loszulegen. Sie möchten diesen Satz von Anweisungen herunterladen und sicherstellen, dass Sie PHP lokal gewinnen und dann den Beispielcode herunterladen, der durchlaufen wird, während wir diese Klasse durchlaufen. Lasst uns anfangen. 2. Wie funktioniert Stripe: in dieser Lektion wird eine Übersicht über die Funktionsweise von Stripe angezeigt, sodass Sie wahrscheinlich bereits mit Stripe vertraut sind. Aber sie sind einer der größten Zahlungsprozesse der Welt. Ermöglicht es Ihnen, Kredit- und Debitkarten sowie Überzahlungsmethoden auf Ihrer Website zu nehmen. Es ist in Nordamerika, Europaund in einigen Ostasien erhältlich , Europa , und sie werden weiter expandieren. Und es wird von Websites einschließlich Buchung dot com on drama, slack delivery, UNICEF, viele große internationale Unternehmen und Streikanbieter mit einer Reihe von Tools für unsere Website verwendet. Also haben sie das A P I, mit dem wir auf dem Backend interagieren. Sie haben Streik Check out, die vollständig gehostet wird. Schauen Sie sich die Lösung auf ihrer Plattform an. Also schickst du sie einfach in Stripe und dann kommen sie zurück und bekamen Strike Js, die die Java-Skript-Front-End-Bibliothek ist, die all die Magie geschieht. Und dann haben wir Streifenelemente, die vorgefertigte Komponenten sind, die Sie in Ihre Website einbauen können , um Ihr Leben einfacher zu machen. Wir werden uns all diese während dieses Kurses ansehen, also gibt es zwei Hauptflüsse, die Sie verwenden würden, starten die erste ist ein Spurabfluss und dann in diesem Fall. Was passiert, ist, dass wir eine Sitzung mit unserem Warenkorb erstellen. Also alles in unserem Korb, auf dem wir bündeln, senden wir eine Nachricht an Stripe, die besagt, dass wir Ihnen einen Kunden schicken werden, der all diese Dinge im Warenkorb hat . Dann verwenden wir Stripes Java-Skript tatsächlich den Benutzer zu dieser Seite auf gestreiften Website zu senden , um zu vervollständigen, indem ihre Kartendaten unvollständig und dann Streik leitet die Verwendung von zurück auf unsere Website, nachdem die Zahlung abgeschlossen ist. Denken Sie daran, das ist, wie päpstlich funktioniert. Wenn Sie eine Zahlung vornehmen möchten, senden Sie den Benutzer an PayPal. Sie machen die Zahlung, die zurückkommen. Alles wird von Stripe gehostet, daher gibt es sehr wenig für uns zu tun. Es ist einfach und schnell, auf alle neuen Funktionen Striper Rollout der automatisch auf die Kasse bezogen eingestellt werden. Jetzt der zweite Flow , den ich den Stripe Jazz Flow genannt habe. Obwohl wir tatsächlich die Strike Javascript-Bibliothek in beiden Flows verwendet haben. Aber in diesem ist alles auf unserer Website gehostet. Wie machen wir das, ohne unsere Website PC zu machen? Ich konform, weil alles passiert mit den Java-Skripten des Benutzers fügt, dass Kreditkartendetails in das, was unsere Webseite ist, aber das wird nie an das Back-End gepostet, das über Java-Skript an Stripe-Server gesendet wird , um die Zahlung zu leisten. Der Fluss hier ist also, dass wir eine Checkup-Seite auf unserer eigenen Website erstellen. Wir würden wahrscheinlich ein Kreditkartenfeld dort mit Streifenelementen von vorgebauten, wirklich schön aussehenden Dingen hineinlegen , die später kommen werden. Und dann, wenn der Benutzer legt seine Kreditkartendaten in den Streifen, Js-Bibliothek sendet ihre Kreditkartendaten an Stripe Server zu sagen,, Hier sind die Kartendetails. Wir möchten hier eine Zahlung leisten, bei der Point Stripe diese Karte autorisiert und uns einen Token zurücksendet. Dies ist nur eine Reihe von Zahlen und Buchstaben, die wir dann verwenden können, um diese Zahlung zu verarbeiten. Sobald wir das Token zurück haben, können wir das Nutzer-Zahlungsformular auf unserer eigenen Website einreichen. Missachtung, dass Kreditkartendaten diese nie auf unserem Server gespeichert wurden, weil wir nicht wollen, dass der PC I Compliance Ärger. Alles, was wir brauchen, ist dieses Token als wenn der Benutzer zurück zu unserem Back-End, Wir senden dann eine P I A Anfrage auf unserem Backend zu schlagen sagen, dass dies ist, wie viel wir den Benutzer bauen wollen . Und hier ist unser Token, um zu sagen, welche Kreditkarte wir die beiden verfügbaren Flows erstellen wollten , und wir werden sie beide in diesem Kurs betrachten, beginnend mit dem Check-out und dann weiter zur tieferen Integration, Also lasst uns loslegen. 3. Kleinigkeit: für dieses Projekt. Ich habe einige Beispielcodeangst erstellt. So erhalten Sie den Einstieg und Sie können dies leicht klonen. Also ist es an. Hol dir Hoffnung auf seine namens Bookshop PHP. Ich werde dieses u R l in den Ressourcenbereich legen, aber Sie müssen nur hier gehen und sogar den Git-Klon greifen. Oder Sie können auch die Zip herunterladen. Wenn das für Sie auf ihrem und irgendwo auf Ihrem Computer einfach ist, möchten Sie nur pastös geblasen werden. Sie sind wirklich dabei, dass der gesamte Beispielcode herunterladen wird, den Sie brauchen, sobald Sie gegangen sind, dass wir tun müssen, ist eine Composer-Installation ausführen und ich werde nur einen Moment auf diesem Land Geschäft nehmen . All die Abhängigkeit, die wir brauchen, genau wie ein normales Petri-Projekt. Sobald wir das getan haben, dann haben wir alles, was wir brauchen, um loszulegen und vorausgesetzt, wir haben die Symphonie-CLI, die wir von Symphony Service starten können, und dies startet Symphonien, interner Webserver. Es sieht gut aus. Dann können wir Teoh lokalen Host 8000 gehen und hier haben wir das Beispielprojekt von läuft. Also haben wir all diese Bücher, die wir Buchhandlung Korb hinzufügen können, von denen sie hier erscheinen, haben einen kleinen Korb. Wir können das leeren und für das Alter an das Haus zurückgeben. Wir können wieder Bücher hinzufügen. Wer hat das Basissystem? Und darüber hinaus können wir unsere Check-Out und Zahlungsabwicklung aufbauen. Holen Sie sich also den Beispielcode heruntergeladen. Gehen Sie davon aus, weiter zu laufen, dann fahren wir mit der nächsten Lektion fort. 4. Registrieren eines a: Das nächste, was Sie tun wollen, ist bereit Selbst. Ein Streifen-Konto sagte. Um das zu tun, kriegen Sie einfach einen Streik. Aber komm schon und klicke auf die Schaltfläche „Jetzt starten“ und fülle dann einfach alle deine Details ein. Sie können sich sogar als Unternehmen einrichten, wenn Sie Unternehmensobjekte registriert haben. Als Einzelperson benötigen Sie technisch kein Stripe-Konto. Wenn Sie dies für eine andere Person einrichten, können Sie ihr Stripe-Konto verwenden, und Sie brauchen nicht einmal Zugriff, solange sie Ihnen die richtigen Schlüssel geben. Aber es hilft definitiv, Zehe einen zu haben, denn dann können Sie alles überprüfen, was wir tun und sehen, wie die Transaktionen in Streifen durchlaufen . Sobald Sie nichts Jakobsmuschel haben, sollten Sie auf das Armaturenbrett zu bekommen. Das ist alles, was wir für jetzt brauchen. Lassen Sie uns also alles andere in der nächsten Lektion abdecken. 5. Zugriff auf deine API-Schlüssel: Sobald Sie in Ihrem Stripe-Konto sind, dann müssen Sie Ihre A P I Schlüssel heraus, um das zu tun. Wir können zu diesem Entwickler auf einem P I Schlüssel hier gehen. Dies ist unser öffentlicher Schlüssel hier, der auf dem Front-End enthalten wird. Und wir haben auch den geheimen Schlüssel, den Ägypten diesen Offenbarungstaste getroffen hat, der Ihnen einen privaten Schlüssel gibt, den wir auf dem Backend verwenden. Wenn Sie dies tun,möchten Sie sicherstellen, dass Sie diese Anzeigeaufgaben-Daten umschalten, weil wirunsere Lebensschlüssel natürlich im Leben verwendenwollen. Wenn Sie dies tun, möchten Sie sicherstellen, dass Sie diese Anzeigeaufgaben-Daten umschalten, weil wirunsere Lebensschlüssel natürlich im Leben verwendenwollen unsere Lebensschlüssel natürlich im Leben verwenden Aber für Entwicklungszwecke, tol Stunden zu wissen, tatsächlich verarbeiten alle Zahlungen und verwenden Sie den Streiktest Guards werden die Testdaten verwenden wollen , so stellen Sie sicher, dass Sie diese Test ein P I Schlüssel greifen. Wenn Sie das Stripe-Konto eines anderen verwenden, können Sie sie einfach dazu bringen, diese für Sie herauszuziehen. Dadurch empfehle ich, Ihr eigenes Konto zu haben, mit dem er bestreiten kann, weil und Sie die Transaktionen sehen können , die durch 6. Installieren der Stripe: verwenden, um den Streifen zu verwenden. AP Ich muss tatsächlich den Streifen A p I Code Onda bekommen wir leicht aus Paket ist aufstehen können . Es wird nur Schrägstripe PHP schlagen? Nein. In dem Beispielcode, den ich Ihnen hier gegeben habe, ist er bereits enthalten. Wenn wir also zu den Paketen gehen, haben wir bereits die gerade Bibliothek installiert. Aber wenn Sie an Ihrem neuen Projekt arbeiten, Ihrem eigenen Projekt, muss er sich nur mit Composer Installation von diesem Strike PHP-Paket beschäftigen und das wird Ihnen oder die A p I Funktionalität geben , die wir während dieses Kurses verwenden werden. 7. Stripe Testkarten: etwas anderes, das super nützlich sein würde Zehe haben, wie wir durch diesen Kurs gehen, ist einige Testkarten. Also, wenn wir die Zahlungen testen, wollen wir nicht unsere echten Kreditkarten auf Streikanbieter verwenden. Siri aus Testkarten, die wir nur Google Strike Testkarten, ist der einfachste Weg, um es zu finden. Auf Unter diesem Testabschnitt haben wir viele verschiedene Karten. Also hier ist eine Reihe von Beispielen von all den verschiedenen Kartenanbietern bekam auch internationale Karten, und wenn wir auf, um eine Zahlung zu sehen, gibt es Karten für das Testen auch. Also ist es toll, diese Dokumente griffbereit zu haben. Auch, wenn Sie irgendeine Art von off Card Management System verwenden, sogar Ihren Browser oder Ihr Passwort-Manager, könnten Sie sogar eine dieser Karten installieren. Das ist es, was ich tue. Und dann erlaube ich nur, dass es jedes Mal auszufüllen, jeder, um das als Karten zu verwenden. Also halten Sie diese Seite einfach griffbereit. Nur wissen, dass diese Karten verfügbar sind. Könnten wir sie später verwenden 8. Den Beispielcode verwenden: während wir durchgehen, wird der gesamte Code erstellen, den wir zusammen brauchen. Aber wenn Sie es vorziehen, nur die Videos anzusehen und dann später zu codieren und das Video nicht ständig anhalten und ein wenig eingeben zu müssen , oder einfach nur zum Ende eines Projekts kommen und etwas funktioniert nicht ganz, dann ist der ganze Code , die wir erstellen werden, ist bereits in dem get-Repo, das Sie gegeben haben. Also gehen wir hier zur Wurzel. In diesem Ordner „Beispiele“ finden Sie alle Helfer und Vorlagen des Controllers, die wir zusammen bereits in ihrer fertigen Form erstellen werden . Also, wenn Sie etwas bekommen und es nicht funktioniert, dann ist ein guter Ort, um Star zu gehen, es einfach mit dem zu vergleichen, was in den Beispielen ist. Sobald Sie sie geklont haben, werden diese auch lokal verfügbar sein. In den Beispielen funktioniert etwas nicht ganz. einfach den Code auf, und Sie können ihn mit dem vergleichen, was Sie auf D. C getan haben . Hoffentlich beheben Sie die Fehlerbehebung und sehen Sie, wo das Problem ist 9. Stripe Checkout: in diesem Modul. Wir werden mit Striped Check Out integrieren. Also nur Teoh recap What strike check out ist alles über ist es eine Check-out-Seite gehostet von Stripes oder ähnlich wie PayPal. Wir werden den Benutzer mit einer Reihe von Variablen abschicken, um ihnen zu sagen, wie viel wir berechnen möchten. Sie werden die Zahlung für den Kunden übernehmen und sie dann zurückschicken. Wenn Sie direkt in eine vollständige Integration mit Streik gehen möchten, wo immer Dinge auf unserer Website aufbewahrt werden , dann zögern Sie nicht, dieses Modul zu überspringen. Aber wenn Sie sehen möchten, wie dies zuerst funktioniert, dann, um fortzufahren, werden wir eine Sitzung erstellen, die den Benutzerkorb enthält . Wir schicken das an Streifen im hinteren Ende. Wir werden dann Token aus Stripe zurückbekommen und das verwenden, um den Benutzer auf die Auscheckseite auf Streifen umzuleiten , damit Strike weiß, wer sie sind und was wir ihnen anzeigen sollten . Strike wird dann die Zahlung nehmen und den Benutzer zurück auf unsere Website, an diesem Punkt können wir sagen, eine Art von Bestellung komplette Seite. Lassen Sie uns also damit beginnen, diese 10. Erstellen einer a: Lassen Sie uns einen Anfang mit der Erstellung dieses Checkout machen, damit wir diesen Code aus dem Korb-Controller stehlen und einen neuen Controller namens Check Out Control erstellen können. Und wir werden diese Check-out-Funktion abgebildet haben. Sehen Sie sich alles an und wir müssen einige der Stripe-Bibliotheken hier einbringen . Also benutzen wir das CO und wir werden auch die Check-Out Session benutzen. Wenn wir dies weiter unten verwenden, lassen Sie uns diesen vorhandenen Code loswerden. Ok, großartig. Also, jetzt können wir anfangen, unseren Mantel zu schreiben. Das erste, was wir tun müssen, ist, unser privates Que zu setzen. Also, der FBI-Schlüssel, wir ziehen das aus einem unveränderlichen, dass wir zum Kohlestreifen Privatschlüssel gehen. Wir werden das aufstellen. Es ist bereits halb in einer Minute eingerichtet, aber wir gehen zurück und richten in der nächsten Lektion ein, und dann beginnen wir, unsere Sitzungsobjekte zu erstellen, dass die Art und Weise, wie wir es tun, ist, ein Sitzungsobjekt für alle Daten in auf zu erstellen . Dann schicken wir uns zu Stripe. Wenn der Benutzer also auf der gestreiften Website landet, wissen sie, was er braucht. Das wird also ein Gegenstand auf dem Stripe sein, dass wir wollen, dass die mit der Karte bezahlt werden. Wir werden ein leeres Array für Zeilenelemente erstellen, weil das von ihm aufgefüllt wird. Weiter runter. Ich hatte keinen Erfolg. Sie sind auch Dies ist, wo der Benutzer wird auf eines der Dinge, die Streik gibt uns umgeleitet werden, ist die Fähigkeit, Sitzung I D sein sollte oder Absender die Sitzung ich d zurück, so dass wir Lane ein Platzhalter setzen können, und Streik wird wissen was zu tun, das auf. Lassen Sie uns auch einen Rat Ihre anderen haben, wenn sie es verwenden, ist abgesagt. Ich möchte, dass sie zurück zum Korbbildschirm gehen, den uns wichtig ist. Also das nächste, was wir tun wollen, ist, dass wir wirklich sagen, Streifen, in welchen Produkten waren in. Um das zu tun, wenn eine Schleife durch die Warenkorb-Artikel, bitte nehmen Sie jedes Buch heraus, was in die Zeile eingefügt wird, wir werden hier ein neues Objekt hinzufügen, sagen Sie den Namen. Hören Sie als Buchtitelbeschreibung an, die den Namen des Autors, den Betrag, übergibt . Also, wenn sie hier etwas etwas anderes machen und wir werden den Preis, der in unserer kleinen Datenbank gespeichert ist, als Dezimalpreis nehmen . So, zum Beispiel, 99 laufende mal es um 100, weil, wenn wir einen Betrag an Streifen übergeben, muss er im niedrigsten Nenner sein. Also, in uns Dollar, wir reden, schickten etwas mit Euro mit Pfund. Wir reden davon, in Pennies zu schicken. Also, wenn Sie etwas stolzen Preis $9.99 haben wir brauchen, um über 999 Hühner zu senden waren dabei den Preis in unserer Datenbank gespeichert sagen und mal es um 100 und übergeben die Währung in. In diesem Fall werden wir Pfund für die endlich Quantität verwenden, und das wird auf eins gesetzt. Also haben wir diese Sitzungsdaten entwickelt, und zusätzlich haben wir die gesamte Liste von Produkten auch auf aufgebaut. Endlich haben wir alle Informationen, die wir brauchen. Und so können wir an diesem Punkt ein Stripe FBI anrufen, um die Sitzung am Tag zu erstellen. Wir rendern das in eine Vorlage auf. Das einzige, was wir in diese Vorlage weitergeben müssen, ist die Sitzung, die ich d, die wir von Stripe bekommen . Ok, das sieht gut aus. Also haben wir jetzt unseren Controller, aber wir müssen eine Vorlage bekommen und wir müssen diese Schlüssel auch lösen 11. Installieren der API-Schlüssel: im Check Out-Controller. Wir verwenden diese Umgebungsvariable, um private Stripe-Schlüssel zu bekommen. Wir werden eine ähnliche Sache auf dem Front-End in unserer Vorlage machen. In der Tat, das ist bereits verdrahtet, bereit, verwendet zu werden. Also müssen wir das einstellen, weil das für jeden von uns anders sein wird, wenn die dot m Datei diese Variablen bereits hier erstellt hat. Aber weil wir diese Schlüssel nicht verpflichten wollen, bekomme ich Repo, weil sie pro Umgebung im Geheimnis anders sein werden. Also vielleicht haben wir nicht Jeder, der Zugriff auf sie hat, die wir tun wollen, ist eine Punkt-m-Punkt-lokale Datei zu erstellen und wir müssen in Hier ist dies eine Kommentarzeile auf Kopieren und fügen Sie diese beiden Zeilen hier ein und fügen Sie dann einfach Ihre tatsächlichen Schlüssel nach ihnen in hier auf angenommen Sie tun das, sie sind bereit und verfügbar, um so zu verwenden, so erstellt dot m dot lokale Gebäck Schlüssel in und Sie nicht 12. Redirect zur Checkout: mit großem unserem Controller. Aber jetzt müssen wir diese Vorlage erstellen, die wir tatsächlich die Weiterleitungen rendern werden. Lasst uns das machen. Tun Sie das jetzt, wenn Sie das Template-Verzeichnis verwenden möchten. Ich war gerne Code kopieren und einfügen, um es einfacher zu machen, aber würde wirklich all das auf Wir nennen diesen Check-out und das erste, was wir tun werden, ist den Streifen Js-Code einzuschließen, so dass Sie dies von der Strike-Website kopieren und einfügen können. Aber es ist ziemlich einfach. Das Mädchen und wir werden weitermachen, um Skriptblock zu erstellen, wo wir unseren Code in ein paar Dinge setzen , die wir hier tun, ist Streifeninstanz hier zu erstellen, ich muss ah Stripe für aber Kian setzen , die wir als Umweltvariable erstellt haben. Dies ist also unser öffentlicher Schlüssel auf dem Steuerelement erdigen Code, den der Benutzer nicht sieht, dass ein privater Schlüssel verwendet wurde . Vermischen Sie die beiden nicht und dann werden wir nur die Umleitungsfunktion aufrufen. Andi hier müssen wir nur in der Sitzung übergeben, die wir in unserem Controller gerendert haben und das ist buchstäblich oder wir müssen für diesen Check-out tun, umleiten. Also lassen Sie uns das als Vorlage speichern. Da gehen wir hin. Lass es uns laufen und sehen, was passiert. 13. Die Reise führen: Wir sind fast bereit, diese Reise zu laufen. Wir haben so letzte kleine Sache gerieben, wir es tun müssen. Er hat diesen Controller umbenannt, den ich vorhin verpasst habe. Sobald wir das getan haben, können wir unseren Sinfoniedienst sterben lassen. Also habe ich schon meinen Morgen hier. Aber wenn nein, es ist nur Symphony Space Server Doppelpunkt starten und das wird oberen Morgen auf lokalen Host 8000 bekommen . Sie sollten auch hier darauf zugreifen. Onda. Wir können Körbe kreieren. Ich habe schon zwei Bücher im Sinn, aber wir könnten gehen und ein paar andere haben. Das ist bei diesem und diesem, auf dem ein paar Steinback-Bücher drauf sind. Wenn wir nun zum Auschecken gehen, sollten wir auf Stripe umgeleitet werden. Ok, perfekt. Großartig. Und wir haben unsere Bücher hier unten aufgelistet mit Preis und dem Angebot. Also lasst uns einige Details ausfüllen. Nehmen wir eine Streik-Testkarte. Dieser Fall ist es eine MasterCard und wir können alle Daten mit ihm verwenden und nur einige Zahlen machen . Wir könnten eine vorgeschlagene bekommen so gut Hit zahlen, und hoffentlich sollte dies Gebühren und schicken Sie uns zurück auf die Erfolgsseite, die wir gerade eine kleine Buchhandlung erstellen. Okay, toll. Da haben wir also. Es ist sicherlich zentriert zurück. Hat es die Transaktion gemacht? Nun, schauen wir uns mal an. Gehen wir rauf zu unserem Streik-Dashboard. Wir haben getestet auch eingeschaltet und würden die Seite aktualisieren. Ja, und dann bekommen wir 18 98. Sie ist die Transaktion, die wir gerade gemacht haben. Wir haben erfolgreich eine Zahlung am geleistet. An dieser Stelle haben wir erfolgreich mit Stripe Jack aus integriert, was großartig ist. Wenn Sie eine einfache Integration wollen, als es bereits in zukünftigen Modulen getan wird, werden einige der fortgeschritteneren Integrationen betrachten , die wir tun können. 14. Stripe.js und API: Dieses Modul, Wir werden eine tiefere Integration mit Stripe suchen, in dem wir unsere eigene Check-out-Seite in unserer eigenen Website erstellen und Strike Js verwenden und ein p I schlagen, um das zu integrieren. Und wir nutzen diese beiden Dinge auch auf der Check Out Reise. Aber wir werden sie sehr viel benutzen. Mawr hier mit dieser tiefen Integration. Also wird alles auf unserer Website sein. Aber weil wir nicht wollen, dass unsere Website Teoh PC sein muss, ich mich einhalten. Wir werden die Kreditkartendaten abschicken, um mit ihren Streikjets zu streifen. JavaScript-Bibliothek auf dem Fluss wird in etwa so aussehen. Also bauen wir diese Check-up-Seite auf unserer eigenen Website wird in einem Kreditkartenformular von Streifenelementen auf fallen , wenn die Verwendung, die diese Kreditkartendaten ausfüllt, die Js Stripe diese Kreditkartendaten an Stripe Server senden wird, ohne dass sie , die von unserem Server verarbeitet werden. Alles passiert auf dem Frontend in Javascript-Streik. Dann senden Sie uns einen Zahlungsautorisierungs-Token zurück, der dann an unser Back-End gesendet wird. Also alles, was wir haben, ist ein Token und dann machen wir einen Anruf an Striped AP Ich sage, ich werde Ihnen die Nutzung von so viel berechnen und hier ist mein Token, um zu sagen, dass der Benutzer mir die Berechtigung gegeben hat diese Kreditkarte zu verwenden, und strike wird dann belasten. Die Zahlung wird wissen, dass sie das getan haben, und deshalb können wir sie auf der Erfolgsseite der Bestellung zeigen , ohne dass der Benutzer jemals unsere Website verlassen muss. Also lasst uns einen Anfang machen, dies zu integrieren. 15. Erstellen eines skeleton: in diesem Modul werden wir Check Out erstellen, der vollständig in unsere Website integriert ist. Beginnen wir also mit dem Erstellen eines Skeletts für das Wählen Sie unseren vorhandenen Controller aktivieren. Nennen wir das hier lokal. Check out Controller an. Wir werden immer noch Streifenstreifen brauchen, aber hier werden wir stattdessen Streifen-Ladung verwenden. Ich will immer noch Teoh. In der Tat werden wir diesen Code vorerst loswerden. Sprache. Es wird voran gehen und registrieren, was los ist Dieser lokale Strich Check-out All dieser Controller wird tun ist, dass Bridget diese Vorlage zwischen ihnen rendert. Der Controller auch. Ok. Sieht dann gut aus, bis Mai. Dieselbe Sache hier. Lassen Sie uns eine lokale Auscheck-Vorlage erstellen. Die, auf die wir hier verweisen. Andi, das sagst du in Vorlage. Ok, großartig. Geh immer noch nach. Lassen Sie uns diesen Code loswerden. Also, wenn wir jetzt einen lokalen Checkout bekommen, haben wir eine Skelettseite, wo wir anfangen können zu integrieren. ich würde auschecken 16. Streifenelemente: obwohl wir den gesamten Zahlungsprozess auf unserer eigenen Website erstellen, wurde immer noch Streik bekommen , um einige der schweren Heben für uns in Bezug auf die Schaffung der tatsächlichen kleinen Form zu tun wo die Leute ihre Kartendaten in. Und dazu werden wir Streifenelemente verwenden, die Sie von ihrer Website hier sehen können. Dies gibt uns nur einige vorgefertigte Formulare, die wirklich schön und einfach auszufüllen sind, so dass die Leute einfach ihre Kartennummer hineingeben, werden die Karte erkennen. Es wird nur durch ihre richtige Symbol, hören, es dauert sie, um ihre Postleitzahl oder Postleitzahl in setzen, und es macht es wirklich nur super einfach. Sie sehen sich das an, zum Beispiel, es ist in der Rial-Nummer, aber wenn wir importieren, erkennt das, dass es ein Visum ist. Es erkennt die U. S. Guards, die uns um den Reißverschluss gebeten haben, und es behandelt auch einige der fortgeschritteneren, wirklich sicheren Sachen, die wir später machen werden. Es ist also eine super nützliche Komponente, und das ist wirklich die Art und Weise, wie Streik Leute bitten, jetzt zu integrieren, ist die Verwendung dieser vorgefertigten Elemente. Also lasst uns das nehmen und es auf unserer Webseite ablegen 17. Stripe hinzufügen: Gehen wir weiter und werfen Schlagelemente in Ah, schauen wir uns an. Also haben wir um zu überprüfen Seite hier und für eine Minute, den Code, unsere Vorlage hier. Und wir beginnen einfach mit der Erstellung, die wir nicht verwenden werden, um tatsächlich eine Methode zum Erstellen von vorerstellten CSS zu verwenden, also haben wir die Checkout-Klasse. Sie können das in App dot CSS überprüfen Nur eine kleine Sache, um es ein bisschen hübscher aussehen wenn wir anfangen. Wenn wir ihm ein I d zu und innerhalb des Formulars geben, werden wir finden, dass älteres Element Kartenelement nennen wird. Ja, sieht nett aus. Wir werden selbst eine große Verbrennung erzeugen. Zahlung einreichen. Großartig. Wir haben bereits unser Skript hier auf Lassen Sie uns diesen Code einbringen, der initialisiert, ist Stripe der A P I auch. Und dann werden wir weiter initialisieren, damit wir sagen, dass weit Elemente gleich sind, und dann werden wir eine Karte erstellen. Einmal war ich gehen Elemente schaffen Gott. Und dann endlich montieren wir das einfach auf unser Kartenelement. Okay, hübsches Zeug. Okay, Also, um zusammenzufassen, erstellen wir ein kleines Formular mit diesem Platzhalterelement. Wir haben ein stripey FBI initialisiert, das die Elemente a p i on mit großem Verwerfungselement genannt wird. Und jetzt, wenn Sie die Seite für Lucky aktualisieren, haben wir diese schönen vorgefertigten Streifenelemente auf einem großen Zahlungsknopf. Es tut noch nichts, also lasst uns das verdrahten. 18. Die Eingabe validieren: Das nächste, was wir tun möchten, ist Fehler zu behandeln. Wenn hier also etwas nicht stimmt, möchten wir das dem Benutzer anzeigen können. Also lasst uns gehen. Und bei diesem jetzt Festival , fügen Sie ein weiteres Platzhalterelement hinzu. Collis-Karten-Fehler. Und dann lasst uns das verdrahten. Nehmen Sie also unser Kartenelement wird einen Ereignis-Listener-Monitor für Änderungen hinzufügen. Dann hier drinnen, bekommen wir unsere Kartenfehler Objekte. Und wenn es ein Fehlerereignis gibt, stellen Sie den Inhalt davon so ein, dass er immer angezeigt wird, und wenn nicht, stellen wir sicher, dass wir jeden Fehler löschen, weil sie zum Beispiel ein Fehler sein könnten und dann der Benutzer es repariert, also wollen wir die Ära nicht weiter anzeigen. Großartig. Also, jetzt, wenn es eine Änderung, die überprüfen Sie diese schmale und wenn ja, wird diese kleine Box füllen, um die Araber unten anzuzeigen. Nun gehen wir auf die tatsächlich bekommen diese Zahlung 19. Ein Token erstellen: hat die Art und Weise besprochen, wie wir die Zahlung mit Streifen nehmen, ist, dass wir den Streifen a p i nach einem Token fragen und auf der Client-Seite erhöht, so dass die Kreditkarteninformationen nie unseren Server berühren müssen . Und so müssen wir nicht PC I konform sein. Lasst uns weitermachen. Und warum das jetzt? Also wählen wir unser Formularelement aus. Wir haben das Zahlungsformular oben angerufen. Wir werden hier einen Ereignis-Listener hinzufügen, der für die Einreichung ist. Also würde dies aufgerufen werden, wenn der Benutzer trifft, dass die Zahlung einreichen , die Standardaktion verhindern, und dann werden wir den Stripe ap anrufen,Token erstellen, Token erstellen, übergeben Sie es das Kartenobjekt, wenn das erste, was wir 'll do ist zu überprüfen, ob ein Fehler vorliegt. Wenn dies der Fall ist, werden wir unsere Kartenfehler durch eine breite wiederverwenden. Dies ist jetzt, wenn wir die Fehlermeldung erhalten, wird es es in ihre Annahmen stecken. Der Benutzer beginnt mit der Eingabe und Bearbeitung. Dann kann es loswerden, was der Code ist, den wir zuvor gemacht haben. Aber wenn nicht, dann sind wir alle gut dran. Das heißt, wir haben ein Token. Und so wollen wir damit umgehen, dass Homosexuell gut aussieht. Das Letzte, was wir hier brauchen, ist, diese Funktion zu schreiben , die mit dem Token umgehen wird. Sollen wir einen erfolgreichen erhalten, um das auf der Take zu tun? Wenn Sie Element erstellen, werden Sie ein Typeingabemarkt als versteckter Vorname aus Token sein. Geben Sie ihm den Token I d und wir werden ihn aufrüsten. Teoh-Form. Und schließlich wir nie ein Formular ein. Also machen wir es hier. Bekommen wir dieses Token zurück als Ergebnis in erstellen versteckte Eingabe in diesem Formular hier, dass wir unser Token inter hinzufügen, so dass durch gesendet würde, wenn das Formular auf DWI gepostet wird. Dann posten Sie das Formular auf jetzt an das Backend gesendet und in der nächsten Lektion werden wir verarbeiten, was auf dem Backend passiert. 20. Testament unser Token: Wir haben unseren Code verdrahtet, um nach einem Token von Streik zu fragen. Aber hat es funktioniert? Nun, lass es uns herausfinden. Aktualisieren Sie also die Seite. Wenn du es noch nicht getan hast, nur um sicherzugehen, dass du die Weniger an hast. Öffnen Sie dann Ihre Entwicklerkonsole. Ich gehe rüber zum Netzwerk-Tap. Jetzt wird es das Formular senden, wenn es erfolgreich ist, und wir wollen nicht, dass es das tut. Also lassen Sie uns behalten log on, so dass wir die vorherigen Anfragen sehen können auf. Gehen wir weiter und nehmen einige Testkartendetails auf. Setzen Sie sie rein, machen Sie das auf und er ist es. Es könnte, ich weiß, ist neun und sie gingen aus und lassen Sie uns gehen und klären, dass unten und dann die Zahlung einreichen . Großartig. So hat es erfolgreich zum lokalen Checkout gepostet. Mal sehen, ob wir das dort finden, wo wir gehen. Es gibt unsere Anfrage auf und in den Formulardaten. Es hat unser Token gesendet, und wir können jetzt dieses Token verwenden, um eine Zahlung auf dem Back-End zu tätigen. Also lasst uns das tun 21. Zahlungen mit Token verarbeitenden: Jetzt, da wir unser Token haben, verwenden wir es, um eine Zahlung zu nehmen. Also gehen wir in eine lokale Kasse und hier werden wir überprüfen, ob die Anfrage ein Post ist . Also ist er Method Post, und wenn ja, dann werden wir wissen, dass wir versuchen, die Zahlung zu verarbeiten. Also lasst uns damit beginnen, Ah zu roden, Eigentum zu streiken. Wir stecken das da rein. Und wir wollen auch das Token nach unserer Quest bekommen. Fakt, lass uns das zuerst machen. Okay, Annexing braucht einen Korb und wir könnten durch ihn springen, um den Preis zu berechnen. Aber was einfacher wird, ist, wenn wir diesen Korb hilfreich verwenden. Ich habe erstellt Also ein Lister ist, dass wir in unserer Session-Variable übergeben und es gibt uns etwas Gesundheit, eine Methode wie das Erhalten des Gesamtpreises in den Rohpreis, der daran erinnert, dass wir mal alles um 100. Denn wenn der Preis von 9 99 wir 999 zu Streifen senden müssen, und es wird auch die Liste der Bücher in einer Zeichenfolge verdichtet. Also geben wir uns auch eine schöne Beschreibung. Also wir dio zurück in die lokale Check-out Wir geben die Sitzungsdaten in, die uns diese Hilfe von Bemühungen geben, und dann werden diese Hilfe von Bemühungen geben, wir eine Gebühr zu erstellen. Also, bevor wir das tun, lasst uns das aufräumen. Stellen Sie einfach sicher, dass wir das importieren, und dann gehen wir zurück. Mir geht's gut. Diese Anklage. Also rufen wir die Ladungsklasse an, die wir schon mitgebracht haben. Erscheinen Sie auf wir sagen, erstellen und übergeben Sie es auf Objekt. Großartig. Ok. Und dann bevölkern Sie das. Also für den Betrag wurde es ausgerufen. Schön. Holen Sie sich rohen Reis. Helfen Sie Mühe. Währungsbestellungen. Harter Schnitt. 2 Pfund für jetzt. Beschreibung nochmals. Nennst du das nett? Helfen Sie ihm. Mühe, Andi. Endlich werden wir unser Token benutzen, das wir uns übergeben müssen. Quelle. Wir rufen Token Gank des Verlierens auf. Also lasst uns, sobald dies erfolgreich war, lasst uns den Korb ausräumen. Denn sobald sie Ball benutzen, wollen die Bücher sie wahrscheinlich nicht mehr kaufen. Und dann werden wir auf dieselbe Erfolgsseite umleiten, an die wir den Benutzer beim Auschecken geschickt haben. Okay, das sieht gut aus für mich. Lassen Sie uns in der nächsten Lektion fortfahren. 22. Die Reise führen: Jetzt haben wir unseren Checkout so verdrahtet, dass er Token verwendet, um Stripe aufzuladen. Lassen Sie uns voran gehen und überprüfen, ob es funktioniert. Also lassen Sie uns beginnen, indem Sie einige Buchhandlung Korb, die nehmen Cannery Row in 1984 Onda, ändern Sie diese Jacke Tasten, so geht es jetzt auf eine neue lokale Check-out Seite. Aber du könntest auch einfach den Brunnen eingeben. Lassen Sie uns auf Pumpe gehen diese Tests Karte Details in Hit Zahlung einreichen und wir haben die Erfolgsseite. Toll, das wird auch Streifen und überprüfen die Zahlungen kommen durch hier auf, wir gehen 1984 und Cannery Row. Die Zahlung hat Bean-Prozess erfolgreich. Wenn Sie also Glückwünsche folgen, haben Sie jetzt erfolgreich Streikzahlungen in Ihre lokale Website integriert. 23. Sichere Kundenauthentifizierung (SCA): in diesem Modul. Wir werden uns die Zahlungen von S EA ansehen. Was genau sind sie? Es ist ein guter Ausgangspunkt, was für eine sichere Kundenauthentifizierung und die Initiative der Europäischen Union zur Bekämpfung von Betrug steht . So wird es 2019 eingeführt und es wird schrittweise eingeführt. Jetzt, wie bei den meisten Dingen im Bankwesen, nehmen sie viel Zeit in Anspruch und Multi-Faktor-Authentifizierung. So könnten Sie Freedy sicher gesehen haben, wo, wenn Sie für eine Kasse gehen, Sie auf Ihre Bank umgeleitet werden, um ein kleines Passwort einzufügen oder zunehmend jetzt, vor allem mit S E A, erhalten Sie einen speziellen Code geschickt geschickt, um in Ihr Handy zu verwenden, und Sie müssen diese in die Website eingeben. Also gingen Sie zu all Ihren Kartendaten. Sie versuchen, die Zahlung zu bearbeiten. Ihre Bank landsend ist Sie Angriff sagen, stellen Sie sicher, dass dies Sie und Sie müssen, dass in die Website eingeben, bevor Sie die Transaktion abschließen können. Nun, wenn Sie nicht implementieren S e A Zahlungen, als es liegt an der Bank, ob sie Andi im Laufe der Zeit akzeptieren oder ablehnen, werden sie anfangen, mehr und mehr zu sinken. Also im Moment ist es ziemlich entspannt einige Zahlungen, die Sie ohne das durchkommen können. Aber im Laufe der Zeit, die wahrscheinlich sinken immer mehr Transaktionen. Das ist momentan kein Problem für Nordamerika. Es ist speziell für Europa, aber das schließt alle Länder in den Ain-Objekten in der Europäischen Union ein. , dass Wenn Sie glauben, dassSie Kunden in Europa haben werden, als es wert ist, implementieren Sie dies und es ist vollständig abwärtskompatibel mit allen anderen. Also ist es besser, es auf diese Weise , zu tun, ist esmeiner Meinung nach einfacher Weg, meiner Meinung nach einfacher Weg, weil es nicht viel zusätzliche Komplexität gibt, um dies zu tun. Wenn ich eine Brötchen nach Nordamerika und anderswo in der Welt sehe, dann werden Sie sich die Zukunft selbst prüfen, also schauen wir uns an, wie es geht. 24. Erstellen einer a: Lassen Sie uns weitermachen und unsere grundlegende Implementierung in etwas verwandeln, das ist ein bereit . Also haben wir hier unsere lokale Kontrolle. Lassen Sie uns voran und erstellen Sie eine Kopie davon. Wir nennen es S C H. Ich zähle Controller auf, was Sie krank ändert, um einen Check-out sowie zu sehen. Und das war Fragen Sie es, diese SCH Auscheckdatei wieder zu rendern. Wir nehmen die örtliche Kasse ab, Michael. Machen Sie einfach eine Kopie davon. Es heißt S E A. Sagen Sie das dort. Und dann in unseren Körben. Da ist es. Lassen Sie uns ändern, dass Greats, die es arbeiten, immer noch als grundlegende Integration verdrahtet, natürlich. Aber jetzt lassen Sie uns weitermachen und es in eine böse, konforme Implementierung verwandeln. 25. PaymentIntent API: Lasst uns aufmachen. Ah, SC A Check-out Controller Andi, wenn nicht mehr verwendet werden, die Ladung ap ich stattdessen, wir werden die Zahlung in verwenden 10 AP. Ich bin mit der Zahlungsabsicht, alles im Voraus zu tun. Also müssen wir die Dinge neu anordnen. Zunächst einmal, wenn wir hier in den Korb gehen, müssen wir den Gurt setzen. A p I auch auf wird dieses Buch für jetzt ignorieren. Und hier unten, was wir tun werden, ist, dass wir eine Zahlungsabsicht erstellen. Ja, und wir werden dieselbe Hilfe für ihn verwenden. Also sagen wir, Korb, bekommen Royal Price die Währung wieder geschickt. Wir werden die Beschreibung hier unten anstellen. Das wird Befehle geben jedes Token. Es nennt sich Client Secret. Also haben wir bereits skizziert, was die Zahlung ist, und wir haben geschickt, um hier zu streiken, und dann werden wir das an das Job-Skript rendern, was bedeutet, wenn der Benutzer tatsächlich das Formular absendet, dann wurde die ganze Arbeit erledigt und die Zahlungen verarbeitet wurden, so dass wir diese Gebühr loswerden können. Und stattdessen, wenn es ein Beitrag ist, können wir einfach löschen Sie den Korb auf Umleitung der Benutzer auf diese Weste Seite sofort, so dass sieht aus wie alles, was wir hier tun müssen. Jetzt geht es zum Front-End, um das JavaScript zu ändern. 26. Verwendung der the: in dieser Lektion wird die Front- und JavaScript-Code ändern, um S e eine Beschwerde zu sein. Es öffnet sich also unsere SCH Check-Out Seite, und das meiste davon wird gleich bleiben. Nur ein paar Dinge, die wir ändern werden. Also brauchen wir diese Handle-Token-Funktion nicht mehr, und wir werden das Create-Token nicht mehr verwenden. Stattdessen werden wir etwas benutzen, das man Kartenzahlung bestätigt. Und das erste Argument, das wir übergeben werden, ist der Token, den wir erhalten haben, wenn wir die Zahlungsabsicht erstellen und wir werden ihm einige Optionen übergeben, und sagen Zahlungsmethode, wir werden es Karte weitergeben. Dies bezieht sich auf dieses Kartenobjekt hier auf dann alles, was wir tun müssen, ist das Ergebnis zu behandeln. Also nehmen wir die Veranstaltung wieder an. Will nicht sagen, ob das Ergebnis wäre. Macht mehr Sinn. Andi, Wenn es ein Erfolg ist, müssen wir ein wenig zusätzliche Tracking-Zahlungsabsicht tun, weil es eine Weile dauern kann. Dann werden wir ein Formular einreichen, wenn Sie sich daran erinnern, dass alles, was wir tun, wenn wir das Formular absenden, den Warenkorb löschen und auf diese überschüssige Seite umleiten, weil wir hier ein Token mit Streifen für das erstellen , was wir berechnen möchten. Und dann am Frontend gibt der Benutzer seine Kartendaten ein, und das geht zusammen mit dem Token, den wir erstellt haben, um zu sagen, welche Zahlung wir für die Bestellungen außerhalb der Streifen zur gleichen Zeit haben wollen . Hoffentlich ist das alles, was wir tun müssen. Lasst uns nicht gehen und es testen. 27. Die Reise führen: wir haben umgeschrieben. Ich habe nach B S E eine konform mit Stripes Zahlung in 10 FBI überprüft. Lasst uns jetzt sicherstellen, dass alles funktioniert. Lassen Sie uns also beginnen, indem wir nur eine normale Karte überprüfen und sicherstellen, dass wir nichts gebrochen haben. Habe die Buchung eines Korbes gehen Sie frei zu überprüfen auf wird nur die gleiche Testkarte nehmen wir verwendet haben . Ok, perfekt. Ich bin für dich gegangen. Lassen Sie uns den Prozess noch einmal durchlaufen. Also fügen wir noch ein paar Bücher in den Warenkorb und wir gehen zurück zur Kasse. Und wenn wir zu diesem Streifen Narben Seiten schwächen gehen, siehe weiter unten. Wir haben diese Karten, die Dinge repräsentieren, mit denen wir konkurrentieren . A Also in diesem Fall wird um Verifizierung bitten. Also werden wir wieder sehen, was das bedeutet. Füllen Sie einfach die Karte aus. Ähm, diesmal eine Zahlung. Die Bank hat die verwendet, um es zu überprüfen gefragt, Also könnte dies sie bitten, Passwort einzufügen. Es könnte einen Einmal-Pass-Code an dieses Telefon senden. Sie müssten eintreten, dass all das hier mit Stripe behandelt wird. Also statt nur eine große vollständige Rechtfertigung, aber und es könnte nur das sein, aber es könnte etwas komplizierter sein, aber der Benutzer würde das selbst tun und dann nur die Authentifizierung auf Bank abschließen. Wir haben auch dort Erfolg. So großartig. Jetzt, jedes Mal, wenn die Bank will zusätzliche Autorisierung will, diese S e eine sichere Kundenauthentifizierung wird auch damit umgehen. Perfekt. 28. Digitale Geldbeutel: in diesem Modul. Wir werden digitale Geldbörsen in die Anwendung integrieren. Aber wenn Sie nicht klar sind, was digitale Geldbörsen sind, es ist Dinge wie Apple Pay Google zahlen wir ein Visum, überprüfen Sie Master Pass diese Art von virtuellen Möglichkeiten zu zahlen, die gerade passiert im Browser oder auf Ihrem mobilen Gerät. Also reden wir hier nicht über Transaktionen aus der realen Welt, aber wir reden über ohne eine physische Karte. So, zum Beispiel, Apple bezahlen. Sie können auf Websites gehen. Schlagen Sie einfach die Bezahlung mit Apple Babe auf und in einem Desktop, erhalten Sie ein wenig Pop-up wie das, was wir auf diesem Mac und auf einem mobilen Gerät zu sehen, würden Sie ein wenig Pop-up wie in auf der rechten Seite bekommen. Und es ist dasselbe mit Google Pay und vielen dieser digitalen Geldbörsen. Die Art, wie Stripe dies tut, ist es uns eine einheitliche Schaltfläche gibt, also fügen wir diese Schaltfläche in unseren Check-out-Prozess ein, und wenn er Treffer verwendet, erhalten sie das relevante kleine Pop-up. Also, wenn sie auf Safari sind, die Apple bekommen, zahlen ihre auf Chrome, sie bekommen Google Pay. Was auch immer ihr Gerät unterstützt, es wird dieses kleine Fenster auftauchen. Also schauen wir uns an, wie man es integriert 29. Erstellen eines digtal wallet: Beginnen wir mit der Erstellung eines Controllers für unsere digitale Brieftasche, also beginnen wir mit unserem CH Check-out Controller, der eine gute Basis bilden wird. Das ist Kopieren und Einfügen, die speichern, fragte es. Hat Ihr Geldbörse Controller auf die Grippe? Denn dies ist so ziemlich das gleiche wie ein S e eine Zahlung mit Zahlung wiederum, AP I. Also gibt es nur ein paar Verbesserungen, die wir machen müssen, und das ist, einige der Beschreibung Obst senden. Denn anstatt die Informationen an diesen Zahlungsprozessor für diese Kreditkartenabrechnung zu senden , müssen wir ihnen auch sagen, was passiert, wenn sie die Benachrichtigung auf ihrem Telefon oder Gerät erhalten , um zu sagen, dass eine Zahlung erfolgt. Also, das ist in diesen Variablen zum Front-End. Wir benutzen unseren Korbhelfer. Ich werde eine Beschreibung durch senden. Wir senden Ihnen auch den Tell-Preis, und das ist die einzige Änderung, die wir an den Controller vornehmen müssen. Als nächstes können wir auf das Front-End gehen auf machen sind Änderungen. Dort 30. Ein Knopf: Jetzt, da wir unseren digitalen Wallet Controller haben, können wir weitermachen und die Front-End-Änderungen vornehmen. Also nehmen wir die CIA. Schauen Sie sich Vorlage auf Nur speichern Sie die Augen. Digitale Wallet Vorlage auf und lassen Sie uns zu unserem Controller auf. Du hast dich verändert. Registrieren Sie sich Die digitale Brieftasche auf, die sich geändert hat. Du bist Ella's gut, und dann endlich im Korb. Lassen Sie uns es in eine digitale Brieftasche ändern und dann können wir hier Änderungen vornehmen, und es gibt eine ganze Reihe von Änderungen hier. Anstatt also einen Kardinal in unserem Button zu haben , in den dieser Zahlungsanforderungs-Button eingefügt wird, brauchen wir das CSS Eva Stunning nicht. Die Kartenfehler müssen immer noch in Streifen bringen, aber es gibt viele Änderungen hier zu bleiben, also das erste, was wir tun werden, ist eine Zahlungsanfrage und das Land hier, das Sie in der zweistelligen ice eso Ländercode übergeben möchten. Es muss in Großbuchstaben sein oder die Zeit wie Währung lieben. Wir Scharniere, plus in Kleinbuchstaben, aber wir haben diesen Ländercode. Es muss in Großbuchstaben übergeben werden und für das Territo-Label wir diese Beschreibungseigenschaft verwenden, die wir Fastfood und wir werden auch den Betrag durch den Top-Preis drücken . Wir nannten es und wir Andi, lassen Sie uns einige Informationen von der A P I als auch anfordern. Also, wenn wir ihren Namen verwenden wollen und E-Mail hat sich auf dem Gerät registriert, können wir. Und sobald wir ah Zahlungsanforderungsobjekt erstellt haben, dann müssen wir in gestreiften Elementen bringen, die wir haben ein Paar nicht warten, und dann wollen wir Zahlungsanforderung Schaltfläche erstellen, so dass wir tun Element erstellen Sie zuletzt für die Zahlungsanforderung und die Zahlungsanforderung wird das Zahlungsanforderungsobjekt sein, das wir soeben als nächstes erstellt haben. Wir wollen überprüfen, ob es funktioniert. So haben viele Browser und Geräte einfach keine digitale Brieftasche eingerichtet. Und es gibt ein A p I für das, so dass wir anrufen können, kann Zahlungsraketenerzähler Wever es verfügbar ist oder nicht. Also können wir sagen, wenn es wahr ist, dann werden wir diesen Putin montieren. Das ist also das leere Element, das wir ein Paar Zahlung über Putin bekommen, sagen, ob der Benutzer diese Unterstützung in ihren Bögen oder Gerät hat, dann zeigen Sie es und wenn nicht. Lassen Sie uns ihnen eine Nachricht geben, die jetzt Sorry in einem vollständigen System sagt. Was wir hier tun, ist, auf einen regelmäßigen Check-out hier zurückzugreifen. Wenn sie also den Zahlungsanforderungs-Button laden können, würden wir zeigen, dass wenn nein, dann geben wir ihnen einfach einen traditionellen Formularstil. Aber für die Zwecke des Debuggings hier möchte ich, dass wir sehen, wann es nicht funktioniert. Also, warum wir die bedauerliche Nachricht einschließen. Aber normalerweise könnte man ihnen einfach eine alte Schule Check Out mit einem Karteneingang hier geben. Das sind Chips. Befreien Sie sich von diesem Code, den wir nicht brauchen. Bisher haben wir die Kugel aufgehängt ihnen eine Nachricht gegeben. Wenn nicht, lassen Sie uns in der nächsten Lektion. Schauen wir uns an, wie wir diese Zahlung tatsächlich leisten. 31. Zahlungen mit dem Button verarbeiten: wir montierten unsere Zahlung in der u geboren. Aber jetzt müssen wir tatsächlich behandeln Er ist ein Klick darauf und eine Zahlung. Also lasst uns das jetzt machen. Wir beginnen, indem wir einen Listener hinzufügen, der auf die Zahlungsmethode hört. Nun, klar, klar, rufen Sie zurück, um das zu erledigen. Es wird eine bestätigte Kartenzahlung nennen, und wir müssen eine Anleihe geben, die Ihre Optionen in diese. Also zuerst werden wir das Clientgeheimnis übergeben, das wir vom Controller auf dem Backend generieren , damit der Benutzer sich mit nichts anlegen kann. Dann werden wir die Zahlungsmethode basierend auf dem Objekt festlegen, an dem wir uns befanden. Schließlich werden wir diese Option Call Handle Aktionen gleich falsch auf setzen. Der Grund, warum wir es auf false setzen, ist, dass wir unseren eigenen Code schreiben werden, um zu behandeln, was hier vor sich geht. Wir wollen also nicht, dass der Standard-Strike-Code etwas tut, weil wir den Code jetzt schreiben werden. Dies ist der Code, den wir nie zurückrufen müssen. Wir werden dieses bestätigte Ergebnis nehmen, das aus dem Aufruf dieses zurückkommen wird Wenn es eine Ära gibt , dann wenn eine Markierung dieser Zahlungsanforderung als abgeschlossen, aber ein Fehler und das wird den Browser Teoh sagen, nehmen Sie sie zurück zum Zahlungsbildschirm, weil die Zahlung fehlgeschlagen ist und wenn nicht als Erfolg markieren, und das wird dem Browser sagen, fortzufahren, weil alles gut gelaufen ist. Und wenn es ein Erfolg ist, dann müssen wir an diesem Punkt noch einmal die bestätigte Kartenzahlung anrufen, denn an diesem Punkt werden wir Stripe das Geld in dieser Zeit nehmen lassen, wenn wir es tun müssen, ist das Kundengeheimnis wieder zu übergeben, und dann wird es einfach wie eine regelmäßige Zahlung. Sagen Sie also, wenn es eine Ära gibt , werden wir die Kartenfehler bekommen, was der gleiche ist, den wir die ganze Zeit auf der Nachricht verwendet haben, und wenn nicht, dann senden wir das Formular. Also lasst uns das durchgehen. Also, an diesem Punkt, wenn die Zahlung vertrauenswürdig angefordert, rufen wir dies mit dem Also nennen wir den Streifen ein P I mit dieser bestätigten Kartenzahlung , und das ist wie, zum Beispiel auf Ihrem Telefon, öffnet sich das kleine Fenster und sagt: Wollen Sie eine Zahlung auf diesem Hebel arbeiten oder es wird nicht, wenn es nicht funktioniert anfänglich. Dann zum Beispiel, die Zahlungen auf dem Gerät fehlgeschlagen, und so konnte der Benutzer es erneut versuchen. Es muss eine andere Karte ausprobieren oder muss etwas ausfüllen. In diesem Fall wird das Gerät mitteilen, das in diesem Stadium fehlgeschlagen ist. Wenn ja, können wir vermarkten ist abgeschlossen und verstecken die kleinen Pop-up auf dem Gerät. Aber nur weil wir das getan haben, heißt das nicht, dass wir die Zahlung tatsächlich genommen haben. Dann müssen wir uns an den Streik Baby wenden. Ich nochmals zu sagen, dass das Gerät diese Zahlung akzeptiert hat, und so wollen wir jetzt versuchen, sie in Rechnung zu stellen. Es könnte dann an die Bank gehen und sie könnten es ablehnen, in diesem Fall wird die Fehlermeldung aufgestellt. Aber wenn nicht, dann sollte alles in Ordnung sein. Das ist also die Theorie dahinter. Mal sehen, ob es funktioniert. Lassen Sie uns eine Website klangte Buch laden. Holen Sie sich einen Korb und holen Sie ihn. Schauen Sie sich an. Wir haben nichts. Also lassen Sie uns dies in der nächsten Lektion debuggen. 32. Über HTTPS dienen: haben wir unseren Job-Skriptcode für unsere digitale Brieftasche ausgeführt. Es funktionierte anfangs nicht, weil ich die Datei gespeichert habe. Aber jetzt die Hälfte. Und wenn Sie mitverfolgen, sollten Sie diese Nachricht mit „ Entschuldigung“ bekommen . Ihr Browser unterstützt keine digitalen Geldbörsen. Jetzt hängt es davon ab, auf welchem Browser und welchem Gerät Sie sich befinden. Aber ich bin hier auf Chrom. Und so sollte es. Also, was ist hier los? Nun, das Problem ist, dass digitale Geldbörsen nur über Hass T p arbeiten, die wir hier nicht laufen , was normales http läuft. Zum Glück hat Symphony eine Rechnung in Lösung dafür, und wir könnten einfach einen Symphonie-Server gehen, eine Installation sehen, und dies wird ein lokales Zertifikat für uns installieren, damit wir gültig haben können, hoffentlich s über den lokalen Host. Wenn Sie nicht in der Symphonie laufen, starten Sie können etwas namens M K verwenden, Sir, was eine ähnliche Sache tun wird. Aber es ist ein bisschen mehr ein Schmerz zu konfigurieren. Also hoffentlich folgen Sie zusammen mit Symphony-Stack. Und dann brauchen wir nur, wenn wir unseren Server neu starten. Wenn wir es aktualisieren verklagt, Umleitung ist automatisch. Ja, ja. Also hast du das Vorhängeschloss, das wir dich treffen, um auf den Knopf gefragt zu werden, ist perfekt erschienen . Also haben wir jetzt unseren Zahlungsknopf. Lassen Sie es uns in der nächsten Lektion testen. 33. Testen deiner digitalen wallet in Chrome: Jetzt, wo unsere Schaltfläche funktioniert, lassen Sie uns einen Test machen. Und der einfachste Weg, dies zu tun, ist in Chrom. Wenn wir nur zu den Präferenzen gehen, um hier nach unten zu kommen, um Zahlungsmethoden und Widgets können eine neue hinzufügen. Andi, wir nehmen wieder ein paar von den Testkarten für Streifen. Nehmen wir das muss Wache Hit. Sparen Sie jetzt wieder auf. Auschecken Seite. Wir müssen bezahlen. Jetzt bekommen wir die Google zahlen auf, wir können diese Testkarte wählen, die wir gerade erstellt haben. Also hier können wir sehen, wir haben ein Buch, Blauer Farbpreis. Und wir haben eine Zahlungsmethode. Das war's. Pay kann jeden CVC hier auf treffen. Wird es bestätigen? Ok, großartig. Wir haben unsere erfolgreichste Seite. Es scheint über Google Pay bezahlt zu haben. Lassen Sie uns in Streifen Refresher Staubbrett gehen. Ja, ja. Da drauf gehen wir. Wir haben auf Sie Zahlung Mefford. Es nimmt automatisch unsere E-Mail-Adresse. Es hat die Beschreibung. Der Preis ist auch in Ordnung. Also, wenn erfolgreich digitale Geldbörsen in Kunst integriert, Check-out Prozess 34. Zusätzliche Schritte für Apple Pay: Nun, wir haben es bisher getan. Gibt uns eine digitale Brieftasche für eine Vielzahl von verschiedenen. So Microsoft zahlen Google Pay-Master Pass die einzige Es funktioniert nicht für seine Apple Bay weil Apple gerne schwierig sein. Um Apple Pay zum Laufen zu bringen, müssen wir alles tun, was wir bisher getan haben. Aber es gibt auch eine zusätzliche Konfiguration. Und das passiert in unseren Stripe-Dashboards, dass wir nach unten gehen, zwei Einstellungen treffen, wir werden Zahlungsmethoden bekommen. Und hey, wir haben Apfelgeld. Ich werde zu dieser Konfiguration gehen, und wir haben Apple Pay. Wir müssen alle Domains, die verwendet wurden, auf weiße Liste setzen. So gehen wir scheinen, um bei Domain auf wird lebendig oder eine Testdomäne in hier setzen. Und wir müssen dies für jede der Domains tun, die wir verwenden möchten. Das nächste, was wir tun müssen, ist diese Verifizierungsdatei zu bekommen. Also dies ist, klicken Sie einfach hier und die Datei-Downloads auf dieser muss auf der Website in diesem Ort verfügbar sein . Sie einfach die Datei herunter und kleben Sie sie in Ihr öffentliches Verzeichnis. Also lasst uns das jetzt tun. Muss in diesem Punkt sein Gut bekannt manchmal Finder oder Datei-Manager, wo Bremssystem verwenden waren lustig über einen direkten Weberpunkt in. Also, wenn Sie dieses Problem bekommen, können wir leicht, Ägypten gehen Sie auf die Befehlszeile auf wird in das öffentliche Verzeichnis gehen, und wir machen es unsere elektrische bekannte Tatsache bereits getan, dass in diesem Fall. Also, wenn wir das nicht getan hätten, gib es dem einfach. Und dann wollen wir auch direkt machen . Nun, ab und zu haben wir Apple-Entwicklerdatei. Es sei denn, Jets verschieben das in das Verzeichnis, es ging dorthin und überprüfen. Es ist da. Ok, großartig. - Ja. Und das ist nur beheben Sie das Problem auch. Ok, großartig. Also die Dateien dort, es ist in unserem öffentlichen Verzeichnis. Wir müssen das für jede der Domains tun, die hier auf denen der zusätzlichen Schritte setzen, die Sie tun müssen, um Apple Pay arbeiten 35. Einen Buchclub erstellen: in diesem Modul. Wir werden einen Buchclub erstellen, den die Menschen abonnieren können, um wiederkehrende Zahlungen an Andi zu machen , um zu starten, Lassen Sie uns Chips erstellen schnelles Skelett. Also lassen Sie uns unsere S e einen Controller nehmen, weil dies das nächste ist, was Teoh, was wir brauchen, um dio auf. Lassen Sie uns es einfach in einen Rezeptcontroller umbenennen. Wir werden den Korb nicht brauchen, damit wir die Sitzung dort loswerden können, und es hat sich dieses Jahr geändert. Al zum Abonnement. Nun, komm. Das könnte vorerst rauskommen. Und dann rendern wir eine Seite, die nur als Abonnement bezeichnet wird. Setze uns vorerst zu wissen. Ok, sieht gut aus. Lassen Sie uns nun eine grundlegende Vorlage erstellen. Ist es nicht. Es ist offen, wenn ich einen Check out mehr Kopie sehen und fügen Sie dies in ein unbefristetes Abonnement auf Lassen Sie uns dies ändern, aber Club-Abonnement zu sagen, und wir werden all diese Karte für den Moment loswerden . Und das ist einfach eine tolle kleine Form, die es dem Benutzer ermöglicht, einige Details einzugeben. Fragen Sie also ihren Namen. Nun, das ist für diese E-Mail-Adresse. Der Mann ist ein Typ E-Mail, so tut es die Krawatte Druck auf Handy. Nennen Sie es auch per E-Mail. Ach, außerhalb der versteckten Variable. Sagen Sie, was los ist? So erstellen Kunden auf Endlich eine große Schaltfläche sagt, Treten Sie dem Club. Ok, großartig. Lassen Sie uns überprüfen, was gerendert wird. Ok. Und die Antwort ist „Nein“. Ich habe den Vorlagennamen Falsch. Okay, können Sie dies in der nächsten Lektion beheben. 36. SetupIntent API: so sieht so aus, als hätte ich hier einen kleinen Rechtschreibfehler gemacht. Da wir das korrigieren, haben wir jetzt eine schöne Form. Also lasst uns das erledigen, was passiert ist. Wenn der Benutzer einreicht , werden wir in unseren Abonnementcontroller gehen, was nicht tun würde, ist eine Methode zu erstellen , um einen Kunden zu erstellen. Da gehen wir hin. Die Art und Weise, wie das funktioniert, ist, dass wir Stripe anweisen, ein benutzerdefiniertes Objekt zu erstellen. Wir haben die Daten, die wir haben, und dann nehmen wir die Zahlungsmethode, die wir aufsteigen , und wir werden sie an den Kunden anhängen, damit wir diesen Kunden bauen können, wann immer wir Zehe brauchen und hier Streifen A p I k verbinden können. Ich sage Custom beim Erstellen auf Person die Werte. Also sind wir hier, lasst uns ändern. Also werden wir Kunden auf verwenden. Wir werden Streifenaufstellungsabsicht verwenden. Reden Sie darüber in einer Minute. Also hier haben wir ein Kundenobjekt erstellt, und an dieser Stelle können wir ein Nintendo erstellen. Jetzt könnten wir hier eine Zahlungsabsicht erstellen, und das würde uns erlauben, sofort einen Kunden aufzubauen und ihn als Kunden für wiederkehrende Abrechnung zu markieren . Aber in Fällen, in denen wir sie nicht sofort bauen wollen. Wir möchten sie erstellen, wenn ihr Abonnement beginnt. Stattdessen können wir das Setup in 10 benutzen, was dem FBI sehr ähnlich ist. Aber es bedeutet, dass wir sie jetzt nicht bauen müssen. Wir nehmen das Kundenobjekt Wicket hierher. Wir werden sagen, dass wir diese Zahlung so anhängen, dass wir sie in diesem Fall diesem Kunden nachvollziehen . Wir haben gesagt, dass es Karte ist. Ok, hübsches Zeug. Und dann werden wir es hoffentlich dieses Mal richtig buchstabieren, fast zu diesem Zeitpunkt haben wir ein Kundengeheimnis, weil wir gerade diese Absicht geschaffen haben. Jetzt müssen wir nur diese Funktion aufrufen. Also gehen wir hier rauf. Es ist wieder eingedrungen. Wir brauchen diese Absicht nicht mehr. Wenn der Seufzer, wenn wir handeln. Oh, tippen Sie, schaffen Sie einen Kunden. Dann werden wir zurückkehren. Übergeben Sie eine Anfrage durch. Jetzt wird es passieren. Ist, wenn der Benutzer das Formular sendet, wird es dies treffen. Es wird diesen großen Kunden zu bekommen und es wird die Vorlage mit diesem Client geheime Sünde viel machen gehen. Ändern Sie die Vorlage, um diese 37. Kartenaufbau bestätigen: wir haben unsere Back-End-Änderungen vorgenommen. Lassen Sie uns also das Frontend ändern, um diese Art von Schritt zwei zu behandeln. Aber das ist eine Logik, um zu sagen, wenn wir ein Kundengeheimnis haben. Ja, und wenn nicht, dann machen wir Schritt eine der Reise. Und hier wollen wir vor allem einen klassischen Checkout in. Also fangen wir an, indem wir einfach dieses Mädchen von der Aufsatz-Check-out nehmen und dann werden wir ändern, wie und er es tat. Also hast du einen extra, der sehr geboren ist, nur um klar zu machen, was los ist. Gott, reichen Sie eine Zahlungskarte ein. Erica geht es gut. Ich muss immer noch den Streifen anrufen. FBI hat unseren Code Handle Fehler gesetzt, aber dann müssen wir diese Wette ändern. Statt dieser bestätigten Kartenzahlung müssen wir etwas anderes tun. Also rufen wir die bestätigte Karte Mefford an. Wir werden die Pflanzengeheimnisse passieren, dass der meiste Code immer noch sehr ähnlich aussehen wird. Und dann ist das behandeln das Ergebnis von dieser Karte einrichten. Also nochmal, kopieren Sie es wahrscheinlich einfach und fügen Sie es hier ein. Werde das los. Also, wenn wir ein Ergebnis bekommen, fragen Sie Burt, bevor wir das Ergebnis in diese Karte setzen Pfeile Box auf wird sich ändern. Das trug auch ein bisschen. Also werden wir sagen, suchen eine Siedlung als Antwort Satis wir wollen, dass gelungen zu nehmen. Wenn ja, wir das Formular nicht ab. Lassen Sie uns dies in der nächsten Lektion fortsetzen. 38. Die Reise führen: wenn die endgültige Änderung, die wir machen müssen, ist, sobald die Benutzer die Zahlung einreichen, müssen wir etwas auf dem Back-End in diesem Fall wird auf diese überschüssige Seite überprüft umleiten . Nochmals Aktion. Hätte das in einem Schalter anmutiger machen können. Aber gut auf wird sagen, Wenn das passiert ist, dann tun Sie die alte Umleitung. Großartig. Also lasst uns testen, was passiert. Das ist ein Punkt. Einige Kundendetails getroffen, beigetreten. Flip on und großartig. Jetzt haben wir eine Kartenzahlung. Das ist Kopieren und Einfügen in der Aufgabe sind Details getroffen, Zahlung einreichen und wir haben die Erfolgsseite. Okay, das sieht gut aus. Gehen wir nun zu unserem Streifen-Dashboard auf Was wir haben sollten, ist ein Kunde. Ok, großartig. Und gehen Sie rein und sie haben eine Karte an ihr Konto angehängt. Also ist es großartig. Also können wir jetzt hineingehen und eine Zahlung über das Dashboard hier drüben und FBI hinzufügen, oder wir könnten sie auch auf einen Abonnement-Plan haben . Also, wenn wir wollen, dass Teoh wiederkehrende Rechnung sie. Allerdings wollen wir das tun, wir haben sie jetzt als Kunde mit einer Karte eingerichtet, die wir jederzeit aufladen können 39. Letzte Gedanken: gut gemacht, um es bis zum Ende dieser Klasse zu machen. Hoffentlich haben Sie schon einmal eine Stripe-Integration erstellt, die Details des Links oder des Beispielcodes im Projekt enthält. Abschnitt über Lassen Sie alle sehen, was Sie getan haben. Wir sehen uns bald.