MVP aplikacji w rekordowym czasie z Bubble: Stripe Connect
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 skupimy się na dodaniu do naszego serwisu drugiej metody płatności,
o której wspominałem we wcześniejszej lekcji, czyli Strip Connect.
W tym przypadku strip ma dla nas kilka różnych opcji do wyboru i możemy o tym
doczytać w ich dokumentacji na stronie, którą zaraz zobaczysz na ekranie.
Przejdźmy na odpowiedni adres.
To właśnie link widzisz teraz na dole ekranu.
Mamy tutaj wszystkie informacje o Strip Connect oraz tutaj właśnie o
różnych przykładach wdrożeń.
Nas natomiast interesuje właśnie ta opcja, czyli ten kafelek.
Wystarczy kliknąć.
I znów zachęcam Cię do zapoznania się z całą tą dokumentacją, żebyś odpowiednio
wiedział, co trzeba tutaj zrobić.
Natomiast to co będziesz musiał zrobić to przede wszystkim będąc zalogowanym na
swoje konto Stripes i będąc w dokumentacji możesz to sprawdzić właśnie w tym miejscu.
Ja mam tutaj nazwę swojej firmy, a więc wiem, że jestem teraz zalogowany.
Tak jak Ci mówiłem wcześniej.
W takiej sytuacji taka dokumentacja staje się bardzo mocno interaktywna
i łączy się z naszym kontem.
Twoim głównym zadaniem będzie teraz przejście przez wszystkie te podpunkty
i uzupełnienie tam wymaganych danych.
Jak widzisz ja już tutaj to zrobiłem.
Nawet ten punkt, mimo że on mi się tutaj nie zaznaczył też jest gotowy.
Dostałem odpowiednią informację od Stripes.
Natomiast wystarczy, że klikniesz tu i przejdziesz przez wszystkie
te właśnie podpunkty.
Będziesz musiał uzupełnić tam swoje dane.
Jak widzisz u mnie ten Script connect już tutaj sobie działa.
Mam nadal informację, że review in progress, mimo, że maila dostałem.
Czasami coś tam się delikatnie zatyka na koncie z tripa
i te maile przychodzą z opóźnieniem.
Natomiast nie przejmuj się, po prostu przejdź krok po kroku
przez te wszystkie pytania.
Nie są one trudne.
W którymś momencie będziesz musiał po prostu zeskanować swój dowód tożsamości
i przesłać go po prostu do strip, aby strip wiedział, że jesteś zweryfikowany z
użytkownikiem i nie będziesz tutaj prowadził żadnych nielegalnych akcji.
A więc zamykam to i tak jak mówiłem, przechodzisz przez te wszystkie punkty i
dopiero wtedy, kiedy właśnie te czek boxy będą tutaj zaznaczone, będziesz
mógł przystąpić do dalszej pracy.
Mi całość zajęła chyba około 10 minut, łącznie z tym czekaniem na maila od strip
z informacją, że moje konto zostało poprawnie zweryfikowane.
Kolejna Jeśli to mamy już gotowe, to będziemy mogli przejść dalej i właśnie
tutaj krok po kroku sobie to wszystko wdrażać.
Dodatkowo zobacz jeszcze jedną bardzo fajną rzecz.
Tak jak mówiłem, jeśli jestem tutaj zalogowany, to przy metodach, które
będziemy musieli wywoływać np.
tutaj, strip automatycznie uzupełnia właśnie mój klucz, czyli nie muszę go
szukać, on jest dodawany tutaj automatycznie.
I tak jest to mój prywatny klucz.
Natomiast nie martw się, ja go sobie potem zmienię już po nagraniach, tak
żebyś nie mógł go wykorzystać.
A skoro właśnie to mamy już gotowe, Przeszedłeś właśnie przez ten cały proces
weryfikacji, to przenosimy się na kolejną podstronę, czyli tutaj.
I tym razem też będziemy tutaj wykorzystywać takie konto
Strip Standard takich kont.
Tutaj strip generuje kilka, mamy kilka opcji do wyboru, natomiast zgodnie z ich
dokumentacją właśnie to konto typu standard jest takim najprostszym, za
pomocą którego właśnie możemy zacząć korzystać z Connect
i oczywiście odpowiednio to sobie wdrożyć w naszym serwisie.
Natomiast jak ma wyglądać w ogóle takie wdrożenie?
Tak jak Ci mówiłem już we wcześniejszych lekcjach, to flow będzie
wyglądało następująco.
Przede wszystkim to my najpierw musimy utworzyć konto w Scripts.
To już właśnie zrobiliśmy.
Jesteśmy tutaj w dokumentacji i zweryfikowali sobie to konto właśnie pod
ten tray connect, z którego będziemy mieli zamiar korzystać.
Teraz nasi sprzedawcy w serwisie, czyli hoście będą musieli utworzyć takie właśnie
własne konta, podać tam numer konta bankowego i połączyć to swoje konto
z naszym kontem właśnie przez tą właśnie usługę Connect.
W ten sposób, jeśli potem taki zwykły użytkownik, czyli gość w
naszym serwisie zablokuje sobie jakiś pobyt i za niego zapłaci, to tak jak Ci
mówiłem wcześniej z takiej całej kwoty strip pobiera swoją standardową prowizję.
Dodatkowo my będziemy też pobierać swój procent, natomiast cała reszta pieniążków
będzie wędrowała automatycznie na konto sprzedawcy, który
właśnie taki listing wystawił.
W ten sposób my zarabiamy swoje, Strip zarabia swoje,
a sprzedawca dostaje właśnie całą resztę tej kwoty, a my nie musimy się potem
martwić o zarządzanie takimi płatnościami i przelewami na konta
odpowiednich sprzedawców.
Tak jak mówiłem znów zrobi to wszystko dla nas strip.
A więc stosujemy taką najprostszą metodę, dzięki któremu właśnie będziemy mogli
zarabiać pieniążki, a przy okazji jak najmniej się namęczyć z obsługą
tych wszystkich płatności.
Natomiast skoro to mamy już sobie wyjaśnione, to teraz naszym zadaniem
będzie zgodnie z dokumentacją, którą widzisz na ekranie przygotowanie 3 zapytań
API, za pomocą których będziemy odsyłać naszych hostów na specjalnie dla nich
utworzoną stronę treningową STRIP, gdzie będą mogli odpowiednio utworzyć swoje
konta oraz podać takie dane, które są tam wymagane, a my potem będziemy mogli
przekazywać im te pieniążki z bookingu.
I tutaj znów powtarzam, że tych kont jest kilka.
Mamy standard, Custom i Express.
Jeśli interesuje Cię to wszystko, to oczywiście standardowo zapraszam Cię do
tego, abyś zapoznał się z całą dokumentacją zarówno dostępną na stronie
tutaj kontakt, jak i tutaj, gdzie teraz jesteśmy.
Ja natomiast postaram się wdrożyć ten cały system jak najszybciej.
Pokazać Ci krok po kroku co musisz zrobić, tak, abyś właśnie nie musiał
się w to wszystko wczytywać.
Przynajmniej na razie, ale później zdecydowanie zalecam to zrobić.
A więc przechodzimy tutaj.
Niżej mamy informacje jak zacząć.
Oczywiście tutaj będzie wyglądał cały proces brandingu dla standardowych kont.
Krok po kroku co tutaj będziemy robić.
Natomiast tutaj pierwszym krokiem będzie właśnie utworzenie takiego konta typu
standard i przesłanie tam odpowiednich informacji.
A więc w tym kroku jeszcze raz powtarzam tworzymy sobie za pomocą odpowiedniej
metody, którą właśnie teraz widzisz tutaj na ekranie takie konto standard.
W takim przypadku Script automatycznie przypisuje do niego odpowiednie ID.
Tu mamy najbardziej uproszczoną wersję takiego zapytania, gdzie przekazujemy
tylko typ konta, a więc typ równa się standard.
Natomiast moglibyśmy tutaj przekazać dużo więcej informacji o użytkowniku.
I jeśli jesteś ciekaw jakie informacje tam możesz przekazywać, to wystarczy,
że klikniesz sobie tutaj w ten link.
Ja natomiast będę chciał, aby właśnie ta metoda była najprostsza.
Przekazujemy tam właśnie tylko typ konta, a całą resztę tych informacji
user będzie nam podawał później.
Natomiast mam nadzieję, że w tym momencie dostrzegasz już analogię do tego, co
sami zbudowaliśmy w naszym serwisie.
U nas rejestracja wyglądała dość podobnie, czyli user najpierw podawał maila i hasło,
a my na tej podstawie tworzyliśmy rekord o odpowiednim ID w naszej bazie danych.
Tu główna różnica polega chwilowo na tym, że będziemy mieć samo ID takiego
rekordu i chwilowo nic więcej.
Dlatego też kolejnym krokiem będzie utworzenie linku do takiego konta.
A więc zrób tak jak u nas, aby takie stworzenie strony od brandingu, gdzie
będziemy zbierać informacje o takim użytkowniku, tak aby dowiedzieć się o nim
więcej i tym samym móc dostosować do niego naszą aplikację.
Czyli na przykład w naszym przypadku musieliśmy wiedzieć czy chce on być hostem
czy też gościem i dodatkowo w naszym przypadku to my sami
musieliśmy zbudować od podstaw taką stronę od brandingu, a tutaj script zrobi to dla
nas i wygeneruje odpowiedni link, który będzie do niej prowadził.
Skoro będziemy mieć już takie gotowe puste konto i link, który będzie prowadził na
stronę od brandingu, tak żeby user mógł sobie takie konto potem uzupełnić,
to naszym ostatnim krokiem będzie właśnie przekierowanie go na taką stronę.
I znów u nas odpowiada za to akcja kierująca użytkownika na wewnętrzną stronę
naszego serwisu, czyli właśnie taką stronę budynku, a to z kolei będziemy
go kierować na zewnętrzny adres.
Czyli właśnie na taki link, który utworzymy w tym kroku.
Mam nadzieję, że to porównanie do tego, co robiliśmy sami, sprawiło, że ten
proces jest nieco bardziej zrozumiały.
Oczywiście zaraz wdrożymy go u siebie w praktyce, więc zobaczysz na
własne oczy jak to działa.
Natomiast jeszcze raz podkreślam jeśli będziesz przechodził przez dokumentację
krok po kroku, to naprawdę trudno się zgubić i wdrożenie tego nie powinno zająć
Ci zbyt wiele czasu i tak naprawdę nie jest trudne.
Wystarczy tylko dokładnie doczytać to, co musisz zrobić.
Jeszcze raz podkreślam dokumentacja z tripa jest najlepszą dokumentacją na
świecie i wierz mi, że lepszej nigdzie nie znajdziesz, a zwłaszcza takiej, która by
Cię kierowała właśnie krok po kroku przez to, co musisz zrobić, aby to
wszystko odpowiednio działało.
I tutaj znów jeden bardzo ważny komunikat.
Pamiętaj, że podobnie jak w przypadku abonamentów i zarządzania subskrypcji
przez użytkownika, tak i tutaj wykorzystujemy strony, które
automatycznie generuje dla nas trip.
Wychodzimy bowiem z założenia, że skoro oni zadbali o to, by ten proces był jak
najprostszy dla odbiorcy, to nie ma co utrudniać życia ani sobie,
ani jemu, tylko wykorzystać po prostu dostępne opcje.
A więc skoro wiemy już co mamy zrobić, to teraz możemy przystąpić do dalszego
działania i rzeczywiście wdrożyć te wszystkie kroki do naszej aplikacji.
Ja już takie flow wdrożyłem do swojego edytora, czyli mówiąc prościej
dodałem te dwie metody.
Tak więc teraz byś mógł jak najszybciej wdrożyć ten proces u siebie.
Wyjaśnię Ci krok po kroku co należy zrobić i gdzie poustawiać te wszystkie opcje.
A więc wracamy do edytora.
Przełączamy się tutaj na chwilę i przejdźmy na właściwą stronę.
Zamknijmy panel boczny.
I teraz tak w pierwszej kolejności przechodzimy tutaj do pluginów do API
Connector i dodajemy sobie tutaj ATA API. Ja już to zrobiłem.
Nazwałem je po prostu Strip.
Klikam więc Expand i w pierwszej kolejności musimy zadbać o autoryzację.
Czyli to standardowy ten proces, który już miałeś do czynienia
W tym przypadku dodamy sobie taki jeden standardowy nagłówek autoryzacji,
który będzie działał potem dla wszystkich tych zapytań, jakie
będziemy tutaj dodawać.
Jest to standardowa metoda, którą będziesz wykorzystywał Babel tak, żebyś
się z tym po prostu nie powtarzać.
W każdej tej metodzie osobno, a więc wpisujesz tutaj nazwę np.
script, a kolejno tutaj w tej sekcji Authentication wybierasz z
tej listy private in header.
I klucz wygląda następująco Jest to.
Brr, czyli to już korzystaliśmy Spacja i nasz klucz testowy.
Jak taki klucz testowy uzyskać?
W tym celu wracamy po prostu do Strip.
Coś mi nie działa przełączania, więc pokażę po prostu panel boczny.
A więc wracamy sobie tutaj.
Jesteśmy na naszym koncie w Strip.
Na Home przełączamy się w Test Mode.
I tutaj pokazujemy sobie ten secret i teraz musimy go skopiować,
wrócić do edytora i wstawić tutaj, czyli Beryl, spacja i Twój klucz.
Potem sobie to kopiujesz i wstawiasz również tutaj.
Pamiętaj, żeby wstawić tutaj swój klucz, a nie kopiować mojego.
Ja go oczywiście tutaj potem anuluje, więc on nie będzie aktywny, a Ty nie będziesz
mógł potem nic zrobić, nie wywołać żadnej metody w strip.
A skoro mamy właśnie tutaj już dodany ten nagłówek autoryzacji,
no to zgodnie z tą dokumentacją, czyli tutaj przystępujemy właśnie do kroku
numer 1 i wdrażamy tą pierwszą metodę.
Znowu ja ją sobie tutaj już dodałem.
Nazwałem ją tak jak w script create a standard account.
I mamy tutaj tak akcja JSON Używamy zapytania typu post
wysyłamy zapytanie na taki URL.
Jedyny parametr jaki musimy tutaj przekazać jest stałe.
Nie będziemy go nigdy zmieniać, a więc zostawiamy go na private i tutaj na
query String jest to type równe standard.
Zaznaczasz oczywiście ten checkbox, jeśli to tutaj odpowiednio dodałeś.
No to standardowo klikasz w ten button i w ten sposób tak jak mówiłem
będziesz tworzył takie standard kont.
Jeśli ja bym to teraz tutaj wywołał jeszcze raz, to zaraz
zobaczysz co się stanie.
Klikam tutaj.
I takie nowe konto zostało dla mnie ustawione.
Tu jest jego ID.
Możemy sobie to podejrzeć tutaj w Show RAW Data.
Mamy już tutaj wszystkie informacje id takiego konta.
Tak jak mówiłem, a tutaj powinny być wszystkie informacje o użytkowniku.
Znów, tak jak mówiłem, tutaj wszystko jest puste, ale potem właśnie będziemy kierować
użytkownika na tą stronę do brandingu i on nam przekaże te wszystkie
wymagane informacje.
Nas na razie interesuje tylko to, a więc ID takiego konta.
Skoro mamy ID takiego konta to będę też chciał je zapisywać po stronie
bubla, a więc w tym celu klikasz tutaj Save.
Przechodzimy do Data Data Type User i dodajemy dwa nowe
pola, które będą nam tutaj potrzebne.
Pierwsze to Strip Account ID.
To jest zwykły tekst i będziemy potem przekazywać tam ID danego konta,
a drugie to Strip account created to będziemy wiedzieć czy użytkownik
rzeczywiście przeszedł przez cały ten odbiornik, podobnie zresztą jak u nas,
czyli trochę podobnie, tak jak w tym polu będziemy mieć tutaj jedną możemy sobie
domyślnie ustawić, a więc kiedy ten proces się zakończy,
użytkownik poda tam wszystkie dane i zakończy dodatkowo ten proces z sukcesem.
Zmienimy tą wartość później na jest.
A więc proszę dodaj teraz te dwie wartości, te dwa pola.
OK, jeśli mamy to dodane.
I dodatkowo utworzyłeś tą metodę i ją tutaj zainicjował łeś
i masz taką odpowiedź czyli ID account to możesz sobie zobaczyć takie konto
rzeczywiście wskoczyło Ci na Twoje konto script.
W tym celu wracamy sobie tutaj.
Jesteśmy w Text mode i przechodzimy tutaj w Connected Accounts.
Jak widzisz ja mam dwa jedno, gdzie już przeszedłem przez cały taki proces i to
drugie, które właśnie przed chwilą utworzyliśmy.
W tej chwili ma ono status strict, ponieważ użytkownik tak jak mówię jeszcze
nie prowadził tam żadnych informacji.
Na razie tylko właśnie utworzyliśmy sobie takie puste konto.
A więc skoro pierwszy krok za nami, no to oczywiście musimy
przystąpić do kroku nr 2.
W tym celu wracamy do edytora.
I dodajemy tutaj kolejną metodę.
Zgodnie z dokumentacją Strip może znów doczytać sobie wszystkie te informacje.
Ja natomiast pokażę Ci od razu jak to wszystko poustawiać
i nazwałem Create an account link, czyli po prostu będziemy teraz tworzyć link
do takiego wcześniej utworzonego konta.
I znów mamy tutaj action.
Podjęliśmy wyżej JSON zapytanie typu POST pod taki adres URL i tym razem
przekazujemy tutaj 4 parametry gdzie jeden będzie private ponieważ jest
stały, czyli type w tym przypadku jest równy, a kąt od boarding a pozostałe
to są właśnie parametry dynamiczne.
I już Ci mówię do czego one służą.
A kąt to będzie tutaj id tego kąta utworzone wcześniej, tak żeby strip
wiedział do jakiego kąta ma utworzyć link.
I tu odznaczamy Pivot.
Zaznaczamy Query String type Jeszcze raz stałe równe a
kont Recording zaznaczamy private.
Zaznaczamy Query String.
Tu z kolei mamy dwa bardzo ważne parametry Refresh url oraz return URL.
Ten drugi parametr, czyli return URL to adres, na który będziemy kierować
użytkownika, kiedy on przejdzie poprawnie przez cały ten proces.
Tutaj utworzenia tego konta i podania tych wszystkich informacji.
Ja na razie podałem tutaj tylko link do Dashboard u.
Co do widoku host listing i analogicznie zrobiłem tutaj.
Natomiast Refresh URL odpowiada za przekierowanie użytkownika na
stronę w momencie kiedy właśnie taki link tutaj wygasł, albo użytkownik już
wcześniej uzupełnił tę informację o do jakiego konta.
Przypadkowo jeszcze gdzieś nie ukryliśmy takiego banana i kierujemy
go tam z powrotem.
Tak więc tu oczywiście w takim prawdziwym serwisie będziesz musiał zadbać
o podanie właściwych adresów.
Natomiast jak mówię, ja na razie tutaj kieruję użytkownika w obu przypadkach na
dashboard z widokiem Host Settings i tutaj odznaczamy sobie private, bo wiadomo
będziemy tutaj przekazywać różne URL w zależności od tego, czy mamy do czynienia
z naszą aplikacją w wersji testowej czy produkcyjnej.
Natomiast zaznaczamy Query String, czyli query.
String idzie dla wszystkich parametrów, a private tylko dla tego jednego.
Standardowo zaznaczamy sobie ten checkbox i znowu inicjalizacja.
Jak to odpalić? Powinieneś otrzymać taką odpowiedź.
Czyli mamy tutaj ten obiekt, który nas interesuje,
a nas tego wszystkiego najbardziej interesuje to, czyli właśnie URL, na
który mamy skierować naszego usera.
Mam nadzieję, że rozumiesz to flow.
Najpierw tworzymy konto, potem link do takiego konta, a teraz właśnie
użytkownika będziemy kierować na ten link.
Trzeba nam uzupełni informacje do tego konta i tam podał wszystkie wymagane dane.
A więc skoro te dwie metody mamy już gotowe, to teraz musimy je
odpowiednio wdrożyć w serwisie.
A więc wracamy na stronę Dashboard.
Ja już tutaj na niej jestem.
Zakładka Design Przechodzimy tutaj do tej grupy, którą już wcześniej sobie dodałem.
Ja ją nazwałem po prostu Connect Group, a tutaj dodałem prostą informację, czego
oczekujemy właśnie od naszego klienta, czyli prosimy go o to, aby połączył swoje
konta bankowe tak, abyśmy mogli przekazywać mu właśnie
pieniądze z takich zablokowanych pobytów.
Pamiętaj, że Twoi klienci bardzo często nie będą wiedzieć czym jest strip
i o co ich w zasadzie prosisz.
Dlatego nazwali ten button strip Connect.
To Twój odbiorca nie będzie wiedział o co chodzi, nie będzie wiedział co
to jest i co Ty mu każę zrobić.
Natomiast jeśli tak jak tutaj, dasz mu jasny komunikat, że potrzebujesz numeru
jego konta, aby mu przelewać pieniążki, to zdecydowanie dużo szybciej kliknie w taki
button i zrobi to, czego od niego wymagamy.
A więc mamy tutaj odpowiedni tekst, mamy odpowiedni button do niego dodajemy
sobie workflow i znów ono jest proste.
Najpierw wywołujemy właśnie tą pierwszą metodę, która tworzy Standard Account.
Kolejno to ID takiego konta przypisuje sobie tutaj
do parent usera, czyli tutaj to pole Script account ID.
Kolejno tworzymy link właśnie do takiego konta, które się nam utworzyło.
I znów tutaj powinniśmy przekazać odpowiednie wartości zarówno dla
wersji produkcyjnej, jak i testowej.
Pokażę Ci nieco inny sposób, jak możesz to zrobić to tutaj do tej wersji Dashboard.
To jest home URL Twojej strony, więc zamiast się bawić w tą wersję
Isn't Live version itd.
Możemy to zrobić nieco inaczej i tu wybrać sobie.
URL i website from URL.
I teraz będzie to łamane na stronę Dashboard.
To łamanie tutaj już istnieje, a więc musimy podać tylko tą część Dashboard i w
naszym przypadku ten widok host listing.
O tak, w ten sposób.
Analogicznie to samo musimy zrobić tutaj.
Oczywiście, jeśli chcesz w obu przypadkach kierować użytkownika na tą samą stronę.
U nas tak. A więc URL.
I tutaj doklejamy tą część.
Natomiast w przypadku return url będziemy dostawać informację, że
użytkownik poprawnie przeszedł przez cały proces właśnie tego brandingu.
I tu żeby sprawdzić, czy rzeczywiście tak się stało, masz dwa sposoby albo
właśnie wykorzystanie tego adresu.
I tu na przykład moglibyśmy sobie dodać jeszcze parametr o nazwie po prostu user.
Równa się i tu chciałbym wstawić powiedzmy Current User unique ID.
I teraz możesz oczywiście dodać tutaj w tym boardzie dodatkowo metodę, że
jeśli taki parametr się pojawi czyli.
Condition is true.
I wybieramy URL get data from page URL to będzie user.
Oczywiście tutaj odnoszące się do obiektu user, czyli jeśli taki
parametr nie jest pusty.
Czyli is not empty, to oznacza to, że użytkownik poprawnie przeszedł przez ten
strip boarding i my teraz możemy sobie oznaczyć właśnie jego konto jako aktywne.
Jeszcze raz czy na pewno podaliśmy tutaj User tag user, A więc
wyglądałoby to mniej więcej tak.
Data Freak Boy Changes Fink Current user.
Stripes account created.
Równa się jest.
Natomiast jeśli nie chcesz wykorzystywać tej strony.
Return URL.
Chciałbyś mieć jakąś osobną lub coś w tym stylu?
No to Strip zapewnia też odpowiedni event, na którym możemy sobie nasłuchiwać.
W tym celu wracamy do dokumentacji.
Przechodzimy tutaj niżej.
I będziemy mieć tutaj. O właśnie widzisz.
Mamy tutaj nasłuch na Accounts Updated i możemy otworzyć
odpowiedni web hook i wtedy po prostu sprawdzać, czy rzeczywiście takie
konto zostało w pełni utworzone.
Wiesz już jak tworzyć takie web huki zarówno po naszej stronie,
jak i w samym strajku.
Tak więc to którą metodę tutaj wybierzesz do oznaczania właśnie tego konta,
że zostało w pełni aktywowane.
Frajdę pozostawiam już Tobie.
A my wracamy do edytora.
I tak tworzymy konto ID, przypisujemy do usera, tworzymy
link i teraz kierujemy użytkownika właśnie na taką stronę.
Natomiast pamiętaj tutaj o jednej bardzo ważnej rzeczy żeby użytkownik przeszedł
przez ten cały proces, będzie musiał posiadać albo założyć konto z tripa.
Ja zrobiłem to w ten sposób, że mam założone drugie konto na taki prywatny
email, z którego często korzystam właśnie do testów.
I Tobie radzę to samo zrobić.
W ten sposób będziesz miał takie jedno oficjalne to takiej pracy i rzeczywiście
pobierania tam pieniążków itd.
A drugie właśnie takie testowe, gdzie będziesz sobie mógł właśnie
sprawdzać różne rzeczy bez konieczności i obawy, że jedno konto
wpłynie Ci na drugie i coś pójdzie nie tak.
Pamiętaj oczywiście o tym, żeby je założyć na maila, do którego będziesz miał dostęp,
bo strajk będzie właśnie prosił Cię o zalogowanie się na takie konto.
Natomiast jeśli to już wdrożyliśmy, czyli właśnie mamy cały ten system,
no to spróbujmy go teraz przetestować.
Przechodzę sobie tutaj do naszej aplikacji, odświeżamy.
Zaloguj się jako demo host.
ponieważ na koncie hosta jest to wymagane utworzenie tego connect back na kont.
Klikam tutaj i teraz powinienem zostać przekierowany
właśnie na taką stronę od brandingu.
Ile to zajmuje, ale wygląda na to, że jest ok.
I tak jak mówiłem musimy tutaj przejść przez ten cały proces.
Ja już to raz zrobiłem, ale spróbuję przejść z Tobą jeszcze raz
i zobaczymy czy nam się to uda, czy dam radę założyć kolejne konto.
A więc klikam prześlij to hasło i przejść przez ten proces jeszcze raz.
Znów oczywiście kod.
I jak widzisz mam tutaj informacja o tym wcześniejszym koncie, które utworzyłem,
Ale spróbujmy przejść jeszcze na nową firmę.
Klikam Kontynuuj.
Wybieram tutaj osoba fizyczna.
Jeśli to jest cały proces, przez który będzie musiał przejść Twój użytkownik.
A więc wpisuję sobie tutaj Adam.
Na przykład testowy mail pozostaje bez zmian 0 1 0 1.
Tak, wpiszmy tutaj.
Tutaj mój numer telefonu.
Klikam Kontynuuj.
OK, nic nie muszę podawać.
Pamiętaj jesteśmy na koncie testowym, więc nie musimy tutaj rzeczywiście podawać
jakichś prawdziwych informacji, ale wybierzmy tutaj oprogramowanie
Nasza strona. Niech to będzie na przykład taka.
Chociaż może, może nie.
Może tutaj wpiszmy jakąś inną?
Niech to będzie na przykład z tej strony.
Wiem, że jeszcze jej nie mamy, ale mówię to jest konto testowe.
Dodajmy tutaj Lorem ipsum.
Klikamy Kontynuuj.
OK.
Tu jesteśmy w trybie testowym, więc mogę wpisać cokolwiek tylko po to, aby właśnie
tutaj jakieś cyfry PL 1.2.3, cokolwiek, żeby mi tutaj wskoczyła ta
prośba z opcją o stawianie konta testowego.
OK, widzę, że nie ma tak łatwo, więc daj mi chwilę.
Ja sobie namierzy numer swojego konta i zaraz postaram się je
tutaj jakoś sobie wkleić.
To powinno być numer.
To powinien być numer konta testowego.
Możesz tutaj sprawdzić swój własny i zobaczysz, że potem
zacznie krzyczeć, że jest błędne i poda Ci numer konta testowego,
które trzeba wykorzystać.
A więc klikam kontynuuj.
Tutaj musimy podawać właśnie te deskryptory.
Spróbujmy w ten sposób.
Oznaczmy tą opcję.
Tutaj wpiszę znów swój numer.
Klikam Kontynuuj.
Nie chcemy tutaj wspierać ochrony klimatu.
A więc klikam. Wyrazi zgodę i prześle.
I właśnie takie konto zostało tutaj odpowiednio wdrożone.
A my musimy teraz zadbać o to, aby właśnie zablokować Józefowi
ponowną opcję kliknięcia w ten przycisk.
A więc dodajmy tutaj jeden prosty condition, czyli.
Current user.
Account created jest równe Yes.
Teraz zaznaczamy opcję, że ten button jest nie klikalne i następnie
zmienimy jeszcze tutaj ten tekst.
Na.
Connected i zerknijmy, czy to zadziałało.
Odświeżamy.
Wygląda na to, że nie mogę tutaj drugi raz połączyć się ze Street Connect.
Takie konto zostało dla mnie utworzone.
Jak przejdę na swoje, czyli administratora konto, czyli admina serwisu i tutaj
odświeża, to powinienem mieć dwa połączone konta.
Zaraz zerkniemy czy tak się rzeczywiście dzieje.
Aha, jestem właśnie na przepraszam.
Przełączył mnie tutaj na to konto, które przed chwilą utworzyliśmy,
czyli konto hosta.
Jak widzisz, na razie mamy je tutaj utworzone.
Jesteśmy w trybie testowym, a więc teoretycznie będziemy mogli
pobierać te pieniądze za booking, a my jako admini będziemy
mogli pobierać z tego procent.
Czyli pokażecie jak to wygląda właśnie od strony mnie jako admina.
I ok. Loguję się na to swoje oficjalne konto.
Przełączyć się oczywiście w tryb testowy, bo w takim działamy i w Connected Account.
Wygląda na to, że wszystko jest ok.
Mamy 12 designs, czyli tak jak powinno być i to jedyne, które nam posłużyło
do inicjalizacji tej metody.
Żeby oddać tutaj nie przeszkadzało możesz na nie kliknąć.
I wybrać tutaj opcję Remove account to nigdy nie będziemy mieć tych
informacji, więc niepotrzebnie nam zaśmieca tło Dashboard.
A więc nasze zadanie z tej lekcji zostało w pełni osiągnięte.
Ja dziękuję Ci za uwagę i widzimy się już w kolejnej lekcji, gdzie będziemy dalej
kontynuować naszą pracę z płatnościami strip.