Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Stripe to platforma do przetwarzania płatności, która umożliwia dodanie gotowej strony kasy do witryny internetowej oraz akceptację i zarządzanie płatnościami online. Jest bardzo popularny ze względu na łatwość obsługi, obszerną dokumentację, obsługę płatności lokalnych, opcje dostosowywania i brandingu, subskrypcje, fakturowanie i zapobieganie oszustwom.

Korzystając ze Stripe, możesz akceptować płatności z różnych źródeł, w tym kart kredytowych i debetowych, Apple Pay i Google Pay.

Dodanie Stripe Checkout do aplikacji Next.js

Stripe checkout możesz zintegrować z aplikacjami stworzonymi przy użyciu różnych technologii, w tym Next.js.

W tym samouczku założono, że masz skonfigurowaną witrynę e-commerce Next.js i zawiera tylko przewodnik dotyczący dodawania usługi Stripe Checkout do witryny.

Konfigurowanie konta Stripe i pobieranie kluczy API

instagram viewer

Aby korzystać z usługi Stripe Checkout, musisz utworzyć konto Stripe i uzyskać klucze API. Klucze API składają się z klucza do opublikowania i tajnego klucza, którego będziesz używać do uwierzytelniania żądań ze swojej aplikacji do Stripe API.

Wykonaj następujące kroki, aby skonfigurować konto Stripe:

  1. Idź do Witryna Stripe'a i kliknij przycisk „Zarejestruj się”.
  2. Wprowadź swój adres e-mail, imię i nazwisko, kraj i hasło, a następnie kliknij przycisk „Utwórz konto”.
  3. Zweryfikuj swój adres e-mail, postępując zgodnie z instrukcjami zawartymi w wiadomości e-mail, którą wyśle ​​do Ciebie Stripe.
  4. Na pulpicie nawigacyjnym Stripe kliknij „Aktywuj płatności” i odpowiedz na pytania, aby zakończyć proces konfiguracji konta. Te pytania mogą dotyczyć nazwy firmy, adresu i informacji bankowych. Do celów programistycznych użyj trybu testowego.
  5. Skopiuj klucze API z karty „Programiści” do pliku .env w folderze aplikacji.

Będziesz teraz mieć dostęp do konta Stripe za pomocą kluczy API.

Instalowanie pakietu Stripe npm

Uruchom to polecenie, aby zainstalować pakiet Stripe npm.

pasek instalacyjny npm

Zaimportuj bibliotekę Stripe na stronę komponentu kasy.

import Naszywka z'naszywka';

W folderze API utwórz nowy plik o nazwie plik checkout-session.js. Zainicjuj obiekt Stripe za pomocą kluczy API pobranych z pulpitu nawigacyjnego Stripe.

konst pasek = wymagać('naszywka')(proces.env. STRIPE_SECRET_KEY);

W funkcji obsługi pobierz elementy do pobrania z parametrów ciała.

eksportdomyślnyasynchronicznyfunkcjonowaćtreser(żądanie, rez) {
konst { item } = req.body;
};

Utwórz obiekt sesji kasy do funkcji obsługi i przekaż elementy.

konst sesja = czekać na stripe.checkout.sessions.create({
 Typy_metod_płatności: ['karta'],
 pozycje_linii: [
 przedmiot,
 ],
 tryb: 'Zapłata',
 adres_adresu sukcesu: `${req.headers.origin}/?success=true`,
 anuluj_url: `${req.headers.origin}/?canceled=true`,
});

Oto, co oznaczają węzły, które przekazujesz do obiektu sesji:

  • typy_metod_płatności: typy metod płatności akceptowane w sesji realizacji transakcji. Przejrzyj listę dostępnych metod płatności w Dokumentacja paska.
  • pozycje_linii: lista przedmiotów, które kupuje użytkownik.
  • tryb: Tryb sesji kasowej. Jeśli elementy do kasy obejmują co najmniej jeden przedmiot cykliczny, przepustka „subskrypcja”.
  • adres_adresu sukcesu: Pasek adresu URL przekieruje użytkowników, jeśli płatność się powiedzie
  • anuluj_url: pasek adresu URL przekieruje użytkowników, jeśli anulują płatność.

W sumie plik checkout-session.js powinien wyglądać tak:

