[ React / TossPayment-1 ] <div id='payment-method'/> 어떻게 보여줄 것인가?

이번에 프로젝트를 하면서 Toss Payment를 설치해 봤다.

현재 토스 2가지 버전이 있다. 1과 2버전 있으며 API를 활용하거나 SDK를 활용한다.

여기서는 Toss ver2 + SDK를 활용했다

 

 

토스를 붙이면서 고민해야 할 부분은 총 3개자 있었던 거 같다.

 

고민했던 지점 3가지

1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?

2. 결제 취소시 어떻게 작성 상태 및 데이터를 정리해 나갈 것인가?

3. 결제 완료 후 어떻게 플로우를 설정할 것인가?

---

 

1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?

<div id='payment-method'/>

Toss에서는 <div id='payment-method'/>를 통해서 UI를 그린다.

토스로 위젯을 부를 준비가 되면

useEffect(() => {
    async function renderPaymentWidgets() {
      if (widgets == null) {
        return;
      }
      /**
       * 위젯의 결제금액을 결제하려는 금액으로 초기화하세요.
       * renderPaymentMethods, renderAgreement, requestPayment 보다 반드시 선행되어야 합니다.
       * @docs https://docs.tosspayments.com/sdk/v2/js#widgetssetamount
       */
      await widgets.setAmount(amount);

      await Promise.all([
        /**
         * 결제창을 렌더링합니다.
         * @docs https://docs.tosspayments.com/sdk/v2/js#widgetsrenderpaymentmethods
         */
        widgets.renderPaymentMethods({
          selector: "#payment-method",
          // 렌더링하고 싶은 결제 UI의 variantKey
          // 결제 수단 및 스타일이 다른 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
          // @docs https://docs.tosspayments.com/guides/v2/payment-widget/admin#새로운-결제-ui-추가하기
          variantKey: "DEFAULT",
        }),
        /**
         * 약관을 렌더링합니다.
         * @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션
         */
        widgets.renderAgreement({
          selector: "#agreement",
          variantKey: "AGREEMENT",
        }),
      ]);

      setReady(true);
    }

    renderPaymentWidgets();
  }, [widgets]);

이렇게 랜더링을 그린다.

 

여기서 2가지 방식으로 UI를 그릴 수 있다.

1. 그냥 같은 레이어에 그릴 것.

2. div 를 감싸고 popup으로 띄울 것.

 

1. 그냥 같은 레이어에 그릴 것.

개인적으론 1번을 해도 크게 상관이 없다고 생각이 들었다. 특히. 나이키 결제 사이트와 같이 아코디언 UI를 이용한다면,

 

2. div 를 감싸고 popup으로 띄울 것.

만약 그게 아니면 POPUP으로 결제 위젯을 띄울 수 있다.

 

 

 

옳고 그름은 없는 것 같다.

다만 Toss 위젯 바탕이 하얀색이기 때문에 하얗 바탕이로 홈페이지를 제작했다면 1번도 추천한다.

만약, 하얀 바탕이 아니라면, 2번을 추천한다.

 

 

참조

https://developers.tosspayments.com/sandbox?frontend=react