PayPal Checkout'u Bir React Uygulamasına Nasıl Entegre Edersiniz?

E-ticaret alanında, dijital ödeme çözümleri, sınır ötesi ödemeleri kolaylıkla etkinleştirerek ve işleyerek işletmelerin gelirinde ve genel büyümesinde önemli bir artışa katkıda bulunmuştur.

PayPal, çevrimiçi işlemleri yönetmek için basit ve esnek bir dijital ödeme çözümü sunar. PayPal'ı web uygulamalarınıza dahil ederek, müşterilerin sorunsuz ve güvenli bir ödeme deneyimine erişmesini sağlayabilirsiniz, bu da satışların ve genel marka güveninin artmasına yol açabilir.

PayPal'ı React uygulamalarınıza nasıl entegre edeceğinizi öğrenmek için okumaya devam edin.

PayPal Korumalı Alan Hesabı Kurun

PayPal Sandbox, uygulamalarınızdaki ödeme entegrasyonlarını test edebilmeniz için PayPal tarafından sağlanan bir test ortamıdır. PayPal'ın canlı prodüksiyon ortamında bulunan tüm ödeme özelliklerini içeren simüle edilmiş bir ortam sunar.

Basitçe, sanal alan, gerçek paraya ihtiyaç duymadan ödeme entegrasyonlarını test etmek için bir platform sağlar.

Korumalı alan hesabını kullanarak, çeşitli işlem türlerini ve ödeme entegrasyonlarını simüle etmenize izin veren test fonları içeren sanal bir PayPal hesabına erişebilirsiniz.

Korumalı alan hesabı oluşturmak için şuraya gidin: PayPal Geliştirici Konsolu ve PayPal hesabı kimlik bilgilerinizle oturum açın. Ardından, geliştirici kontrol panelinde, Korumalı Alan Hesapları düğme.

React uygulamanızdan bir PayPal işlemini gerçekleştirmek için iki sanal alan hesabına ihtiyacınız vardır: bir ticari hesap ve bir kişisel hesap. Bu iki hesap, hem müşterinin hem de tüccarın (iş) bakış açısından eksiksiz bir işlemi simüle etmenize yardımcı olacaktır.

Uygulamanızdaki ödeme entegrasyonunun işlevselliğini her iki açıdan da test etmeniz önemlidir.

Tıkla Hesap oluşturmak iki hesabı ayarlamak için düğmesine basın.

Hesap ayarları sayfasında, her hesap türünden birini oluşturun: kişisel, ardından iş. Oturum açmak için kişisel hesap kimlik bilgilerini kullanacaksınız. PayPal'ın korumalı alanı kişisel hesap. Öte yandan, PayPal'ın müşteri kimliğini almak üzere geliştirici konsolunda bir proje oluşturmak için iş hesabının kimlik bilgilerini kullanacaksınız.

Alternatif olarak, ödeme entegrasyonlarını test etmek için yeni hesaplar oluşturmak yerine PayPal tarafından sağlanan varsayılan korumalı alan hesaplarını kullanabilirsiniz.

Bir PayPal Projesi Oluşturun

Geliştirici kontrol paneli sayfasında, Uygulamalar ve Kimlik Bilgileri düğmesine basın ve tıklayın Uygulama Oluştur PayPal projesi ayarlamak için düğme. Ardından, uygulamanızın adını girin, seçin Tüccar hesap türü olarak seçin ve başlangıçta oluşturduğunuz işletme hesabı için kimlik bilgilerini seçin.

Son olarak, Uygulamanın müşteri kimliğini kopyalayın.

React Client'ı Kurun

Bir React uygulaması oluşturun, aç genel/index.html dosyasını açın ve müşteri kimliğinizi aşağıda gösterilen biçimde baş öğesi bölümünde ekleyin.

<senaryokaynak=" https://www.paypal.com/sdk/js? client-id=your-client-ID&currency=USD">senaryo>

Komut dosyası etiketi, PayPal'ın API'si ile etkileşim için istemci tarafı işlevsellik sağlayan bir kitaplık olan PayPal JavaScript SDK'yi yükler ve onu React bileşenlerinde kullanılabilir hale getirir.

SDK'nın işlevlerini kullanarak, ödeme akışını yöneten bir PayPal ödeme düğmesi oluşturabilirsiniz. ödeme ayrıntılarını PayPal'a göndermeyi, ödemeyi yetkilendirmeyi ve ödemeyi işleme koymayı içerir cevap.

Bir Ürün Bileşeni Oluşturun

/src dizininde yeni bir bileşenler klasörü oluşturun ve iki dosya ekleyin: Product.js ve PayPalCheckout.js.

Product.js dosyasını açın ve aşağıdaki kodu ekleyin:

