React İle Stripe Entegrasyonu Kullanarak Dinamik Bir Abonelik Planı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce sisteminizde belirli araçların yüklü olması ve Stripe tarafında gerekli yapılandırmaların tamamlanması gerekmektedir. Aşağıdaki liste, geliştirme ortamınızın hazır olması için temel gereksinimleri içerir:

• Node.js (v20+): React ve backend servislerini çalıştırmak için güncel sürüm.
• Stripe Hesabı: Stripe Dashboard üzerinden "Test Mode" anahtarlarınızı almalısınız.
• Stripe CLI: Webhook'ları yerel ortamınızda test etmek için gereklidir.
• React (v18+): Modern kanca (hook) yapısını kullanacağımız için güncel sürüm.

Stripe CLI'ı yükledikten sonra terminal üzerinden stripe login komutu ile giriş yapmayı unutmayın. Bu, yerel sunucunuz ile Stripe sunucuları arasında güvenli bir köprü kurmanızı sağlayacaktır.

Adım 1: Stripe Ürün ve Fiyat Yapılandırması

Dinamik bir abonelik sistemi için Stripe Dashboard üzerinde ürünlerinizi ve bu ürünlere ait fiyatlandırma planlarını tanımlamanız gerekir. Stripe, "Product" (Ürün) ve "Price" (Fiyat) hiyerarşisi ile çalışır. Bir ürünün birden fazla fiyatı (aylık, yıllık gibi) olabilir.

Stripe Dashboard'da "Products" sekmesine gidin ve "Add Product" butonuna tıklayarak abonelik planlarınızı oluşturun. Her plan için bir "Price ID" (Örn: price_1Mq...) oluşacaktır. Bu ID'leri React tarafında ödeme isteği gönderirken kullanacağız.

Adım 2: Backend Tarafında Ödeme Oturumu (Session) Oluşturma

Güvenlik nedeniyle, ödeme tutarı ve plan bilgileri asla doğrudan React (frontend) üzerinden Stripe'a gönderilmemelidir. Bunun yerine, backend tarafında bir "Checkout Session" oluşturulmalı ve bu oturumun URL'i frontend'e döndürülmelidir. Aşağıdaki örnek, Node.js ve Express ile bu işlemin nasıl yapıldığını gösterir.

const stripe = require('stripe')('sk_test_your_secret_key');

app.post('/create-checkout-session', async (req, res) => {
  const { priceId } = req.body;
  try {
    const session = await stripe.checkout.sessions.create({
      mode: 'subscription',
      payment_method_types: ['card'],
      line_items: [{ price: priceId, quantity: 1 }],
      success_url: 'https://your-app.com/success',
      cancel_url: 'https://your-app.com/cancel',
    });
    res.json({ url: session.url });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Bu kod bloğu, istemciden gelen priceId bilgisini kullanarak Stripe tarafında bir ödeme oturumu başlatır ve kullanıcıyı yönlendirmemiz gereken URL'i döner.

Adım 3: React İle Ödeme Tetikleyici Bileşeni Oluşturma

Backend'den aldığımız URL'i kullanarak kullanıcıyı Stripe'ın güvenli ödeme sayfasına yönlendiren bir React bileşeni oluşturacağız. Burada fetch API kullanarak backend servisimizle iletişim kuracağız.

import React from 'react';

const SubscriptionButton = ({ priceId }) => {
  const handleCheckout = async () => {
    const response = await fetch('/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ priceId }),
    });
    const { url } = await response.json();
    window.location.href = url;
  };

  return (
    
      Abone Ol
    
  );
};

Bu bileşen, kullanıcı butona tıkladığında backend'e istek atar ve Stripe'ın sunduğu güvenli ödeme ekranına yönlendirme yapar. Bu yöntem, kredi kartı bilgilerini kendi sunucunuzda tutmamanızı sağlar, bu da PCI uyumluluğu açısından kritiktir.

Adım 4: Webhook İle Abonelik Durumunu Yönetme

Kullanıcı ödemeyi tamamladığında veya aboneliği iptal ettiğinde, Stripe uygulamanıza bir bildirim gönderir. Buna "Webhook" denir. Webhook'lar, veritabanınızdaki kullanıcı abonelik durumunu güncellemek için tek güvenilir yöntemdir.

app.post('/webhook', express.raw({type: 'application/json'}), (req, res) => {
  const event = req.body;
  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    // Kullanıcıya abonelik hakkını ver (Örn: Veritabanı güncelleme)
    console.log('Abonelik başarılı:', session.customer_email);
  }
  res.json({received: true});
});

Bu kod, Stripe'tan gelen olayları dinler ve checkout.session.completed tetiklendiğinde ilgili kullanıcının aboneliğini aktif eder. Yerel testler için stripe listen --forward-to localhost:4242/webhook komutunu kullanmalısınız.

Karşılaştırma: Stripe Entegrasyon Yöntemleri

Kritik Güvenlik Uyarısı: Stripe Secret Key (sk_test_...) anahtarınızı asla React uygulamanızın içine (frontend) gömmeyin. Bu anahtarlar sadece backend ortamında kullanılmalıdır. Frontend tarafında sadece Publishable Key (pk_test_...) kullanılabilir.

Sıkça Sorulan Sorular

Stripe Webhook'ları neden gereklidir?

Webhook'lar, ödeme sonrası Stripe'ın uygulamanıza "Ödeme başarılı oldu" bilgisini asenkron olarak göndermesini sağlar. Kullanıcı tarayıcıyı kapatsa bile veritabanınızın güncellenmesini garanti eder.

Abonelik planlarını nasıl dinamik hale getirebilirim?

Stripe Dashboard üzerinden yeni fiyatlar oluşturup, bu fiyatların ID'lerini veritabanınızda tutarak React tarafında bir seçim menüsü (select box) ile dinamik olarak gönderebilirsiniz.

Test ödemeleri için gerçek kart mı kullanmalıyım?

Hayır, Stripe'ın sunduğu test kart numaralarını (Örn: 4242 4242...) kullanarak gerçek para harcamadan entegrasyonunuzu test edebilirsiniz.

Kullanıcı aboneliği iptal ederse ne olur?

Stripe üzerinden customer.subscription.deleted webhook olayını dinleyerek, veritabanınızdaki kullanıcının abonelik durumunu "pasif" olarak güncellemelisiniz.

React uygulamasında hata yönetimi nasıl olmalı?

Ödeme isteği sırasında oluşabilecek ağ hatalarını try-catch blokları ile yakalamalı ve kullanıcıya anlamlı hata mesajları göstermelisiniz.

Stripe Entegrasyonunda İleri Düzey Hata Ayıklama ve İzleme

Canlı bir uygulamada ödeme süreçleri kritik öneme sahiptir. Stripe entegrasyonunda karşılaşılan sorunları hızlıca tespit etmek için uygulamanızda kapsamlı bir loglama mekanizması kurmalısınız. Özellikle webhook tarafında gelen isteklerin doğrulanması ve işlenmesi sırasında yaşanabilecek aksaklıklar için Stripe Dashboard üzerindeki "Events" sekmesini aktif olarak kullanın.

Hata ayıklama sürecinde, Stripe'ın sağladığı request_id değerlerini veritabanınızda tutarak, bir ödeme başarısız olduğunda Stripe destek ekibiyle veya kendi loglarınızla eşleştirme yapabilirsiniz. Aşağıdaki örnekte, bir ödeme oturumu oluştururken oluşabilecek hataları yakalayan ve merkezi bir hata yönetim yapısı sunan bir servis örneği yer almaktadır:

// services/stripeService.js
export const createCheckoutSession = async (priceId) => {
  try {
    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ priceId }),
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'Ödeme oturumu oluşturulamadı.');
    }

    return await response.json();
  } catch (error) {
    console.error('Stripe Hata Detayı:', error);
    // Hata takibi için Sentry veya benzeri bir araç kullanılabilir
    throw error;
  }
};