eksportdomyślnyasynchronicznyfunkcjonowaćtreser(żądanie, rez) {
Jeśli (wymagana metoda 'POST') {
konst { koszyk } = żądaj.ciało;
próbować {
konst sesja = czekać na stripe.checkout.sessions.create({
 pozycje_linii: [
 wózek
 ],
 tryb: 'Zapłata',
 adres_adresu sukcesu: `${req.headers.origin}/success`,
 anuluj_url: `${req.headers.origin}/cancele`,
 });
 przekierowanie res.(303, sesja.url);
 } złapać (błąd) {
 res.status (kod błędu.status || 500.json (komunikat o błędzie);
 }
 } w przeciwnym razie {
 res.setHeader('Umożliwić', 'POST');
 res.status(405).koniec('Niedozwolona metoda');
 }
}

Ta funkcja używa teraz metody try/catch do przekierowywania użytkowników w przypadku wystąpienia błędu podczas realizacji transakcji. Po utworzeniu trasy API, która będzie przetwarzać płatność, następnym krokiem jest utworzenie komponentu kasy do obsługi procesu kasy.

Sprawdź ten post na tworzenie tras API w Next.js aby uzyskać bardziej szczegółowe wyjaśnienie tras API Next.js.

Tworzenie komponentu kasy

Aby przetworzyć kasę, musisz zainstalować bibliotekę @stripe/stripe-js za pomocą NPM.

npm zainstaluj @stripe/stripe-js

Biblioteka @stripe/stripe-js to narzędzie ładujące, które pomoże Ci załadować instancję Stripe.js.

Po zakończeniu instalacji utwórz nowy plik w katalogu /components o nazwie /components/checkout.js. Następnie wywołaj funkcję loadstripe z biblioteki @stripe/stripe-js, przekazując klucz do opublikowania jako argument.

import { załaduj pasek } z'@stripe/stripe-js';
konst stripePromise = loadStripe(
 proces.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() zwraca obietnicę, która rozwiązuje się z nowo utworzonym obiektem Stripe po załadowaniu Stripe.js.

Następnie dodaj funkcję, aby utworzyć sesję kasy w komponencie.

eksportdomyślnyfunkcjonowaćWymeldować się({wózek}) {
konst uchwyt do kasy = asynchroniczny () => {
próbować {
konst pasek = czekać na pasek Obietnica;
konst sesja kasowa = czekać na axios.post("/api/sesja kasowa", {
 wózek,
 });


konst wynik = czekać na stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
Jeśli (wynik.błąd) {
 alert (wynik. komunikat o błędzie);
 }
 } złapać (błąd) {
konsola.log (błąd);
 }
 };
powrót (


 </div>
 );
}

Ta funkcja używa Axios, aby wywołać interfejs API utworzony w folderze /api w celu pobrania sesji wyewidencjonowania.

Dodaj przycisk kasy w instrukcji return, który po kliknięciu uruchomi funkcję handleCheckout.

Możesz wywołać komponent kasy na stronie koszyka.

Obsługa przekierowań ze Stripe

W ścieżce interfejsu API kasy zdefiniowałeś pomyślny adres URL i adres URL anulowania, który powinien przekierowywać użytkownika, gdy proces zakończy się powodzeniem lub niepowodzeniem. Adres URL anulowania jest mapowany na trasę /cancel, podczas gdy adres URL powodzenia jest mapowany na trasę /success. Dodaj dwa komponenty w folderze /pages o nazwie success i anuluj, aby obsłużyć te adresy URL.

W pages/success.js dodaj komponent sukcesu.

eksportdomyślnyfunkcjonowaćPowodzenie() {
powrót<dz>Zakończ pomyślniedz>;
}

W pages/cancel.js dodaj komponent anulowania.

eksportdomyślnyfunkcjonowaćAnulować() {
powrót<dz>Wystąpił błąd podczas realizacji transakcjidz>;
}

Teraz Stripe przekieruje do jednej z tych stron w zależności od statusu kasy.

Jeśli używasz Next.js 13, zapoznaj się z tym samouczkiem jak działa folder aplikacji w Next.js 13 aby przełączyć się z folderu /pages.

Dodatkowe opcje dostosowywania strony kasy

Z pulpitu nawigacyjnego Stripe możesz dostosować stronę kasy, aby pasowała do wyglądu Twojej marki. Możesz dodać logo, ikonę, kolor marki, kolor akcentu, a nawet użyć własnej domeny niestandardowej. Dodatkowo podczas tworzenia sesji kasowej możesz dodać preferowane metody płatności, a także określić język, w jakim Stripe ma wyświetlać się na stronie kasy. Wszystkie te opcje pozwalają dostosować proces realizacji transakcji do potrzeb Twojej aplikacji.

Dlaczego warto używać Stripe na stronie kasy?

Chociaż możesz zbudować własną usługę przetwarzania płatności, korzystanie z platformy płatniczej, takiej jak Stripe, jest zwykle lepszą opcją. Stripe Checkout pomaga skrócić czas programowania, umożliwiając rozpoczęcie przyjmowania płatności w krótkim czasie.

Ponadto otrzymujesz dodatkowe funkcje, takie jak zgodność z PCI, odzyskiwanie koszyka, możliwości udzielania rabatów oraz możliwość zbierania informacji o wysyłce i wysyłania faktur po dokonaniu płatności.