BacodoBACODO

Next.js eklentisi

Next.js için Stripe Entegrasyonu

Sıfırdan ödeme, 3-D Secure ve Rota İşleyici kablolaması oluşturmadan mevcut Next.js Uygulama Yönlendirici projenize Şerit Ödeme veya Ödeme Öğesi, PaymentIntents ve imzalı web kancaları ekleyin.

  • Tam kaynak kodu dahildir ve kalıcı olarak sizindir
  • Eklenti lisans anahtarı veya yinelenen lisans gerekmez
  • Üretime hazır ve test edilmiş
  • Mevcut Next.js 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 · Next.js

Next.js için Stripe Entegrasyonu · Next.js

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

Requirements

What Next.js için Stripe Entegrasyonu needs

  • Mevcut Next.js projesi
  • Stripe Test Mode erişimi

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

Ne işe yarar

Next.js uygulamanızın içinde şeritli ödeme

Bacodo, Stripe'ı halihazırda sahip olduğunuz Next.js projesine entegre eder. Devir teslimden sonra uygulama deponuzda kalır, böylece ekibiniz onu okuyabilir, değiştirebilir ve genişletebilir. Stripe hesabı, API anahtarları ve Stripe ücretleri hâlâ size aittir.

Çözdüğü sorun

Next.js'de kart ve cüzdan ödemesi için PaymentIntents, Checkout veya Payment Element, 3-D Secure, yalnızca sunucuya yönelik gizli anahtarlar ve imzaları doğrulayan bir webhook Rota İşleyicisi gerekir. Bu yolu sıfırdan inşa etmek yavaştır ve yanlış yapılması kolaydır.

Projeye nasıl dahil edilir?

Next.js istemcisine Stripe.js'yi, Ödeme Amaçları veya Ödeme Oturumları oluşturan Yönlendirme İşleyicilerini (veya Sunucu Eylemlerini), web kancası doğrulamasını, başarı/iptal sayfalarını ve Uygulama Yönlendiricisi için test/canlı ortam yapılandırmasını ekliyoruz.

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

Ekibiniz ilk üretim Stripe Next.js uygulamasını atlıyor: Uygulama Yönlendirici işleyicileri, SCA, hata durumları ve canlı anahtarların nasıl gönderileceğini belgeleyen bir devir teslim.

Kimin için

Halihazırda Next.js uygulamasına sahip olan ve sürdürebilecekleri bir üretim ödeme yolu isteyen geliştiriciler, teknik ekipler, ajanslar ve startup'lar.

Temel özellikler

Next.js için Stripe Entegrasyonu neler içerir

Next.js'de Şerit Ödeme veya Ödeme Öğesi

Next.js ödeme sayfanızda barındırılan Stripe Checkout'u veya yerleşik bir Ödeme Öğesini kullanın. Kart girişi, 3-D Secure ve cüzdan düğmeleri, sakladığınız özel bir kart formunda değil, Stripe'ın PCI yolunda kalır.

PaymentIntents için Next.js Yönlendirme İşleyicileri

Next.js Rota İşleyicilerinde Ödeme Oturumları veya PaymentIntent'ler oluşturun. Tarayıcı yalnızca yayınlanabilir anahtarı ve istemci sırrını kullanır; gizli anahtar hiçbir zaman bir İstemci Bileşeninde gönderilmez.

Next.js Checkout'ta Apple Pay ve Google Pay

Stripe hesabınız ve alanınız doğrulandığında Stripe Checkout veya Payment Element'te cüzdan düğmelerini etkinleştirin. Next.js geri dönüşü kart ödemesinde kalır.

Next.js test modu ve ardından canlı Stripe tuşları

Next.js uygulamasını Stripe test anahtarları, test kartları ve canlı anahtarlara geçiş için belgelenmiş bir geçişle birlikte gönderin. Next.js ortam değişkenleri istemci paketinin dışında kalır.

Next.js sipariş durumu için Web Kancası Rota İşleyicisi

Next.js kullanıcı arayüzündeki ödeme başarısı gerçeğin kaynağı değildir. Rota İşleyicisi, Stripe imzalarını doğrular ve yerine getirilmeden önce sipariş veya yetki durumunu günceller.

Next.js'nin başarısı, iptali ve hata durumları

Reddedilen kartları, iptal edilen Ödemeyi, ağ hatalarını ve tamamlanmamış 3-D Secure'u ele alarak Next.js kullanıcı arayüzünün müşteriyi ölü bir sayfada bırakmamasını sağlayın.

Kullanım senaryoları

Next.js için Stripe Entegrasyonu ne zaman uygun

Mevcut Next.js mağazası veya rezervasyon sitesi

Next.js'de zaten sipariş veya rezervasyon alıyorsunuz ve kataloğu veya rezervasyon akışını yeniden yazmanıza gerek kalmadan kart ödemesine ihtiyacınız var.

