- Istniejący projekt Next.js
- Dostęp do Stripe Test Mode
Dostęp do repozytorium nie jest wymagany. Dostęp do projektu jest potrzebny tylko, gdy Bacodo ma zintegrować dodatek bezpośrednio.
Dodatek Next.js
Dodaj Stripe Checkout lub element płatniczy, PaymentIntents i podpisane webhooki do istniejącego projektu Next.js App Router bez tworzenia od podstaw okablowania kasy, 3-D Secure i Route Handler.
Od
$145
USD · Next.js
Integracja Stripe dla Next.js · Next.js
Requirements
Dostęp do repozytorium nie jest wymagany. Dostęp do projektu jest potrzebny tylko, gdy Bacodo ma zintegrować dodatek bezpośrednio.
Co robi
Bacodo integruje Stripe z projektem Next.js, który już posiadasz. Po przekazaniu implementacja znajduje się w Twoim repozytorium, dzięki czemu Twój zespół może ją czytać, zmieniać i rozszerzać. Nadal jesteś właścicielem konta Stripe, kluczy API i opłat Stripe.
Realizacja transakcji kartą i portfelem w Next.js wymaga PaymentIntents, Checkout lub Payment Element, 3-D Secure, tajnych kluczy tylko dla serwera i modułu obsługi trasy webhook, który weryfikuje podpisy. Budowanie tej ścieżki od zera jest powolne i łatwo się pomylić.
Dodajemy Stripe.js do klienta Next.js, procedury obsługi tras (lub akcje serwera), które tworzą PaymentIntents lub sesje realizacji transakcji, weryfikację webhooka, strony powodzenia/anulowania oraz konfigurację środowiska testowego/aktywnego dla App Router.
Twój zespół pomija pierwszą produkcyjną implementację Stripe Next.js: procedury obsługi routera aplikacji, SCA, stany błędów i przekazanie dokumentujące sposób dostarczania aktywnych kluczy.
Programiści, zespoły techniczne, agencje i start-upy, które mają już aplikację Next.js i chcą mieć produkcyjną ścieżkę płatności, którą mogą utrzymać.
Kluczowe funkcje
Użyj hostowanego Stripe Checkout lub osadzonego elementu płatności na stronie kasy Next.js. Przyciski wprowadzania kart, 3-D Secure i portfela pozostają na ścieżce PCI Stripe — a nie na niestandardowej karcie, którą przechowujesz.
Utwórz sesje realizacji transakcji lub PaymentIntents w modułach obsługi tras Next.js. Przeglądarka używa tylko klucza do publikacji i klucza tajnego klienta — klucz tajny nigdy nie jest dostarczany w komponencie klienta.
Włącz przyciski portfela w Stripe Checkout lub elemencie płatności, gdy Twoje konto Stripe i domena zostaną zweryfikowane. Rezerwa zastępcza Next.js pozostaje przy kasie karty.
Wyślij aplikację Next.js z kluczami testowymi Stripe, kartami testowymi i udokumentowanym przejściem na aktywne klucze. Zmienne środowiskowe Next.js pozostają poza pakietem klienta.
Sukces płatności w interfejsie Next.js nie jest źródłem prawdy. Osoba obsługująca trasę weryfikuje podpisy Stripe i aktualizuje stan zamówienia lub uprawnienia przed realizacją.
Obsługuj odrzucone karty, anulowane transakcje, awarie sieci i niekompletne zabezpieczenia 3-D Secure, aby interfejs użytkownika Next.js nie pozostawił klienta na martwej stronie.
Zastosowania
Przyjmujesz już zamówienia lub rezerwacje w Next.js i potrzebujesz płatności kartą bez przepisywania katalogu lub przepływu rezerwacji.
Potrzebujesz łatwej do utrzymania ścieżki Stripe w Next.js, źródła w repozytorium klienta i udokumentowanego przejścia na klucz na żywo zamiast jednorazowego prototypu Next.js.
Aplikacja Next.js musi pobrać pierwszą płatność lub zaktualizować metodę płatności, dopóki subskrypcje i faktury pozostaną na Twoim serwerze oraz Stripe Billing, jeśli już z nich korzystasz.
Zacznij od opłat klientów w aplikacji Next.js. Opłaty za Stripe Connect lub miejsce docelowe można określić oddzielnie, jeśli wymaga tego Twój model rynku Next.js.
Demo
Podgląd ścieżki realizacji transakcji w Next.js: akcja koszyka lub płatności, element realizacji transakcji lub płatności, potwierdzenie i stany niepowodzeń. Aktywna piaskownica powiązana z Twoim kontem Stripe będzie dostępna po sprawdzeniu zgodności. Ta strona nie obsługuje rzeczywistych opłat.
Jak to działa
Standardowy przepływ pracy w dodatku Bacodo z specyficznymi dla Next.js i Stripe kontrolami routera aplikacji, modułów obsługi tras i istniejącej warstwy danych.
01
Potwierdź integrację Stripe z Next.js oraz to, czy realizacja transakcji pierwszego dnia jest hostowanym elementem realizacji transakcji czy elementem płatności.
02
Sprawdź wersję Next.js, App Router vs Pages Router, istniejący interfejs użytkownika kasy, bazę danych i to, czy masz już konto Stripe.
03
Dodaj Stripe.js, strony realizacji transakcji, moduły obsługi tras dla sesji lub PaymentIntents oraz podpisany moduł obsługi webhooka.
04
Połącz klucze testowe Next.js, punkt końcowy webhooka i konfigurację serwera specyficzną dla środowiska.
05
Uruchom karty testowe Stripe, 3-D Secure, anuluj/odrzuć ścieżki i potwierdź webhook w aplikacji Next.js.
06
Dostarcz źródło Next.js, uwagi dotyczące konfiguracji i listę kontrolną aktywnego klucza. Opieka nad implementacją Next.js należy do Ciebie.
Architektura
Przeglądarka Next.js nigdy nie komunikuje się ze Stripe za pomocą tajnego klucza. Element realizacji transakcji lub płatności korzysta z tajemnicy klienta otrzymanej od osoby obsługującej trasę. Stripe powiadamia webhook Next.js przed realizacją.
Obsługiwane technologie
Bieżący stabilny plik Next.js z App Router jest domyślny. Pages Router może mieć określony zakres, jeśli tego właśnie używa Twoje repozytorium Next.js.
Oficjalny Stripe.js na kliencie Next.js i Stripe na serwerze do sesji, PaymentIntents i weryfikacji webhooka.
Aktualizacje zamówień lub uprawnień pozostają w bazie danych lub interfejsie API, z którego korzysta już Twoja aplikacja Next.js. Nie zastępujemy Twojego backendu usługą obejmującą wyłącznie Bacodo.
Twoje konto Stripe, klucze testowe i aktywne używane przez Next.js, punkt końcowy webhooka i zdarzenia Dashboard. Opłaty za przetwarzanie Stripe pozostają w Stripe.
Host, na którym można uruchamiać procedury obsługi tras Next.js i odbierać webhooki Stripe (na przykład serwer Vercel lub Node). Eksport wyłącznie statyczny nie jest wystarczający dla tej ścieżki realizacji transakcji.
Co jest w cenie
Pricing
Ta cena dotyczy wyłącznie platformy Next.js. Nie korzysta z cen dodatków Django ani Flutter.
Integracja Stripe dla Next.js
Dodaj gotowe do produkcji płatności Stripe do istniejącej aplikacji Next.js i zachowaj kod źródłowy.
Wymagania
$145
jednorazowoNext.js
Potrzebujesz backendu?
Bezpieczna płatność przezstripe
Dostawa i bezpieczeństwo
Typowa integracja kasy z Next.js Stripe jest ustalana po sprawdzeniu zgodności z Next.js. Oś czasu zależy od bieżącego interfejsu użytkownika kasy i warstwy danych Next.js.
Karty w trybie testowym, ścieżki 3-D Secure, anulowania i odrzucania są wykonywane w aplikacji Next.js przed przekazaniem.
Stripe tajne klucze i sekrety podpisywania webhooka pozostają w środowisku serwera. Przeglądarka Next.js otrzymuje tylko klucz do publikacji i krótkotrwałe sekrety klienta.
Funkcja obsługi tras webhooka Next.js weryfikuje podpisy Stripe przed aktualizacją zamówienia lub stanu uprawnienia.
Nie żądamy certyfikatu PCI, zerowego oszustwa ani gwarantowanych wskaźników akceptacji. Dane karty Next.js są gromadzone za pośrednictwem Stripe Checkout lub elementu płatności, a nie przechowywanego przez nas niestandardowego formularza karty.
FAQ
Integracja Stripe z Next.js obejmuje Stripe.js, Checkout lub element płatności na istniejącej stronie kasy Next.js, PaymentIntent lub utworzenie sesji Checkout w Route Handlerach, podpisaną procedurę obsługi webhooka, zakres testów i notatki przekazania. W swoim projekcie otrzymujesz źródło Next.js. Opłaty Stripe i Twoje konto Stripe są odrębne.
Tak. Integracja Stripe dla Next.js została stworzona dla projektu Next.js, który już posiadasz. Dopasowujemy proces realizacji transakcji i punkt wejścia płatności do Twoich bieżących tras i interfejsu użytkownika Next.js, zamiast dostarczać oddzielną aplikację demonstracyjną jako element dostawy.
Tak dla produkcyjnej ścieżki Stripe Next.js. PaymentIntents, sesje realizacji transakcji i tajny klucz muszą znajdować się na serwerze. Przeglądarka Next.js otrzymuje jedynie klucz do publikacji i klucz tajny klienta. Eksport do pliku statycznego Next.js nie może hostować tej ścieżki elementu webhook.
Integracja Stripe dla Next.js wykorzystuje oficjalny Stripe.js na kliencie i pakiet SDK Stripe Node w modułach obsługi tras Next.js. Nie umieszczamy kasy w Next.js w nieudokumentowanej wtyczce, chyba że wyraźnie jej potrzebujesz.
Tak, jeśli obsługuje je Twoje konto Stripe, weryfikacja domeny i urządzenia. W Next.js przyciski portfela są zakresem opcjonalnym. Domyślnym rozwiązaniem zastępczym pozostaje płatność kartą lub element płatności w Next.js.
Domyślna integracja Stripe dla zakresu Next.js to App Router. Można uwzględnić trasy API Pages Router, jeśli z tego właśnie korzysta Twoje repozytorium Next.js i wyrażamy na to zgodę podczas sprawdzania zgodności z Next.js.
Klient Next.js może potwierdzić PaymentIntent lub rozpocząć sesję realizacji transakcji za pośrednictwem Stripe.js. Produkty rozliczeniowe Stripe Billing, portal klienta i logika faktur znajdują się na serwerze. Praca Next.js wymagająca dużej liczby subskrypcji może wymagać niestandardowej wyceny.
Przeglądarka Next.js używa tylko klucza do publikacji Stripe. Tajny klucz i sekret podpisywania webhooka pozostają w zmiennych środowiskowych serwera używanych przez programy obsługi tras. Integracja Stripe dla Next.js nie umieszcza tajnych kluczy w Komponentach Klienta.
W pierwszej kolejności wdrażamy integrację Stripe dla Next.js z kluczami testowymi Stripe i kartami testowymi. Uruchomienie to udokumentowane przeniesienie klucza i webhooka w Twoim Stripe Dashboard i środowisku serwerowym Next.js, a nie aktywacja licencji dodatku.
Stripe Checkout i element płatniczy obsługują 3-D Secure poprzez Stripe.js. Strona Next.js musi utrzymywać przepływ transakcji do czasu, aż Stripe zwróci ostateczny status; Integracja Stripe dla Next.js jawnie łączy te stany.
Tak, do realizacji po realizacji transakcji Next.js lub elemencie płatności. Interfejs użytkownika Next.js nie jest źródłem prawdy. Osoba obsługująca trasę weryfikuje podpisy webhooka Stripe, a następnie oznacza zamówienie opłacone, odblokowuje zawartość lub powiadamia o realizacji.
Tak. Integracja Stripe dla Next.js zazwyczaj zachowuje Twój produkt, koszyk i przycisk płatności Next.js oraz otwiera realizację transakcji lub montuje element płatności z tej akcji. Niestandardowy formularz karty Next.js, który dotyka nieprzetworzonych danych PAN, jest poza domyślnym zakresem, ponieważ element realizacji transakcji lub płatności jest bezpieczniejszą ścieżką PCI.
Nie. Tworzysz i jesteś właścicielem konta Stripe, kluczy API i opłat za przetwarzanie Stripe. Ceną dodatku Next.js jest wdrożenie do Twojego projektu Next.js, a nie licencja płatnicza Bacodo.
Nie. Towary cyfrowe sprzedawane w sklepie z aplikacjami często nadal wymagają IAP. Integracja Stripe z Next.js służy do realizacji transakcji Stripe w witrynie internetowej lub aplikacji internetowej Next.js, gdzie Stripe jest dozwoloną ścieżką płatności dla Twojego typu produktu.
Tak. Metadane PaymentIntent lub Checkout Session, rekordy klientów i pola, które utrzymujesz po potwierdzeniu webhooka, są dopasowane do istniejącego modelu zamówienia Next.js podczas integracji Stripe dla Next.js.
Źródło Next.js znajduje się w Twoim repozytorium, więc Twój zespół może nim zarządzać. Dołączone 30-dniowe wsparcie obejmuje pytania techniczne i defekty w dostarczonym zakresie integracji Stripe dla Next.js, a także niepowiązane prace z funkcjami Next.js.
W 30-dniowym okienku pomagamy w przypadku awarii w dostarczonej integracji Next.js spowodowanej udokumentowaną zmianą Stripe lub Stripe.js. Późniejsze aktualizacje pakietu Next.js obejmują konserwację lub rozszerzoną pomoc techniczną, jeśli go kupisz.
Dokumentujemy sposób odczytywania statusu PaymentIntent lub sesji realizacji transakcji, dzienników Stripe Dashboard i dostarczania webhooka ze ścieżki realizacji transakcji Next.js. 30-dniowe wsparcie obejmuje rozwiązywanie problemów z odrzuceniem, utratą 3-D Secure i błędnie skonfigurowanymi kluczami dla dostarczonego przepływu Next.js.
Potwierdzamy Twoją wersję Next.js, App Router lub Pages Router i środowisko wykonawcze Node względem zestawu SDK Stripe, który przypinamy w czasie integracji. Starsze lub mocno rozwidlone środowiska wykonawcze Next.js mogą wymagać dodatkowego zakresu.
Dostarczona ścieżka Next.js Stripe obejmuje 30 dni od przekazania. Rozszerzone wsparcie techniczne jest opcjonalne w cenie 20% ceny dodatku Next.js i obejmuje dodatkowe sześć miesięcy pomocy technicznej dotyczącej tej samej integracji z Next.js, a nie nowej wersji produktu.
Dodaj gotowe do produkcji płatności Stripe do istniejącej aplikacji Next.js, zachowaj kod źródłowy i pomiń tworzenie płatności od zera.
$145