전자 상거래 분야에서 디지털 결제 솔루션은 국경 간 결제를 쉽게 지원하고 처리하여 비즈니스의 매출과 전반적인 성장에 크게 기여했습니다.

PayPal은 온라인 거래 관리를 위한 간편하고 유연한 디지털 결제 솔루션을 제공합니다. 웹 애플리케이션에 PayPal을 통합하면 고객이 원활하고 안전한 결제 환경에 액세스할 수 있어 매출과 전반적인 브랜드 신뢰도를 높일 수 있습니다.

PayPal을 React 애플리케이션에 통합하는 방법을 알아보세요.

페이팔 샌드박스 계정 설정

페이팔 샌드박스는 애플리케이션 내에서 결제 통합을 테스트할 수 있도록 페이팔에서 제공하는 테스트 환경입니다. PayPal의 라이브 프로덕션 환경에 있는 모든 결제 기능이 포함된 시뮬레이션 환경을 제공합니다.

샌드박스는 실제 돈 없이도 결제 통합을 테스트할 수 있는 플랫폼을 제공합니다.

샌드박스 계정을 사용하면 테스트 자금으로 가상 PayPal 계정에 액세스하여 다양한 유형의 거래 및 결제 통합을 시뮬레이션할 수 있습니다.

샌드박스 계정을 생성하려면 PayPal 개발자 콘솔 로 이동하여 PayPal 계정 자격 증명으로 로그인합니다. 그런 다음 개발자 대시보드에서 샌드박스 계정 버튼을 클릭합니다.

React 애플리케이션에서 PayPal 거래를 처리하려면 비즈니스 계정과 개인 계정이라는 두 개의 샌드박스 계정이 필요합니다. 이 두 계정은 고객과 판매자(비즈니스)의 관점에서 완전한 거래를 시뮬레이션하는 데 도움이 됩니다.

두 가지 관점에서 애플리케이션의 결제 통합 기능을 테스트하는 것이 중요합니다.

계정 생성 버튼을 클릭하여 두 계정을 설정합니다.

계정 설정 페이지에서 개인, 비즈니스 각 계정 유형을 하나씩 생성합니다. 개인 계정 자격 증명을 사용하여 PayPal의 샌드박스 개인 계정에 로그인합니다. 반면에 비즈니스 계정의 자격 증명을 사용하여 개발자 콘솔에서 프로젝트를 생성하여 PayPal의 클라이언트 ID를 얻습니다.

또는 새 계정을 생성하는 대신 PayPal에서 제공하는 기본 샌드박스 계정을 사용하여 결제 통합을 테스트할 수 있습니다.

PayPal 프로젝트 생성

개발자 대시보드 페이지에서 앱 및 자격증명 버튼을 클릭하고 앱 생성 버튼을 클릭하여 PayPal 프로젝트를 설정합니다. 그런 다음 애플리케이션 이름을 입력하고 계정 유형으로 판매자를 선택한 다음 처음 생성한 비즈니스 계정의 자격 증명을 선택합니다.

이 글도 확인해 보세요:  웹 개발을 위한 가장 인기 있는 8가지 백엔드 프레임워크

마지막으로 앱의 클라이언트 ID를 복사합니다.

React 클라이언트 설정

React 애플리케이션을 생성하고 public/index.html 파일을 열고 아래 머리 요소 섹션에 표시된 형식의 클라이언트 ID를 추가합니다.

     <script src="https://www.paypal.com/sdk/js?client-id=your-client-ID&currency=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 결제 버튼의 컨테이너 역할을 합니다.

이 글도 확인해 보세요:  React Native에서 Flexbox를 사용하는 방법

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 컴포넌트를 렌더링하라는 메시지를 표시합니다.

이 글도 확인해 보세요:  Python으로 메시지 암호화기 만들기

추가 PayPal 결제 기능

원터치 및 PayPal 크레딧과 같은 PayPal의 결제 기능을 사용하면 고객이 안전하고 신뢰할 수 있으며 편리한 간소화된 결제 프로세스를 이용할 수 있습니다.

자체 결제 처리 서비스를 처음부터 구축할 수도 있지만, PayPal과 같은 결제 플랫폼을 사용하는 것이 더 유연하고 효율적인 대안이 될 수 있습니다. 기본적으로 결제 솔루션을 사용하면 맞춤형 결제 서비스를 설정하는 데 필요한 인프라 관리에 대해 걱정할 필요가 없습니다.

By 박준영

업계에서 7년간 경력을 쌓은 숙련된 iOS 개발자인 박준영님은 원활하고 매끄러운 사용자 경험을 만드는 데 전념하고 있습니다. 애플(Apple) 생태계에 능숙한 준영님은 획기적인 솔루션을 통해 지속적으로 기술 혁신의 한계를 뛰어넘고 있습니다. 소프트웨어 엔지니어링에 대한 탄탄한 지식과 세심한 접근 방식은 독자에게 실용적이면서도 세련된 콘텐츠를 제공하는 데 기여합니다.