BacodoBACODO

Reaksiyon eklentisi

React için Stripe Entegrasyonu

Elementler, 3-D Secure ve gizli anahtar hatalarını sıfırdan oluşturmadan mevcut React SPA'nıza Stripe.js, Payment Element ve istemci gizli ödeme özelliğini ekleyin. React web kancalarını barındırmaz; API'niz barındırır.

  • Tam kaynak kodu dahildir ve kalıcı olarak sizindir
  • Eklenti lisans anahtarı veya yinelenen lisans gerekmez
  • Üretime hazır ve test edilmiş
  • Mevcut React projenize ve yığınınıza entegre edilmiştir
  • Devir teslimden sonraki 30 günlük teknik destek dahildir
  • Eklenti fiyatının %20'si karşılığında İsteğe Bağlı 6 Aylık Uzatılmış Teknik Destek

Başlangıç

$145

USD · React

React için Stripe Entegrasyonu · React

Tam Kaynak KoduLisans Anahtarı YokÜretime HazırTest Edilmiş Entegrasyon30 Günlük Destek

Requirements

What React için Stripe Entegrasyonu needs

  • Mevcut React projesi
  • Stripe Test Mode erişimi
  • Güvenli ödemeler için backend gerekir

Depo erişimi gerekmez. Proje erişimi yalnızca Bacodo’nun doğrudan entegre etmesini istiyorsanız gerekir.

Ne işe yarar

React SPA'nızdaki Stripe Elements — API'nin hala sırları var

Bacodo, Stripe'ı halihazırda sahip olduğunuz React projesine (Vite, CRA veya benzeri) entegre eder. Devir teslimden sonra React kaynağı deponuzda kalır. Gizli anahtar ve web kancası, halihazırda çalıştırdığınız bir arka uçta kalır. Stripe hesabı ve Stripe ücretleri hâlâ size aittir.

Çözdüğü sorun

React SPA, PaymentIntent'leri güvenli bir şekilde oluşturamaz veya web kancalarını doğrulayamaz. Stripe.js, Elements veya Checkout'a ve istemci sırrını döndüren bir arka uca ihtiyacı var. Yanlış şekilde ayrılan bina, paketteki gizli anahtarı gönderir.

Projeye nasıl dahil edilir?

React ağacınıza bir ödeme ekranı olan @stripe/react-stripe-js'yi ekliyoruz ve mevcut API'nizin PaymentIntents için zaten ihtiyaç duyduğu getirme çağrılarını ekliyoruz. Web kancası doğrulaması React'ın içinde değil, bu API'de kabloludur.

Neden geliştirme zamanından tasarruf sağlar?

Ekibiniz ilk üretim Stripe React uygulamasını atlar: Elements, SCA, yayınlanabilir anahtar için env ve React'in API'nizle nasıl konuştuğunu belgeleyen bir devir teslim.

Kimin için

Halihazırda bir React ön ucuna ve bir API'ye sahip olan ve SPA'yı Next.js'ye taşımadan sürdürülebilir bir Stripe yolu isteyen geliştiriciler ve ajanslar.

Temel özellikler

React için Stripe Entegrasyonu neler içerir

React'ta Ödeme Öğesi

Stripe Ödeme Öğesini @stripe/react-stripe-js ile React ödeme rotanıza ekleyin. Kart verileri, ısrar ettiğiniz React durumunda değil, Stripe'ta kalır.

React müşteri sırlarını getirir; asla gizli anahtarı getirmez

React uygulaması yalnızca yayınlanabilir anahtarı ve API'nizdeki kısa ömürlü istemci sırrını kullanır. React için Stripe Entegrasyonu, STRIPE_SECRET_KEY'i tarayıcıya gönderilen Vite veya CRA ortamına koymaz.

React Elements'ta Apple Pay ve Google Pay

Stripe hesabınız ve alan adınız izin verdiğinde Payment Element'te cüzdanları etkinleştirin. React geri dönüşü kart Elementlerinde kalır.

Test moduna tepki verin, ardından canlı yayınlanabilir anahtar

