Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Stripe, bir web sitesine önceden oluşturulmuş bir ödeme sayfası eklemenize ve çevrimiçi ödemeleri kabul etmenize ve yönetmenize olanak tanıyan bir ödeme işleme platformudur. Kullanım kolaylığı, kapsamlı dokümantasyonu, yerel ödeme desteği, özelleştirme ve markalama seçenekleri, abonelikler, faturalama ve dolandırıcılığı önleme nedeniyle oldukça popülerdir.

Stripe'ı kullanarak kredi ve banka kartları, Apple Pay ve Google Pay gibi çeşitli kaynaklardan ödeme kabul edebilirsiniz.

Bir Next.js Uygulamasına Stripe Checkout Ekleme

Stripe checkout'u Next.js dahil farklı teknolojilerle oluşturulan uygulamalarla entegre edebilirsiniz.

Bu öğretici, bir Next.js e-ticaret sitenizin kurulu olduğunu varsayar ve yalnızca siteye Stripe checkout'un nasıl ekleneceğine ilişkin bir kılavuz sağlar.

Stripe Hesabı Kurma ve API Anahtarlarını Alma

instagram viewer

Stripe checkout'u kullanmak için bir Stripe hesabı oluşturmanız ve API anahtarlarını almanız gerekir. API anahtarları, uygulamanızdan Stripe API'ye yönelik isteklerin kimliğini doğrulamak için kullanacağınız yayınlanabilir bir anahtar ve bir gizli anahtardan oluşur.

Stripe hesabı oluşturmak için şu adımları izleyin:

  1. Gitmek Şerit web sitesi ve "Kaydol" düğmesini tıklayın.
  2. E-postanızı, tam adınızı, ülkenizi ve şifrenizi girin ve "Hesap oluştur" düğmesini tıklayın.
  3. Stripe'ın size göndereceği e-postadaki talimatları izleyerek e-posta adresinizi doğrulayın.
  4. Şerit kontrol panelinde, "Ödemeleri etkinleştir"i tıklayın ve hesap kurulum sürecini tamamlamak için sorulan soruları yanıtlayın. Bu sorular işletmenin adı, adresi ve banka bilgileri ile ilgili olabilir. Geliştirme amacıyla test modunu kullanın.
  5. API anahtarlarını "Geliştiriciler" sekmesinden uygulama klasörünüzdeki .env dosyasına kopyalayın.

Artık API anahtarlarını kullanarak Stripe hesabına erişebileceksiniz.

Stripe npm Paketini Kurma

Stripe npm paketini kurmak için bu komutu çalıştırın.

npm yükleme şeridi

Stripe kitaplığını ödeme bileşen sayfanıza aktarın.

içe aktarmak Şerit itibaren'şerit';

API klasöründe, checkout-session.js dosyası adlı yeni bir dosya oluşturun. Stripe kontrol panelinizden aldığınız API anahtarlarıyla Stripe nesnesini başlatın.

sabit şerit = gerekmek('şerit')(işlem.env. STRIPE_SECRET_KEY);

İşleyici işlevinde, gövde parametrelerinden kontrol edilecek öğeleri alın.

ihracatvarsayılanzaman uyumsuzişlevişleyici(talep, res) {
sabit { item } = req.body;
};

İşleyici işlevine bir teslim alma oturumu nesnesi oluşturun ve öğeleri iletin.

sabit oturum = beklemek stripe.checkout.sessions.create({
 ödeme_yöntemi_türleri: ['kart'],
 satır_öğeleri: [
 öğe,
 ],
 mod: 'ödeme',
 başarı_url'si: `${req.headers.origin}/?success=true`,
 iptal_url'si: `${req.headers.origin}/?canceled=true`,
});

Oturum nesnesine ilettiğiniz düğümlerin anlamı şudur:

  • ödeme_metodu_türleri: Ödeme oturumunun kabul ettiği ödeme yöntemi türleri. Mevcut ödeme yöntemleri listesine göz atın. Şerit belgeleri.
  • satır_öğeleri: Kullanıcının satın aldığı öğelerin listesi.
  • mod: Kontrol Oturumunun modu. Ödeme öğeleri en az bir yinelenen öğe içeriyorsa "abonelik" geçin.
  • başarı_url: URL Şeridi, ödeme başarılı olursa kullanıcıları yönlendirir
  • cancel_url: URL Şeridi, ödemeyi iptal etmeleri halinde kullanıcıları yönlendirecektir.

Toplam olarak, checkout-session.js dosyası şöyle görünmelidir:

ihracatvarsayılanzaman uyumsuzişlevişleyici(talep, res) {
eğer (gerekli yöntem 'POSTALAMAK') {
sabit { cart } = req.body;
denemek {
sabit oturum = beklemek stripe.checkout.sessions.create({
 satır_öğeleri: [
 araba
 ],
 mod: 'ödeme',
 başarı_url'si: `${req.headers.origin}/success`,
 iptal_url'si: `${req.headers.origin}/cancele`,
 });
 res.yönlendirme(303, oturum.url);
 } yakalamak (hata) {
 res.status (err.statusCode || 500).json (hata.mesaj);
 }
 } başka {
 res.setHeader('İzin vermek', 'POSTALAMAK');
 res.status(405).son('İzin verilmeyen yöntem');
 }
}