Performans Optimizasyonu ve Güvenlik İpuçları

Ödeme sayfalarınızın yüklenme süresi, dönüşüm oranlarını (conversion rate) doğrudan etkiler. Stripe.js kütüphanesini uygulamanızın her yerinde değil, sadece ödeme ile ilgili bileşenlerde yükleyerek başlangıç performansını artırabilirsiniz. Ayrıca, Stripe'ın sunduğu Elements yapısını kullanarak hassas kart verilerinin doğrudan Stripe sunucularına gitmesini sağlayın; bu sayede PCI uyumluluğu yükünüzü hafifletmiş olursunuz.

Güvenlik İçin En İyi Uygulamalar

• Webhook İmza Doğrulama: Webhook uç noktanızın sadece Stripe'tan gelen istekleri kabul ettiğinden emin olmak için stripe-signature başlığını mutlaka doğrulayın.
• Çevre Değişkenleri: Stripe API anahtarlarınızı asla frontend kodunuzda hard-coded olarak tutmayın; .env dosyaları ile yönetin.
• Rate Limiting: Ödeme oturumu oluşturan API uç noktalarınızı, kötü niyetli istekleri engellemek için hız sınırlayıcı (rate limiter) ile koruyun.

Aşağıdaki kod örneği, Node.js tarafında webhook doğrulamasının nasıl güvenli bir şekilde yapılacağını göstermektedir:

// server.js (Webhook Endpoint)
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

app.post('/webhook', express.raw({type: 'application/json'}), (request, response) => {
  const sig = request.headers['stripe-signature'];
  let event;

  try {
    event = stripe.webhooks.constructEvent(request.body, sig, process.env.STRIPE_WEBHOOK_SECRET);
  } catch (err) {
    return response.status(400).send(`Webhook Hatası: ${err.message}`);
  }

  // Olayı işleme mantığı
  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    // Veritabanı güncelleme işlemleri
  }

  response.json({received: true});
});

Sonuç

React ile Stripe entegrasyonu, doğru adımlar izlendiğinde oldukça güvenli bir süreçtir. Bu rehberde, bir abonelik sisteminin temelini oluşturan oturum yönetimi, frontend yönlendirmeleri ve webhook ile durum takibini öğrendiniz. Bir sonraki adım olarak, Stripe'ın sunduğu "Customer Portal" özelliğini kullanarak kullanıcılarınızın kendi aboneliklerini yönetmelerine (plan değişikliği veya iptal) imkan tanıyan bir panel geliştirebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamına geçmeden önce Stripe'ın resmi dokümantasyonunu incelemeli, hata yönetimi, güvenlik duvarı (firewall) yapılandırması ve veri gizliliği politikalarını (KVKK/GDPR) gözden geçirmelisiniz.