- Istniejący projekt React
- Dostęp do Stripe Test Mode
- Do bezpiecznych płatności potrzebny jest backend
Dostęp do repozytorium nie jest wymagany. Dostęp do projektu jest potrzebny tylko, gdy Bacodo ma zintegrować dodatek bezpośrednio.
Dodatek Reaguj
Dodaj Stripe.js, element płatniczy i tajną kasę klienta do istniejącego React SPA bez tworzenia od zera elementów, 3-D Secure i błędów związanych z tajnym kluczem. React nie obsługuje webhooków — robi to Twoje API.
Od
$145
USD · React
Integracja Stripe dla React · React
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 React, który już posiadasz (Vite, CRA lub podobny). Po przekazaniu źródło React znajduje się w Twoim repozytorium. Tajny klucz i webhook pozostają w backendzie, który już uruchomiłeś. Nadal masz konto Stripe i opłaty Stripe.
React SPA nie może bezpiecznie tworzyć PaymentIntent ani weryfikować webhooków. Potrzebuje Stripe.js, Elements lub Checkout i backendu, który zwraca sekret klienta. Budynek, który źle dzieli, dostarcza tajny klucz w pakiecie.
Dodajemy @stripe/react-stripe-js, ekran realizacji transakcji w drzewie React, a funkcja pobierania wywołuje Twój istniejący interfejs API, którego już potrzebuje dla PaymentIntents. Weryfikacja webhooka jest okablowana w tym API, a nie w React.
Twój zespół pomija pierwszą produkcyjną implementację Stripe React: Elementy, SCA, env dla klucza do publikacji i przekazanie dokumentujące, w jaki sposób React komunikuje się z Twoim API.
Deweloperzy i agencje, które mają już interfejs React i API i chcą łatwej w utrzymaniu ścieżki Stripe bez migracji SPA do Next.js.
Kluczowe funkcje
Zamontuj element płatności Stripe za pomocą @stripe/react-stripe-js na swojej trasie realizacji transakcji React. Dane karty pozostają w Stripe — nie w stanie React, który utrzymujesz.
Aplikacja React używa tylko klucza do publikacji i krótkotrwałego sekretu klienta z Twojego API. Integracja Stripe dla React nie umieszcza STRIPE_SECRET_KEY w środowisku Vite lub CRA dostarczanym do przeglądarki.
Włącz portfele w elemencie płatności, jeśli pozwala na to Twoje konto Stripe i domena. Reakcja awaryjna pozostaje na elementach karty.
Najpierw wyślij React SPA z publikowanym kluczem do testu Stripe. Przełączenie na żywo to udokumentowana zmiana środowiska oraz pasujący sekret na żywo w Twoim interfejsie API.
Ekran sukcesu Reagowania nie jest źródłem prawdy. Twoje API weryfikuje webhook Stripe, a następnie aplikacja React odczytuje stan płatny z tego API.
Postępuj z odrzuconymi kartami, anulowanymi elementami, awariami sieci i niekompletnym zabezpieczeniem 3-D Secure, aby interfejs użytkownika React nie pozostawił klienta na martwym ekranie.
Zastosowania
Masz już React SPA i API. Potrzebujesz realizacji transakcji w Elements bez przepisywania katalogu w Next.js.
Potrzebujesz łatwej do utrzymania ścieżki Stripe w React, źródła w repozytorium klienta i udokumentowanego przejścia na klucz na żywo zamiast wersji demonstracyjnej CodeSandbox.
Aplikacja React pobiera pierwszą metodę płatności, podczas gdy subskrypcje pozostają w Twoim interfejsie API i Stripe Billing, jeśli już z nich korzystasz.
Integracja Stripe dla React to strona SPA. Jeśli potrzebujesz także wbudowanego interfejsu API, którego zakres jest ustalany osobno — ta cena nie dotyczy nowego backendu.
Demo
Podgląd ścieżki realizacji transakcji React: akcja płatnicza, element płatności, potwierdzenie i stany niepowodzenia. 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, ze specyficznymi dla React kontrolami Vite/CRA, React Router i API, które SPA już wywołuje.
01
Potwierdź integrację Stripe z React i posiadasz (lub będziesz mieć zakres) API, które może tworzyć PaymentIntents.
02
Przejrzyj wersję React, pakiet, istniejący interfejs użytkownika kasy i język zaplecza, którego używa już SPA.
03
Dodaj Stripe.js, Elementy, komponenty realizacji transakcji i umowę pobierania do punktu końcowego PaymentIntent.
04
Podłącz klucz do publikacji za pośrednictwem publicznego środowiska Vite/CRA. Tajny klucz i webhook pozostają w interfejsie API.
05
Uruchom karty testowe Stripe, 3-D Secure, anuluj/odrzuć i potwierdź stan aktualizacji webhooka API odczytany przez aplikację React.
06
Dostarcz źródło React, notatki env i listę kontrolną aktywnego klucza. Utrzymanie implementacji React należy do Ciebie.
Architektura
Pakiet React nigdy nie przechowuje tajnego klucza. Elements wykorzystuje klucz tajny klienta z Twojego interfejsu API. Stripe powiadamia ten interfejs API za pomocą elementu webhook. React następnie odczytuje stan zamówienia.
Obsługiwane technologie
Aktualny React na Vite, CRA lub podobnym pakiecie SPA. To nie jest miejsce docelowe routera aplikacji Next.js — zobacz Integracja Stripe dla Next.js dla tego stosu.
Oficjalne wiązania Stripe React dla elementów płatniczych i portfeli.
Tworzenie PaymentIntent i weryfikacja webhooka na backendie, który wywołuje już aplikacja React. Ten dodatek nie zastępuje tego interfejsu API usługą wyłącznie Bacodo.
Twoje konto Stripe, klucze testowe i aktywne, punkt końcowy webhooka w interfejsie API oraz zdarzenia w panelu kontrolnym.
React SPA może być statyczny. Element webhook nie może. Host statyczny bez interfejsu API nie może ukończyć tej ścieżki realizacji transakcji.
Co jest w cenie
Pricing
Podana cena dotyczy wyłącznie platformy React SPA. Nie korzysta z cen dodatków Next.js, Django, Flutter ani React Native.
Integracja Stripe dla React
Dodaj gotowe do produkcji płatności Stripe do istniejącego React SPA i zachowaj kod źródłowy.
Wymagania
$145
jednorazowoReact
Potrzebujesz backendu?
Bezpieczna płatność przezstripe
Dostawa i bezpieczeństwo
Typowa kontrola React Stripe następuje po sprawdzeniu zgodności z React. Oś czasu zależy od bieżącego interfejsu użytkownika i API kasy React.
Karty w trybie testowym, ścieżki 3-D Secure, anulowania i odrzucenia są wykonywane w React SPA przed przekazaniem.
Tylko klucz, który można opublikować, jest publiczny. Tajne klucze i sekrety webhooka pozostają na serwerze, z którego wywołuje aplikacja React.
React nie weryfikuje podpisu paskiem. Twój interfejs API to robi, a następnie React odczytuje wynik.
Nie domagamy się certyfikatu PCI ani zerowego oszustwa. React zbiera karty za pośrednictwem Stripe Elements, a nie przechowywanego przez nas niestandardowego formularza karty.
FAQ
Integracja Stripe z React obejmuje Stripe.js, element płatności na istniejącym ekranie realizacji transakcji React, umowę pobierania do API PaymentIntent, zakres testów i notatki przekazania. W swoim projekcie otrzymujesz źródło React. Opłaty za Stripe, konto Stripe i tworzenie nowego backendu to odrębne kwestie.
Tak. Integracja Stripe dla React jest zbudowana dla React SPA, które już posiadasz (Vite, CRA lub podobne). Dopasowujemy Element płatności i punkt wejścia płatności do Twoich bieżących tras i interfejsu React, zamiast dostarczać oddzielną aplikację demonstracyjną jako element dostawy.
Tak dla produkcyjnej ścieżki React Stripe. PaymentIntents, tajny klucz i weryfikacja webhooka muszą znajdować się na serwerze. Przeglądarka React otrzymuje jedynie klucz do publikacji i sekret klienta. Statyczny host React nie może ukończyć tej ścieżki realizacji transakcji.
Integracja Stripe dla React wykorzystuje oficjalne Stripe.js i @stripe/react-stripe-js dla elementu płatniczego i portfeli. Nie dołączamy modułu React Checkout do nieudokumentowanej wtyczki, chyba że wyraźnie jej potrzebujesz.
Tak, jeśli obsługuje je Twoje konto Stripe, weryfikacja domeny i urządzenia. W React przyciski portfela są zakresem opcjonalnym. Element płatności kartą w React pozostaje domyślnym rozwiązaniem zastępczym.
Nie. Integracja Stripe dla React to ścieżka SPA. Router aplikacji Next.js i moduły obsługi tras umożliwiają integrację Stripe z Next.js. Nie przeprowadzamy migracji React SPA do Next.js w ramach tej ceny dodatku React.
Klient React może potwierdzić PaymentIntent lub pobrać metodę płatności poprzez Stripe.js. Produkty rozliczeniowe Stripe, portal klienta i logika faktur działają w Twoim interfejsie API. Prace React wymagające dużej liczby subskrypcji mogą wymagać niestandardowej wyceny.
Przeglądarka React używa klucza do publikacji Stripe wyłącznie za pośrednictwem publicznego środowiska Vite lub CRA. Tajny klucz i sekret podpisywania webhooka pozostają w Twoim interfejsie API. Integracja Stripe dla React nie umieszcza tajnych kluczy w pakiecie React.
Najpierw wdrażamy integrację Stripe dla kluczy testowych React versus Stripe i kart testowych. Uruchomienie to udokumentowana zmiana klucza do publikacji w React plus pasujący sekret na żywo i webhook w Twoim API, a nie aktywacja licencji dodatku.
Element płatności Stripe obsługuje 3-D Secure poprzez Stripe.js. Strona Reaguj musi utrzymywać przepływ transakcji do czasu, aż Stripe zwróci ostateczny status; Integracja Stripe dla React jawnie łączy te stany.
Tak dla spełnienia po Reagowaniu na element płatności. Interfejs React nie jest źródłem prawdy. Twój interfejs API weryfikuje podpisy webhooka Stripe, a następnie oznacza zamówienie opłacone, odblokowuje zawartość lub powiadamia o realizacji. React następnie odczytuje ten stan.
Tak. Integracja Stripe z React zazwyczaj utrzymuje Twój produkt React, koszyk i przycisk płatności oraz montuje Element płatności z tej akcji. Niestandardowy formularz karty React, który dotyka nieprzetworzonych danych PAN, jest poza zakresem domyślnym, ponieważ element 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 React jest wdrożenie do Twojego projektu React, a nie licencja płatnicza Bacodo.
Nie. Towary cyfrowe sprzedawane w sklepie z aplikacjami często nadal wymagają IAP. Integracja Stripe z React służy do realizacji transakcji Stripe w witrynie React lub SPA, gdzie Stripe jest dozwoloną ścieżką płatności dla Twojego typu produktu.
Tak. Metadane PaymentIntent, rekordy klientów i pola, które utrzymujesz po potwierdzeniu webhooka, są dopasowywane do istniejącego modelu zamówienia podczas integracji Stripe z React. Aplikacja React wyświetla tylko to, co zwraca Twoje API.
Źródło React 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 React, a nie niepowiązane prace związane z funkcjami React.
W 30-dniowym oknie pomagamy z przerwami w dostarczonej integracji React spowodowanej udokumentowaną zmianą Stripe lub Stripe.js. Późniejsze aktualizacje pakietu React obejmują konserwację lub rozszerzoną pomoc techniczną, jeśli go kupisz.
Dokumentujemy, jak odczytać status PaymentIntent, logi Stripe Dashboard i dostawę webhooka ze ścieżki realizacji transakcji React. 30-dniowe wsparcie obejmuje rozwiązywanie problemów z odrzuceniem, utratą 3-D Secure i źle skonfigurowanymi kluczami dla dostarczonego przepływu React.
Potwierdzamy Twoją wersję React, pakiet (Vite, CRA lub podobny) oraz interfejs API, który SPA już wywołuje w stosunku do wersji Stripe.js, którą przypinamy w czasie integracji. Starsze lub mocno rozwidlone środowiska wykonawcze React mogą wymagać dodatkowego zakresu.
Dostarczona ścieżka React Stripe obejmuje 30 dni od przekazania. Rozszerzone wsparcie techniczne jest opcjonalne i obejmuje 20% ceny dodatku React i obejmuje dodatkowe sześć miesięcy pomocy technicznej w zakresie tej samej integracji z React, a nie nową wersję produktu.
Dodaj gotowe do produkcji płatności Stripe do istniejącego React SPA, zachowaj kod źródłowy i zachowaj tajemnice w swoim API.
$145