MVP aplikacji w rekordowym czasie z Bubble: Obsługujemy płatności
Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Pracy z edytorem Bubble na bardziej zaawansowanym poziomie
- Tego jak wyszukiwać, filtrować i edytować rekordy z bazy danych wbudowanej w Bubble
- Czym są privacy rules - czyli jak zabezpieczyć dostęp do naszych danych przed nieuprawnionym dostępem
- Praktycznej pracy z frontend i backend workflows
- Dodatkowo wdrożymy do naszej aplikacji system płatności Stripe oraz powiadomienia mailowe z wykorzystaniem np. SendGrid i innych
- Pokażę Ci jak łączyć się z zewnętrznymi API poprzez dostępny w Bubble plugin API Connector
- A także jak rozszerzyć funkcjonalność naszej aplikacji poprzez proste automatyzacje z serwisem Make
- Na koniec zajmiemy się również podpięciem naszej customowej domeny oraz publikacją aplikacji
Czy w Twojej głowie pojawił się pomysł na aplikację, która zrewolucjonizuje świat na miarę Facebook'a, Instagrama albo Airbnb? A może zgłosił się do Ciebie klient, który chce przetestować i wdrożyć swój projekt w jak najszybszym czasie?Jeśli tak było to na pewno zadajesz sobie teraz kolejne pytanie - od czego zacząć? Czy muszę posiadać odpowiednią wiedzę programistyczną? Na jaki język programowania się zdecydować lub z jakiego gotowego framework'u skorzystać? A może zatrudnić profesjonalnego designera i software house, który pozwoli mi zrealizować ten projekt?Niezależnie od tego czy czy zdecydujesz się działać sam/a, czy też przekażesz projekt do zewnętrznej agencji i tak staniesz przed kolejnym dylematem jakim jest nauka programowania lub konieczność przepalenia nawet setek tysięcy złoty na coś, co może okazać się niewypałem.Na szczęście szybki rozwój narzędzi no-code sprawia, że możesz wybrać jeszcze trzecie wyjście. Zaprojektować, zbudować i wypuścić w świat swoją wymarzoną aplikację tylko za pomocą własnych sił i to bez konieczności posiadania specjalistycznej wiedzy programistycznej, a nawet posiadając jedynie podstawową znajomość narzędzi do design'u.Pamiętaj również o tym, że projekt ten podzieliłem na dwie części. Ten kurs to druga część, w której zapoznamy się z bardziej zaawansowanymi opcjami, jakie zapewnia nam edytor Bubble. Zdobytą w ten sposób wiedzę teoretyczną wykorzystamy od razu w praktyce dodając do naszego statycznego designu odpowiednią logikę, dzięki czemu nasz finalny projekt będzie już w pełni działającą aplikacją.Jeśli tylko potrafisz w podstawowym zakresie pracować z edytorem Bubble, budować w nim design aplikacji i rozumiesz czym są option sets oraz workflows to posiadanie wiedzy z poprzedniego kursu nie jest koniecznie wymagane. Natomiast szczerze zachęcam Cię przynajmniej do przejrzenia materiałów z pierwszej części, gdzie skupiamy się właśnie na podstawach, ponieważ teraz będziemy efektywnie przechodzić do bardziej zaawansowanych tematów i rozbudowywać naszą aplikację.
Czego nauczysz się w ramach tego Kursu?
W tym kursie „MVP aplikacji w rekordowym czasie z Bubble (Logika)” nauczę Cię jak zamienić statyczny layout na pełnoprawną aplikację. Poruszymy takie tematy jak praca z bazą danych, privacy rules oraz bardziej zaawansowane workflows, które dodamy zarówno na froncie jak i backendzie naszej aplikacji. Dzięki zdobytej wiedzy dodamy logikę wszędzie tam, gdzie tego wymaga nasz projekt, a dodatkowo wzbogacimy go o możliwość płatności poprzez najbardziej popularny na świecie system jakim jest Stripe. To jednak nie koniec ponieważ przygotowałem dla Ciebie również szereg innych ważnych zagadnień, które omówimy i wykorzystamy w praktyce.W ramach nauki skupimy się na jak najbardziej praktycznym podejściu. Zapomnij o długich i nudnych lekcjach pełnych teorii, które zapomnisz zaraz po obejrzeniu. Będziemy budować a nie debatować! W ten sposób nauczysz się pracować z edytorem Bubble na poziomie zaawansowanym. Zrozumiesz jak zabezpieczyć swoje dane przed nieuprawnionym dostępem, w jaki sposób pobierać i dynamicznie filtrować rekordy z bazy danych. A także jak wykorzystać auto-binding by móc je aktualizować bez wykorzystania skomplikowanych workflows.Dodamy do naszej aplikacji prosty komunikator, który pozwoli na wymianę wiadomości pomiędzy użytkownikami. Zadbamy również o możliwość wysyłania powiadomień mailowych poprzez zewnętrzne serwisy by ich wygląd był zgodny z naszym brandem. Nie zabraknie również takich tematów jak SSO z Google czy też proste automatyzacje z wykorzystaniem serwisu Make.
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
W tej lekcji czeka nas trochę pracy związanej z tym, by prawidłowo
obsłużyć płatności za booking.
Poprzednio zadbaliśmy o to, by sprzedawca, czyli host w naszym serwisie poprawnie
połączył swoje konto z naszym poprzez connect, a teraz musimy umożliwić gościom
zablokowanie pobytu i opcją zapłaty za taki pobyt.
Mam nadzieję, że pamiętasz jak w lekcji dotyczącej subskrypcji kierowaliśmy
użytkownika na stronę płatności, gdzie dokonywał on zapłaty za dany plan,
a pieniądze wpadały na nasze konto.
Tym razem musimy utworzyć taką stronę nie dla siebie, ale dla połączonego z nami
konta sprzedawcy, ponieważ zgodnie z naszym flow osoba blokująca pobyt płaci
nie nam, ale właśnie hotelowi, a my tylko po drodze pobieramy swój
procent z całej tej transakcji.
Tak więc najpierw udajemy się do dokumentacji, czyli jesteśmy tutaj.
Znów link będziesz widział na dole ekranu i standardowo radzę Ci zapoznać się z całą
tą instrukcją, a ja jak zwykle przeprowadzę Cię przez cały proces i
pokażę co i jak należy ustawić pod kątem.
Flow zadziałał w serwisie.
Tym razem ta metoda jest nieco bardziej skomplikowana, a to z tego powodu, że
musimy przekazać parametrach tablicę z obiektem i właśnie w taki sposób
robi się to w metodach strip.
Wracamy sobie oczywiście do edytora i przechodzimy do tej właściwej metody.
Ja ją nazwałem po prostu Connect checkout page.
Ponieważ tym razem właśnie będziemy generować taką stronę ze sprzedaży dla
właśnie połączonego przez Connect konta.
A więc klikamy Expand i tak jak mówiłem tym razem tych
parametrów będzie tutaj znacznie więcej.
Ale nie bój się, wszystkie sobie zaraz omówimy.
A więc zjeżdżam niżej i tym razem nasza metoda wygląda właśnie w ten sposób.
Standardowo używamy jej jako Action.
Tutaj mamy type ustawiony na post taki adres URL i tym razem dodajemy jeszcze
dodatkowy nagłówek o nazwie Strike'a kont, do którego przekazujemy ID.
Takiego połączonego konta, czyli właśnie to ID, która zapisaliśmy
sobie w bazie danych, bo to nam będzie teraz potrzebne, żebyśmy teraz wiedzieli
dla jakiego sprzedawcy wygenerować taką checkout page.
Kolejne super ważne parametry to mod tym razem ustawiony na Payment.
Jeśli sprawdzisz sobie dane, które wracają Ci na web hook w przypadku subskrypcji, to
odkryje, że tam również jest parametr mode, ale w tamtym przypadku
ustawiony na subscribe.
Tutaj dokonujemy jednorazowej płatności, a więc właśnie ten parametr
ustawiamy na Payment.
On jest ustawiony tu na private, ponieważ nigdy go nie będziemy zmieniać.
Analogicznie tutaj właśnie przekazujemy cały obiekt z danymi.
Musimy to zrobić właśnie w taki sposób.
I znów jest to temat nieco bardziej zaawansowany i powiązany z programowaniem,
więc zachęcam Cię do wczytania się dokumentację script lub też zapoznania się
chociaż z absolutnymi podstawami programowania.
Jeśli chcesz lepiej to zrozumieć.
Natomiast na nasze potrzeby wystarczy, że będziesz zarabiał na tym,
co ja tu wprowadziłem.
Standardowo do dyspozycji masz link do mojego edytora, aby
sobie to potem podejrzeć.
A więc musimy zastosować taki zapis.
I tu odnosimy się do ilości produktów, które będziemy sprzedawać.
Ponieważ u nas sprzedajemy 1 booking to ta wartość zawsze będzie równa 1,
a więc możemy zaznaczyć private.
Ty byś stworzył serwis, gdzie ta wartość może być różna, a więc kupujący
może sobie zakupić kilka produktów.
No to oczywiście wtedy zaznaczasz private i przekazujesz tutaj dynamiczną wartość,
czyli ile sztuk takiego produktu zakupił.
Kolejna mamy tutaj link do obrazka.
Ja na razie wstawiłem jakiś przykładowy, potem oczywiście będziemy go
sobie przekazywać dynamicznie.
Kolejno musimy tutaj podać jak widzisz karencji, czyli w jakiej walucie
będzie dokonywana płatność.
Oczywiście cały nasz serwis jest przystosowany do pracy w dolarach, ale ja
tutaj wstawiłem wartość PLN właśnie tylko po to, abyś mógł zobaczyć w jaki sposób
włączyć obsługiwać płatności na polskich serwisach.
A więc znowu tutaj mamy PLN ustawiony napiwek.
Tego nie będziemy sobie zmieniać.
Kolejny parametr to po prostu nazwa produktu.
Czyli w naszym przypadku będzie to po prostu nazwa listingu.
Nic trudnego.
Analogicznie kolejny parametr to po prostu opis produktu.
Tutaj na razie wstawiłem Lorem ipsum, ale oczywiście przekażemy
to sobie dynamicznie.
Kolejna mamy tutaj końcową cenę, jaką musimy wystawić naszemu klientowi.
Czyli to łączną kwotę, którą musi zapłacić.
Jak widzisz wszystkie te parametry mają odznaczone ten checkbox private, ponieważ
będziemy te wartości potem przekazywać dynamicznie już w samym workflow.
A więc tutaj jest cena końcowa.
W tym przypadku podajemy jaką kwotę będziemy pobierać z całej tej transakcji.
Następnie mamy tutaj Customer Email Client Reference ID.
Tak jak Ci mówiłem, pod ten parametr będziemy mogli wstawić cokolwiek, a w tym
przypadku, żeby to łatwiej potem było namierzyć i obsłużyć w serwisie.
Tym razem zamiast User ID będziemy przekazywać właśnie Booking ID.
Zobaczysz później jak fajnie nam się to będzie spinać właśnie przy
obsłudze naszego łebka.
Kolejno mamy dwa ważne parametry, czyli success url oraz sar url.
Jak się domyślasz, pierwszy to jest strona, na którą przekieruje
użytkownika, jeśli poprawnie dokona zakupu.
U nas będzie to po prostu strona z bookingu.
Natomiast w przypadku Cancer URL u nas będzie to po prostu strona listingu,
na której rozpoczął transakcję.
Ustawimy to tak, żeby właśnie miał wszystkie wczytane parametry i mógł
jeszcze raz dokonać zakupu, gdyby coś poszło nie tak.
Super ważne są tutaj te trzy ostatnie parametry, ponieważ tu definiujemy jakie
metody płatności będziemy oferować.
Pamiętaj bowiem, że w tym przypadku generujemy link do płatności nie na swoim
koncie, tylko na koncie podłączonego sprzedawcy, Więc masz tutaj
po prostu dwa wyjścia.
Albo nagrać filmik, w którym pokażesz mu, w jaki sposób może on włączyć na swoim
koncie różne metody płatności, czyli to, co my robiliśmy na początku
ustawień naszego konta.
Czyli jeśli przejdę sobie właśnie tutaj na konto takiego sprzedawcy,
to musiałbym przejść właśnie pod settings pod Payment
Payment method i tu poustawiać właśnie jakie typy płatności chcę obsługiwać.
Musiałbyś po prostu nagrać jakiś filmik albo wysłać link do instrukcji.
To wszystko oczywiście zależy od Ciebie.
Natomiast my podejdziemy trochę inaczej do tego i wracając tutaj do edytora dodamy
sobie właśnie te trzy parametry, za pomocą których ustawimy jakie opcje.
Właśnie na takiej stronie czekał Page będą dostępne i tym samym zablokujemy
sprzedawcę ustawianie tego we własnym zakresie.
Apple Pay i Google Pay są stricte obsługiwane pod parametrem kart, czyli
tutaj właśnie pod tym parametrem.
A dodatkowo mamy jeszcze tutaj obsługę Blika oraz przelewów 24.
Przejdźmy jeszcze tutaj do dokumentacji.
Pod tym linkiem dostępnym tutaj właśnie na dole ekranu znajdziesz wszystkie dostępne
metody płatności, jakie możesz wykorzystać.
Strip Jest ich oczywiście bardzo wiele, ale pamiętaj o tym, że są
dostosowane do różnych rynków.
Tak więc nie wszystkie dasz radę włączyć właśnie w Polsce.
Tak samo jak na przykład Przelewy24 raczej nie uruchomimy za granicą.
A więc wracamy do edytora.
I mamy teraz taką właśnie metodę do tworzenia linków właśnie do takiego
koszyka już utworzoną, co oznacza, że będziemy musieli ją
teraz wykorzystać w naszym serwisie.
I tu też jeden bardzo ważny komunikat dotyczący między innymi
właśnie tych form płatności.
Jest to jeden z powodów, dlaczego nie korzystamy z pluginu Script,
który jest dostępny w Babel.
Posiada on cały szereg ograniczeń, a jednym z nich jest np.
brak opcji dodania innych metod płatności niż kartą kredytową, A więc zarówno to,
jak i inne ograniczenia sprawiają, że na nasze potrzeby przestaje on być użyteczny.
I stąd też jak widzisz wiele rzeczy robimy sami poprzez tworzenie odpowiednich
metod oraz właśnie web łuków.
Ale wracając do serwisu mamy przygotowaną metodę, więc teraz
musimy przystąpić do jej wdrożenia.
Natomiast zanim to zrobimy przejdźmy jeszcze do Data title,
ponieważ chciałbym wprowadzić tutaj kilka bardzo ważnych poprawek.
Przede wszystkim dodajemy sobie tutaj nowy Data Type o nazwie Sale, który
będzie dotyczył po prostu sprzedaży.
I w tym przypadku ja będę starał się wyciągnąć z danych, które będzie nam
zwracał Łebków ze Strike'a jak najwięcej przydatnych informacji.
A więc mam tutaj karencji, czyli w jakiej walucie było dokonana płatność.
Mamy tutaj customer oraz seller.
To jest data type user, czyli zarówno sprzedawca jak i klient,
który dokonał takiej transakcji.
Kolejno wyciągamy sobie kwotę takiej dokonanej płatności.
Pobieram sobie również strip Check out Session strip, Customer ID
oraz strip Payment content.
Wszystko to może nam się w przyszłości przydać.
I to jest takie dobre podejście.
Staraj się po prostu z tych danych wyciągnąć jak najwięcej rzeczy,
ponieważ nigdy nie wiesz, kiedy one mogą Ci się w przyszłości przydać, a dużo
lepiej jest je mieć od razu właśnie w bazie danych.
Kiedy mamy taki sail już utworzony, to wprowadzamy jeszcze odpowiednie zmiany
do bookingu i oczywiście łączymy go ze sprzedażą za pomocą właśnie tej kolumny.
Kolejna mamy tutaj jeszcze serwis FIFA Month, czyli jaką kwotę sobie pobieramy
właśnie za obsługę takiej transakcji.
To też nam się przyda.
I tutaj jeszcze mamy ok.
Mamy tutaj jeszcze status, który był dodane wcześniej, natomiast ja
domyślnie ustawiłem go teraz na komplet, czyli w momencie tworzenia bookingu
właśnie będzie miał taki status nie zakończony i otrzymamy informację, że
płatność została dokonana poprawnie.
Będziemy go sobie zmieniać właśnie tutaj na ten drugi, czyli po prostu na komplet.
Tak będzie wyglądał cały ten schemat.
A skoro tą część mamy gotową, to przejdźmy teraz do samego workflow.
Jestem na stronie listingu.
Przechodzę sobie do workflow, które będzie nam tworzyło taki booking i tu tych zmian
będzie tak naprawdę bardzo niewiele.
Przede wszystkim tworzymy sobie tutaj nowy booking i to co zrobiłem tutaj to
właśnie dodałem to pole service i amount.
Pobieramy sobie to z tego listing z service fee, czyli z custom
state, które mieliśmy wcześniej utworzone.
I tak naprawdę nic więcej tutaj nie robię.
Kolejny krok pozostawiłem bez zmian i są to po prostu przypisania
dat do takiego listingu.
Natomiast teraz trzeci krok to wywołanie tej metody connect checkout page.
I tutaj, tak jak widzisz, musimy przekazać wszystkie te wartości dynamicznie,
czyli przede wszystkim strip account ID danego hosta.
To wyciągamy po prostu z listingu.
Tu analogicznie z listingu wyciągamy sobie link do obrazka.
Na początku musimy dodać ręcznie https, ponieważ script zapisuje to właśnie od
tych dwóch slash i dopiero potem wartość kolejna.
Mamy tutaj nazwę listingu.
Jego opis tutaj wyciągamy z tego pierwszego kroku, czyli z bookingu
Total Price i mnożymy to przez 100.
Jak pamiętasz skrypt pracuje na groszu, akcentach itd.
Więc tą kwotę musimy pomnożyć przez to, żeby uzyskać prawidłową wartość.
Analogicznie tutaj przekazujemy sobie to service fee pomnożone przez to, czyli tą
kwotę, którą my sobie pobieramy z tej transakcji.
Tu mamy Customer email, tu od Client Reference ID.
Tak jak mówiłem przekazujemy ID takiego utworzonego bookingu
i tutaj mamy success URL.
I tutaj, gdybyś nie zrozumiał jak działa ten właśnie parametr website URL, to
zawsze będzie nam zwracał właśnie adres strony głównej.
I tutaj będzie to działało w ten fajny sposób, że jeżeli jesteśmy w wersji dev
no to będzie to łamane na wersję test.
Natomiast w wersji produkcyjnej ten parametr znika, czyli nie musimy tego
zamieniać na IS and live version itd.
I dodatkowo jeśli w przyszłości podepniemy własną domenę to ten web site
automatycznie nam się zaktualizuje i nie musimy potem pamiętać, żeby
poprawiać to w serwisie.
Bardzo przydatny parametr, ja z niego mega często korzystam.
Tak jak widzisz mamy tutaj website humor łamany na stronę booking,
a tam przekazujemy ID jakiego bookingu, żeby wyświetlić
informację o nim i kolejno Cancel url.
Jest to następny bardzo przydatny parametr.
Tym razem jest to diss URL, czyli po prostu przekażemy taki
URL, jaki obecnie mamy na stronie.
Jak pamiętasz my tam mamy dużo parametrów ustawionych np.
właśnie daty takiego bookingu.
Jeśli cofniemy użytkownika z powrotem to chcemy mu to zachować, żeby nie musiał
znowu sobie to wszystko wybierać, tylko trafił dokładnie na taką stronę z
jakiego odesłali na stronę płatności.
Mam nadzieję, że rozumiesz jak działają te parametry.
Nie ma tutaj nic trudnego, trzeba tylko wyciągać właściwe wartości.
Tu pozostawiłem na kroku czwartym tą opcję z tym mailem dotyczącym Reviews.
I tutaj jako ostatni krok to open and external website, czyli po
prostu przekierowanie użytkownika na tę stronę, check out page, którą utworzyliśmy
w tym miejscu i teraz nasze workflow jest już w pełni
gotowe, a flow wygląda następująco.
Gość w naszym serwisie przechodzi na stronę interesującego go listingu.
Właśnie dokonuje tutaj odpowiedniej rezerwacji, czyli tworzy
taki nowy booking.
Przypisujemy te daty do listingu.
Tworzymy dla niego strip checkout page.
Zapisujemy sobie API Workflow, któremu w przyszłości wyślę maila z prośbą o review
i oczywiście kierujemy go na taką stronę.
Natomiast tam przejdzie i dokona zakupu.
Ale musisz pamiętać, że znów jest to zewnętrzna strona strip, czyli tam się coś
dzieje, a my musimy sobie po naszej stronie odebrać te dane,
no i sprawdzić, czy rzeczywiście taka transakcja miała miejsce
i czy odpowiednio się wykonała.
A więc jak się domyślasz, w tym celu musimy sobie utworzyć back and workflow
i znów nasłuchiwać na odpowiedni event.
A więc przechodzimy do back end Workflow.
Ja sobie tutaj już podzieliłem i tu mam script connect
i znów ten condition all będzie dokładnie taki sam jak wcześniej, czyli
ta blokada tych adresów IP.
Standardowo zaznaczamy sobie tutaj wszystkie te check boxy.
Klikasz Detect data i tworzysz ten taki URL inicjalizacji,
który musimy podpiąć w strajk.
A więc kiedy sobie to utworzysz, to wracamy
standardowo do naszego konta strip.
Przechodzimy tutaj będąc cały czas w Test Mode.
Pamiętaj, że pracujemy tylko i wyłącznie w trybie testowym do Developers.
Web Hook i tutaj dodajemy właśnie taki nowy web hook.
Ja mam go tutaj ustawionego, więc mogę sobie na niego kliknąć
i przejść tutaj do ustawień.
Czyli standardowo wprowadzasz tutaj ten adres, zapisz ala jest na końcu
i na jaki event nasłuchuje?
Otóż jak pamiętasz w jednej z poprzednich lekcji mówiłem Ci, że event checkout
session completed będzie obsługiwał sprzedaż niezależnie od
tego, czy była to subskrypcja czy jednorazowy zakup.
A więc właśnie możemy wykorzystać ten event.
Natomiast jeszcze zanim tutaj, wróćmy do web chłopków i
zróbmy to tak, jak powinieneś robić Ty, czyli Add endpoint.
Wprowadzasz tutaj URL i tym razem musisz zaznaczyć tą opcję w ten sposób.
Dlaczego tak?
Ponieważ jak pamiętasz tworzymy ten link do sprzedaży nie na swoim koncie.
Tak jak mówiłem, pieniądze nie będą trafiać bezpośrednio do nas,
tylko na koncie sprzedawcy.
Dlatego też właśnie możemy sobie tutaj nasłuchiwać eventy nie na swoim koncie,
ale właśnie na koncie takiego połączonego z nami usera.
Czyli jeszcze raz tutaj ten link.
Te skrypty możesz zostawić puste.
Tutaj koniecznie zaznaczamy tą opcja.
Wybieramy tutaj Check out.
Session completed i klikamy And Add point.
I standardowo właśnie musimy sobie to zainicjować, czyli jak się
domyślasz dokonać zakupu.
Ja już to wcześniej zrobiłem i mój web hook został właśnie tutaj
odpowiednio ustawiony i działa.
Jak widzisz mamy tutaj type ustawiony na connect, czyli nasłuchuje
właśnie na dane nie ze swojego konta, tylko z konta połączonego sprzedawcy.
A jak to wszystko będzie wyglądało w praktyce?
Otóż przechodzę sobie tutaj.
Jestem zalogowany na koncie gościa i przeszedłem pod listing wystawiony
właśnie na koncie demo hosta, ponieważ dla niego właśnie utworzyliśmy sobie taki
flipa kont i wpisaliśmy sobie właśnie tego jego ID.
No i teraz tak.
Tutaj mogę standardowo utworzyć sobie jakiś booking.
Wybieramy tutaj jakieś dane np.
tak.
Jeden gość Mamy tutaj teraz kwotę, którą zapłacił właśnie user czyli gość
oraz te dodatkowe opłaty m. in.
naszą opłatę, opłatę za czyszczenie.
A więc klikam book i powinno się odpalić właśnie utworzone przez nas takie
workflow, które skieruje mnie właśnie na stronę płatności strip.
Klikamy.
Jak widzisz zostałem przekierowany.
Mamy tutaj te wszystkie informacje, czyli nazwę listingu.
Tu przekierował mi się dobrze, bo on się nazywa main listing.
Przepraszam, zapomniałem, że to jest właśnie taka dziwna nazwa.
Mamy tutaj kwotę do zapłaty, oczywiście w złotówkach, a nie w dolarach,
bo tak sobie to ustawiliśmy.
Mamy tutaj opis, mamy fotkę takiego listingu.
Mamy te metody płatności, które wybraliśmy, czyli Big karta oraz przelewy.
Ja wybiorę po prostu opcję zapłaty kartą na koncie testowym.
Jak się domyślasz, musimy tu wykorzystać te same dane karty, z których
korzystaliśmy wcześniej, czyli 4.2. W ten sposób kolejno oczywiście jakaś
data na przód, kod CVC wpiszmy tutaj np. Janus.
Są oczywiście zakupy testowe.
Klikam zapłać i teraz powinienem zostać przekierowany na
stronę bookingu, jeśli wszystko nastąpi poprawnie.
Wygląda, że tak jest.
Trafiłem na stronę bookingu.
Tu mamy Client Reference ID, czyli ID takiego bookingu.
Oczywiście Twoim zadaniem domowym będzie dopracowanie tej strony
tak, żeby wyświetlała po prostu te wszystkie informacje związane z bookingu.
Nas natomiast chwilowo to nie interesuje.
Interesuje nas tylko tyle, że taka płatność została dokonana poprawnie,
a jeśli tak, to co wtedy mamy zrobić?
Właśnie po naszej stronie.
Czyli wracamy sobie tutaj do edytora, tutaj do naszego back and workflow.
Powinny Ci wskoczyć tutaj te wszystkie dane dotyczące transakcji i
wyglądają one w ten sposób.
Jak mówię, znów jest tu masę informacji, a my postaramy się z tego wszystkiego
powyciągać właśnie to, co nas interesuje i w ten sposób przypisać
to właśnie do tego obiektu SAIL w naszej bazie danych.
A więc klikam sobie tutaj Cancel i to co robię w pierwszej kolejności to tak
wyszukuje sobie taki booking poprzez właśnie ten client Reference ID,
który przekazaliśmy i zmieniam jego status na complete.
Tutaj jeśli padły nam dane, to znaczy, że płatność została dokonana poprawnie.
Następnie tworzymy nową sprzedaż.
Jak widzisz tutaj wyciągam standardowo wszystkie dane z obiektu, który
otrzymaliśmy na nasz web hook, czyli tutaj karencji.
Tutaj przypisuję sobie gościa, a tutaj hosta oczywiście z tego bookingu.
Tutaj wyciągam almond total, tutaj wyciągam ten strip checkout session.
W tym przypadku właśnie ID customer, a tutaj ten object payment.
I teraz mając utworzoną taką salę w trzecim kroku po prostu
przypisujemy ją do tego bookingu.
Oczywiście na końcu mógłbyś jeszcze zadbać o to, żeby tutaj np.
wysłać maila właśnie do kupującego z potwierdzeniem takiej
transakcji z wykorzystaniem np. serwisu Sunrise.
Ale to są oczywiście już proste rzeczy i pozostawiam je w Twojej gestii.
Jak będziesz chciał sobie to dalej obsłużyć zależy już tylko
i wyłącznie od Ciebie. A więc teraz tak.
Wygląda na to, że wszystko jest ok.
Mamy obsłużone sprzedaż.
Mamy obsłużone web hooka, który właśnie nasłuchuje na event dotyczące takiej
transakcji i tworzy nam tu oczywiście wszystko w systemie.
I teraz sprawdźmy, czy te dane odpowiednio wpadają na nasze konto strip
oraz na konto strip sprzedawcy.
A więc przechodzę sobie tutaj.
Jestem na swoim koncie na naszym koncie deweloperskim i to co muszę zrobić to
przejść tutaj do Connect Connected Accounts.
Jak widzisz tutaj mamy jakieś sprzedaże na tym koncie.
Ja już wcześniej dokonałem jednej transakcji, teraz właśnie wpadła nam
druga, a więc możemy sobie to wszystko podejrzeć.
I mamy tutaj właśnie te wszystkie płatności.
Zerknijmy właśnie tutaj na Payments i mamy jedną dokonaną przeze mnie wcześniej.
Ale przejdźmy na tą właśnie najbardziej aktualną i zobacz jakie
informacje tutaj mamy.
Mamy customers, mamy jaki został sprzedany, czyli jaki
listing w tym przypadku?
Mamy tutaj pełną kwotę.
mamy jakie pobrało sobie strip, mamy tutaj jakie my sobie z tego
wszystkiego pobraliśmy oraz kwotę netto, którą otrzyma nasz sprzedawca.
Analogicznie takie same dane będzie właśnie widział na swoim koncie strip.
Nasz host, czyli nasz sprzedawca.
A więc jeżeli przejdę tutaj i przeniosę się właśnie na to konto hosta,
to znów mogę sobie przejść do Payments.
I mam właśnie tak samo obie te transakcje i znów dokładnie te same
dane, czyli cały ten flow.
U nas działa, Możemy dokonywać płatności, możemy przekazywać te pieniądze na konto
naszych sprzedawców, a przy okazji jeszcze na tym zarabiać, pobierając
sobie tutaj odpowiednią opłatę.
Natomiast zanim zakończymy tą lekcję jeszcze jeden bardzo ważny komunikat
dotyczący właśnie tej kwoty netto jaką otrzymuje sprzedawca w naszym serwisie.
Jest to dość uproszczone, ponieważ od razu doliczamy dodatkowo swoją opłatę do ceny
końcowej i wyświetlamy właśnie tą kwotę przy listingu.
Natomiast w przypadku innych serwisów klient bardzo często nie widzi takiej
informacji, tylko taką ostateczną cena jaką ma zapłacić i to właśnie z takiej
kwoty opłatę pobierzemy zarówno my jak i script.
A przy okazji dochodzą tam jeszcze inne bardzo ważne kwestie,
takie jak przewalutowanie.
Jeśli użytkownicy będą płacić w innej walucie i tu koszty też mogą się
nieznacznie różnić, a także sporo innych czynników, które ostatecznie będą wpływać
na to, jaką kwotę na swoje konto otrzyma nasz sprzedawca.
Ja oczywiście mógłbyś próbować to jakoś wyliczać, ale szczerze powiedziawszy od
razu jesteś skazany jak nie na porażkę, to przynajmniej na mega
ciężką i żmudną pracę.
Dlatego też w kolejnej lekcji podejdziemy do tego nieco inaczej i spróbujemy
wykorzystać samo strip oraz dostępne w nim metody do tego, by wyciągnąć te dane
i przypisać je u nas do obiektu side.
W ten prosty sposób, jeśli potem będziesz wyświetlał jakieś statystyki dla
sprzedawcy w swojej aplikacji, będziesz mógł mu pokazać rzeczywistą kwotę
netto, jaka trafia na jego konto bez żadnych przekłamań.
A więc dziękuję Ci teraz za uwagę i do zobaczenia w kolejnej lekcji.