Stripe Elements ve Vue.js ile Özel Ödeme Formu Kurulumu

Stripe Elements ve Vue.js ile Özel Ödeme Formu Kurulumu

Giriş: Neden Özel Bir Ödeme Formu?

Modern web uygulamalarında kullanıcı deneyimi (UX), başarının anahtarlarından biridir. Ödeme süreçleri, bu deneyimin en kritik noktalarından biridir ve genellikle kullanıcıların bir satın alma işlemini tamamlayıp tamamlamayacağını belirler. Hazır ödeme çözümleri pratik olsa da, markanızın estetiğine ve kullanıcı akışına tam olarak uymayabilir. İşte bu noktada, Stripe Elements ve Vue.js’in birleşimiyle oluşturulan özel ödeme formları devreye girer.

Stripe Elements, PCI uyumluluğundan ödün vermeden güvenli ve özelleştirilebilir ödeme arayüzleri oluşturmak için güçlü bir araç seti sunar. Kredi kartı numarası, son kullanma tarihi ve CVC gibi hassas bilgileri doğrudan tarayıcınıza gömülü güvenli iframe‘ler aracılığıyla toplar, böylece sunucunuzun bu bilgilere doğrudan maruz kalmasını engeller. Bu, PCI DSS uyumluluğunu önemli ölçüde basitleştirir. Vue.js ise, reaktif ve bileşen tabanlı yapısıyla dinamik kullanıcı arayüzleri geliştirmek için mükemmel bir JavaScript çerçevesidir. Bu iki teknolojiyi birleştirerek, hem güvenli hem de markanıza özel, akıcı bir ödeme deneyimi sunan formlar oluşturabiliriz.

Bu makalede, Stripe Elements ve Vue.js kullanarak baştan sona özel bir kredi kartı ödeme formu nasıl kurulur, adım adım inceleyeceğiz. Temel kurulumdan gelişmiş özelliklere, güvenlik en iyi uygulamalarına ve sunucu tarafı entegrasyonuna kadar her detayı ele alacağız.

Stripe Elements ve Güvenli Ödeme Süreçleri

Stripe Elements, Stripe.js kütüphanesinin bir parçasıdır ve ödeme formları için UI bileşenleri sunar. Bu bileşenler, kredi kartı numarası, son kullanma tarihi, CVC kodu gibi hassas bilgileri doğrudan Stripe’ın sunucularına ileten güvenli iframe‘ler içine yerleştirilmiştir. Bu yaklaşımın temel faydaları şunlardır:

PCI DSS Uyumluluğu

Stripe Elements kullanarak, hassas kart verileri hiçbir zaman kendi sunucularınıza ulaşmaz. Bu, PCI DSS (Ödeme Kartı Sektörü Veri Güvenliği Standardı) uyumluluğunu büyük ölçüde kolaylaştırır. Sunucunuzun PCI uyumluluğu kapsamını azaltır, çünkü kart verilerini işleme, depolama veya iletme sorumluluğunu Stripe üstlenir. Bu, küçük ve orta ölçekli işletmeler için büyük bir avantajdır, çünkü PCI uyumluluğu karmaşık ve maliyetli bir süreç olabilir.

Özelleştirilebilirlik

Elements, formunuzun görünümünü ve hissini tamamen kontrol etmenizi sağlar. CSS kuralları uygulayarak yazı tiplerini, renkleri, boşlukları ve diğer stil özelliklerini markanıza uygun hale getirebilirsiniz. Bu sayede, kullanıcılar ödeme formunun uygulamanızın ayrılmaz bir parçası olduğunu hisseder.

Dinamik Doğrulama ve Kullanıcı Deneyimi

Elements, kullanıcı girişi sırasında gerçek zamanlı doğrulama ve biçimlendirme sağlar. Örneğin, kart numarası girilirken kart türünü (Visa, MasterCard vb.) otomatik olarak algılar ve uygun bir simge görüntüler. Bu, kullanıcıların hataları anında düzeltmelerine yardımcı olur ve daha akıcı bir ödeme deneyimi sunar.

