Transcription

Dzień dobry, witam bardzo serdecznie. W ostatniej ankiecie pytałem Was jaki chcecie zobaczyć filmik następny na moim kanale i w ankiecie wygrał filmik o obsłudze płatności z użyciem REACT i bramki płatności STRIPE. Myślę, że na początek zrobię taki szybki, teoretyczny wstęp, czym w ogóle jest STRIPE oraz co dzisiaj tak naprawdę będziemy kodować. Więc oczywiście w bramek płatności jest Multum, eBay, Paypal, Przelewy24, Braintree i pewnie jeszcze milion innych. Natomiast ja STRIPE używam na co dzień u siebie w pracy, na projekcie i też go mam zamiar podpiąć do swoich kolejnych projektów. Więc siłą rzeczy po prostu STRIPE z tych wszystkich bramek płatności, z jakich korzystałem w swoim życiu spodobał mi się najbardziej. Jest łatwa integracja, świetne API, świetna dokumentacja, bardzo fajny i taki bym powiedział prosty w obsłudze dashboard. Dodatkowo prowizje też na tle innych rozwiązań nie są zbyt duże. Można też realizować jakieś bardziej zaawansowane płatności, czyli abonamenty, rozdzielanie płatności na wielu płatników, wiele bramek. Są różne widżety pisane pod REACT, także naprawdę jeżeli chodzi o STRIPE jest to bardzo fajny system. Możecie łatwo się w nim zarejestrować, nawet jeżeli nie macie prawdziwej firmy, nie macie jakiejś działalności gospodarczej, to dosyć łatwo jest założyć tam konto i po prostu w wersji testowej sobie po prostu używać tego API. Teraz pokrótce omówię co będziemy dzisiaj tak naprawdę kodować, ponieważ obsługa płatności jest podzielona na kilka różnych etapów. Jeden z tych etapów zahacza o backend, ponieważ ciężko jest zrobić płatność w 100% po stronie frontendowej, więc dzisiaj zrobimy sobie taki malutki backend, aby po prostu nasza płatność była faktycznie bezpieczna. Zrobimy to oczywiście z użyciem Javascriptu. Ja sobie napiszę prosty backend w Next.js. Next.js jest to taki framework reactowy, gdzie bardzo prosto można sobie mieszać frontend z backendem. Wystarczy po prostu wrzucić funkcję javascriptową do folderu API i to wszystko. Więc tak naprawdę jest to bardzo proste, ale jeżeli czujesz się na siłach z innym backendem, wolisz używać PHP, Go, cokolwiek innego, to oczywiście ten fragment backendowy możesz napisać sobie w czyn inny. Więc scenariusz zaczyna się bardzo prosto. Będziemy mieli stronę, na stronie będzie produkt, w moim przypadku będzie to konsultacja online i możemy sobie po prostu rozpocząć płatność. W momencie, gdy użytkownik rozpocznie płatność, możemy wysłać zamówienie do Stripe i tam po prostu na backendzie Stripe zostanie wygenerowane ID, które użyjemy później do przekierowania naszego użytkownika z frontendu. Później użytkownik z tego frontendu wróci z powrotem na naszą stronę i w zależności od tego, czy będzie sukces, czy będzie błąd, zostanie przekierowany na odpowiedni adres. I pokrótce to dzisiaj właśnie zrobimy. Nie przedłużam i teraz zajmiemy się tym, co lubimy najbardziej, czyli przeskoczymy do edytoru i zaczniemy kodowanie. Jesteśmy teraz już w edytorze, w którym teraz pokrótce omówię Wam, co tutaj tak naprawdę się dzieje. Przed nagraniem przygotowałem taką bardzo prostą aplikację, w której jak widzicie można w tym prostym sklepiku nabyć dwie rzeczy. Mamy tutaj konsultację React oraz nieco droższą konsultację CSS. I teraz będziemy chcieli sobie dopisać do tej aplikacji, tak by po kliknięciu na którąś z tych pozycji można było sobie po prostu zamówić konsultację i ją opłacić z użyciem takiej bramki dopłatności, jaką w tym przypadku będzie Stripe. Jeszcze tytułem wstępu pokażę Wam kod tej aplikacji. Tutaj jak widzicie mamy po prostu nic innego jak komponent funkcyjny, w którym pobieramy sobie produkty z endpointu API slash products. Tutaj mamy to zwracane w formie JSON-a i przypisywane do stanu w tym komponencie. A później sobie po prostu wyświetlamy te produkty wewnątrz naszych stron. Czyli tutaj mamy po prostu pobieranie produktów z endpointu products. Tutaj jest zwracany JSON i na tej podstawie wyświetlamy sobie produkty, które chcemy wyświetlić w sklepie. Jeżeli chodzi o sam projekt to zrobiłem go z użyciem Next.js, ale nie bójcie się. Next.js nie jest tutaj jakimś nie wiadomo czym, co trzeba się uczyć całkowicie od nowa. Next.js jest to taki framework, który umożliwia łatwe pisanie frontendowych stron w React, ale także wprowadzanie do nich elementów API. Więc nie chciałem tworzyć dla Was tutaj teraz dwóch osobnych projektów. Mamy projekt frontendowy w Next.js, ale także mamy też backend, który robimy w bardzo prosty sposób. Wystarczy utworzyć folder API i do niego sobie wrzucić plik. Ja tutaj wrzuciłem plik products.js, który eksportuje domyślnie funkcję, która przyjmuje dwa parametry request i response. I tutaj jest response, w którym po prostu zwracamy JSON, którym są nasze produkty. Produkty oczywiście w normalnej produkcyjnej aplikacji pochodzą zwykle z bazy danych, natomiast tutaj na potrzeby tych naszych eksperymentów ja zrobiłem sobie taką sztuczną bazę danych, którą nazwałem po prostu fakedb.js i tutaj jak widzicie z tego pliku eksportuje nic innego jak po prostu tablicę, w której mamy te elementy, które wyświetlamy w naszym sklepiku i zwracamy je właśnie z tego endpointa. Więc teraz czas dopisać kolejny endpoint, w którym po prostu będziemy generować nową płatność po stronie Stripe'a, ponieważ musicie pamiętać, że zawsze gdy dodajecie do swojej aplikacji bramkę płatności, zawsze gdy chcecie obsłużyć płatność, musicie mieć jakiś prosty back-end, który po prostu generuje lub przynajmniej sprawdza poprawność płatności wykonanych przez użytkownika i zawsze musicie to zrobić na back-endzie ze względów bezpieczeństwa, ponieważ pamiętajcie, że wszystko to co dzieje się po stronie klienta, wszystko to co się dzieje na front-endzie w świecie Reacta może być dosyć łatwo zmanipulowane, więc zawsze jest potrzebny prosty back-end, który my sobie właśnie w tym momencie utworzymy. Utworzymy sobie plik o nazwie order.js, który po prostu umożliwi nam wygenerowanie prawidłowej płatności i później przekierowanie użytkownika na tą płatność. Więc tworzymy sobie ten prosty endpoint, skopiujemy sobie tę funkcyjkę i tutaj oczywiście chcemy mieć status code 200 w momencie gdy wszystko jest OK i tutaj możemy sobie zwrócić coś z tego endpointa, czyli na przykład możemy napisać message OK. I teraz jeżeli zapisałem ten projekt i przejdę tutaj na przykład na endpoint.api.slash.order to widzicie, że zwracany nam jest JSON. Oczywiście jest to za mało, żeby zrobić obsługę płatności, bo my chcemy tak naprawdę stworzyć sesję dokładności w API Stripe i tutaj jeżeli sobie wyświetlicie dokumentację Stripe'a to zobaczycie, że ta dokumentacja całkiem oferuje nam sporo różnych rzeczy. Możemy tworzyć sesję do płatności, możemy tworzyć rzeczy związane na przykład z rachunkami, możemy tworzyć wręcz faktury po stronie Stripe'a, możemy kontrolować subskrypcje, stawki podatkowe, więc tak naprawdę to API jest potężne. Możecie tutaj zrobić z poziomu API tak naprawdę bardzo dużo różnych rzeczy, które możecie też wyklikać wewnątrz dashboardu Stripe. O, tutaj nawet możemy sobie włączyć dark mode w obawie o wasze oczy i moją estetykę. Myślę, że ustawię sobie dark moda i tak naprawdę macie tutaj bardzo dużo możliwości. Dzisiaj będę omawiał tylko tworzenie sesji do płatności, a jeżeli będziecie mieli już jakieś konkretne pytania dotyczące Stripe, to oczywiście zachęcam do zadawania ich w sekcji komentarzy lub wchodzenia na discorda, do którego macie link oczywiście w opisie do tego nagrania. No i tutaj bardzo fajnie działa ta dokumentacja, ponieważ ja jestem zalogowany do Stripe'a, to tu widzicie, że tu już się pojawia nawet stricte w tej dokumentacji klucz, który uwierzytelniający mnie w API Stripe. I tutaj też można sobie przełączyć na różne języki, czyli na przykład jeżeli integrujecie płatność w Rubin, to oczywiście możecie sobie zobaczyć podgląd dla Rubiego. My natomiast będziemy dzisiaj pisali w Node.js. Więc oczywiście skopiuję sobie ten fragment. Ten fragment nie zadziała myślę out of the box, bo tak naprawdę tutaj są jakieś dziwne url. Tutaj jest ID odnoszące się do ceny, której tak naprawdę u nas może nie być dodanej w dashboardzie Stripe'a. Zaraz wam wytłumaczę o co chodzi, ale ja muszę to przypisać na składnię async await. I tu na przykład sobie zrobimy const response równa się await. I tu oczywiście musimy poprawić nieco wcięcia. I tutaj oczywiście w naszej aplikacji chcemy skorzystać z Stripe'a. Stripe, oczywiście chcemy sobie zrobić const. Mamy require, więc to oznacza, że jest to paczka, którą musimy dodatkowo zainstalować. Ja już ją wcześniej zainstalowałem. Możecie zobaczyć, że w pakiet.json mam Stripe.js, który będzie nam potrzebny po stronie klienta, ale do tego dojdziemy zaraz. Mamy Stripe'a, który jest potrzebny po stronie backendowej. I oczywiście mamy React, ReactDOM, no i Next, który nam pozwala tworzyć ten backend w prostej formie, o czym mówiłem wcześniej. Wracamy tutaj do naszego prostego endpointa. Mamy tutaj, to może nazwiemy StripeResponse albo StripeObject. Zwrócimy sobie go w jsonie. Zobaczymy, co nam tutaj będzie tak naprawdę zwracał Stripe. No i bardzo ważna rzecz. Pamiętajcie o tym, że tutaj jesteśmy w tym momencie tak naprawdę po stronie backendowej, a to oznacza, że musimy podać tutaj sekret, czyli tak naprawdę kluczu wierzytelniający, który w żaden sposób nigdy nie może się znaleźć w waszym repozytorium. I tutaj Next też domyślnie umożliwia przechowywanie takich zmiennych środowiskowych w plikach tak zwanych .env. Jeżeli mam plik .env.local, to wtedy oczywiście ten plik nie leci do repozytorium. Jest on u mnie dostępny wyłącznie lokalnie i on powoduje, że mogę sobie zamiast tego kodu wpisać tutaj proces .env i nazwa mojej zmiennej środowiskowej i ona zostanie automatycznie zaciągnięta. Jeżeli chcecie mieć zmienne środowiskowe, które są widoczne nie w strefie backendowej, tylko w strefie frontendowej, to Next nakazuje je sprefiksować słowem next, podkreślenie public, podkreślenie. Jest to oczywiście ze względów bezpieczeństwa, żeby użytkownik zawsze wiedział, że te zmienne środowiskowe są wystawiane na zewnątrz, żeby nie dopuścić do sytuacji, że ktoś przypadkowo mógłby udostępnić całemu światu klucz dostępowy, ten sekret, ponieważ to by był naprawdę dramat, ponieważ zobaczcie, z użyciem tego sekretu możecie bardzo wiele rzeczy zrobić po stronie Stripe'a. Macie dostęp do rachunków, macie dostęp do jakichś danych waszych klientów, więc bardzo ważne jest to, żeby zawsze zadbać o te klucze uwierzytelniające. Więc możemy zapisać nasz endpoint. Oczywiście tutaj zmienimy sobie to, by w przypadku, gdy wszystko się powiedzie, użytkownik został przekierowany na localhost 3000. Oczywiście w przyszłości, gdy macie aplikację produkcyjną, też zalecam zamienianie takich localhostów 3000 też na zmienne środowiskowe, bo wtedy bardzo prosto można przestawić wasz kod tak, by on działał już nie tylko w tym środowisku deweloperskim, ale także produkcyjnym. Więc patrząc tutaj sobie na dokumentację, cancel URL jest to po prostu podajemy URL, na który użytkownik zostanie przekierowany w momencie, gdy coś pójdzie nie tak, czyli na przykład wyświetlimy błąd w momencie, gdy zostanie wszystko wykonane pomyślnie, to chcemy też użytkownika przekierować na sukces. Tutaj też oczywiście możemy podać jakieś inne formy płatności. Domyślnie Stripe obsługuje karty, ale dla nas też jest bardzo pożądane P24, czyli tak zwane przelewy 24 i te sobie też tutaj wprowadzimy. Ten obiekt oczywiście jest przekazywany dalej do api Stripe'a, prawda? Więc Stripe na bazie tego wygeneruje nam nową sesję do checkoutu, którą później będziemy mogli wykorzystać na frontendzie i po prostu naszego użytkownika przekierować do tej sesji płatniczej. Tak jak to zwykle jest, gdy płacicie na przykład z jakiejś zakupy w Allegro czy w AliExpressie, czy gdzie tam sobie kupujecie rzeczy. Tutaj w api macie fajnie oznaczone, w dokumentacji macie fajnie oznaczone różne parametry, które są wymagane, które możemy olać. Tutaj macie na przykład ID of existing customer. Tutaj na przykład dzisiaj ta nasza aplikacja będzie bardzo prosta, ponieważ jak sami wiecie tutaj nie ma logowania. Tutaj tylko będziemy mogli kliknąć i sobie coś opłacić. Natomiast w prawdziwym świecie trzeba pamiętać, że to co będziecie podawać, te parametry do Stripe'a mogą być nieco bardziej rozwinięte. Czyli na przykład możemy przekazać e-mail naszego klienta, dzięki czemu on już na przykład tego nie będzie musiał uzupełniać w tej bramce do opłacenia. A oczywiście customer e-mail możemy mieć po stronie backend'u, ponieważ to jest zwykły endpoint, który możemy uwierzytelnić użytkownika. Możemy sprawdzić kto jest aktualnie zalogowany i na bazie tej informacji zbudować odpowiedni obiekt, który przekazujemy do Stripe'a. Później kolejna rzecz bardzo ważna to jest line items i tutaj będziemy przekazywać jakby to, co użytkownik od nas kupuje. I to jest bardzo ważne, żeby właśnie zawsze to sprawdzać po stronie backend'u, żeby nie wierzyć w to, co użytkownik nam wciska na frontend'zie, bo ktoś by mógł na przykład zmanipulować to, co na przykład zamawia albo cenę tego, co jest zamawiane. Więc Stripe jakby zaleca wprowadzanie cen gotowych do swojego panelu i oczywiście teraz szybko to zrobimy, bo oczywiście ten kod, jeżeli go odpalę w takiej formie i odpalimy ten nasz endpoint ponownie, to zobaczycie, że mamy błąd, ponieważ tak naprawdę został nam zwrócony błąd, ponieważ funkcja powinna być po pierwsze asynchroniczna, a za chwilkę zostanie nam zwrócony błąd już stricte przez API Stripe. Widzicie, wystąpił internal server error, ponieważ tutaj dostaliśmy odpowiedź ze Stripe'a najprawdopodobniej no such price, więc oczywiście musimy utworzyć odpowiednią cenę za nasz produkt po stronie Stripe'a. I teraz w tym celu sobie po prostu się udamy do naszego dashboardu. W dashboardzie bardzo ważne, jeżeli bawicie się tak jak ja teraz i po prostu testujecie różne rzeczy, to bardzo ważne jest to, żeby przełączyć sobie viewing test data na on. Tutaj mamy zakładkę developers, tutaj możecie pozyskać te klucze, które tutaj będziemy wykorzystywali do komunikacji z API. Natomiast tutaj ważna rzecz, wchodzimy sobie w zakładkę products i możecie sobie dodawać nowe produkty po stronie Stripe'a, tak żeby później móc wykorzystywać te pricingi. Czyli na przykład sobie zrobimy konsultacja React, dwie godziny, jakiś opis, możemy też jakiś obrazek tutaj wrzucić, na przykład to, co ostatnio wrzucałem na Instagrama, na przykład to może, dobra. I teraz możemy ustalić na przykład cenę. O, jest ten poproszony o hasło. I teraz ustalamy cenę, na przykład 180 złotych i to jest cena oczywiście one time. Możemy tutaj ustalić też walutę, w której chcemy przyjmować płatności. I oczywiście może Wam się teraz pojawić pytanie, ale słuchaj Artur, co jak ja mam w sklepie, nie tutaj dwa jakieś śmieszne produkty, tylko mam na przykład 300 produktów, to oczywiście możesz to obejść albo w taki sposób, że po prostu nie przyjmować line items po stronie backend'u, tylko samemu na piechotę budować cenę, za którą chcesz skasować użytkownika, ale to jest oczywiście więcej pisania, więcej roboty po stronie backend'u. Można też po prostu z użyciem zapytania do API wysyłać zapytania przez te SDK i generować sobie ceny, więc na przykład możecie napisać sobie skrypt, który wygeneruje Wam od razu 300 cen w Stripe'ie, a te ceny przez to, że użytkownik operuje tutaj na ID, no to jest mniejsza prawdopodobieństwo błędu, że ktoś po prostu coś popularniczy tutaj z tymi na przykład cenami albo walutami. Więc dobra, zapiszę sobie teraz ten produkt i teraz zobaczycie, że mam tutaj już pricing i mam już tutaj odpowiednią ID tej mojej ceny. To sobie mogę skopiować, wstawiam sobie tu i oczywiście teraz widzicie, że ten mój przykład jest taki troszeczkę naiwny, ponieważ jakby użytkownik zwykle może na przykład wybrać ile produktu danego chce zamówić, jakie dane do faktury chce mieć i tak dalej. Natomiast dzisiaj nasz przykład jest taki prosty, że zawsze po prostu w momencie, gdy ktoś kliknie tutaj na to zamów konsultację, no to zostanie zamówiona akurat ta konsultacja i jest ilość 1. Oczywiście w ramach zadania domowego możecie sobie zrobić endpoint, który będzie przyjmował więcej danych, czyli na przykład użytkownik będzie mógł specyfikować, że chce zamówić dwie sztuki tego produktu i to możecie sobie przekazać i na tej podstawie zbudować zapytanie do Stripe'a. Więc teraz zapiszę ten endpoint i zobaczymy, co się wydarzy, jak wejdziemy jeszcze raz na endpoint order, api slash order i widzicie, że teraz już coś tutaj zadziałało. Zostaliśmy w odpowiedzi nic innego jak właśnie pewne ID, na które będziemy chcieli przekierować naszych użytkowników, tak by oni mogli zapłacić za te nasze produkty. Więc endpoint na razie sobie zostawimy. Przejdę teraz z powrotem do naszej aplikacji frontendowej. No i zobaczcie, tutaj w momencie, gdy ktoś klika na konsultację, to w konsolologu się odpala akcja start order, bo tutaj zrobiłem nic innego, jak po prostu prosty handler onclick, odpalamy funkcję handle order, do niej przekazujemy ID produktu. W zadaniu domowym możemy przekazać więcej informacji, na przykład ilość sztuk danego produktu i tutaj jesteśmy w funkcji handle order i tutaj możemy sobie teraz zrobić po prostu coś takiego, na przykład get, na przykład możemy sobie zrobić tą funkcję asynchroniczną i tutaj na przykład zrobimy response stripe resp i to będzie order data, na przykład zrobiłem sobie konsol log data i zobaczymy teraz, jak ta nasza funkcja zacznie się spisywać. Trochę za dużo skopiowałem, nie bijcie mnie za brak średników, jest to filmik na inny temat i teraz w momencie, gdy klikamy response is not defined, a no tak, bo tu zmieniłem response, nie zmieniłem tej nazwy, odpalamy jeszcze raz naszą aplikacyjkę i widzicie, że mamy już tutaj zwrotkę. Teraz fajnie by było, gdybym mógł przekierować użytkownika już na te ID, tak, żeby on mógł zapłacić i powrócić z powrotem na naszą stronę, więc w tym celu będziemy musieli też zaprzęgnąć do pracy nie tylko tę bibliotekę stripe, która działa po stronie backendowej, ale także bibliotekę stripe.js, którą mamy po stronie klienta, więc teraz wypadałoby użytkownika przekierować na stronę dopłatności stripe. Tutaj więcej możecie przeczytać na ten temat w tej dokumentacji, ale ja teraz szybko po prostu pokażę Wam, jak to możecie zrobić. Macie tutaj przykłady zarówno dla HTML plus JS, jak i dla Reacta. Konieczne jest załadowanie skryptu stripe na Waszej stronie w hederze i to niezależnie, czy korzystacie z Reacta, czy z HTML plus JS. Generalnie warto jest wrzucić na Waszą stronę główną po prostu ten skrypt, ponieważ on pozwala wykrywać wszelkiego rodzaju oszustwa po stronie klientów, jakieś dziwne rzeczy, więc ten skrypt na pewno przy produkcyjnej aplikacji musicie mieć wrzucony na swoją stronę, bo dzięki temu po prostu macie możliwość wykrycia jakichś dziwnych zachowań po stronie użytkowników Waszej strony. Więc wrzuciliśmy sobie ten skrypt SRC. Kolejny krok, który musimy zrobić w React to oczywiście zainstalować tę bibliotekę. Ja już tę bibliotekę zainstalowałem, a kolejny krok to będzie loadStripe i po prostu odpalenie tego kodziku. Więc mamy funkcję loadStripe, którą ładujemy z SDK oficjalnego Stripa. Później mamy tutaj tak zwany stripePromise, który znowu musimy użyć po prostu w taki sposób, że zaciągamy nasz klucz. Ja ten klucz wrzuciłem do env.locals i też Wy tak zróbcie, i później piszemy proces env.innextPublicStripe. Więc mamy promisa loadStripe i teraz będziemy mogli tego promisa wykorzystać sobie tak, jak jest tutaj w tym kodziku, więc mamy const stripeAwait, stripeAwait, stripePromise i w sytuacji, gdy coś pójdzie nie tak, czyli tutaj mamy stripe, to jest stripePromise, i tutaj mamy już przekierowanie użytkownika z użyciem sessionId, a w naszym przypadku sessionId to jest po prostu dataId. Oczywiście możemy sobie to zdestrukturyzować, na przykład checkoutId w ten sposób. To jest po prostu to, co nam zwraca nasz backend, i tutaj tak samo jest w dokumentacji wyjaśnione, że musimy to pozyskać z poprzedniego kroku. Mamy checkoutId i przekażemy ten checkoutId. To jest sessionId w zasadzie. I sessionId wystarczy przekazać, czy coś jeszcze? Nie. SessionId przekazujemy w przypadku, gdy zostanie jakiś błąd wykryty, to oczywiście ten błąd nam tutaj wróci. No i zobaczmy, zapiszmy i sprawdźmy, jak nasza aplikacja zachowa się tym razem. I widzicie, że wylądowałem w sklepiku. Mamy tutaj obrazek, który jakby wylądował tutaj dzięki temu, że wcześniej byłem w panelu. Tutaj w momencie, gdy wy uzupełniacie na przykład dane testowe, to wystarczy wpisać same 4.2, na przykład jakąkolwiek datę w przyszłości, CVC też jakikolwiek. I tutaj widzicie, że te rzeczy typu name on card i e-mail, to są rzeczy, które już jeżeli znacie swojego użytkownika, no to możecie po prostu je tutaj przekazać. Tak samo też możemy wybrać płatność przez przelewy 24. Ale spróbujmy zapłacić kartą. Zobaczmy, co się wydarzy. Wszystko przebiegło OK i zostaliśmy przekierowani na stronę Success, która oczywiście nie istnieje, bo jej jeszcze nie zrobiliśmy. I Stripe oczywiście oferuje dużo różnych możliwości testów. Możecie sobie Stripe Testing Cards wpisać i w YouTubie, znaczy w YouTubie i wtedy tutaj w Google macie różne testowe karty, które możecie sobie sprawdzać, na przykład co się dzieje, gdy ktoś poda złą kartę, co się stanie, gdy ktoś ma jakiś 3D Secure. Więc tu wtedy możecie wasze API sobie testować. A tymczasem zobaczcie, że w dashboardzie, jeżeli tutaj wejdziemy, to widzimy, że płatność z 2 lipca przeszła, została wykonana z tej karty. I oczywiście po stronie backendu teraz moglibyśmy na przykład tutaj sobie przekazać jakieś session ID do naszego backendu i zapisać na przykład, że faktycznie taka płatność miała miejsce. I po stronie backendu moglibyśmy przetworzyć to zadanie i na przykład poinformować użytkownika o tym, że jego zadanie już lub zlecenie zostało przyjęte do realizacji. To wszystko, co przygotowałem dzisiaj dla was. Bardzo szybko starałem się wam wytłumaczyć, jak możecie obsługiwać płatności z użyciem Stripe'a. Oczywiście w tym API możecie zrobić dużo, dużo, dużo więcej. Możecie dodawać różnych klientów, obsługiwać całe koszyki, możecie generować faktury, możecie dostawać powiadomienia od Stripe'a, więc tak naprawdę jest to bardzo rozbudowane narzędzie. Jeżeli macie jakieś pytanka, to zachęcam do zadawania ich. Tutaj macie też moją stronę fullstack.pl newsletter. Tam wysyłam raz w tygodniu wiadomości związane z web developmentem. Więc to wszystko, co przygotowałem na dzisiaj. Jak materiał się podobał, to zostaw proszę łapek w górę. Jak masz jakieś pytania, to zapraszam do sekcji komentarzy. To wszystko. Dziękuję. Pozdrawiam. Cześć, cześć.