Cách tích hợp PayPal Checkout trong ứng dụng React

Tạo một thành phần sản phẩm

Trong thư mục /src, tạo một thư mục thành phần mới và thêm hai tệp: Product.js và PayPalCheckout.js.

Mở tệp Product.js và thêm mã bên dưới:

 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; 

Mã này hiển thị một thành phần sản phẩm đơn giản.

Tạo Thành phần PayPal Checkout

Thêm mã sau vào tệp 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;
 

Đoạn mã này sử dụng ba hook React: useRef, useState và useEffect. Nó sử dụng useRef để tạo tham chiếu đến phần tử div, phần tử này sẽ hoạt động như một vùng chứa cho nút thanh toán PayPal.

Nó sử dụng useEffect để tạo nút PayPal với paypal.Buttons và sau đó hiển thị nút đó trong phần tử div được tham chiếu bởi paypal.currenphương pháp t.

Các paypal.Buttons chức năng lấy một đối tượng với một số thuộc tính:

• createOrder: Hàm này trả về một đối tượng chứa thông tin chi tiết về đơn hàng mà người dùng đã tạo. Chi tiết đơn đặt hàng sẽ bao gồm các chi tiết cụ thể của sản phẩm hoặc dịch vụ như số lượng, tên sản phẩm, mô tả và đơn vị tiền tệ.
• onApprove: Chức năng này chạy khi thanh toán được phê duyệt. Nó ghi lại khoản thanh toán và ghi thông báo thành công vào bảng điều khiển. Nó cũng đặt Trạng thái giao dịch nhà nước để thành công.
• onError: Chức năng này chạy khi thanh toán gặp lỗi. Nó ghi thông báo lỗi vào bảng điều khiển và đặt Trạng thái giao dịch nhà nước để sự thất bại.

Cuối cùng, thành phần hiển thị có điều kiện một trong hai Thanh toán thành công hoặc thanh toán thất bại thành phần phụ thuộc vào giá trị của Trạng thái giao dịch tình trạng.

Hai thành phần này sẽ chỉ hiển thị sau khi giao dịch thành công hoặc giao dịch thất bại. Hãy tiếp tục và tạo hai tệp: Thanh toánSuccess.js Và PaymentFailure.js trong thư mục thành phần và thêm một thành phần chức năng với một thành phần đoạn biểu thị trạng thái của giao dịch.

Cập nhật Thành phần App.js

Mở tệp src/App.js và thêm mã bên dưới:

 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;
 

Mã này sử dụng phương pháp hiển thị có điều kiện để hiển thị thành phần PayPalCheckout hoặc thành phần Sản phẩm. Móc useState khởi tạo một biến trạng thái có tên checkout là false, giúp theo dõi trạng thái hiện tại khi tải trang.

Ban đầu, React kết xuất thành phần Sản phẩm, bao gồm cả nút thanh toán. Khi người dùng nhấp vào nút thanh toán, hàm xử lý onClick sẽ kích hoạt để cập nhật biến thanh toán thành true. Thay vào đó, bản cập nhật này sẽ nhắc thành phần Ứng dụng kết xuất thành phần PayPalCheckout.

Các tính năng thanh toán PayPal bổ sung

Các tính năng thanh toán của PayPal, chẳng hạn như One Touch và PayPal Credit, đảm bảo khách hàng của bạn có thể tận hưởng quy trình thanh toán hợp lý, an toàn, đáng tin cậy và thuận tiện.

Mặc dù bạn có thể xây dựng dịch vụ xử lý thanh toán của riêng mình từ đầu, nhưng sử dụng nền tảng thanh toán như PayPal tốt hơn là một giải pháp thay thế linh hoạt và hiệu quả hơn. Về cơ bản, với giải pháp Thanh toán sẵn có, bạn không cần phải lo lắng về việc quản lý cơ sở hạ tầng cần thiết để thiết lập dịch vụ thanh toán tùy chỉnh.