Ajans Next.js istemci sitesini üretime aktarıyor

Next.js'de sürdürülebilir bir Stripe yoluna, istemci deposundaki kaynağa ve tek seferlik Next.js prototipi yerine belgelenmiş bir canlı anahtar geçişine ihtiyacınız var.

SaaS veya üyelik Next.js uygulaması

Next.js uygulaması, abonelikler ve faturalar sunucunuzda ve halihazırda kullanıyorsanız Stripe Faturalandırmada kalırken ilk ödemeyi almalı veya bir ödeme yöntemini güncellemelidir.

Next.js pazaryeri veya hizmet ödemelerinin daha sonra yapılması

Next.js uygulamasında müşteri ücretleriyle başlayın. Next.js pazaryeri modelinizin bunlara ihtiyacı varsa Stripe Connect veya hedef ücretleri ayrı olarak kapsamlandırılabilir.

Demo

Next.js Stripe ödeme akışı önizlemesi

Next.js ödeme yolunu önizleyin: sepet veya ödeme işlemi, Ödeme veya Ö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

Next.js için Stripe Entegrasyonu nasıl sağlanır?

Uygulama Yönlendiricisi, Rota İşleyicileri ve mevcut veri katmanınız için Next.js ve Stripe'a özel kontroller içeren standart Bacodo eklenti iş akışı.

  1. 01

    Next.js Stripe'ı seçin

    Next.js için Stripe Entegrasyonunu ve birinci gün ödeme işleminin Ödeme Öğesi mi yoksa Ödeme Öğesi mi barındırıldığını onaylayın.

  2. 02

    Next.js uyumluluk kontrolü

    Next.js sürümünü, Uygulama Yönlendiricisi ile Sayfa Yönlendiricisi karşılaştırmasını, mevcut ödeme kullanıcı arayüzünü, veritabanını ve halihazırda bir Stripe hesabınızın olup olmadığını inceleyin.

  3. 03

    Next.js'ye entegre edin

    Stripe.js, ödeme sayfaları, oturumlar için Yönlendirme İşleyicileri veya PaymentIntents ve imzalı bir web kancası işleyicisi ekleyin.

  4. 04

    Next.js uygulamasını yapılandırma

    Next.js test anahtarlarını, webhook uç noktasını ve ortama özel sunucu yapılandırmasını bağlayın.

  5. 05

    Next.js ödeme yolunu test edin

    Next.js uygulamasında Stripe test kartlarını, 3-D Secure'u, yolları iptal etme/reddetme ve webhook onayını çalıştırın.

  6. 06

    Next.js kaynağını devredin

    Next.js kaynağını, yapılandırma notlarını ve canlı anahtar kontrol listesini sunun. Next.js uygulamasının bakımı size aittir.

Mimari

Stripe Next.js projesine nasıl bağlanır?

Next.js tarayıcısı asla Stripe ile gizli bir anahtarla konuşmaz. Ödeme veya Ödeme Öğesi, Rota İşleyicisinden gelen bir istemci sırrını kullanır. Stripe, tamamlamadan önce Next.js web kancanızı bilgilendirir.

Sonraki.js sayfasıStripe.js / ÖdemeRota İşleyicisiŞeritli Ödeme AmaçlarıWeb Kancası Rota İşleyicisiVeritabanı / sipariş durumu

Desteklenen teknolojiler

Next.js için Stripe Entegrasyonu gerçekte ne kullanır

Next.js Uygulama Yönlendiricisi

Uygulama Yönlendiricili mevcut kararlı Next.js varsayılandır. Next.js deponuzun zaten kullandığı şey buysa Pages Router'ın kapsamı belirlenebilir.

Stripe.js ve Stripe Node SDK'sı

Next.js istemcisindeki resmi Stripe.js ve oturumlar, PaymentIntent'ler ve webhook doğrulaması için sunucudaki şerit.

Next.js veri katmanınız

Sipariş veya yetkilendirme güncellemeleri, Next.js uygulamanızın zaten kullandığı veritabanında veya API'de kalır. Arka ucunuzu yalnızca Bacodo'ya özgü bir hizmetle değiştirmeyiz.

Next.js uygulaması için Stripe hesabı

Stripe hesabınız, Next.js tarafından kullanılan test ve canlı anahtarlarınız, webhook uç noktası ve Dashboard etkinlikleri. Stripe işlem ücretleri Stripe'a aittir.

Next.js barındırma kurulumu gerekli

Next.js Rota İşleyicilerini çalıştırabilen ve Stripe web kancalarını alabilen bir ana bilgisayar (örneğin Vercel veya Node sunucusu). Bu ödeme yolu için yalnızca statik dışa aktarma yeterli değildir.

Neler dahil