içe aktarmak Tepki, { useState } itibaren"tepki";
içe aktarmak"./product.style.css";
içe aktarmak"../assests/laptop.jpg";
işlevUygulama() {
geri dönmek (
"Ürün kabı">
"Ürün içeriği">
"ürün"> 
gerekmek("../assests/laptop.jpg")} alt="dizüstü bilgisayar" />
 </div>
"azalma">
 Macbook Pro</h2>



 Lorem ipsum dolor sit amet consectetur a disipisicing elit.
 Maxime mollitia, molestiae quas vel sint comodi repudiandae
 sonuç.
 </p>

Fiyat: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


ihracatvarsayılan Uygulama;

Bu kod, basit bir ürün bileşeni oluşturur.

PayPal Checkout Bileşenini Oluşturun

PayPalCheckout.js dosyasına aşağıdaki kodu ekleyin:

içe aktarmak Tepki, { useRef, useEffect, useState } itibaren"tepki";
içe aktarmak Ödeme Hatası itibaren"./Ödeme Hatası";
içe aktarmak Başarılı ödeme itibaren"./Başarılı ödeme";
işlevPayPalCheckout() {
sabit paypal = useRef();
sabit [transactionStatus, setTransactionStatus] = useState(hükümsüz);
 useEffect(() => {
pencere.paypal
 .Düğmeler({
 Sipariş oluştur: (veri, eylemler, hata) => {
geri dönmek action.order.create({
 niyet: "ESİR ALMAK",
 satın alma_birimleri: [
 {
 Tanım: "MacBook Dizüstü Bilgisayar",
 miktar: {
 para birimi_kodu: "AMERİKAN DOLARI",
 değer: 350.00,
 },
 },
 ],
 });
 },
 onApprove: zaman uyumsuz (veriler, eylemler) => {
sabit sipariş = beklemek action.order.capture();
konsol.kayıt("başarı", emir);
 setTransactionStatus("başarı");
 },
 onError: (hata) => {
konsol.log (hata);
 setTransactionStatus("arıza");
 },
 })
 .render (paypal.current);
 }, []);
eğer (İşlem Durumu "başarı") {
geri dönmek<Başarılı ödeme />;
 }
eğer (İşlem Durumu "arıza") {
geri dönmek<Ödeme Hatası />;
 }
geri dönmek (



</div>
 </div>
 );
}
ihracatvarsayılan PayPalCheckout;

Bu kod üç kullanır Tepki kancaları: useRef, useState ve useEffect. PayPal ödeme düğmesi için bir kap görevi görecek olan bir div öğesine başvuru oluşturmak için useRef'i kullanır.

ile bir PayPal düğmesi oluşturmak için useEffect'i kullanır. paypal. düğmeler işlevini kullanır ve ardından bu düğmeyi, tarafından başvurulan div öğesinde işler. paypal.current yöntemi.

bu paypal. düğmeler işlev, çeşitli özelliklere sahip bir nesne alır:

• createOrder: Bu işlev, kullanıcının oluşturduğu siparişin ayrıntılarını içeren bir nesne döndürür. Sipariş ayrıntıları, ürün veya hizmetin tutar, ürün adı, açıklama ve para birimi gibi belirli ayrıntılarını içerecektir.
• onApprove: Bu fonksiyon, ödeme onaylandığında çalışır. Ödemeyi yakalar ve başarı mesajını konsola kaydeder. Ayrıca ayarlar İşlem Durumu belirtmek başarı.
• onError: Bu işlev, ödeme bir hatayla karşılaştığında çalışır. Hata mesajını konsola kaydeder ve İşlem Durumu belirtmek arıza.

Son olarak, bileşen koşullu olarak ya Başarılı ödeme veya Ödeme Hatası değerine bağlı olarak bileşen İşlem Durumu durum.

Bu iki bileşen, yalnızca başarılı bir işlemden veya başarısız bir işlemden sonra işlenir. Devam edin ve iki dosya oluşturun: PaymentSuccess.js Ve PaymentFailure.js bileşenler klasöründe ve işlemin durumunu gösteren bir paragraf öğesiyle işlevsel bir bileşen ekleyin.

App.js Bileşenini Güncelleyin

src/App.js dosyasını açın ve aşağıdaki kodu ekleyin:

içe aktarmak Tepki, { useState } itibaren"tepki";
içe aktarmak Ürün itibaren"./bileşenler/Ürün";
içe aktarmak PayPalCheckout itibaren"./bileşenler/PayPalCheckout";
içe aktarmak"./Uygulama.css";
işlevUygulama() {
sabit [ödeme, setCheckOut] = useState(YANLIŞ);
geri dönmek (

"Uygulama">
"Uygulama başlığı">
 {Çıkış yapmak? (

 ): (
"Ürün">
 sınıfAdı="Çıkış yapmak"
 onClick={() => {
 CheckOut(doğru);
 }}
 >
 Sepete Ekle ve Satın Al
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu kod, PayPalCheckout bileşenini veya Ürün bileşenini görüntülemek için koşullu bir işleme yaklaşımı kullanır. useState kancası, sayfa yüklendiğinde geçerli durumu takip eden, checkout adlı bir durum değişkenini false olarak başlatır.

Başlangıçta, React, ödeme düğmesi de dahil olmak üzere Ürün bileşenini oluşturur. Bir kullanıcı ödeme düğmesini tıkladığında, onClick işleyici işlevi, ödeme değişkenini true olarak güncellemek için tetiklenir. Bu güncelleme, Uygulama bileşeninden bunun yerine PayPalCheckout bileşenini oluşturmasını ister.

Ek PayPal Ödeme Özellikleri

PayPal'ın Tek Dokunuş ve PayPal Kredisi gibi ödeme özellikleri, müşterilerinizin güvenli, güvenilir ve kullanışlı, kolaylaştırılmış bir ödeme sürecinin keyfini çıkarmasını sağlar.

Kendi ödeme işleme hizmetinizi sıfırdan oluşturabilseniz de, PayPal gibi bir ödeme platformunu kullanmak tercihen daha esnek ve verimli bir alternatiftir. Temel olarak, bir Ödeme çözümüyle, özel bir ödeme hizmeti kurmak için gereken altyapıyı yönetme konusunda endişelenmenize gerek kalmaz.