W tym wpisie opowiem o tym czym jest Stripe, ile kosztuje korzystanie z tej platformy, a także przedstawię jeden ze sposobów implementacji. Utworzona przeze mnie aplikacja będzie oparta na Angularze 8 oraz Bootstrapie 4. Będzie to aplikacja, która pokaże jak prosta jest implementacja omawianej w tym wpisie platformy.
Stripe jest to platforma płatności online, która została utworzona w 2010 roku przez dwóch braci z Irlandii: John i Patrick Collisonów. Głównym założeniem było utworzenie globalnego oraz prostego w implementacji narzędzia służącego do płatności online. Skierowana jest do małych i średnich spółek działających w e-commerce. Platforma ta obecnie działa w ponad 100 krajach, a od 9 września 2019 roku także w Polsce. Pozwala klientom dokonywać płatności w ponad 130 walutach, również podczas dokonywania płatności z Apple Pay oraz Google Pay. Obecnie Stripe wyceniane jest na ponad 22 mld dolarów amerykańskich, a jednym z inwestorów jest Elon Musk.
Stripe daje możliwość:
- obsługi jednorazowych transakcji, np. zakupu kursu;
- obsługi subskrypcji, gdzie cyklicznie pobierana będzie odpowiednia kwota z danego konta;
- obsługi księgowości;
- obsługi rozliczeń.
Koszta
Poza prostotą implementacji Stripe charakteryzuje się niskimi kosztami utrzymania. Za każdą transakcję ponosimy stałą opłatę 1 zł oraz dodatkowo procent od kwoty, jaką klient nam zapłacił. W przypadku płatności z Europy ponosimy koszt w wysokości 1,4%, zaś w przypadku płatności poza europejskich 2,9%.
Poza tym, warto wspomnieć, że aktywacja platformy jest bezpłatna. Dodatkowo, nie ponoszone są żadne opłaty za korzystanie z platformy, tak samo w przypadku nieudanych transakcji lub zwrotów.
Implementacja
Po założeniu konta na stronie stripe.com oraz uzupełnieniu profilu odpowiednimi danymi, możemy przystąpić do implementacji metodą, która do działania nie wykorzystuje serwera.
Jak wspominałem we wstępie, utworzona aplikacja będzie oparta na Angularze 8. Jest ona prosta, dlatego nie będę opisywał, w jaki sposób została zbudowana, a od razu przejdę do implementacji Stripe. W repozytorium znajdziecie kod początkowy aplikacji – katalog start oraz finalny kod – katalog final z zaimplementowanymi płatnościami.
Aplikacja posiada trzy widoki: stronę główną, potwierdzenie powodzenia transakcji, potwierdzenie niepowodzenia transakcji.
Poniżej znajduje się widok strony głównej z listą dostępnych produktów.
Poniżej znajduje się widok strony potwierdzającej dokonanie płatności.
Poniżej znajduje się widok strony, informujący o płatności zakończonej niepowodzeniem.
Poniżej znajduje się widok, który jest wyświetlany podczas wprowadzania danych do płatności.
Naszym pierwszym krokiem będzie włączenie płatności w panelu zarządzania. W tym celu wchodzimy do zakładki Settings, a następnie Checkout Settings i po prawej stronie włączamy usługę.
Kolejnym krokiem będzie utworzenie produktów, jakie będą dostępne dla naszych klientów. Przechodzimy zatem do zakładki Products i klikamy New, po czym wypełniamy formularz, wprowadzając nazwę, walutę (w jakiej oczekujemy zapłaty), koszt oraz obrazek. Jeżeli prześlemy obrazek to zostanie on wyświetlony naszym klientom, podczas wprowadzania danych potrzebnych do zakończenia transakcji.
Po przygotowaniu produktów pozostało nam dokonać implementacji w naszej aplikacji.
Na początek musimy dodać bibliotekę Stripe do naszej aplikacji. Ważne jest, by zawsze dodawać bibliotekę podaną na stronie Stripe. Możemy ją znaleźć w dokumentacji lub klikając na dany produkt, a następnie Use the Checkout. Kod dodajemy do pliku index.html
<script src="https://js.stripe.com/v3/"></script>
Kolejnym krokiem będzie utworzenie globalnego obiektu Stripe, który w konstruktorze przyjmuje argument będący kluczem do naszego konta. Należy pamiętać, aby wprowadzić klucz testowy. Można go znaleźć na głównej stronie w panelu zarządzania. Obiekt tworzymy w pliku index.html.
<script>
var stripe = Stripe('id');
</script>
Teraz przejdźmy do głównego komponentu naszej aplikacji, czyli do HomeComponent. W pliku home.component.ts dodajemy deklarację utworzonej w poprzednim kroku zmiennej globalnej.
declare var stripe: any;
Po utworzeniu deklaracji zmiennej globalnej możemy utworzyć metody, które będą wywoływane przy kliknięciu odpowiedniego przycisku
onBuyAngularClick() {
stripe.redirectToCheckout({
items: [{
sku: 'id',
quantity: 1
}],
successUrl: 'http://localhost:4200/success',
cancelUrl: 'http://localhost:4200/cancel',
}).then(result => {
console.log(result);
});
}
onBuyVueClick() {
stripe.redirectToCheckout({
items: [{
sku: 'id',
quantity: 1
}],
successUrl: 'http://localhost:4200/success',
cancelUrl: 'http://localhost:4200/cancel',
}).then(result => {
console.log(result);
});
}
onBuyReactClick() {
stripe.redirectToCheckout({
items: [{
sku: 'id',
quantity: 1
}],
successUrl: 'http://localhost:4200/success',
cancelUrl: 'http://localhost:4200/cancel',
}).then(result => {
console.log(result);
});
}
Na obiekcie Stripe wywołujemy metodę redirectToCheckout(), która przyjmuje argument będący obiektem konfiguracyjnym.
Tablica items zawiera informacje o identyfikatorze produktu – mamy do niego dostęp po kliknięciu na dany produkt w panelu zarządzania, a także ilości zamawianego produktu.
Kolejne dwa pola obiektu konfiguracyjnego to adres, do którego klient ma zostać przeniesiony w przypadku transakcji zakończonej sukcesem oraz niepowodzeniem.
Ostatnim krokiem jest wywołanie utworzonych metod w pliku home.component.html
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="/assets/img/kurs angulara.png" class="card-img-top" alt="kurs angulara">
<div class="card-body">
<h5 class="card-title">Kurs Angulara</h5>
<p class="card-text">Podstawowe zagadnienia związane z frameworkiem Angular oraz przykładowe aplikacje.
</p>
<button class="btn btn-primary" (click)="onBuyAngularClick()">Kup</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="/assets/img/kurs vue.png" class="card-img-top" alt="kurs vue">
<div class="card-body">
<h5 class="card-title">Kurs Vue</h5>
<p class="card-text">Podstawowe zagadnienia związane z frameworkiem Vue oraz przykładowe aplikacje.</p>
<button class="btn btn-primary" (click)="onBuyVueClick()">Kup</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="/assets/img/kurs react.png" class="card-img-top" alt="kurs react">
<div class="card-body">
<h5 class="card-title">Kurs Reacta</h5>
<p class="card-text">Podstawowe zagadnienia związane z frameworkiem React oraz przykładowe aplikacje.
</p>
<button class="btn btn-primary" (click)="onBuyReactClick()">Kup</button>
</div>
</div>
</div>
</div>
Podsumowanie
Jak mogliśmy zobaczyć, implementacja Stripe bez wykorzystania serwera jest bardzo prosta i nie wymaga od nas wiele zachodu związanego z formalnościami. Oczywiście, metoda ta posiada wiele ograniczeń, np. brak możliwości utworzenia dynamicznego koszyka, konieczność dodawania produktów w panelu zarządzania. Ograniczenia te możemy rozwiązać, korzystając z drugiej metody implementacji, wymagającej serwera. Opisany przeze mnie sposób również może znaleźć zastosowanie w wielu miejscach w sieci.
