react-stripe-elements

react-stripe-elements, React uygulamalarında Stripe'ın güvenli UI bileşenleri olan 'Elements'ı entegre etmek için tasarlanmış popüler bir React kütüphanesiydi. Stripe'ın ödeme bilgilerini toplamak için resmi JavaScript kütüphanesi olan Stripe.js'in React dostu bir sarmalayıcısı olarak işlev görüyordu.

react-stripe-elements'in temel amacı, geliştiricilerin hassas ödeme bilgilerini (kredi kartı numaraları gibi) doğrudan kullanıcının tarayıcısından güvenli bir şekilde toplamasına olanak tanımaktı, bu bilgilerin asla geliştiricinin sunucusuna dokunmasını engellemekti. Bu, Stripe'ın hassas verilerin güvenliğini ve depolanmasını üstlenmesi nedeniyle PCI uyumluluğunu önemli ölçüde basitleştiriyordu.

Temel özellikler ve bileşenler şunları içeriyordu:

1. `StripeProvider`: Bu üst düzey bileşen, Stripe.js'i yayınlanabilir API anahtarınızla başlatmaktan sorumluydu. İhtiyaç duyan tüm alt bileşenlere Stripe nesnesini sağlıyordu.
2. `Elements`: Bu bileşen, ödeme formu bileşenlerinizi sarmalar ve Stripe.js'den bir 'Elements' örneği oluştururdu. 'Elements' örneği, bireysel Stripe Elements'in (örneğin, `CardElement`) yaşam döngüsünü yönetir ve bunlardan belirteçler (token) veya ödeme yöntemleri oluşturmanıza olanak tanırdı.
3. `CardElement` (ve benzeri Elements): Bunlar, Stripe tarafından sağlanan güvenli, PCI uyumlu UI alanlarını render eden React bileşenleriydi. Örneğin, `CardElement`, kart numarası, son kullanma tarihi ve CVC için tek, birleşik bir alan render ederdi. Bu alanlar, gelişmiş güvenlik için uygulamanızın DOM'undan izole edilmiş iframelerde render edilirdi.
4. `injectStripe` Yüksek Mertebeden Bileşen (HOC): Bu HOC, `stripe` nesnesini (Elements bağlamından) ve `elements` nesnesini bileşeninizin prop'larına enjekte etmek için kullanılırdı. `stripe` nesnesi, `createToken` veya `createPaymentMethod` gibi yöntemleri çağırmanıza izin verirken, `elements` nesnesi bireysel Elements örneklerini (örneğin, `elements.getElement(CardElement)`) almanıza olanak tanırdı.

İş Akışı:
Tipik bir iş akışı şunları içeriyordu:
1. Tüm uygulamanızı veya ilgili bölümü `StripeProvider` ve `Elements` ile sarmalamak.
2. Formunuzun içinde bir `Element` bileşeni (örneğin, `CardElement`) render etmek.
3. `stripe` nesnesine erişmek için form bileşeninizde `injectStripe` kullanmak.
4. Form gönderiminde, kart bilgilerini Stripe'a güvenli bir şekilde göndermek için `Element` örneğiyle `stripe.createToken()` (veya `createPaymentMethod()`) çağırmak. Stripe, ödeme bilgilerini temsil eden bir belirteç döndürürdü.
5. Bu belirteci arka uç sunucunuza göndermek, burada gizli API anahtarınızı kullanarak Stripe'ın API'si aracılığıyla ücreti işleyecektiniz.

Güncel Durum Notu: `react-stripe-elements` kütüphanesinin artık büyük ölçüde *kullanımdan kaldırılmış* (deprecated) kabul edildiğini belirtmek önemlidir. Halefi, daha modern ve deyimsel bir React deneyimi için React Hooks'ı (örneğin, `useStripe`, `useElements`) kullanan resmi `@stripe/react-stripe-js` kütüphanesidir. `react-stripe-elements` hala işlev görse de, yeni projelerde `@stripe/react-stripe-js` kullanılması şiddetle tavsiye edilir.

```javascript
// App.js (veya ana giriş noktası)
import React from 'react';
import { StripeProvider, Elements } from 'react-stripe-elements';
import CheckoutForm from './CheckoutForm';

const App = () => {
  // Gerçek Stripe yayınlanabilir anahtarınızla değiştirin
  const STRIPE_PUBLISHABLE_KEY = 'pk_test_YOUR_STRIPE_PUBLISHABLE_KEY'; 

  return (
    <StripeProvider apiKey={STRIPE_PUBLISHABLE_KEY}>
      <div className="example">
        <h1>React Stripe Elements Örneği</h1>
        <Elements>
          <CheckoutForm />
        </Elements>
      </div>
    </StripeProvider>
  );
};

export default App;

// CheckoutForm.js
import React, { Component } from 'react';
import { CardElement, injectStripe } from 'react-stripe-elements';

class CheckoutForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      complete: false,
      error: null,
      loading: false,
    };
    this.submit = this.submit.bind(this);
  }

  async submit(ev) {
    ev.preventDefault();
    this.setState({ loading: true, error: null });

    // Stripe.js ile, this.props.stripe enjekte edilmiştir
    const { token, error } = await this.props.stripe.createToken({ name: "Demo User" });

    if (error) {
      console.log('[hata]', error);
      this.setState({ error: error.message, loading: false });
    } else {
      console.log('[belirteç]', token);
      // Belirteci arka uç sunucunuza gönderin
      // örneğin, fetch('/api/charge', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({ token: token.id }),
      // });
      
      // Gösterim için sadece 'complete' durumunu ayarlayın
      this.setState({ complete: true, loading: false });
      alert(`Belirteç oluşturuldu: ${token.id}. Şimdi bunu arka ucunuza gönderin.`);
    }
  }

  render() {
    if (this.state.complete) return <h1>Satın Alma Tamamlandı!</h1>;

    return (
      <form onSubmit={this.submit} style={{ maxWidth: '400px', margin: '20px auto', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
        <p>Satın alma işlemini tamamlamak ister misiniz?</p>
        <div style={{ marginBottom: '15px', padding: '10px', border: '1px solid #eee', borderRadius: '4px' }}>
          <label>
            Kart detayları:
            <CardElement style={{ base: { fontSize: '16px' } }} />
          </label>
        </div>
        {this.state.error && <div style={{ color: 'red', marginBottom: '10px' }}>{this.state.error}</div>}
        <button type="submit" disabled={this.state.loading} style={{
          backgroundColor: '#007bff',
          color: 'white',
          padding: '10px 15px',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
          fontSize: '16px'
        }}>
          {this.state.loading ? 'İşleniyor...' : 'Öde'}
        </button>
      </form>
    );
  }
}

export default injectStripe(CheckoutForm);
```