전자 상거래 분야에서 디지털 결제 솔루션은 국경 간 결제를 쉽게 지원하고 처리하여 비즈니스의 매출과 전반적인 성장에 크게 기여했습니다.
PayPal은 온라인 거래 관리를 위한 간편하고 유연한 디지털 결제 솔루션을 제공합니다. 웹 애플리케이션에 PayPal을 통합하면 고객이 원활하고 안전한 결제 환경에 액세스할 수 있어 매출과 전반적인 브랜드 신뢰도를 높일 수 있습니다.
PayPal을 React 애플리케이션에 통합하는 방법을 알아보세요.
페이팔 샌드박스 계정 설정
페이팔 샌드박스는 애플리케이션 내에서 결제 통합을 테스트할 수 있도록 페이팔에서 제공하는 테스트 환경입니다. PayPal의 라이브 프로덕션 환경에 있는 모든 결제 기능이 포함된 시뮬레이션 환경을 제공합니다.
샌드박스는 실제 돈 없이도 결제 통합을 테스트할 수 있는 플랫폼을 제공합니다.
샌드박스 계정을 사용하면 테스트 자금으로 가상 PayPal 계정에 액세스하여 다양한 유형의 거래 및 결제 통합을 시뮬레이션할 수 있습니다.
샌드박스 계정을 생성하려면 PayPal 개발자 콘솔 로 이동하여 PayPal 계정 자격 증명으로 로그인합니다. 그런 다음 개발자 대시보드에서 샌드박스 계정 버튼을 클릭합니다.
React 애플리케이션에서 PayPal 거래를 처리하려면 비즈니스 계정과 개인 계정이라는 두 개의 샌드박스 계정이 필요합니다. 이 두 계정은 고객과 판매자(비즈니스)의 관점에서 완전한 거래를 시뮬레이션하는 데 도움이 됩니다.
두 가지 관점에서 애플리케이션의 결제 통합 기능을 테스트하는 것이 중요합니다.
계정 생성 버튼을 클릭하여 두 계정을 설정합니다.
계정 설정 페이지에서 개인, 비즈니스 각 계정 유형을 하나씩 생성합니다. 개인 계정 자격 증명을 사용하여 PayPal의 샌드박스 개인 계정에 로그인합니다. 반면에 비즈니스 계정의 자격 증명을 사용하여 개발자 콘솔에서 프로젝트를 생성하여 PayPal의 클라이언트 ID를 얻습니다.
또는 새 계정을 생성하는 대신 PayPal에서 제공하는 기본 샌드박스 계정을 사용하여 결제 통합을 테스트할 수 있습니다.
PayPal 프로젝트 생성
개발자 대시보드 페이지에서 앱 및 자격증명 버튼을 클릭하고 앱 생성 버튼을 클릭하여 PayPal 프로젝트를 설정합니다. 그런 다음 애플리케이션 이름을 입력하고 계정 유형으로 판매자를 선택한 다음 처음 생성한 비즈니스 계정의 자격 증명을 선택합니다.
마지막으로 앱의 클라이언트 ID를 복사합니다.
React 클라이언트 설정
React 애플리케이션을 생성하고 public/index.html 파일을 열고 아래 머리 요소 섹션에 표시된 형식의 클라이언트 ID를 추가합니다.
<script src="https://www.paypal.com/sdk/js?client-id=your-client-ID¤cy=USD"></script>
스크립트 태그는 PayPal의 API와 상호 작용하기 위한 클라이언트 측 기능을 제공하는 라이브러리인 PayPal JavaScript SDK를 로드하고 이를 React 컴포넌트에서 사용할 수 있도록 합니다.
SDK의 함수를 사용하여 결제 세부 정보를 PayPal로 전송하고, 결제를 승인하고, 결제 응답을 처리하는 결제 흐름을 처리하는 PayPal 결제 버튼을 생성할 수 있습니다.
이 프로젝트의 코드는 GitHub 리포지토리에서 찾을 수 있습니다.
제품 구성 요소 생성
/src 디렉터리에 새 구성 요소 폴더를 생성하고 두 개의 파일을 추가합니다: Product.js와 PayPalCheckout.js를 추가합니다.
Product.js 파일을 열고 아래 코드를 추가합니다:
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;
이 코드는 간단한 제품 구성 요소를 렌더링합니다.
PayPal 결제 컴포넌트 생성
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;
이 코드는 세 개의 React 훅, 즉 useRef, useState, useEffect를 사용합니다. 이 코드는 useRef를 사용하여 div 요소에 대한 참조를 생성하며, 이 요소는 PayPal 결제 버튼의 컨테이너 역할을 합니다.
useEffect를 사용하여 paypal.Buttons 함수로 PayPal 버튼을 생성한 다음, paypal.current 메서드가 참조하는 div 요소에 해당 버튼을 렌더링합니다.
paypal.Buttons 함수는 여러 속성을 가진 객체를 받습니다:
⭐ createOrder: 이 함수는 사용자가 생성한 주문의 세부 정보가 포함된 객체를 반환합니다. 주문 세부 정보에는 금액, 제품 이름, 설명, 통화 등 제품 또는 서비스의 특정 세부 정보가 포함됩니다.
⭐ onApprove: 이 기능은 결제가 승인되면 실행됩니다. 결제를 캡처하고 콘솔에 성공 메시지를 기록합니다. 또한 트랜잭션 상태 상태를 성공으로 설정합니다.
⭐ onError: 이 함수는 결제에 오류가 발생하면 실행됩니다. 오류 메시지를 콘솔에 기록하고 트랜잭션 상태 상태를 실패로 설정합니다.
마지막으로, 컴포넌트는 트랜잭션 상태의 값에 따라 조건부로 PaymentSuccess 또는 PaymentFailure 컴포넌트를 렌더링합니다.
이 두 컴포넌트는 트랜잭션이 성공하거나 트랜잭션이 실패한 후에만 렌더링됩니다. 계속해서 두 개의 파일을 만듭니다: 구성 요소 폴더에 결제 성공.js 및 결제 실패.js 파일을 생성하고 트랜잭션 상태를 렌더링하는 단락 요소가 있는 기능 구성 요소를 추가합니다.
App.js 컴포넌트 업데이트
src/App.js 파일을 열고 아래 코드를 추가합니다:
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;
이 코드는 조건부 렌더링 방식을 사용하여 PayPalCheckout 구성 요소 또는 제품 구성 요소를 표시합니다. 사용 상태 후크는 checkout이라는 상태 변수를 false로 초기화하여 페이지가 로드될 때 현재 상태를 추적합니다.
처음에 React는 결제 버튼을 포함한 Product 컴포넌트를 렌더링합니다. 사용자가 결제 버튼을 클릭하면 onClick 핸들러 함수가 트리거되어 체크 아웃 변수를 true로 업데이트합니다. 이 업데이트는 App 컴포넌트가 대신 PayPalCheckout 컴포넌트를 렌더링하라는 메시지를 표시합니다.
추가 PayPal 결제 기능
원터치 및 PayPal 크레딧과 같은 PayPal의 결제 기능을 사용하면 고객이 안전하고 신뢰할 수 있으며 편리한 간소화된 결제 프로세스를 이용할 수 있습니다.
자체 결제 처리 서비스를 처음부터 구축할 수도 있지만, PayPal과 같은 결제 플랫폼을 사용하는 것이 더 유연하고 효율적인 대안이 될 수 있습니다. 기본적으로 결제 솔루션을 사용하면 맞춤형 결제 서비스를 설정하는 데 필요한 인프라 관리에 대해 걱정할 필요가 없습니다.