Önce React SPA'yı Stripe testi yayınlanabilir anahtarıyla birlikte gönderin. Canlı geçiş, belgelenmiş bir ortam değişikliğine ek olarak API'nizdeki eşleşen canlı sırdır.

Yerine getirme, React'in teşekkür etme yolu değildir

React başarı ekranı gerçeğin kaynağı değildir. API'niz Stripe webhook'unu doğrular, ardından React uygulaması bu API'den ücretli durumu okur.

Hataya tepki verme ve durumları iptal etme

React kullanıcı arayüzünün müşteriyi ölü bir ekranda bırakmaması için reddedilen kartları, iptal edilen Öğeleri, ağ hatalarını ve tamamlanmamış 3-D Secure'u ele alın.

Kullanım senaryoları

React için Stripe Entegrasyonu ne zaman uygun

Vite veya CRA'da mevcut React mağazası

Zaten bir React SPA'nız ve bir API'niz var. Next.js'de kataloğu yeniden yazmadan Elements ödemesine ihtiyacınız var.

Ajans, React istemci SPA'sını üretime aktarıyor

React'ta sürdürülebilir bir Stripe yoluna, istemci deposundaki kaynağa ve CodeSandbox demosu yerine belgelenmiş bir canlı anahtar geçişine ihtiyacınız var.

React'te SaaS ayarları ekranı

React uygulaması bir ilk ödeme yöntemi toplarken abonelikler API'nizde ve halihazırda kullanıyorsanız Stripe Faturalandırmanızda kalır.

React ön uç, Django veya Node API zaten mevcut

React için Stripe Entegrasyonu SPA tarafıdır. Ayrıca API'nin oluşturulmasına da ihtiyacınız varsa, bu ayrı olarak kapsam dahilindedir; bu fiyat yeni bir arka uç değildir.

Demo

React Stripe Elements akış önizlemesi

React ödeme yolunu önizleyin: ödeme işlemi, Ödeme Öğesi, onay ve başarısızlık durumları. Uyumluluk kontrolünden sonra Stripe hesabınıza karşı canlı bir sanal alan kullanılabilir. Bu sayfa gerçek ücretleri işlemez.

Nasıl çalışır

React için Stripe Entegrasyonu nasıl sunulur?

Vite/CRA, React Router ve SPA'nın halihazırda çağırdığı API için React'a özel kontroller içeren standart Bacodo eklenti iş akışı.

  1. 01

    React Stripe'ı seçin

    React için Stripe Entegrasyonunu ve PaymentIntents oluşturabilecek bir API'ye sahip olduğunuzu (veya kapsamına alacağınızı) doğrulayın.

  2. 02

    React uyumluluk kontrolü

    React sürümünü, paketleyiciyi, mevcut ödeme kullanıcı arayüzünü ve SPA'nın halihazırda kullandığı arka uç dilini inceleyin.

  3. 03

    React'a entegre edin

    Stripe.js, Elements, ödeme bileşenleri ve getirme sözleşmesini PaymentIntent uç noktanıza ekleyin.

  4. 04

    React uygulamasını yapılandırma

    Yayınlanabilir anahtarı Vite/CRA public env aracılığıyla bağlayın. Gizli anahtar ve web kancası API'de kalır.

  5. 05

    React ödeme yolunu test edin

    Stripe test kartlarını çalıştırın, 3-D Secure'u çalıştırın, iptal edin/reddedin ve React uygulamasının okuduğu API webhook güncellemelerini onaylayın.

  6. 06

    React kaynağını devredin

    React kaynağını, env notlarını ve canlı anahtar kontrol listesini sunun. React uygulamasının bakımı size aittir.

Mimari

Stripe bir React projesine nasıl bağlanır?

React paketi hiçbir zaman gizli anahtarı tutmaz. Elements, API'nizden gelen bir istemci sırrını kullanır. Stripe bu API'yi webhook aracılığıyla bilgilendirir. React daha sonra sipariş durumunu okur.

Tepki SPAStripe.js / ElementlerAPI'nizŞeritli Ödeme AmaçlarıWeb kancası → APIReact ücretli durumu okur

Desteklenen teknolojiler