Çeşitli Ödeme Yöntemleri

Elements sadece kredi kartları için değil, aynı zamanda SEPA Direct Debit, iDEAL, Bancontact gibi diğer ödeme yöntemleri için de bileşenler sunar. Bu, uygulamanızın küresel pazarlara açılmasına olanak tanır.

Vue.js ile Dinamik Arayüz Geliştirme

Vue.js, progresif bir çerçeve olarak, kullanıcı arayüzleri oluşturmak için tasarlanmıştır. Bileşen tabanlı mimarisi, büyük uygulamaları yönetilebilir, yeniden kullanılabilir parçalara ayırmayı kolaylaştırır. Reaktif veri bağlama sistemi sayesinde, Stripe Elements’ten gelen verileri veya ödeme durumunu otomatik olarak güncelleyebilir, kullanıcıya anında geri bildirim sağlayabilirsiniz. Bu özellikler, dinamik ve etkileşimli bir ödeme formu oluşturmak için Vue.js’i ideal bir seçim haline getirir.

Ön Koşullar ve Kurulum

Başlamadan önce bazı temel gereksinimleri karşılamamız gerekiyor.

Stripe Hesabı ve API Anahtarları

Öncelikle bir Stripe hesabına ihtiyacınız olacak. Hesabınızı oluşturduktan sonra, Stripe Dashboard’dan “Geliştiriciler” -> “API Anahtarları” bölümüne giderek Publishable key (Herkese Açık Anahtar) ve Secret key (Gizli Anahtar) değerlerini almanız gerekmektedir.

* Publishable Key (pk_test_…): Bu anahtar, istemci tarafında (tarayıcıda) Stripe.js’i başlatmak için kullanılır. Güvenle genel kodunuzda kullanabilirsiniz.
* Secret Key (sk_test_…): Bu anahtar, sunucu tarafında Stripe API çağrıları yapmak için kullanılır. Asla istemci tarafında veya versiyon kontrol sistemlerinde (Git gibi) açıkça bulundurmayın. Çevre değişkenleri veya güvenli bir yapılandırma yönetimi sistemi aracılığıyla yönetilmelidir.

Vue.js Projesi Oluşturma

Vue CLI kullanarak yeni bir Vue projesi oluşturalım:

npm install -g @vue/cli
vue create my-stripe-payment-app
cd my-stripe-payment-app
npm run serve

Bu komutlar, temel bir Vue projesi oluşturacak ve geliştirme sunucusunu başlatacaktır.

Stripe.js Kütüphanesini Entegre Etme

Stripe Elements kullanabilmek için Stripe.js kütüphanesini projenize dahil etmeniz gerekir. Bunu iki yolla yapabilirsiniz:

CDN Kullanarak (index.html içinde)

Bu, en basit yöntemdir. public/index.html dosyanızın etiketi arasına aşağıdaki satırı ekleyin:

NPM Paketi Kullanarak (Tercih Edilen Yöntem)

Daha modern ve modüler bir yaklaşım için Stripe.js’i bir NPM paketi olarak kurabilirsiniz. Ancak unutmayın ki bu paket sadece Stripe nesnesini dışa aktarır; Elements’in kendisi yine global Stripe nesnesi üzerinden erişilir.

npm install @stripe/stripe-js

Daha sonra, Vue bileşenlerinizde loadStripe fonksiyonunu kullanarak Stripe nesnesini asenkron olarak yükleyebilirsiniz:

// App.vue veya PaymentForm.vue içinde
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('YOUR_STRIPE_PUBLISHABLE_KEY');

Bu makalede, genellikle loadStripe yöntemini kullanarak devam edeceğiz, çünkü bu, kodunuzun daha temiz ve yönetilebilir olmasını sağlar.

Ödeme Formu Bileşenini Oluşturma

Şimdi sıra geldi ana ödeme formu bileşenimizi oluşturmaya. src/components/PaymentForm.vue adında yeni bir Vue bileşeni oluşturalım.

Temel Vue Bileşeni Yapısı

