BacodoBACODO

Dodatek Next.js

Integracja Stripe dla 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.

  • Zawiera pełny kod źródłowy i jest Twój na stałe
  • Nie jest wymagany dodatkowy klucz licencyjny ani licencja cykliczna
  • Gotowe do produkcji i przetestowane
  • Zintegrowany z istniejącym projektem i stosem Next.js
  • W cenie 30-dniowa pomoc techniczna po przekazaniu
  • Opcjonalne 6-miesięczne rozszerzone wsparcie techniczne za 20% ceny dodatku

Od

$145

USD · Next.js

Integracja Stripe dla Next.js · Next.js

Pełny kod źródłowyBrak klucza licencyjnegoGotowy do produkcjiPrzetestowana integracja30-dniowe wsparcie

Requirements

What Integracja Stripe dla Next.js needs

  • 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.

Co robi

Kasa w paski w aplikacji Next.js

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.

Problem, który rozwiązuje

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ć.

Jak ląduje w projekcie

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.

Dlaczego oszczędza czas programowania

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.

Dla kogo to jest

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

Co zawiera Integracja Stripe dla Next.js

Stripe Checkout lub element płatności w Next.js

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.

Obsługa tras Next.js dla PaymentIntents

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.

Apple Pay i Google Pay w Next.js Checkout

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.

Tryb testowy Next.js, a następnie aktywne klucze Stripe

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.

Moduł obsługi tras webhooka dla stanu zamówienia Next.js

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ą.

Stany powodzenia, anulowania i błędów Next.js

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

Kiedy Integracja Stripe dla Next.js pasuje

Istniejący sklep Next.js lub strona rezerwacyjna

Przyjmujesz już zamówienia lub rezerwacje w Next.js i potrzebujesz płatności kartą bez przepisywania katalogu lub przepływu rezerwacji.

Agencja przekazuje do produkcji stronę klienta Next.js

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 SaaS lub członkostwo 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.

Wypłaty z rynku lub usługi Next.js później

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 procesu realizacji transakcji w Next.js Stripe

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

Jak realizowana jest integracja Stripe dla Next.js

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.

  1. 01

    Wybierz pasek Next.js

    Potwierdź integrację Stripe z Next.js oraz to, czy realizacja transakcji pierwszego dnia jest hostowanym elementem realizacji transakcji czy elementem płatności.

  2. 02

    Kontrola zgodności Next.js

    Sprawdź wersję Next.js, App Router vs Pages Router, istniejący interfejs użytkownika kasy, bazę danych i to, czy masz już konto Stripe.

  3. 03

    Zintegruj z Next.js

    Dodaj Stripe.js, strony realizacji transakcji, moduły obsługi tras dla sesji lub PaymentIntents oraz podpisany moduł obsługi webhooka.

  4. 04

    Skonfiguruj aplikację Next.js

    Połącz klucze testowe Next.js, punkt końcowy webhooka i konfigurację serwera specyficzną dla środowiska.

  5. 05

    Przetestuj ścieżkę płatności Next.js

    Uruchom karty testowe Stripe, 3-D Secure, anuluj/odrzuć ścieżki i potwierdź webhook w aplikacji Next.js.

  6. 06

    Przekaż źródło Next.js

    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

Jak Stripe łączy się z projektem Next.js

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ą.

Strona Next.jsStripe.js / Do kasyOsoba obsługująca trasęIntencje płatności w paskiModuł obsługi tras webhookaStan bazy danych / zamówienia

Obsługiwane technologie

Czego naprawdę używa Integracja Stripe dla Next.js

Router aplikacji Next.js

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.

Stripe.js i pakiet SDK Stripe Node

Oficjalny Stripe.js na kliencie Next.js i Stripe na serwerze do sesji, PaymentIntents i weryfikacji webhooka.

Twoja warstwa danych Next.js

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.

Konto Stripe dla aplikacji Next.js

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.

Wymagana konfiguracja hostingu Next.js

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

