React İle Stripe Bağlantılı Abonelik İptal Süreci Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Uygulamaya başlamadan önce sisteminizde belirli araçların kurulu olduğundan ve Stripe entegrasyonunun hazır olduğundan emin olmalısınız. Aşağıdaki liste, geliştirme ortamınızın temel taşlarını oluşturur:

• Node.js (v20+): Arka uç işlemlerini yönetmek için gereklidir.
• React (v18+): Kullanıcı arayüzünü oluşturmak için kullanılır.
• Stripe SDK: Hem ön uçta (stripe-js) hem de arka uçta (stripe-node) yüklü olmalıdır.
• Stripe API Key: Dashboard üzerinden alınan Secret Key ve Publishable Key değerleri.

Geliştirme aşamasında Stripe CLI kullanarak yerel ortamınızda Webhook olaylarını simüle etmeniz, üretim ortamına geçmeden önce hataları ayıklamanız için hayati önem taşır. Ayrıca, abonelik kimliklerinin (subscription ID) veritabanınızda kullanıcı ile eşleşmiş olması gerektiğini unutmayın.

Stripe Abonelik İptal Mantığı

Stripe üzerinde bir aboneliği iptal etmek için iki ana yöntem bulunur: "Hemen İptal Et" veya "Dönem Sonunda İptal Et". Kullanıcı deneyimi açısından genellikle dönem sonuna kadar erişimin devam ettiği ikinci yöntem tercih edilir. Aşağıdaki tablo, bu iki yöntemin karşılaştırmasını sunar:

Arka Uçta Abonelik İptal Servisi Oluşturma

React uygulamanızdan gelen isteği karşılayacak olan Node.js sunucunuzda, Stripe'ın cancel metodunu kullanacağız. Bu işlem, doğrudan Stripe API'sine bir istek gönderir ve aboneliğin durumunu canceled olarak günceller.

// server.js - Abonelik İptal Endpoint'i
app.post('/api/cancel-subscription', async (req, res) => {
  const { subscriptionId } = req.body;

  try {
    const deletedSubscription = await stripe.subscriptions.update(subscriptionId, {
      cancel_at_period_end: true,
    });
    res.status(200).json({ success: true, subscription: deletedSubscription });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Bu kod bloğunda, cancel_at_period_end parametresini true yaparak kullanıcının mevcut ödeme döneminin sonuna kadar servisi kullanmaya devam etmesini sağlıyoruz. Bu, ticari olarak en güvenli ve yaygın yaklaşımdır.

React Ön Yüzünde İptal Butonu Tasarımı

React tarafında kullanıcıya iptal butonunu sunarken, işlemin geri alınamaz olduğunu veya dönem sonuna kadar geçerli olduğunu belirtmek önemlidir. Aşağıdaki örnekte, bir iptal butonunun nasıl oluşturulacağını görebilirsiniz.

// SubscriptionCancelButton.jsx
import React, { useState } from 'react';

const SubscriptionCancelButton = ({ subscriptionId }) => {
  const [loading, setLoading] = useState(false);

  const handleCancel = async () => {
    setLoading(true);
    const response = await fetch('/api/cancel-subscription', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ subscriptionId }),
    });
    
    if (response.ok) {
      alert('Aboneliğiniz dönem sonunda iptal edilecektir.');
    }
    setLoading(false);
  };

  return (
    
      {loading ? 'İşleniyor...' : 'Aboneliği İptal Et'}
    
  );
};

Bu bileşen, kullanıcı butona bastığında loading durumunu yöneterek mükerrer tıklamaları engeller ve API'den gelen yanıta göre kullanıcıyı bilgilendirir.

Güvenlik ve Hata Yönetimi

Stripe entegrasyonlarında en büyük risk, yetkisiz kullanıcıların başkalarının aboneliklerini iptal etmesidir. Bu nedenle, API uç noktalarınızda her zaman kullanıcı oturumunu (session) kontrol etmelisiniz.

Güvenlik Uyarısı: İptal isteği gönderirken asla sadece subscriptionId değerine güvenmeyin. Arka uçta, o subscriptionId değerinin gerçekten o an oturum açmış kullanıcıya ait olduğunu veritabanınızdan doğrulayın.

Hataları yönetmek için try-catch bloklarını kullanmak ve Stripe'dan dönen hata kodlarını (örneğin: resource_missing veya invalid_request_error) kullanıcıya anlamlı bir mesaj olarak göstermek, profesyonel bir uygulama için şarttır.

Kullanıcı Deneyimini İyileştirme: İptal Sebebi Anketi

Kullanıcı aboneliğini iptal etmeye karar verdiğinde, nedenini öğrenmek ürün geliştirme süreciniz için altın değerindedir. İptal butonuna basıldığında basit bir modal penceresi açarak kullanıcıya "Neden ayrılıyorsunuz?" sorusunu sorabilirsiniz.

// CancelModal.jsx
const CancelModal = ({ onConfirm }) => {
  const [reason, setReason] = useState('');

  return (
    

      
Neden ayrılıyorsunuz?
       setReason(e.target.value)}>
        Çok pahalı
        İhtiyacımı karşılamıyor
      
       onConfirm(reason)}>İptali Onayla
    
  );
};

Bu veriyi Stripe'ın metadata alanına kaydederek veya kendi veritabanınızda saklayarak abonelik kayıplarınızı analiz edebilirsiniz.

Sıkça Sorulan Sorular