Stripe Elements’i Başlatma ve Mount Etme

mounted() yaşam döngüsü kancası içinde, loadStripe fonksiyonunu kullanarak Stripe.js kütüphanesini asenkron olarak yüklüyoruz. Yükleme tamamlandıktan sonra, this.stripe.elements() metodunu çağırarak bir elements nesnesi oluşturuyoruz. Bu nesne, farklı türde Element’ler oluşturmak için kullanılır.

this.elements.create('card', { ... }) ile bir ‘card’ Element’i oluşturuyoruz. Bu Element, kullanıcının kredi kartı bilgilerini gireceği güvenli iframe‘i temsil eder. style özelliği ile Element’in görünümünü özelleştirebilirsiniz. Bu, formunuzun genel tasarımına uyum sağlaması için önemlidir.

Oluşturulan cardElement‘i,

etiketine cardElement.mount('#card-element') ile bağlıyoruz. Bu, Element’in DOM’da görünmesini sağlar.

Son olarak, cardElement.on('change', ...) ile Element’teki değişiklikleri dinliyoruz. Bu dinleyici, kullanıcının kart bilgilerini girerken olası hataları (örneğin, geçersiz kart numarası) yakalamak ve kullanıcıya göstermek için kullanılır.

Form Verilerini Yakalama ve Doğrulama

Vue’nun v-model direktifi ile nameOnCard ve email gibi ek form alanlarını kolayca iki yönlü bağlayabiliriz. Stripe Elements, kart bilgilerini kendi içinde doğruladığı için, bu alanlar için temel HTML5 required niteliğini veya daha karmaşık Vue tabanlı doğrulama kurallarını kullanabilirsiniz.

Ödeme İşlemini Başlatma: PaymentIntent ve ConfirmCardPayment

Stripe’ın modern API’si, ödeme akışını yönetmek için PaymentIntent adında bir nesne kullanır. PaymentIntent, bir ödeme işleminin tüm yaşam döngüsünü izler ve durumunu yönetir (oluşturuldu, onaylandı, başarılı, başarısız vb.). Bu, özellikle 3D Secure (SCA) gibi ek doğrulama adımları gerektiren durumları ele almak için önemlidir.

Sunucu Tarafı İşlemleri: PaymentIntent Oluşturma

Ödeme işleminin ilk adımı, sunucu tarafında bir PaymentIntent oluşturmaktır. Bunun nedeni, PaymentIntent oluşturmak için Secret Key‘inize ihtiyaç duyulmasıdır ve bu anahtar asla istemci tarafında açığa çıkarılmamalıdır.

handleSubmit metodumuzda, önce bir API çağrısı yaparak sunucudan bir PaymentIntent oluşturmasını istiyoruz. Sunucu, ödeme miktarını, para birimini ve diğer ilgili bilgileri alarak bir PaymentIntent oluşturur ve client_secret değerini istemciye geri gönderir. client_secret, istemci tarafında PaymentIntent‘i tanımlamak ve ödemeyi onaylamak için kullanılan benzersiz bir anahtardır.

Ödemeyi Onaylama: confirmCardPayment

client_secret‘i aldıktan sonra, istemci tarafında stripe.confirmCardPayment() metodunu kullanarak ödemeyi onaylarız. Bu metod, client_secret‘i, cardElement‘i ve varsa fatura bilgilerini alır.

const { paymentIntent, error } = await this.stripe.confirmCardPayment(clientSecret, {
  payment_method: {
    card: this.cardElement,
    billing_details: {
      name: this.nameOnCard,
      email: this.email,
    },
  },
  // return_url: 'http://localhost:8080/success', // 3D Secure vb. için gerekli olabilir
});

confirmCardPayment metodu, ödemenin durumuna bağlı olarak paymentIntent veya error nesnesini döndürür.

