[partner WebView] IAP processProductGrant 콜백 미호출 + fetch 차단 문제

개발
,
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

안녕하세요, partner WebView 미니앱 개발 중입니다. 두 가지 이슈가 있어 문의드립니다.ㅜㅜ

  1. processProductGrant 콜백 미호출
    createOneTimePurchaseOrder로 IAP 연동 중인데, iOS QR 업로드 테스트에서 앱스토어 결제 승인까지 진행되고 실제 결제(출금)도 되지만, processProductGrant 콜백이 호출되지 않습니다.
  • SDK: @apps-in-toss/web-framework ^1.14.1
  • processProductGrant 안에서 navigator.sendBeacon으로 서버에 디버그 로그를 보냈으나 서버에 요청이 도달하지 않음
  • onEvent(success)와 onError도 호출되지 않음
  • async 제거하고 동기 함수로 즉시 return true만 해도 동일 증상

코드:

const cleanup = IAP.createOneTimePurchaseOrder({
  options: {
    sku,
    processProductGrant: ({ orderId }) => {
      return true;
    },
  },
  onEvent: (event) => {
    if (event.type === 'success') {
      // 여기까지 도달하지 않음
      cleanup();
    }
  },
  onError: (error) => {
    // 여기도 호출되지 않음
    cleanup();
  },
});

혹시 partner WebView 미니앱에서 IAP 사용 시 추가 설정이나 주의사항이 있을까요?

  1. WebView에서 외부 도메인 fetch 차단

미니앱에서 파트너 서버로 fetch, XMLHttpRequest 호출 시 TypeError: Load failed가 발생합니다. CORS 헤더는 정상 설정되어 있고, 일반 브라우저에서는 정상 동작합니다.

테스트 결과:

  • fetch: 실패 (TypeError: Load failed)
  • XMLHttpRequest: 실패
  • navigator.sendBeacon: 성공
  • iframe form POST: 성공
  • new Image() GET: 에러 (but 요청은 나감)

origin: https://saju-baksa.private-apps.tossmini.com

현재 sendBeacon과 iframe POST로 우회하여 로그인은 해결했는데, 미니앱에서 파트너 서버와 통신하는 공식 권장 방법이 있는지 궁금합니다.

추가로, 커뮤니티에서 "실제 출시 이후 프로덕트에서는 문제 없이 불린다"는 답변을 봤는데, QR 업로드 테스트 환경에서는 processProductGrant가 정상 동작하지 않는 게 알려진 제한사항인가요?

출시 전 IAP 테스트는 어떻게 진행해야 하나요?

감사합니다.ㅜㅜ 도와주세요

appName (선택)

saju-baksa

2

안녕하세요 :slight_smile:

  1. navigator.sendBeacon 에 대한 응답도 서버에서 정상적으로 나갔을까요 ? 해당 라인 주석 처리후 return true; 를 반환하면 어떤지요 ?!

  2. 외부 도메인 fetch를 별도로 차단하고 있지 않습니다. Load failed 에러를 받았다면, CORS 이슈일 확률이 높아보입니다. 혹시 자체 서버 웹서버 로그에 OPTIONS, POST 모두 허용이 되어있으신가요 ? access, error 로그 잡히는게 있으신지용

3

안녕하세요? 답변 감사합니다

1번: 현재 코드가 이미 processProductGrant에서 return true만 하고 있고, 주문 생성은 onEvent에서 beacon으로 처리하고 있습니다. 그런데 processProductGrant 자체가 호출되지 않는 상황입니다. QR 업로드 테스트(intoss-private) 환경에서 앱스토어 결제 승인까지 진행되지만, 콜백이 실행되지 않습니다. 혹시 QR 업로드 테스트 환경에서 IAP 콜백이 정상 동작하는지 확인 가능하신가요?

2번: CORS는 Access-Control-Allow-Origin: *, Methods: GET/POST/OPTIONS, Headers: Content-Type/Authorization으로 설정되어 있고, OPTIONS preflight도 204로 응답합니다. 일반 브라우저에서는 정상 동작하며, 미니앱 WebView에서만 Load failed가 발생합니다. sendBeacon과 iframe form POST는 정상 동작하는 걸로 봐서 WKWebView의 네트워크 제한으로 보이는데, 혹시 다른 원인이 있을 수 있을까요?

회신 주시면 너무 감사하겠습니다.

4

1번: 현재 코드가 이미 processProductGrant에서 return true만 하고 있고, 주문 생성은 onEvent에서 beacon으로 처리하고 있습니다. 그런데 processProductGrant 자체가 호출되지 않는 상황입니다. QR 업로드 테스트(intoss-private) 환경에서 앱스토어 결제 승인까지 진행되지만, 콜백이 실행되지 않습니다. 혹시 QR 업로드 테스트 환경에서 IAP 콜백이 정상 동작하는지 확인 가능하신가요?