React için Stripe Entegrasyonu gerçekte ne kullanır

Tepki SPA

Vite, CRA veya benzer bir SPA paketleyicisinde Current React. Bu bir Next.js Uygulama Yönlendiricisi girişi değildir; bu yığın için Next.js için Stripe Entegrasyonu'na bakın.

@stripe/react-stripe-js ve Stripe.js

Ödeme Öğesi ve cüzdanlar için resmi Stripe React bağlamaları.

Mevcut API'niz

React uygulamasının arka ucunda PaymentIntent oluşturma ve webhook doğrulaması zaten çağırıyor. Bu eklenti, söz konusu API'yi yalnızca Bacodo hizmetiyle değiştirmez.

React uygulaması için Stripe hesabı

Stripe hesabınız, test ve canlı anahtarlarınız, API'deki webhook uç noktası ve Kontrol Paneli etkinlikleriniz.

Gerekli barındırma bölünmesi

React SPA statik olabilir. Web kancası bunu yapamaz. API'si olmayan, yalnızca statik bir ana makine bu ödeme yolunu tamamlayamaz.

Neler dahil

React için Stripe Entegrasyonu neler içerir?

  • Mevcut React projesine entegrasyon
  • Deponuzdaki tam kaynak kodu
  • Yayımlanabilir anahtar ortamı ve ödeme bileşenleri
  • Sözleşmeyi PaymentIntent API'nize getirin
  • Devir teslimden önce test edilmiş React ödeme akışları
  • Testten canlıya geçiş için devir notları
  • Devir teslimden sonra 30 günlük teknik destek

İlave fiyatta yok

  • Stripe hesabı, API anahtarları ve Stripe işlem ücretleri; bunların sahibi sizsiniz
  • PaymentIntent'leri oluşturabilecek bir API'niz yoksa yeni bir arka uç
  • React'tan Next.js'ye geçiş
  • Özel çalışma kapsamına alınmadığı sürece Marketplace Connect veya özel Faturalandırma

Pricing

React fiyatlandırması için Stripe Entegrasyonu

Bu fiyat yalnızca React SPA platformu içindir. Next.js, Django, Flutter veya React Native eklenti fiyatlandırmasını kullanmaz.

React için Stripe Entegrasyonu

Üretime hazır Stripe ödemelerini mevcut bir React SPA'ya ekleyin ve kaynak kodunu saklayın.

Gereksinimler

  • Mevcut React projesi
  • Stripe Test Mode erişimi
  • Güvenli ödemeler için backend gerekir

$145

tek seferlik

React

Backend gerekir mi?

  • Tam kaynak kodu
  • Lisans ücreti yok
  • 30 gün destek
  • Tam entegrasyon

Güvenli ödeme:stripe

Teslimat ve güvenlik

React teslimi ve güvenlik uygulamaları

Tahmini React teslimi

Tipik React Stripe kontrolünün kapsamı React uyumluluk kontrolünden sonra belirlenir. Zaman çizelgesi mevcut React ödeme kullanıcı arayüzünüze ve API'nize bağlıdır.

Devir teslimden önce React'ta test edildi

Test modu kartları, 3-D Secure, iptal ve reddetme yolları, biz teslim etmeden önce React SPA'da uygulanır.

Stripe'ın sırları React paketinin dışında kalıyor

Yalnızca yayınlanabilir anahtar herkese açıktır. Gizli anahtarlar ve web kancası sırları, React uygulamasının çağırdığı sunucuda kalır.

Webhook doğrulaması React'ta değil API'dedir

React, Stripe-Signature'ı doğrulamaz. API'niz bunu yapar ve ardından React sonucu okur.

Doğrulanamayan React güvenlik iddiası yok

PCI sertifikası veya sıfır sahtekarlık iddiasında değiliz. React, kartları sakladığımız özel bir kart formu değil, Stripe Elements aracılığıyla toplar.

SSS

Sık sorulan sorular

React için Stripe Entegrasyonu neler içerir?