* Başarılı Ödeme: paymentIntent.status === 'succeeded' ise ödeme başarıyla tamamlanmıştır.
* Hata: error nesnesi varsa, bir hata oluşmuştur (örneğin, kart reddedildi).
* Ek Doğrulama Gerekliliği (SCA): Bazı durumlarda (özellikle Avrupa’da), banka ek doğrulama isteyebilir (örneğin, mobil bankacılık uygulaması üzerinden onay). Bu durumda, paymentIntent.status 'requires_action' olabilir ve Stripe otomatik olarak kullanıcıyı gerekli doğrulama sayfasına yönlendirir (eğer return_url belirtilmişse, doğrulama sonrası o URL’ye döner).

Sunucu Tarafı Entegrasyon (Node.js/Express Örneği)

Ödeme işlemlerinin güvenli bir şekilde yönetilmesi için sunucu tarafı bir API’ye ihtiyacımız var. Aşağıda, Node.js ve Express kullanarak basit bir sunucu tarafı API örneği bulunmaktadır.

Giriş

Bu sunucu, istemciden ödeme miktarını alacak ve Stripe API’yi kullanarak bir PaymentIntent oluşturacaktır. Bu, Secret Key‘inizin güvenliğini sağlamak için hayati öneme sahiptir.

API Uç Noktaları Oluşturma

Öncelikle, gerekli paketleri kuralım:

npm install express stripe dotenv

Sonra server.js (veya benzeri bir isimle) bir dosya oluşturalım:

// server.js
require('dotenv').config(); // .env dosyasından ortam değişkenlerini yükler
const express = require('express');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const app = express();
const port = 3000;

app.use(express.json()); // JSON istek gövdelerini ayrıştırmak için
app.use(express.static('public')); // Vue uygulamanızın dağıtıldığı dizini belirtin

// CORS sorunlarını önlemek için basit bir middleware (geliştirme ortamı için)
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080'); // Vue geliştirme sunucunuzun adresi
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

// PaymentIntent oluşturma endpoint'i
app.post('/api/create-payment-intent', async (req, res) => {
  const { amount, currency } = req.body;

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount, // Örnek: 1000 = 10.00 USD (Stripe küçük birimlerde çalışır)
      currency: currency,
      payment_method_types: ['card'],
    });

    res.status(200).json({ clientSecret: paymentIntent.client_secret });
  } catch (error) {
    console.error('Error creating PaymentIntent:', error.message);
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(Server listening at http://localhost:${port});
});

.env dosyanızda Stripe gizli anahtarınızı tanımlayın:

STRIPE_SECRET_KEY=sk_test_YOUR_SECRET_KEY

Bu sunucu, http://localhost:3000/api/create-payment-intent adresine yapılan POST isteklerini dinleyecek ve bir PaymentIntent oluşturarak client_secret‘i istemciye geri gönderecektir. Vue uygulamanızın bu sunucuyla iletişim kurabilmesi için CORS ayarlarını yapmanız veya aynı port üzerinden hizmet vermesini sağlamanız gerekebilir. Geliştirme ortamında, Vue CLI proxy ayarlarını kullanarak bu sorunu çözebilirsiniz (vue.config.js içinde).

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // Backend sunucunuzun adresi
        changeOrigin: true
      }
    }
  }
};

Bu ayar sayesinde, Vue uygulamanızdan /api/create-payment-intent adresine yapılan istekler otomatik olarak http://localhost:3000/api/create-payment-intent adresine yönlendirilecektir.

İstemci-Sunucu İletişimi ve Ödeme Akışı

Ödeme formumuzun handleSubmit metodu, yukarıda açıklanan sunucu tarafı API ile etkileşime girerek tam bir ödeme akışı sağlar.

PaymentIntent Oluşturma (İstemci Tarafı)

Kullanıcı “Ödeme Yap” düğmesine tıkladığında, handleSubmit metodu tetiklenir. Bu metodun ilk adımı, fetch veya axios gibi bir HTTP istemcisi kullanarak sunucumuza /api/create-payment-intent adresine bir POST isteği göndermektir. Bu istek, ödeme miktarını ve para birimini içerir.

const response = await fetch('/api/create-payment-intent', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ amount: 1000, currency: 'usd' })
});
const { clientSecret } = await response.json();