Next.js için Stripe Entegrasyonu neler içerir?

  • Mevcut Next.js projesine entegrasyon
  • Deponuzdaki tam kaynak kodu
  • Ortam ve Rota İşleyici yapılandırması
  • Bu ödeme yolu için Ödeme veya Ödeme Öğesi artı webhook değişiklikleri gerekiyor
  • Next.js ödeme akışları devir öncesinde test edildi
  • 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
  • Sipariş durumunu saklayacak bir yeriniz yoksa yeni bir veritabanı veya CMS
  • Özel çalışma kapsamına girmediği sürece Marketplace Connect, özel Faturalandırma ürünleri veya Uygulama İçi Satın Alma değişimi

Pricing

Next.js fiyatlandırması için Stripe Entegrasyonu

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

Next.js için Stripe Entegrasyonu

Üretime hazır Stripe ödemelerini mevcut bir Next.js uygulamasına ekleyin ve kaynak kodunu saklayın.

Gereksinimler

  • Mevcut Next.js projesi
  • Stripe Test Mode erişimi

$145

tek seferlik

Next.js

Backend gerekir mi?

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

Güvenli ödeme:stripe

Teslimat ve güvenlik

Next.js teslimi ve güvenlik uygulamaları

Tahmini Next.js teslimatı

Tipik Next.js Stripe ödeme entegrasyonunun kapsamı Next.js uyumluluk kontrolünden sonra belirlenir. Zaman çizelgesi, mevcut Next.js ödeme kullanıcı arayüzüne ve veri katmanınıza bağlıdır.

Devir teslimden önce Next.js'de test edildi

Test modu kartları, 3-D Secure, iptal ve reddetme yolları, teslim edilmeden önce Next.js uygulamasında uygulanır.

Stripe sırları Next.js İstemci Bileşenlerinin dışında kalır

Stripe gizli anahtarları ve webhook imzalama sırları sunucu ortamında kalır. Next.js tarayıcısı yalnızca yayınlanabilir bir anahtar ve kısa ömürlü istemci sırlarını alır.

Next.js siparişleri için web kancası doğrulaması

Next.js webhook Rota İşleyicisi, siparişi veya yetkilendirme durumunu güncellemeden önce Stripe imzalarını doğrular.

Doğrulanamayan Next.js güvenlik iddiası yok

PCI sertifikası, sıfır sahtekarlık veya garantili onay oranları talep etmiyoruz. Next.js kart verileri, sakladığımız özel bir kart formu değil, Stripe Checkout veya Payment Element aracılığıyla toplanır.

SSS

Sık sorulan sorular

Next.js için Stripe Entegrasyonu neler içerir?

Next.js için Stripe Entegrasyonu, mevcut Next.js ödeme sayfanızda Stripe.js, Checkout veya Payment Element'i, Rota İşleyicilerinde PaymentIntent veya Checkout Oturumu oluşturmayı, imzalı bir webhook işleyicisini, test kapsamını ve devir notlarını içerir. Next.js kaynağını projenizde alırsınız. Stripe ücretleri ve Stripe hesabınız ayrıdır.

Stripe'ı mevcut Next.js uygulamamıza entegre edecek misiniz?

Evet. Next.js için Stripe Entegrasyonu, halihazırda sahip olduğunuz Next.js projesi için oluşturulmuştur. Teslimat olarak ayrı bir demo uygulaması göndermek yerine ödeme ve ödeme giriş noktasını mevcut Next.js rotalarınıza ve kullanıcı arayüzünüze sığdırıyoruz.

Next.js için Stripe Entegrasyonu bir sunucu gerektirir mi?

Evet, üretim Next.js Stripe yolu için. Ödeme Amaçları, Ödeme Oturumları ve gizli anahtar sunucuda bulunmalıdır. Next.js tarayıcısı yalnızca yayınlanabilir bir anahtar ve istemci sırrı alır. Yalnızca statik bir Next.js dışa aktarımı bu webhook yolunu barındıramaz.

Next.js için Stripe Entegrasyonu hangi Stripe paketlerini kullanıyor?

Next.js için Stripe Entegrasyonu, istemcide resmi Stripe.js'yi ve Next.js Rota İşleyicilerinde Stripe Node SDK'yı kullanır. Açıkça gerek duymadığınız sürece Next.js ödemesini belgelenmemiş bir eklentiye sarmayız.

Next.js 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. Next.js'de cüzdan düğmeleri isteğe bağlı kapsamdadır. Next.js'deki Kart Ödemesi veya Ödeme Öğesi varsayılan yedek olarak kalır.

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

Next.js kapsamı için Varsayılan Stripe Entegrasyonu Uygulama Yönlendiricisidir. Next.js deponuzun zaten kullandığı şey buysa ve Next.js uyumluluk kontrolü sırasında bunu kabul ediyorsak, Pages Router API rotaları dahil edilebilir.

