부트페이 실행시 페이지 뒤로가기 후 다시 부트페이를 실행하면 undefined 오류가 발생합니다.

[imki123]

안녕하세요. 리액트에서 부트페이 사용 중에 오류가 발생하고있습니다. bootpay-js 라이브러리 이슈인지 확인 요청드립니다.

• 개발 환경:

  • react@^18.2.0
  • bootpay-js@v3.3.6

• 오류 재현 절차:

  • BootPay.request() 실행 -> 페이지 뒤로가기(또는 react-router history.goBack()) -> 다시 BootPay.request() 실행 -> undefined 참조 오류 발생

• 의견:

  • BootPay 인스턴스는 이상이 없습니다. BootPay.request() 실행시 undefined를 리턴하며, BootPay.request().error() 부분에서 undefined 에러가 발생합니다.
  • window.location.reload()로 페이지를 전체 리로드하면 문제가 해결됩니다.

• 스크린샷

  

• bootpay.js 코드

  BootPay.request({
  price: 0, // 0으로 해야 한다.
  application_id: bootpayAppId,
  name: '본인인증', // 결제창에서 보여질 이름
  pg: 'danal',
  method: 'auth', // 빌링키를 받기 위한 결제 수단
  show_agree_window: 0, // 부트페이 정보 동의 창 보이기 여부
  order_id:
    formatted +
    (() => Math.floor(Math.random() * (9999999 - 1000000 + 1)) + 1000000)(), // 고유 주문번호로, 생성하신 값을 보내주셔야 합니다.
  // params: {callback1: '그대로 콜백받을 변수 1', callback2: '그대로 콜백받을 변수 2', customvar1234: '변수명도 마음대로'}
  })
  .error((data) => {
  // 본인인증 진행시 에러가 발생하면 수행됩니다.
  errorCB(data)
  })
  .cancel((data) => {
  // 본인인증이 취소되면 수행됩니다.
  cancelCB(data)
  })
  .done((data) => {
  // 본인인증이 완료되면 관련된 값이 리턴된다.
  doneCB(data)
  })

[bootpay]

먼저 현재 v1 SDK를 사용중이시지만 현재 권장되는 버전은 v2 SDK 입니다. https://docs.bootpay.co.kr 로 오시면 v2 SDK에 대한 개발 가이드를 확인하실 수 있습니다.

부득이하게 v1 SDK를 사용하셔야한다면 다음과 같이 안내드립니다.

해당 증상은 request 가 호출되어 부트페이 창이 뜬 이후 history router로 이동 후에 다시 돌아오게 되면 full change reload가 되지 않는다면 기존 부트페이 창 dom이 남아있게 되어 오류가 발생되게 됩니다.

보통은 버튼에 이벤트를 주어 페이지를 로드하고 iframe으로 결제 완료 및 결제 취소등의 이벤트를 받아 관련 dom과 이벤트 정보를 destroy하지만 진행도중 중간에 hash change혹은 history push를 트리거로 react에서 다른 dom으로 대체되어 제대로 제거가 되지 않은 상태라면 위와 같은 문제가 발생될 수 있습니다.

BootPay.request() 함수 호출 이전에 BootPay.removePaymentWindow() 를 추가로 호출하셔서 이 문제를 해결해주시기 바랍니다.

추가적으로 BootPay.request() 가 DOM Loaded Event ( Document Ready ) 상태에서 호출되지 않는다면 이와 유사한 문제가 발생될 수 있습니다.

위 2가지를 확인 후 수정 부탁드립니다.

두가지를 해보시고 해결되셨다면 피드백 부탁드립니다. 자세한 문의는 https://admin.bootpay.co.kr 부트페이 관리자로 오신 후 오른쪽 하단 채널톡으로 문의하시면 더 자세히 안내받으실 수 있습니다.

[imki123]

@bootpay BootPay.removePaymentWindow() 추가로 호출하니 정상적으로 동작합니다. 답변 감사합니다.

[bootpay]

@imki123 피드백 감사드립니다! 해당 이슈는 닫도록 하겠습니다. 감사합니다.