Sunucu, başarılı bir şekilde PaymentIntent oluşturduktan sonra, clientSecret değerini içeren bir yanıt döner. Bu clientSecret, istemci tarafındaki stripe.confirmCardPayment fonksiyonu için kritik öneme sahiptir.

Ödemeyi Onaylama (İstemci Tarafı)

clientSecret elde edildikten sonra, stripe.confirmCardPayment metodu çağrılır. Bu metod, kullanıcının girdiği kart bilgilerini (Stripe Elements aracılığıyla güvenli bir şekilde toplanan) ve fatura detaylarını Stripe’a gönderir.

const { paymentIntent, error } = await this.stripe.confirmCardPayment(clientSecret, {
  payment_method: {
    card: this.cardElement,
    billing_details: {
      name: this.nameOnCard,
      email: this.email,
    },
  },
  // return_url: 'http://localhost:8080/success', // 3D Secure/yönlendirme için
});

confirmCardPayment işlemi, banka ile doğrudan iletişim kurar ve kartı yetkilendirmeye çalışır. Bu işlem sırasında 3D Secure gibi ek doğrulamalar gerekebilir. Eğer return_url belirtilirse, kullanıcı doğrulama sonrası bu URL’ye yönlendirilir.

Başarı ve Hata Yönetimi

confirmCardPayment‘tan dönen yanıta göre, ödemenin durumunu kontrol ederiz:

* Hata Durumu: Eğer error nesnesi varsa, ödeme işlemi başarısız olmuştur (örneğin, yetersiz bakiye, geçersiz kart). error.message kullanıcının anlayabileceği bir hata mesajı içerir ve bu mesajı cardError veri özelliğine atayarak formda gösterebiliriz.
* Başarılı Durum: paymentIntent.status === 'succeeded' ise, ödeme başarıyla tamamlanmıştır. Bu durumda, kullanıcıya bir başarı mesajı gösterilmeli ve uygulamanın sonraki adımları (örneğin, siparişin veritabanına kaydedilmesi, e-posta gönderimi) tetiklenmelidir. Önemli: Ödeme başarısını sadece istemci tarafında değil, sunucu tarafında da Webhook’lar aracılığıyla doğrulamak en iyi uygulamadır.
* Ek İşlem Gerektiren Durumlar: paymentIntent.status === 'requires_action' veya benzeri durumlar, genellikle 3D Secure gibi ek doğrulama gerektiren senaryoları işaret eder. Stripe.js bu durumlarda genellikle kullanıcıyı otomatik olarak yönlendirir, ancak return_url doğru bir şekilde yapılandırılmalıdır.

processing veri özelliği, ödeme işlemi devam ederken kullanıcının formu tekrar göndermesini engellemek ve bir yükleme göstergesi sunmak için kullanılır. paymentStatus ise genel ödeme sonucunu kullanıcıya bildirmek içindir.

Gelişmiş Konular ve En İyi Uygulamalar

Ödeme formumuzu daha sağlam ve kullanıcı dostu hale getirmek için bazı gelişmiş konulara ve en iyi uygulamalara değinelim.

Kullanıcı Deneyimi (UX) İyileştirmeleri

* Yükleme Göstergeleri: Ödeme işlemi zaman alabilir. processing gibi bir durum değişkeni kullanarak “Ödeme Yap” düğmesini “İşleniyor…” olarak değiştirmek veya bir spinner eklemek, kullanıcının sabırlı olmasını sağlar.
* Anlaşılır Hata Mesajları: Stripe’tan gelen hata mesajları genellikle bilgilendiricidir. Bu mesajları doğrudan veya daha kullanıcı dostu bir dille göstermek, kullanıcının sorunu anlamasına ve düzeltmesine yardımcı olur.
* Görsel Geri Bildirim: Kart türü simgeleri (Stripe Elements tarafından otomatik olarak eklenir), kart bilgilerinin doğru girildiğini gösteren yeşil onay işaretleri gibi görsel geri bildirimler, kullanıcı güvenini artırır.
* Form Odaklanması: Kullanıcı forma geldiğinde ilk giriş alanına otomatik odaklanma sağlamak, klavye ile gezinmeyi kolaylaştırır.

