[Next] Paypal 결제 module 연동

먼저 모듈을 설치한다. 

npm install @paypal/react-paypal-js

https://www.npmjs.com/package/@paypal/react-paypal-js

@paypal/react-paypal-js

공식문서에 자세한 설명이 나와있는 것을 확인할 수 있다. 

 

Button

먼저 결제 창을 띄워줄 버튼을 구현했다.

Provider로 감싸주어야 하며, 발급받은 ClientId를 넣어주면 된다. 

 

주문 생성 함수, 승인 후 실행 함수, 에러 시 실행 함수는 props로 넘겨받으며, Button을 랜더링 해주는 컴포넌트에서 선언했다. 

 

  const createOrder = async (data: any, actions: any) => {
    const paypalCheckResponse = await postShopPurchasePaypalCheckById(
      paypalPurchaseId
    );

    const uId = paypalCheckResponse?.userId ?? "";
    const invId = paypalCheckResponse?.historyId ?? 0;
    const name = paypalCheckResponse?.product?.name ?? "";
    const price = paypalCheckResponse?.product?.priceUsd ?? 0;

    return actions.order.create({
      purchase_units: [
        {
          custom_id: uId,
          invoice_id: invId.toString(),
          description: name,
          amount: {
            value: price.toString(),
            currency_code: "USD",
          },
        },
      ],
    });
  };

  const onApprove = async (data: any, actions: any) => {
    const authorization = await actions.order!.authorize();
    const authorizationId =
      authorization.purchase_units[0].payments?.authorizations![0].id;
    const historyId = authorization.purchase_units[0].invoice_id;
    const payerEmail = authorization.payer.email_address;

    const paypalConfirmResponse =
      await postShopPurchasePaypalConfirmByHistoryId(
        //@ts-ignore
        historyId,
        {
          authorizationId: authorizationId,
          orderId: data.orderID,
          payerEmail: payerEmail,
          payerId: data.payerID,
        }
      );

    if (paypalConfirmResponse?.result === "SUCCESS") {
      openFinishedModal();
    } else {
      openErrorModal1();
    }
  };

  const onError = (error: any) => {
    console.log(error);
  };

createOrder 함수는 data와 actions를 매개변수로 받으며, actions 객체에 주문서를 여는 함수가 포함되어 있다. 
API 호출 후 공식문서를 보며 필요한 값들을 적절하게 넣어주면 된다. 

 

승인 후, 또는 결제 실패의 경우도 마찬가지로 data와 actions 객체를 받아 적절하게 예외처리를 해줄 수 있다.

 

Omise와 비교했을 때, 조금 더 간단하다는 느낌을 받았다 ...(?)