Bu işlev artık, ödeme sırasında bir hata oluştuğunda kullanıcıları yeniden yönlendirmek için dene/yakala özelliğini kullanır. Artık ödemeyi işleyecek API rotasını oluşturduğunuza göre, bir sonraki adım, ödeme işlemini gerçekleştirmek için bir ödeme bileşeni oluşturmaktır.

Bu gönderiye göz atın Next.js'de API yolları oluşturma Next.js API yollarının daha ayrıntılı bir açıklaması için.

Bir Ödeme Bileşeni Oluşturma

Ödeme işlemini gerçekleştirmek için NPM kullanarak @stripe/stripe-js kitaplığını yüklemeniz gerekir.

npm install @stripe/stripe-js

@stripe/stripe-js kitaplığı, Stripe.js örneğini yüklemenize yardımcı olacak bir yükleme yardımcı programıdır.

Kurulum bittiğinde, /components dizininizde /components/checkout.js adlı yeni bir dosya oluşturun. Ardından, yayınlanabilir anahtarı bir bağımsız değişken olarak ileterek @stripe/stripe-js kitaplığından loadstripe işlevini çağırın.

içe aktarmak { yük Şeridi } itibaren"@şerit/şerit-js";
sabit stripePromise = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe(), Stripe.js yüklendikten sonra yeni oluşturulan bir Stripe nesnesiyle çözümlenen bir söz döndürür.

Ardından, bileşende bir ödeme oturumu oluşturmak için bir işlev ekleyin.

ihracatvarsayılanişlevÇıkış yapmak({araba}) {
sabit kontrol = zaman uyumsuz () => {
denemek {
sabit şerit = beklemek şerit Sözü;
sabit checkoutSession = beklemek eksen.post("/api/checkout-oturum", {
 araba,
 });


sabit sonuç = beklemek stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
eğer (sonuç.hata) {
 uyarı (sonuç.hata.mesaj);
 }
 } yakalamak (hata) {
konsol.log (hata);
 }
 };
geri dönmek (


 </div>
 );
}

Bu fonksiyon kullanır API'yi çağırmak için Axios ödeme oturumunu almak için /api klasöründe oluşturduğunuz.

İade ifadesine, tıklandığında handleCheckout işlevini tetikleyecek bir ödeme düğmesi ekleyin.

Sepet sayfasında ödeme bileşenini arayabilirsiniz.

Stripe'tan Yönlendirmeleri İşleme

Checkout API rotasında, işlem başarılı olduğunda veya başarısız olduğunda şeridin bir kullanıcıyı yönlendirmesi gereken bir başarı URL'si ve bir iptal URL'si tanımladınız. İptal URL'si /cancel yoluna eşlenirken, başarı URL'si /success yoluna eşlenir. Başarı adlı /pages klasörüne iki bileşen ekleyin ve bu URL'leri işlemek için iptal edin.

Pages/success.js'de başarı bileşenini ekleyin.

ihracatvarsayılanişlevBaşarı() {
geri dönmek<div>Çıkış başarıyladiv>;
}

Pages/cancel.js'de, iptal bileşenini ekleyin.

ihracatvarsayılanişlevİptal etmek() {
geri dönmek<div>Ödeme sırasında bir hata oluştudiv>;
}

Şimdi Stripe, ödeme durumuna bağlı olarak bu sayfalardan birine yönlendirecektir.

Next.js 13 kullanıyorsanız, adresindeki bu eğiticiye bakın. uygulama klasörü Next.js 13'te nasıl çalışır? /pages klasöründen geçiş yapmak için.

Ödeme Sayfası için Ek Özelleştirme Seçenekleri

Stripe kontrol panelinden, ödeme sayfasını markanızın görünümüne uyacak şekilde özelleştirebilirsiniz. Bir logo, simge, marka rengi, vurgu rengi ekleyebilir ve hatta kendi özel etki alanınızı kullanabilirsiniz. Ek olarak, ödeme oturumunu oluştururken tercih ettiğiniz ödeme yöntemlerini ekleyebilir ve Stripe'ın ödeme sayfasında gösterileceği dili de belirtebilirsiniz. Tüm bu seçenekler, ödeme sürecini uygulamanıza uyacak şekilde özelleştirmenize olanak tanır.

Ödeme Sayfası için Neden Stripe Kullanmalısınız?

Kendi ödeme işleme hizmetinizi oluşturabilseniz de, Stripe gibi bir ödeme platformunu kullanmak genellikle daha iyi bir seçenektir. Stripe Checkout, geliştirme süresini kısaltmanıza yardımcı olarak kısa süre içinde ödemeleri kabul etmeye başlamanızı sağlar.

Ayrıca, PCI uyumluluğu, sepet kurtarma, indirim yetenekleri ve nakliye bilgilerini toplama ve ödeme sonrası faturalar gönderme gibi ek özelliklere sahip olursunuz.