- 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.
Reaksiyon eklentisi
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.
Başlangıç
$145
USD · React
React için Stripe Entegrasyonu · React
Requirements
Depo erişimi gerekmez. Proje erişimi yalnızca Bacodo’nun doğrudan entegre etmesini istiyorsanız gerekir.
Ne işe yarar
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.
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.
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.
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.
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
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 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.
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.
Ö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.
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.
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ı
Zaten bir React SPA'nız ve bir API'niz var. Next.js'de kataloğu yeniden yazmadan Elements ödemesine ihtiyacınız var.
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 uygulaması bir ilk ödeme yöntemi toplarken abonelikler API'nizde ve halihazırda kullanıyorsanız Stripe Faturalandırmanızda kalır.
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 ö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
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ışı.
01
React için Stripe Entegrasyonunu ve PaymentIntents oluşturabilecek bir API'ye sahip olduğunuzu (veya kapsamına alacağınızı) doğrulayın.
02
React sürümünü, paketleyiciyi, mevcut ödeme kullanıcı arayüzünü ve SPA'nın halihazırda kullandığı arka uç dilini inceleyin.
03
Stripe.js, Elements, ödeme bileşenleri ve getirme sözleşmesini PaymentIntent uç noktanıza ekleyin.
04
Yayınlanabilir anahtarı Vite/CRA public env aracılığıyla bağlayın. Gizli anahtar ve web kancası API'de kalır.
05
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.
06
React kaynağını, env notlarını ve canlı anahtar kontrol listesini sunun. React uygulamasının bakımı size aittir.
Mimari
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.
Desteklenen teknolojiler
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.
Ödeme Öğesi ve cüzdanlar için resmi Stripe React bağlamaları.
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.
Stripe hesabınız, test ve canlı anahtarlarınız, API'deki webhook uç noktası ve Kontrol Paneli etkinlikleriniz.
React SPA statik olabilir. Web kancası bunu yapamaz. API'si olmayan, yalnızca statik bir ana makine bu ödeme yolunu tamamlayamaz.
Neler dahil
Pricing
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
$145
tek seferlikReact
Backend gerekir mi?
Güvenli ödeme:stripe
Teslimat ve güvenlik
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.
Test modu kartları, 3-D Secure, iptal ve reddetme yolları, biz teslim etmeden önce React SPA'da uygulanır.
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.
React, Stripe-Signature'ı doğrulamaz. API'niz bunu yapar ve ardından React sonucu okur.
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
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.
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.
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, Ö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.
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.
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 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.
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.
Ö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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Üretime hazır Stripe ödemelerini mevcut React SPA'nıza ekleyin, kaynak kodunu saklayın ve sırları API'nizde saklayın.
$145