Cara Mengintegrasikan PayPal Checkout di Aplikasi React

Di ruang E-niaga, solusi pembayaran digital telah berkontribusi pada peningkatan pendapatan yang signifikan dan pertumbuhan bisnis secara keseluruhan dengan mengaktifkan dan memproses pembayaran lintas batas dengan mudah.

PayPal menawarkan solusi pembayaran digital yang sederhana dan fleksibel untuk mengelola transaksi online. Dengan memasukkan PayPal ke dalam aplikasi web Anda, Anda dapat memastikan pelanggan mengakses pengalaman pembayaran yang mulus dan aman yang pada gilirannya dapat meningkatkan penjualan dan kepercayaan merek secara keseluruhan.

Baca terus untuk mengetahui cara mengintegrasikan PayPal ke dalam aplikasi React Anda.

Siapkan Akun Kotak Pasir PayPal

PayPal Sandbox adalah lingkungan pengujian yang disediakan oleh PayPal sehingga Anda dapat menguji integrasi pembayaran dalam aplikasi Anda. Ini menawarkan lingkungan simulasi yang mencakup semua fitur pembayaran yang ditemukan di lingkungan produksi langsung PayPal.

Sederhananya, kotak pasir menyediakan platform untuk menguji integrasi pembayaran tanpa perlu uang sungguhan.

Dengan menggunakan akun kotak pasir, Anda dapat mengakses akun PayPal virtual dengan dana percobaan, yang memungkinkan Anda mensimulasikan berbagai jenis transaksi dan integrasi pembayaran.

Untuk membuat akun kotak pasir, buka Konsol Pengembang PayPal dan masuk dengan kredensial akun PayPal Anda. Selanjutnya, di dasbor pengembang, klik pada Akun kotak pasir tombol.

Untuk memproses transaksi PayPal dari aplikasi React Anda, Anda memerlukan dua akun sandbox: akun bisnis dan akun pribadi. Kedua akun ini akan membantu Anda mensimulasikan transaksi yang lengkap—dari tampilan pelanggan dan tampilan (bisnis) pedagang.

Penting untuk menguji fungsionalitas integrasi pembayaran pada aplikasi Anda dari kedua perspektif.

Klik pada Buat Akun tombol untuk menyiapkan dua akun.

Di halaman pengaturan akun, buat salah satu dari setiap jenis akun: pribadi, lalu bisnis. Anda akan menggunakan kredensial akun pribadi untuk masuk Kotak pasir PayPal akun pribadi. Di sisi lain, Anda akan menggunakan kredensial akun bisnis untuk membuat proyek di konsol pengembang untuk mendapatkan ID klien PayPal.

Alternatifnya, alih-alih membuat akun baru, Anda dapat menggunakan akun kotak pasir default yang disediakan oleh PayPal untuk menguji integrasi pembayaran.

Buat Proyek PayPal

Di halaman dasbor pengembang, klik pada Aplikasi dan Kredensial tombol dan klik Buat Aplikasi tombol untuk menyiapkan proyek PayPal. Selanjutnya, isi nama aplikasi Anda, pilih Pedagang sebagai jenis akun, dan pilih kredensial untuk akun bisnis yang awalnya Anda buat.

Terakhir, salin ID klien Aplikasi.

Siapkan React Client

Buat aplikasi Bereaksi, Buka publik/index.html file, dan tambahkan ID klien Anda dalam format yang ditunjukkan di bawah ini di bagian elemen kepala.

<naskahsrc=" https://www.paypal.com/sdk/js? client-id=ID-klien Anda&mata uang=USD">naskah>

Tag script memuat SDK JavaScript PayPal, sebuah pustaka yang menyediakan fungsionalitas sisi klien untuk berinteraksi dengan API PayPal, dan membuatnya tersedia untuk digunakan dalam komponen React.

Menggunakan fungsi SDK, Anda dapat membuat tombol pembayaran PayPal yang menangani aliran pembayaran yang mana melibatkan pengiriman detail pembayaran ke PayPal, mengesahkan pembayaran, dan menangani pembayaran tanggapan.

Buat Komponen Produk

Di direktori /src, buat folder komponen baru, dan tambahkan dua file: Product.js dan PayPalCheckout.js.

Buka file Product.js dan tambahkan kode di bawah ini:

impor Bereaksi, { useState } dari"reaksi";
impor"./produk.style.css";
impor"../assests/laptop.jpg";
fungsiAplikasi() {
kembali (
"Wadah-produk">
"Konten produk">
"produk"> 
memerlukan("../assests/laptop.jpg")}alt="laptop" />
 </div>
"desc">
 MacBook Pro</h2>



 Lorem ipsum dolor sit amet consectetur adipisicing elite.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 konsekuensi.
 </p>

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


eksporbawaan Aplikasi;

Kode ini membuat komponen produk sederhana.

Buat Komponen Checkout PayPal

Tambahkan kode berikut ke file PayPalCheckout.js:

impor Bereaksi, { useRef, useEffect, useState } dari"reaksi";
impor Pembayaran Gagal dari"./Kegagalan Pembayaran";
impor Pembayaran berhasil dari"./Pembayaran berhasil";
fungsiPayPalCheckout() {
const paypal = useRef();
const [Statustransaksi, setTransaksiStatus] = useState(batal);
 gunakanEfek(() => {
jendela.paypal
 .Tombol({
 buatPesanan: (data, tindakan, err) => {
kembali tindakan.pesanan.buat({
 maksud: "MENANGKAP",
 unit_pembelian: [
 {
 keterangan: "laptop macbook",
 jumlah: {
 Kode mata uang: "USD",
 nilai: 350.00,
 },
 },
 ],
 });
 },
 disetujui: asinkron (data, tindakan) => {
const pesanan = menunggu tindakan.order.capture();
menghibur.catatan("kesuksesan", memesan);
 setTransaksiStatus("kesuksesan");
 },
 onError: (berbuat salah) => {
menghibur.log (salah);
 setTransaksiStatus("kegagalan");
 },
 })
 .render (paypal.current);
 }, []);
jika (status transaksi "kesuksesan") {
kembali<Pembayaran berhasil />;
 }
jika (status transaksi "kegagalan") {
kembali<Pembayaran Gagal />;
 }
kembali (



</div>
 </div>
 );
}
eksporbawaan PayPalCheckout;

Kode ini menggunakan tiga Bereaksi kait: useRef, useState, dan useEffect. Ini menggunakan useRef untuk membuat referensi ke elemen div, yang akan bertindak sebagai wadah untuk tombol pembayaran PayPal.

Ini menggunakan useEffect untuk membuat tombol PayPal dengan paypal. Tombol fungsi, dan kemudian merender tombol itu di elemen div yang direferensikan oleh paypal.currenmetode t.

Itu paypal. Tombol function mengambil objek dengan beberapa properti:

• createOrder: Fungsi ini mengembalikan objek yang berisi detail pesanan yang telah dibuat pengguna. Detail pesanan akan mencakup detail spesifik produk atau layanan seperti jumlah, nama produk, deskripsi, dan mata uang.
• onApprove: Fungsi ini berjalan saat pembayaran disetujui. Itu menangkap pembayaran dan mencatat pesan sukses ke konsol. Ini juga mengatur Status transaksi negara bagian ke kesuksesan.
• onError: Fungsi ini berjalan saat pembayaran mengalami kesalahan. Ini mencatat pesan kesalahan ke konsol dan menyetel Status transaksi negara bagian ke kegagalan.

Akhirnya, komponen secara kondisional merender salah satu dari Pembayaran berhasil atau Pembayaran Gagal komponen tergantung pada nilai dari Status transaksi negara.

Kedua komponen ini hanya akan dirender setelah transaksi berhasil atau gagal. Lanjutkan dan buat dua file: PaymentSuccess.js Dan PaymentFailure.js di folder komponen dan tambahkan komponen fungsional dengan elemen paragraf yang merender status transaksi.

Perbarui Komponen App.js

Buka file src/App.js dan tambahkan kode di bawah ini:

impor Bereaksi, { useState } dari"reaksi";
impor Produk dari"./komponen/Produk";
impor PayPalCheckout dari"./components/PayPalCheckout";
impor"./App.css";
fungsiAplikasi() {
const [checkout, setCheckOut] = useState(PALSU);
kembali (

"Aplikasi">
"Tajuk-aplikasi">
 {Periksa? (

 ): (
"Produk">
 NamaKelas="Periksa"
 onClick={() => {
 setCheckOut(BENAR);
 }}
 >
 Tambahkan ke Keranjang & Pembayaran
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
eksporbawaan Aplikasi;

Kode ini menggunakan pendekatan rendering bersyarat untuk menampilkan komponen PayPalCheckout atau komponen Produk. Kait useState menginisialisasi variabel status yang disebut checkout sebagai false, yang melacak status saat ini saat halaman dimuat.

Awalnya, React me-render komponen Product, termasuk tombol checkout. Saat pengguna mengklik tombol checkout, fungsi penangan onClick memicu untuk memperbarui variabel checkout menjadi true. Pembaruan ini meminta komponen Aplikasi untuk merender komponen PayPalCheckout.

Fitur Pembayaran PayPal Tambahan

Fitur pembayaran PayPal, seperti One Touch dan PayPal Credit, memastikan pelanggan Anda dapat menikmati proses pembayaran yang efisien, aman, andal, dan nyaman.

Meskipun Anda dapat membangun layanan pemrosesan pembayaran Anda sendiri dari awal, menggunakan platform pembayaran seperti PayPal lebih disukai sebagai alternatif yang lebih fleksibel dan efisien. Pada dasarnya, dengan solusi Pembayaran, Anda tidak perlu khawatir tentang pengelolaan infrastruktur yang diperlukan untuk menyiapkan layanan pembayaran khusus.