Co obejmuje integracja Stripe dla Next.js

  • Integracja z istniejącym projektem Next.js
  • Pełny kod źródłowy w Twoim repozytorium
  • Konfiguracja środowiska i obsługi tras
  • Element realizacji transakcji lub płatności oraz zmiany webhooka wymagane dla tej ścieżki realizacji transakcji
  • Przetestowano przepływy płatności Next.js przed przekazaniem
  • Notatki z przekazania dotyczące przejścia od testu do uruchomienia
  • 30-dniowe wsparcie techniczne po przekazaniu

Nie w cenie dodatku

  • Konto Stripe, klucze API i opłaty za przetwarzanie Stripe — jesteś ich właścicielem
  • Nowa baza danych lub CMS jeśli nie masz miejsca na przechowywanie stanu zamówień
  • Marketplace Connect, niestandardowe produkty rozliczeniowe lub wymiana zakupów w aplikacji, chyba że są objęte zakresem prac niestandardowych

Pricing

Integracja Stripe dla cennika Next.js

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

  • Istniejący projekt Next.js
  • Dostęp do Stripe Test Mode

$145

jednorazowo

Next.js

Potrzebujesz backendu?

  • Pełny kod źródłowy
  • Bez opłaty licencyjnej
  • 30 dni wsparcia
  • Pełna integracja

Bezpieczna płatność przezstripe

Dostawa i bezpieczeństwo

Praktyki dostarczania i bezpieczeństwa Next.js

Szacowana dostawa Next.js

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.

Testowane na Next.js przed przekazaniem

Karty w trybie testowym, ścieżki 3-D Secure, anulowania i odrzucania są wykonywane w aplikacji Next.js przed przekazaniem.

Sekrety Stripe pozostają poza składnikami klienta Next.js

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.

Weryfikacja webhooka dla zamówień Next.js

Funkcja obsługi tras webhooka Next.js weryfikuje podpisy Stripe przed aktualizacją zamówienia lub stanu uprawnienia.

Żadnych nieweryfikowalnych roszczeń dotyczących bezpieczeństwa Next.js

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

Najczęstsze pytania

Co obejmuje integracja Stripe dla Next.js?

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.

Czy zintegrujesz Stripe z naszą istniejącą aplikacją Next.js?

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.

Czy integracja Stripe dla Next.js wymaga serwera?

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.

Z jakich pakietów Stripe korzysta Stripe Integration for Next.js?

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.

Czy integracja Stripe dla Next.js obsługuje Apple Pay i Google Pay?

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.

Czy Pages Router jest zawarty w integracji Stripe z 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.

Czy integracja Stripe dla Next.js może pobierać opłaty abonamentowe?

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.

Gdzie w aplikacji Next.js znajdują się klucze publikowalne i tajne Stripe?

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.

Jak działa tryb testowy Stripe i tryb na żywo w Next.js?

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.

W jaki sposób integracja Stripe dla Next.js obsługuje 3-D Secure / SCA?

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.

Czy do realizacji transakcji w Next.js wymagane są webhooki Stripe?

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.

Czy w Stripe możemy zachować nasz obecny interfejs realizacji transakcji Next.js?

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.

Czy cena integracji Stripe dla Next.js obejmuje konto Stripe lub opłaty?

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.

Czy integracja Stripe dla Next.js zastąpi zakupy w aplikacji Apple lub Google?

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.

Czy możemy dostosować rachunki i metadane Stripe w Next.js?

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.

Jaka obsługa Next.js będzie dostępna po przekazaniu Stripe?

Ź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 jaki sposób aktualizacje Stripe.js lub Stripe API są obsługiwane w 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.

Co się stanie, jeśli płatności Stripe w produkcyjnej aplikacji Next.js nie powiodą się?

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.

Które wersje Next.js są kompatybilne z integracją Stripe dla 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.

Czym jest 30-dniowe wsparcie w porównaniu z 6-miesięcznym rozszerzonym wsparciem technicznym dla integracji Stripe dla Next.js?

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.

Integracja Stripe dla Next.js

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