Jak dodać Stripe Checkout do aplikacji Next.js
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
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:
- Przejdź do strony internetowej Stripe i kliknij przycisk „Zarejestruj się”.
- Wprowadź swój adres e-mail, imię i nazwisko, kraj i hasło, a następnie kliknij przycisk „Utwórz konto”.
- 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.
- 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.
- Skopiuj klucze API z zakładki „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.
npm install stripe
Zaimportuj bibliotekę Stripe na stronę komponentu kasy.
import Stripe from 'stripe';
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.
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
W funkcji obsługi pobierz elementy do pobrania z parametrów ciała.
export default async function handler(req, res) {
const { item } = req.body;
};
Utwórz obiekt sesji kasy do funkcji obsługi i przekaż elementy.
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
item,
],
mode: 'payment',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
Oto, co oznaczają węzły, które przekazujesz do obiektu sesji:
- payment_method_types : typy metod płatności akceptowane przez sesję realizacji transakcji. Przejrzyj listę dostępnych metod płatności w dokumentacji Stripe .
- line_items : lista pozycji kupowanych przez użytkownika.
- tryb : tryb sesji kasy. Jeśli elementy do kasy obejmują co najmniej jeden przedmiot cykliczny, przepustka „subskrypcja”.
- success_url : Pasek adresu URL przekieruje użytkowników, jeśli płatność się powiedzie
- cancel_url : pasek adresu URL przekieruje użytkowników, jeśli anulują oni płatność.
W sumie plik checkout-session.js powinien wyglądać tak:
export default async function handler(req, res) {
if (req.method === 'POST') {
const { cart } = req.body;
try {
const session = await stripe.checkout.sessions.create({
line_items: [
cart
],
mode: 'payment',
success_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} catch (err) {
res.status(err.statusCode || 500).json(err.message);
}
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Method Not Allowed');
}
}
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 temat tworzenia 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 install @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 { loadStripe } from '@stripe/stripe-js';
const stripePromise = loadStripe(
process.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.
export default function Checkout({cart}) {
const handleCheckout = async () => {
try {
const stripe = await stripePromise;
const checkoutSession = await axios.post("/api/checkout-session", {
cart,
});
const result = await stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
if (result.error) {
alert(result.error.message);
}
} catch (error) {
console.log(error);
}
};
return (
<div>
</div>
);
}
Ta funkcja używa Axios do wywołania interfejsu API utworzonego w folderze /api w celu pobrania sesji realizacji transakcji.
Dodaj przycisk kasy w instrukcji return, który po kliknięciu uruchomi funkcję handleCheckout.
<button onClick={handleCheckout}>
Checkout
</button>
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.
export default function Success() {
return <div>Checkout out successfully</div>;
}
W pages/cancel.js dodaj komponent anulowania.
export default function Cancel() {
return <div>An error occurred during checkout</div>;
}
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.
Dodaj komentarz