2번: CORS는 Access-Control-Allow-Origin: *, Methods: GET/POST/OPTIONS, Headers: Content-Type/Authorization으로 설정되어 있고, OPTIONS preflight도 204로 응답합니다. 일반 브라우저에서는 정상 동작하며, 미니앱 WebView에서만 Load failed가 발생합니다. sendBeacon과 iframe form POST는 정상 동작하는 걸로 봐서 WKWebView의 네트워크 제한으로 보이는데, 혹시 다른 원인이 있을 수 있을까요?

5

음.. QR 테스트 환경에서도 정상적으로 콜백이 가는게 정상입니다 :cry:
onEvent, onError에도 아무것도 안잡히는게 이상하네요 ㅠㅠ

혹시 partner WebView 가 어떤 의미인지 알 수 있을까요 ? 구조가 궁금합니다!

6

granite.config.ts에서 type: 'partner’로 설정한 WebView 미니앱입니다. React + Vite 기반이고 .ait로 빌드해서 QR 업로드 테스트하고 있습니다.

추가로, 미니앱에서 외부 도메인으로 fetch 시 TypeError: Load failed가 발생해서 processProductGrant 안에서 서버 통신 자체가 불가능합니다. 이 부분과 콜백 미호출이 관련 있을 수 있을까요?

7

granite.config.ts에서 type: 'partner’로 설정한 WebView 미니앱입니다. React + Vite 기반이고 .ait로 빌드해서 QR 업로드 테스트하고 있습니다.

추가로, 미니앱에서 외부 도메인으로 fetch 시 TypeError: Load failed가 발생해서 processProductGrant 안에서 서버 통신 자체가 불가능합니다. 이 부분과 콜백 미호출이 관련 있을 수 있을까요?

8

음.. fetch 시에 발생하는 에러와는 관련이 없을 것 같습니다 :cry:
createOneTimePurchaseOrder 의 onEvent, onError에서 바로 로그를 찍어보면 어떤가요 ?

9

추가 확인사항입니다. 별도로 Server 승인 모델(returnUrl POST 방식)로 결제를 구현했더니 결제 인증 → 승인 → DB 업데이트 → 리다이렉트까지 정상 작동합니다. 이 방식은 fetch를 쓰지 않아서 WebView 통신 제한에 영향을 안 받는 것 같습니다. 결국 processProductGrant 콜백 미호출 문제만 남은 상태인데, QR 업로드 테스트 환경에서 IAP 콜백이 정상 동작하는 사례가 있는지 확인 부탁드립니다. 아니면 출시 검토 요청 후 프로덕션에서 테스트하는 게 나을까요?

10

이미 테스트했습니다. processProductGrant, onEvent, onError 각각에 navigator.sendBeacon으로 서버에 디버그 로그를 전송하도록 했는데, 세 곳 모두 서버에 요청이 도달하지 않았습니다. 콜백 자체가 호출되지 않는 상황입니다. 또한 processProductGrant에서 아무것도 하지 않고 return true만 해도 동일한 증상입니다. 앱스토어 결제 승인까지 진행되고 실제 출금도 되지만, 이후 결제가 실패했습니다 바로 뜨고 환불을 해야하는 상황이 화면이 표시됩니다.

11

방금 QR로 테스트 했을때 정상적으로 processProductGrant, onEvent 정상 호출되었습니다..

image
image1179×2556 258 KB

(상품 지급 처리 구간)

혹시 스크린 로그를 남겨보실 수 있나요 ?

12

processProductGrant, onEvent success 모두 정상 호출 확인했습니다! (스크린샷 첨부)

440원 테스트 상품으로 테스트했더니 콜백이 정상 작동합니다. 이전에 9,900원 상품으로 테스트할 때는 콜백이 안 불렸는데, 혹시 상품 가격이나 상태에 따라 차이가 있을 수 있나요?

image
image588×1280 106 KB

13

헙 이상하네요 :thinking:
상품 가격에 따른 차이는 없어요 :cry:

14

해결했습니다! 감사합니다.

원인은 processProductGrant/onEvent 콜백 자체는 정상 호출되었으나, 콜백 내에서 외부 서버로 통신(fetch, beacon, iframe)이 안 되는 문제였습니다.

해결 방법: 결제 버튼 클릭 시 IAP 결제 전에 미리 주문을 생성(iframe POST)하고, IAP 결제는 주문 생성 완료 후 실행하는 구조로 변경했습니다. 결제 전 시점에서는 iframe 통신이 정상 작동합니다.

스크린 로그 남겨보라는 조언 덕분에 콜백 호출 여부를 확인할 수 있었습니다. 도움 주셔서 감사합니다!

2개의 좋아요