React için Stripe Entegrasyonu, Stripe.js'yi, mevcut React ödeme ekranınızdaki Payment Element'i, PaymentIntent API'nize getirme sözleşmesini, test kapsamını ve devir notlarını içerir. Projenizde React kaynağını alırsınız. Stripe ücretleri, Stripe hesabınız ve yeni bir arka uç oluşturmak ayrıdır.

Stripe'ı mevcut React uygulamamıza entegre edecek misiniz?

Evet. React için Stripe Entegrasyonu, halihazırda sahip olduğunuz bir React SPA (Vite, CRA veya benzeri) için oluşturulmuştur. Teslimat olarak ayrı bir demo uygulaması göndermek yerine Ödeme Öğesini ve ödeme giriş noktasını mevcut React rotalarınıza ve kullanıcı arayüzüne sığdırıyoruz.

React için Stripe Entegrasyonu bir arka uç gerektirir mi?

Evet, üretim React Stripe yolu için. PaymentIntent'ler, gizli anahtar ve webhook doğrulaması bir sunucuda bulunmalıdır. React tarayıcısı yalnızca yayınlanabilir bir anahtar ve istemci sırrını alır. Yalnızca statik bir React ana bilgisayarı bu ödeme yolunu tamamlayamaz.

React için Stripe Entegrasyonu hangi Stripe paketlerini kullanıyor?

React için Stripe Entegrasyonu, Ödeme Öğesi ve cüzdanlar için resmi Stripe.js ve @stripe/react-stripe-js'yi kullanır. Açıkça gerek duymadığınız sürece React ödemesini belgelenmemiş bir eklentiye sarmayız.

React için Stripe Entegrasyonu Apple Pay ve Google Pay'i destekliyor mu?

Stripe hesabınız, alan adı doğrulamanız ve cihazlarınız bunları desteklediğinde evet. React'ta cüzdan düğmeleri isteğe bağlı kapsamdadır. React'taki Kart Ödeme Öğesi varsayılan geri dönüş olarak kalır.

Next.js, React için Stripe Entegrasyonu'na dahil mi?

Hayır. React için Stripe Entegrasyonu bir SPA yoludur. Next.js Uygulama Yönlendiricisi ve Rota İşleyicileri Next.js için Stripe Entegrasyonudur. Bu React eklenti fiyatı kapsamında React SPA'yı Next.js'ye taşımıyoruz.

React için Stripe Entegrasyonu abonelik ödemelerini toplayabilir mi?

React istemcisi bir PaymentIntent'i onaylayabilir veya Stripe.js aracılığıyla bir ödeme yöntemi toplayabilir. Yinelenen Stripe Billing ürünleri, müşteri portalı ve fatura mantığı API'nizde yayında. Abonelik ağırlıklı React çalışmaları için Özel Fiyat Teklifi gerekebilir.

Stripe'ın yayınlanabilir ve gizli anahtarları bir React uygulamasında nerede bulunur?

React tarayıcısı yalnızca Vite veya CRA public env aracılığıyla Stripe yayınlanabilir anahtarını kullanır. Gizli anahtar ve web kancası imzalama sırrı API'nizde kalır. React için Stripe Entegrasyonu, React paketine gizli anahtarlar koymaz.

Stripe test modu ve canlı mod React'te nasıl çalışır?

Öncelikle Stripe test anahtarlarına ve test kartlarına karşı React için Stripe Entegrasyonunu uyguluyoruz. Canlıya geçmek, React'ta belgelenmiş, yayınlanabilir bir anahtar değişikliğinin yanı sıra API'nizde eşleşen canlı sır ve web kancasıdır; bir eklenti lisansı etkinleştirmesi değildir.

React için Stripe Entegrasyonu 3-D Secure/SCA'yı nasıl yönetir?

Stripe Payment Element, Stripe.js aracılığıyla 3-D Secure'u yönetir. React sayfası, Stripe nihai durumu döndürene kadar ödeme akışını canlı tutmalıdır; React için Stripe Entegrasyonu bu durumları açıkça birbirine bağlar.

React ödemesi için Stripe web kancaları gerekli midir?

React Payment Element'ten sonra yerine getirilmesi için evet. React kullanıcı arayüzü gerçeğin kaynağı değildir. API'niz Stripe webhook imzalarını doğrular ve ardından ödenen siparişi işaretler, içeriğin kilidini açar veya yerine getirildiğini bildirir. React daha sonra bu durumu okur.