Next.js için Stripe Entegrasyonu abonelik ödemelerini toplayabilir mi?

Next.js istemcisi bir PaymentIntent'i onaylayabilir veya Stripe.js aracılığıyla bir Ödeme Oturumu başlatabilir. Yinelenen Stripe Billing ürünleri, müşteri portalı ve fatura mantığı sunucuda yayındadır. Abonelik ağırlıklı Next.js çalışmaları için Özel Fiyat Teklifi gerekebilir.

Stripe'ın yayınlanabilir ve gizli anahtarları Next.js uygulamasında nerede bulunur?

Next.js tarayıcısı yalnızca Stripe yayınlanabilir anahtarını kullanır. Gizli anahtar ve web kancası imzalama sırrı, Yönlendiriciler tarafından kullanılan sunucu ortamı değişkenlerinde kalır. Next.js için Stripe Entegrasyonu, İstemci Bileşenlerine gizli anahtarlar yerleştirmez.

Next.js'de Stripe test modu ve canlı mod nasıl çalışır?

Next.js için Stripe Entegrasyonunu öncelikle Stripe test anahtarlarına ve test kartlarına uyguluyoruz. Canlı yayına geçmek, Stripe Dashboard'unuzda ve Next.js sunucu ortamınızda belgelenmiş bir anahtar ve web kancasının geçişidir, bir eklenti lisansı etkinleştirmesi değildir.

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

Stripe Checkout ve Ödeme Öğesi, Stripe.js aracılığıyla 3-D Secure'u yönetir. Next.js sayfası, Stripe son durumu döndürene kadar ödeme akışını canlı tutmalıdır; Next.js için Stripe Entegrasyonu bu durumları açıkça bağlar.

Next.js ödemesi için Stripe web kancaları gerekli midir?

Next.js Ödeme veya Ödeme Öğesinden sonra yerine getirilmesi için evet. Next.js kullanıcı arayüzü gerçeğin kaynağı değildir. Rota İşleyicisi, 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.

Mevcut Next.js ödeme kullanıcı arayüzümüzü Stripe ile koruyabilir miyiz?

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

Next.js 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. Next.js eklenti fiyatı, Bacodo ödeme lisansı değil, Next.js projenize uygulanmasıdır.

Next.js 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. Next.js için Stripe Entegrasyonu, Stripe'ın ürün türünüz için izin verilen bir ödeme yolu olduğu Next.js web sitesinde veya web uygulamasında Stripe ödemesi içindir.

Next.js'de Stripe makbuzlarını ve meta verilerini özelleştirebilir miyiz?

Evet. PaymentIntent veya Checkout Session meta verileri, müşteri kayıtları ve webhook onayından sonra devam ettirdiğiniz alanlar, Next.js için Stripe Entegrasyonu sırasında mevcut Next.js sipariş modelinize hizalanır.

Stripe devrinden sonra hangi Next.js desteği dahildir?

Next.js kaynağı deponuzda olduğundan ekibiniz bu kaynağın bakımını yapabilir. Dahil edilen 30 günlük destek, Next.js özelliği çalışmasıyla ilgili olmayan, teslim edilen Next.js kapsamındaki Stripe Entegrasyonu'ndaki teknik soruları ve kusurları kapsar.

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

30 günlük süre boyunca, teslim edilen Next.js entegrasyonunda belgelenen bir Stripe veya Stripe.js değişikliğinden kaynaklanan kesintilere yardımcı oluyoruz. Bundan sonra devam eden Next.js paketi yükseltmeleri bakımınızdır veya satın alırsanız Genişletilmiş Teknik Destektir.

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

Next.js ödeme yolundan PaymentIntent veya Checkout Oturumu durumunun, Stripe Dashboard günlüklerinin ve webhook tesliminin nasıl okunacağını belgeliyoruz. 30 günlük destek, sunulan Next.js akışı için sorun giderme reddedilmelerini, 3-D Secure'un devre dışı bırakılmasını ve yanlış yapılandırılmış anahtarları içerir.

Hangi Next.js sürümleri Next.js için Stripe Entegrasyonu ile uyumludur?

Next.js sürümünüzü, Uygulama Yönlendiricinizi veya Sayfa Yönlendiricinizi ve Node çalışma zamanınızı, entegrasyon zamanında sabitlediğimiz Stripe SDK'ya göre doğrularız. Daha eski veya yoğun şekilde çatallanmış Next.js çalışma zamanları ekstra kapsam gerektirebilir.

Next.js için Stripe Entegrasyonu için 30 günlük destek ile 6 aylık Genişletilmiş Teknik Destek nedir?

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

Next.js için Stripe Entegrasyonu

Mevcut Next.js uygulamanıza üretime hazır Stripe ödemeleri ekleyin, kaynak kodunu saklayın ve sıfırdan bina ödemesini atlayın.

$145