Flutter 웹 - PortOne 결제 연동

문제 배경

Flutter 웹에서 PortOne(v1)을 이용해 결제 기능을 구현하려고 시도했으나, 문제가 발생

기존 방식

1. v1 SDK 사용 시도
   • 목적: PortOne v1을 이용해 Flutter Web에 결제 기능 연동
   • 사용한 SDK:

     <script src="https://cdn.iamport.kr/js/iamport.js"></script>

2. Flutter에서 dart:js_interop 사용
   • @JS() + @staticInterop을 이용해 JS 함수와 객체를 Dart에서 호출 시도
   • 예: requestPay() 등을 Dart에서 호출하고자 함
3. 문제 발생
   • 런타임 오류 발생:

     TypeError: Cannot read properties of undefined (reading 'IMP')

   • 원인: iamport.js가 불러와졌지만, Dart → JS 경로에서 window.IMP가 아직 초기화되지 않았거나, 접근 불가

해결한 방식

1. JS 코드를 index.html에 직접 작성

   • Flutter에서 JS 변환 없이, JS 코드를 index.html에 작성
   • 결제 요청 함수:

     <script>
       let widget = null;
     
       window.startPortOnePayment = async function (paymentData) {
         try {
           const paymentId = crypto.randomUUID();  // 또는 직접 생성
     
           const paymentResult = await PortOne.requestPayment({
             storeId: paymentData.storeId,
             channelKey: paymentData.channelKey,
             paymentId,
             orderName: paymentData.orderName,
             totalAmount: paymentData.totalAmount,
             currency: paymentData.currency,
             payMethod: paymentData.payMethod,
           });
     
           console.log(paymentResult);
     
           if (paymentResult.code !== undefined) {
             // 결제 실패
             window.dispatchEvent(new CustomEvent("paymentResult", {
               detail: { success: false, error_msg: paymentResult.message }
             }));
             return;
           }
     
           // ✅ 백엔드 없이 바로 결제 성공 처리
           console.log("결제 성공:", paymentResult);
           window.dispatchEvent(new CustomEvent("paymentResult", {
             detail: { success: true, ...paymentResult }
           }));
         } catch (error) {
           console.log("결제 오류:", error);
           window.dispatchEvent(new CustomEvent("paymentResult", {
             detail: { success: false, error_msg: error.message }
           }));
         }
       }
     </script>

2. v1 SDK → v2 SDK로 변경

   <script src="https://cdn.portone.io/v2/browser-sdk.js"></script>

3. Dart에서 JS 이벤트 리스닝 처리

   • 결제 결과를 JS → Dart로 전달할 때 CustomEvent 사용

     import 'dart:html';
     
     window.addEventListener('paymentResult', (event) {
       final CustomEvent customEvent = event as CustomEvent;
       final detail = customEvent.detail;
     
       if (detail['success'] == true) {
         // 결제 성공 처리
       } else {
         // 결제 실패 처리
       }
     });