Güvenlik İpuçları

* Asla Gizli Anahtarları Açığa Çıkarmayın: STRIPE_SECRET_KEY gibi anahtarlar her zaman sunucu tarafında kalmalıdır. İstemci tarafında yalnızca Publishable Key kullanılmalıdır.
* Sunucu Tarafı Doğrulama: Miktar, para birimi ve ürün bilgileri gibi önemli ödeme detayları her zaman sunucu tarafında doğrulanmalıdır. İstemci tarafında gönderilen verilere asla tam olarak güvenmeyin.
* Webhook’lar Kullanın: PaymentIntent‘in nihai durumu, bazen asenkron olarak değişebilir (örneğin, 3D Secure doğrulaması sonrası). Bu tür olayları güvenilir bir şekilde yakalamak için Stripe Webhook’larını kullanın. payment_intent.succeeded gibi olayları dinleyerek, ödeme başarılı olduğunda sunucunuzda siparişin durumunu güncelleyebilirsiniz. Bu, istemci tarafı yanıtlarına güvenmekten daha güvenlidir.
* HTTPS Kullanımı: Ödeme formunuzun her zaman HTTPS üzerinden sunulduğundan emin olun. Bu, verilerin şifrelenmesini ve güvenli bir şekilde iletilmesini sağlar.

Farklı Ödeme Yöntemleri

Stripe Elements sadece kart ödemeleri için değil, aynı zamanda diğer ödeme yöntemleri için de bileşenler sunar:
* paymentRequestButton: Apple Pay ve Google Pay gibi tarayıcı tabanlı ödeme yöntemlerini destekler.
* link: Stripe Link ile tek tıkla ödeme imkanı sunar.
* auBankAccount, sepaDebit vb.: Bölgesel banka ödeme yöntemleri için.

Bu Element’leri, elements.create() metoduna farklı türler vererek formunuza entegre edebilirsiniz. Her birinin kendi yapılandırma ve onaylama akışı vardır.

Test Etme

* Stripe Test Kartları: Stripe, ödeme formunuzu farklı senaryolar (başarılı, başarısız, 3D Secure gerektiren vb.) için test etmenizi sağlayan bir dizi test kartı numarası sağlar. Stripe dokümantasyonunda bu kartları bulabilirsiniz.
* Stripe CLI: Webhook’ları yerel geliştirme ortamınızda test etmek için Stripe CLI’yi kullanabilirsiniz. Bu araç, Stripe olaylarını yerel sunucunuza ileterek, gerçek bir dağıtım ortamını simüle etmenizi sağlar.

Sonuç

Stripe Elements ve Vue.js’i birleştirerek, hem güvenli hem de yüksek düzeyde özelleştirilebilir bir ödeme formu oluşturmak mümkündür. Bu yaklaşım, markanızın kimliğini korurken, PCI uyumluluğunu basitleştirir ve kullanıcılara sorunsuz bir ödeme deneyimi sunar.

Bu makalede, Stripe Elements’in temellerinden, Vue.js ile nasıl entegre edileceğine, sunucu tarafı bir API’nin nasıl oluşturulacağına ve ödeme akışının nasıl yönetileceğine dair kapsamlı bir rehber sunduk. Güvenlik en iyi uygulamalarını takip ederek ve kullanıcı deneyimini ön planda tutarak, uygulamanız için güçlü ve güvenilir bir ödeme çözümü oluşturabilirsiniz. Ödeme süreçleri karmaşık olsa da, Stripe ve Vue.js’in sağladığı araçlarla bu karmaşıklığı yönetilebilir hale getirmek ve başarılı bir entegrasyon gerçekleştirmek mümkündür. Unutmayın, iyi bir ödeme deneyimi, müşteri memnuniyetini ve dönüşüm oranlarını doğrudan etkileyen kritik bir faktördür.