Mevcut React ödeme kullanıcı arayüzümüzü Stripe ile koruyabilir miyiz?

Evet. React için Stripe Entegrasyonu genellikle React ürününüzü, sepetinizi ve ödeme düğmenizi korur ve bu eylemden Ödeme Öğesini bağlar. Ham PAN verilerine dokunan özel bir React kart formu, Ödeme Öğesi daha güvenli PCI yolu olduğundan varsayılan kapsam dışındadır.

React için Stripe Entegrasyonu fiyatına Stripe hesabı veya ücretleri dahil mi?

Hayır. Stripe hesabını, API anahtarlarını ve Stripe işlem ücretlerini siz oluşturursunuz ve bunların sahibi olursunuz. React eklenti fiyatı, Bacodo ödeme lisansı değil, React projenize uygulanır.

React için Stripe Entegrasyonu Apple veya Google Uygulama İçi Satın Alma'nın yerini alacak mı?

Hayır. Bir uygulama mağazasında satılan dijital ürünler genellikle hâlâ IAP gerektirir. React için Stripe Entegrasyonu, Stripe'ın ürün türünüz için izin verilen bir ödeme yolu olduğu bir React web sitesinde veya SPA'da Stripe ödemesi içindir.

Stripe makbuzlarını ve meta verilerini React'ta özelleştirebilir miyiz?

Evet. PaymentIntent meta verileri, müşteri kayıtları ve webhook onayından sonra devam ettirdiğiniz alanlar, React için Stripe Entegrasyonu sırasında mevcut sipariş modelinize hizalanır. React uygulaması yalnızca API'nizin döndürdüğünü görüntüler.

Stripe devrinden sonra hangi React desteği dahildir?

React kaynağı deponuzda olduğundan ekibiniz bunu koruyabilir. 30 günlük destek, ilgisiz React özelliği çalışmasını değil, React kapsamı için teslim edilen Stripe Entegrasyonu'ndaki teknik soruları ve kusurları kapsar.

Stripe.js veya Stripe API güncellemeleri React'ta nasıl işlenir?

30 günlük pencere boyunca, teslim edilen React entegrasyonunda belgelenen bir Stripe veya Stripe.js değişikliğinin neden olduğu bozulmalara yardımcı oluyoruz. Bundan sonra devam eden React paketi yükseltmeleri bakımınızdır veya satın alırsanız Genişletilmiş Teknik Destektir.

Üretim React uygulamasında Stripe ödemeleri başarısız olursa ne olur?

React ödeme yolundan PaymentIntent durumunu, Stripe Dashboard günlüklerini ve webhook teslimini nasıl okuyacağımızı belgeliyoruz. 30 günlük destek, sorun giderme reddedilmelerini, 3-D Secure'un düşürülmesini ve teslim edilen React akışı için yanlış yapılandırılmış anahtarları içerir.

Hangi React sürümleri React için Stripe Entegrasyonu ile uyumludur?

Entegrasyon zamanında sabitlediğimiz Stripe.js sürümüne göre React sürümünüzü, paketleyicinizi (Vite, CRA veya benzeri) ve SPA'nın zaten çağırdığı API'yi onaylıyoruz. Daha eski veya ağır şekilde çatallanmış React çalışma zamanları ekstra kapsam gerektirebilir.

React için Stripe Entegrasyonu için 30 günlük destek ve 6 aylık Genişletilmiş Teknik Destek nedir?

Teslim edilen React Stripe yoluna devirden sonraki 30 gün dahildir. Genişletilmiş Teknik Destek, bu React eklenti fiyatının %20'si karşılığında isteğe bağlıdır ve yeni bir ürün derlemesini değil, aynı React entegrasyonuyla ilgili altı ay daha teknik yardımı kapsar.

React için Stripe Entegrasyonu

Üretime hazır Stripe ödemelerini mevcut React SPA'nıza ekleyin, kaynak kodunu saklayın ve sırları API'nizde saklayın.

$145