Abonelik iptal edildiğinde kullanıcıya e-posta gider mi?

Stripe Dashboard ayarlarınızdan "Email customers about subscription cancellations" seçeneğini aktif ederseniz, Stripe otomatik olarak bilgilendirme e-postası gönderir.

İptal edilen bir abonelik tekrar nasıl aktif edilir?

Stripe API'sinde cancel_at_period_end değerini false yaparak aboneliği iptal sürecinden çıkarabilir ve aktif tutabilirsiniz.

Kullanıcıya para iadesi yapmam gerekir mi?

Bu iş modelinize bağlıdır. Stripe üzerinden refund metodunu kullanarak kısmi veya tam iade gerçekleştirebilirsiniz, ancak bu genellikle manuel bir süreçtir.

Webhook neden kullanılmalı?

Webhook, Stripe'ta gerçekleşen (iptal, ödeme başarısızlığı vb.) olayları sunucunuza anlık bildirmek için kullanılır. Veritabanınızı güncel tutmak için zorunludur.

Hangi Stripe sürümü ile çalışmalıyım?

Her zaman en güncel Stripe API sürümünü kullanmanız önerilir. 2026 itibarıyla Stripe SDK'nın en son kararlı sürümünü kullandığınızdan emin olun.

Stripe Webhook Entegrasyonu ile Veritabanı Senkronizasyonu

Abonelik iptal süreci sadece ön yüzde butona tıklanmasıyla bitmez. Kullanıcı aboneliğini iptal ettiğinde, Stripe tarafında gerçekleşen customer.subscription.deleted veya customer.subscription.updated olaylarını yakalamak, veritabanınızdaki kullanıcı yetkilerini güncel tutmak için kritiktir. Bu senkronizasyon, kullanıcının iptal sonrası erişimini anında veya dönem sonunda kesmenizi sağlar.

Webhook Dinleyicisi Kurulumu

Node.js ve Express kullanarak Stripe'tan gelen bildirimleri doğrulamak ve işlemek için aşağıdaki yapıyı kullanabilirsiniz. Bu kod, gelen isteğin gerçekten Stripe'tan geldiğini doğrular ve abonelik durumunu veritabanınızda günceller.

const express = require('express');
const app = express();
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

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

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

  if (event.type === 'customer.subscription.deleted') {
    const subscription = event.data.object;
    // Veritabanı işlemleri: Kullanıcının 'isPremium' değerini false yap
    await db.users.update({ stripeSubscriptionId: subscription.id }, { isPremium: false });
    console.log(`Abonelik iptal edildi: ${subscription.id}`);
  }

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

İptal Sürecinde Hata Ayıklama ve Test Stratejileri

Stripe entegrasyonlarında en sık karşılaşılan sorunlar, API anahtarlarının yanlış yapılandırılması veya webhook uç noktalarının yerel ortamda (localhost) erişilemez olmasıdır. Bu süreci hatasız yönetmek için izlemeniz gereken yöntemler şunlardır:

• Stripe CLI Kullanımı: Yerel geliştirme ortamınızda webhook'ları test etmek için Stripe CLI'ı mutlaka kullanın. stripe listen --forward-to localhost:3000/webhook komutu ile canlı trafiği yerel sunucunuza yönlendirebilirsiniz.
• Log İnceleme: Stripe Dashboard üzerindeki "Developers > Webhooks" sekmesinden gönderilen isteklerin durum kodlarını (200 OK, 404 Not Found vb.) takip edin.
• Hata Yakalama (Try-Catch): API çağrılarınızda mutlaka StripeInvalidRequestError gibi spesifik hataları yakalayın ve kullanıcıya anlamlı hata mesajları döndürün.

Test Senaryosu Tablosu

Bu yapıyı kurarken, veritabanı güncellemelerinizin atomik olduğundan emin olun. Eğer bir hata oluşursa, Stripe'ın webhook'u tekrar deneyeceğini (retry) unutmayın; bu nedenle veritabanı işlemlerinizin "idempotent" (aynı işlem birden fazla kez çalışsa bile sonucu değiştirmeyen) olması, sisteminizin kararlılığını artıracaktır.

Sonuç

React ile Stripe bağlantılı abonelik iptal süreci, doğru yapılandırıldığında kullanıcılarınız için güven verici ve profesyonel bir deneyim sunar. Bu rehberde, iptal mantığının arka uçtaki kurulumundan, ön yüzdeki kullanıcı etkileşimine kadar olan adımları inceledik. Güvenliği ön planda tutan, dönem sonuna kadar erişim sağlayan ve kullanıcıdan geri bildirim alan bir yapı kurmak, SaaS projenizin sürdürülebilirliği için en iyi yaklaşımdır.

Yasal ve Teknik Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Ödeme sistemleri hassas veriler içerir; üretim ortamına geçmeden önce tüm API anahtarlarınızı güvenli bir şekilde (env dosyaları ile) sakladığınızdan ve güvenlik denetimlerini tamamladığınızdan emin olun. Yazılım hatalarından kaynaklanabilecek veri kayıpları veya finansal aksaklıklardan yazar sorumlu tutulamaz.

Bir sonraki adım olarak, abonelik iptali gerçekleştiğinde tetiklenen Stripe Webhook'larını dinleyerek veritabanınızdaki kullanıcı rollerini otomatik güncelleyen bir yapı kurmayı deneyebilirsiniz. Başarılar dilerim.