Cara Mengintegrasikan PayPal Checkout di Aplikasi React
Table of content:
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 negara 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.
Baca Juga:
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 React, buka publik/index.html file, dan tambahkan ID klien Anda dalam format yang ditunjukkan di bawah ini di bagian elemen kepala.
<script src="https://www.paypal.com/sdk/js?client-id=your-client-ID¤cy=USD"></script>
Tag skrip memuat SDK JavaScript PayPal, pustaka yang menyediakan fungsionalitas sisi klien untuk berinteraksi dengan API PayPal, dan membuatnya tersedia untuk digunakan dalam komponen React.
Dengan menggunakan fungsi SDK, Anda dapat membuat tombol pembayaran PayPal yang menangani aliran pembayaran yang melibatkan pengiriman detail pembayaran ke PayPal, mengesahkan pembayaran, dan menangani respons pembayaran.
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:
import React, { useState } from "react";
import "./product.style.css";
import "../assests/laptop.jpg";
function App() {
return (
<div className="Product-container">
<header className="Product-content">
<div className="product">
<img src={require("../assests/laptop.jpg")} alt="laptop" />
</div>
<div className="desc">
<h2> MacBook Pro</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia,molestiae quas vel sint commodi repudiandae
consequuntur.
</p>
<h3>Price: $350.00</h3>
</div>
</header>
</div>
);
}export default App;
Kode ini membuat komponen produk sederhana.
Buat Komponen Checkout PayPal
Tambahkan kode berikut ke file PayPalCheckout.js:
import React, { useRef, useEffect, useState } from "react";
import PaymentFailure from "./PaymentFailure";
import PaymentSuccess from "./PaymentSuccess";function PayPalCheckout() {
const paypal = useRef();
const [transactionStatus, setTransactionStatus] = useState(null);
useEffect(() => {
window.paypal
.Buttons({
createOrder: (data, actions, err) => {
return actions.order.create({
intent: "CAPTURE",
purchase_units: [
{
description: "MacBook Laptop",
amount: {
currency_code: "USD",
value: 350.00,
},
},
],
});
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
console.log("success", order);
setTransactionStatus("success");
},
onError: (err) => {
console.log(err);
setTransactionStatus("failure");
},
})
.render(paypal.current);
}, []);
if (transactionStatus === "success") {
return <PaymentSuccess />;
}
if (transactionStatus === "failure") {
return <PaymentFailure />;
}
return (
<div>
<div ref={paypal}></div>
</div>
);
}
export default PayPalCheckout;
Kode ini menggunakan tiga kait React: 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.Buttons fungsi, dan kemudian merender tombol itu di elemen div yang direferensikan oleh paypal.currenmetode t.
Itu paypal.Buttons 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:
import React, { useState } from "react";
import Product from "./components/Product";
import PayPalCheckout from "./components/PayPalCheckout";
import "./App.css";function App() {
const [checkout, setCheckOut] = useState(false);
return (
<div className="App">
<header className="App-header">
{checkout ? (
<PayPalCheckout />
) : (
<div className="Product">
<button
className="checkout"
onClick={() => {
setCheckOut(true);
}}
>
Add to Cart & Checkout
</button>
<Product />
</div>
)}
</header>
</div>
);
}
export default App;
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.
Artikel Terkait
