개발자1
개발자1•2y ago

iOS에서 SDK를 이용해 결제 위젯 연동했을 때, 결제 팝업에서 불규칙하게 내용이 표시되지 않는 오류

iOS에서 SDK를 이용해 결제 위젯 연동했을 때, 결제 팝업에서 불규칙하게 내용이 표시되지 않는 오류가 발생하여 문의 드립니다. requestPayment 함수를 호출하면 결제 팝업이 뜨는데, 내용이 보이기도 하고 하얀 화면에 아무 내용도 안 보이기도 합니다. 창을 닫았다 열면 다시 보이기도 하는데 원인을 모르겠습니다.
73 Replies
토스페이먼츠 BOT
토스페이먼츠 BOT•2y ago
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) : - 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.
Kimoon Lee
Kimoon Lee•2y ago
혹시 재현 영상을 공유해 주실수 있을까요?
개발자1
개발자1OP•2y ago
이런식 입니다.
개발자1
개발자1OP•2y ago
잘 안나오면 계속 안나오기도 하고, 계속 잘 나오기도 하고, 그렇습니다.
유부장
유부장•2y ago
결제하기를 클릭하게 되면, 별도로 추가 웹뷰를 띄우고, 그 위에 액션이 진행되도록 구현을 하신 걸까요?
개발자1
개발자1OP•2y ago
아뇨 그 부분은 SDK 로직이라서 전 requestPayment 함수를 호출하였습니다.
유부장
유부장•2y ago
모바일에서 동작하는 부분이 일반적이지 않아서 그렇습니다 별도로 구현하신 부분이 있으신건 없다는 말씀 이시지요?
개발자1
개발자1OP•2y ago
아.. iOS SDK를 Expo (React Native)에 Native Module로 이식해서 쓰고 있습니다. 아래와 같이 실행하고 있습니다. 
      guard let currentViewController = self.appContext?.utilities?.currentViewController() else {
        return
      }

      ReactNativeTossPaymentsWidget.shared.widget?.requestPayment(
        info: DefaultWidgetPaymentInfo(
            orderId: orderId,
            orderName: orderName,
            appScheme: appScheme
        ),
        on: currentViewController
      )
      guard let currentViewController = self.appContext?.utilities?.currentViewController() else {
        return
      }

      ReactNativeTossPaymentsWidget.shared.widget?.requestPayment(
        info: DefaultWidgetPaymentInfo(
            orderId: orderId,
            orderName: orderName,
            appScheme: appScheme
        ),
        on: currentViewController
      )
Kimoon Lee
Kimoon Lee•2y ago
RN 에서 ios SDK 를 이식해서 쓰는 부분은 저희가 보장할수 없습니다. RN 을 사용하시는거라면 native SDK 사용하지 마시고. webview 방식으로 연동해주시기 바랍니다.
개발자1
개발자1OP•2y ago
RN에서 Webview 방식으로 연동하려면 success callback을 받기 위해 별도 웹 서버 제작이 필요한 것으로 이해 했는데 맞는지요? 이를 피하기 위해서 Native 구현을 하고자 SDK를 이용하려 했습니다.
Kimoon Lee
Kimoon Lee•2y ago
현재 상태로는 그렇게 쓰시는 어려우실것 같습니다. 웹서버를 만들어서 RN 에서 웹뷰로 사용하시거나 아니면 RN 사용하지 않고 앱을 만들어 주셔야 할것 같아요..
개발자1
개발자1OP•2y ago
RN용 모듈 제작 계획은 없으실까요?
Kimoon Lee
Kimoon Lee•2y ago
단기간 내에는 없을것 같습니다.
개발자1
개발자1OP•2y ago
네, 알겠습니다.
박찬혁
박찬혁•2y ago
@24791 안녕하세요! 오피셜 모듈은 아니라 안전성 및 어떠한 보장을 드릴순 없지만 라이브러리 하나를 소개해드릴게요 . 토스페이먼츠 RN 모듈입니다 - https://github.com/seungminio/tosspayments-react-native - https://github.com/Eumhongin/react-native-toss-payments#readme 유지보수가 되지 않고 있어서, fork하신후 커스터마이징 하셔도 좋을 것 같아요
GitHub
GitHub - seungminio/tosspayments-react-native: 토스페이먼츠 React Native ...
토스페이먼츠 React Native 결제 연동 라이브러리. Contribute to seungminio/tosspayments-react-native development by creating an account on GitHub.
GitHub
GitHub - Eumhongin/react-native-toss-payments: tosspayments for rea...
tosspayments for react-native. Contribute to Eumhongin/react-native-toss-payments development by creating an account on GitHub.
개발자1
개발자1OP•2y ago
두가지 모두 봤는데, 미완성이라 서비스에 쓸 수가 없더라고요...
박찬혁
박찬혁•2y ago
그렇군요 ..ㅠㅠ😂
이실장
이실장•2y ago
모듈은 없지만 RN으로 방법만 가이드해드릴게요, 결제위젯이 아니라 결제창을 사용하시려는거죠?
Ayaan이안
Ayaan이안•2y ago
결제위젯으로 보여요(제목 참고(
개발자1
개발자1OP•2y ago
결제 위젯으로 할 생각입니다.
이실장
이실장•2y ago
결제위젯이면 웹뷰방식으로 연동해주셔야할 것 같습니다.
개발자1
개발자1OP•2y ago
결제창이면 다른 방법이 있을지요?
이실장
이실장•2y ago
1. 결제하기 버튼 클릭 2. 웹뷰 생성 3. 웹뷰 위에 string html로 requestPayments호출 4. successURl은 앱링크로 받은 (ex: tosspayments://) 같은 방식
개발자1
개발자1OP•2y ago
4번이 Native 도움 없이 RN webview로 잘 처리가 되나요?
이실장
이실장•2y ago
http 대신 tosspayments://같은 곳의 get parameter로 paymentKey등을 받기만하면됩니다. 어려운 개념이 아니라 웹뷰위의 페이지가 tosspayments://sample?amount=1000&paymentKey=xxx 이런식으로 이동하게될거에요
개발자1
개발자1OP•2y ago
저 url을 webview에서 후킹해서 판단하라는 말씀이신거죠?
이실장
이실장•2y ago
네
개발자1
개발자1OP•2y ago
네, 알겠습니다. 위와 같이 처리한 모듈이 있으면 좋을텐데 직접 구현을 해야 겠군요. 가이드 감사합니다. 모듈 디버깅 중에 amount 인자가 잘못 전달되는 경우가 발생했는데 혹시 도움을 받을 수 있을까요?
이실장
이실장•2y ago
정확한 상황을 말씀해주시겠어요 어떤 모듈을 디버깅하신거죠?
개발자1
개발자1OP•2y ago
TossPaymentsViewController 파일에서 다음과 같이 로그를 찍으면 
    private func loadTossPaymentsJavscript() {
        // loadHTMLString 이 history 가 쌓이지 않는 현상이 있어서 hacky 한 방법으로 해결
        self.webView.load(URLRequest(url: URL(string: "about:blank")!))
        DispatchQueue.main.async {
            print("TossPaymentsViewController.loadHTMLString \(self.service.htmlString)")
            self.webView.loadHTMLString(self.service.htmlString, baseURL: self.service.baseURL)
        }
    }
    private func loadTossPaymentsJavscript() {
        // loadHTMLString 이 history 가 쌓이지 않는 현상이 있어서 hacky 한 방법으로 해결
        self.webView.load(URLRequest(url: URL(string: "about:blank")!))
        DispatchQueue.main.async {
            print("TossPaymentsViewController.loadHTMLString \(self.service.htmlString)")
            self.webView.loadHTMLString(self.service.htmlString, baseURL: self.service.baseURL)
        }
    }
로그가 이렇게 amount가 0으로 나옵니다. 
TossPaymentsViewController.loadHTMLString 
    <html>
      <head>
        <script src="https://js.tosspayments.com/v1/payment"></script>
      </head>
      <body>
        <script>
          var tossPayments = TossPayments("test_ck_YZ1aOwX7K8m6PE5ZaX93yQxzvNPG")
          tossPayments.requestPayment('CARD', JSON.parse('{"useEscrow":false,"failUrl":"tosspayments://fail","amount":0,"orderId":"test-69ea221a-09d5-11ee-bcf9-acde48001122","appScheme":"xxx://","successUrl":"tosspayments://success?paymentType=NORMAL","orderName":"테스트 주문 69ea221a-09d5-11ee-bcf9-acde48001122","cultureExpense":false,"flowMode":"DIRECT","cardCompany":"SHINHAN","currency":"KRW","country":"KR","cardInstallmentPlan":0}'))
        </script>
      </body>
    </html>
TossPaymentsViewController.loadHTMLString 
    <html>
      <head>
        <script src="https://js.tosspayments.com/v1/payment"></script>
      </head>
      <body>
        <script>
          var tossPayments = TossPayments("test_ck_YZ1aOwX7K8m6PE5ZaX93yQxzvNPG")
          tossPayments.requestPayment('CARD', JSON.parse('{"useEscrow":false,"failUrl":"tosspayments://fail","amount":0,"orderId":"test-69ea221a-09d5-11ee-bcf9-acde48001122","appScheme":"xxx://","successUrl":"tosspayments://success?paymentType=NORMAL","orderName":"테스트 주문 69ea221a-09d5-11ee-bcf9-acde48001122","cultureExpense":false,"flowMode":"DIRECT","cardCompany":"SHINHAN","currency":"KRW","country":"KR","cardInstallmentPlan":0}'))
        </script>
      </body>
    </html>
이실장
이실장•2y ago
지금 저희 native sdk모듈 디버깅중이신가요 ?
개발자1
개발자1OP•2y ago
PaymentWidget 파일의 다음 코드에서 로그를 찍으변 
    public func requestPayment(
        info: WidgetPaymentInfo,
        on rootViewController: UIViewController
    ) {
        print("PaymentsWidget requestPayment")

        var requestJSONObject = info.convertToPaymentInfo(amount: amount)
        requestJSONObject?["successUrl"] = WebConstants.successURL
        requestJSONObject?["failUrl"] = WebConstants.failURL
        let jsonString = requestJSONObject?.jsonString ?? ""
        
        self.rootViewController = rootViewController
        let javascriptString = """
        widget.requestPaymentForNativeSDK(\(jsonString));
        """
        print("PaymentsWidget requestPayment javascriptString=\(javascriptString)")
    public func requestPayment(
        info: WidgetPaymentInfo,
        on rootViewController: UIViewController
    ) {
        print("PaymentsWidget requestPayment")

        var requestJSONObject = info.convertToPaymentInfo(amount: amount)
        requestJSONObject?["successUrl"] = WebConstants.successURL
        requestJSONObject?["failUrl"] = WebConstants.failURL
        let jsonString = requestJSONObject?.jsonString ?? ""
        
        self.rootViewController = rootViewController
        let javascriptString = """
        widget.requestPaymentForNativeSDK(\(jsonString));
        """
        print("PaymentsWidget requestPayment javascriptString=\(javascriptString)")
네 맞습니다.
이실장
이실장•2y ago
RN에서 사용하시려는거죠..?
개발자1
개발자1OP•2y ago
다음과 같이 amount가 잘 들어 있습니다. 
PaymentsWidget requestPayment javascriptString=widget.requestPaymentForNativeSDK({"useEscrow":false,"failUrl":"tosspayments:\/\/fail","amount":13900,"orderId":"test-69ea221a-09d5-11ee-bcf9-acde48001122","appScheme":"xxx:\/\/","successUrl":"tosspayments:\/\/success","orderName":"테스트 주문 69ea221a-09d5-11ee-bcf9-acde48001122","cultureExpense":false});
PaymentsWidget requestPayment javascriptString=widget.requestPaymentForNativeSDK({"useEscrow":false,"failUrl":"tosspayments:\/\/fail","amount":13900,"orderId":"test-69ea221a-09d5-11ee-bcf9-acde48001122","appScheme":"xxx:\/\/","successUrl":"tosspayments:\/\/success","orderName":"테스트 주문 69ea221a-09d5-11ee-bcf9-acde48001122","cultureExpense":false});
네 우선 하는데 까지는 해보려고 코드 보고 있었습니다. requestPayment 함수를 호출하는 시점에는 amount를 넣었는데 중간에 amount만 0이되더라고요
이실장
이실장•2y ago
호출하기전에 넣어야해요. 위젯은 render되는 시점에 amount가 정해집니다.
이실장
이실장•2y ago
https://docs.tosspayments.com/reference/widget-android#renderpaymentmethods
결제위젯 Android SDK | 토스페이먼츠 개발자센터
결제위젯 Android SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
개발자1
개발자1OP•2y ago
updateAmount를 해도 반영이 안되나요?
이실장
이실장•2y ago
updateAmount를 하면 반영이 됩니다.. 저희 계약은 완료되셨을까요?
개발자1
개발자1OP•2y ago
네네 updateAmount를 해서 반영이 되었기에 PaymentsWidget.requestPayment 를 호출하는 시점에는 amount가 제대로 나오고 있습니다.
이실장
이실장•2y ago
mid알려주시면 설정도 한번 확인해드릴게요
개발자1
개발자1OP•2y ago
'bringkynzg' 입니다.
이실장
이실장•2y ago
혹시 페이팔 연동하시려는 걸까요?
개발자1
개발자1OP•2y ago
아닙니다. 지금은 신용카드 연동 하려고 합니다.
이실장
이실장•2y ago
일단 amount부분은 해소가 되신걸까요~?
개발자1
개발자1OP•2y ago
아뇨 위에 보시면 updateAmount를 했기에 PaymentsWidget.requestPayment 호출 시점엔 금액이 제대로 나오는데 TossPaymentsViewController 에서는 amount만 0이 나옵니다. RequestPaymentsMessageHandler 에서 받은 메시지에 이미 amount가 0이라서 그런것 같은데 requestPayments 메시지를 어디서 보냈는지까지는 아직 못 찾았습니다.
이실장
이실장•2y ago
일단 위젯 렌더링은 되셨나요?
개발자1
개발자1OP•2y ago
네 위에 영상을 보시면 위젯 랜더링 후에 결제하기 버튼을 눌렀을 때, 오류가 발생하고 있습니다. 표시되는 정보 보시면 카드사 정보등 위젯이 떠서 선택해야만 결정되는 정보들도 로그에 담겨 있습니다.
이실장
이실장•2y ago
위젯의 경우 렌더 영역 height 가변형인데요 (예를들어 5만원 이상 결제건은 할부 창이 노출되고) 이부분은 대응이 되셨을까요?
개발자1
개발자1OP•2y ago
네네 현대카드 선택하면 할부 선택창도 다 뜹니다.
이실장
이실장•2y ago
영상을 보면 requestPayments호출시점에 updateAmount를 호출하시나요?
개발자1
개발자1OP•2y ago
아니요 상품 정보가 로딩되는 시점에 updateAmount를 호출합니다.
이실장
이실장•2y ago
물어본 이유가 영상 0~1초 넘어갈대 bottom에서 modal이 올라오는 시점에, '할부선택창'이 노출되는데요 현대카드의 경우 10,000원 이상 결제건이 할부가 가능합니다. 처음 렌더링 될 때는 amount가 0원 이다가, 결제하기 버튼 눌렀을 때 update되는 것 같은데 혹시 확인가능할까요
개발자1
개발자1OP•2y ago
아.. 네 확인해보겠습니다.
이실장
이실장•2y ago
그래서 클릭할 때마다 render가 완료되지 않은상태에서 requestPayment가 호출되면 안뜨고.. 운이좋아 render가 빨리되며 ㄴ뜨고 하는 것 같아요
개발자1
개발자1OP•2y ago
updateAmount가 제대로 적용이 안된 것 같다는 말씀이신거죠?
이실장
이실장•2y ago
더불어.. 이건 개인적인 궁금함인데 iOS SDK를 Expo (React Native)에 Native Module로 이식해서 쓰고 있습니다. iosSDK만 expo하면 android쪽도 build할 수 있나요..? 이건 새로 해야하는거죠?
개발자1
개발자1OP•2y ago
각각 SDK 연동하고 빌드도 어차피 각각합니다. 우선 iOS만 해보고 있습니다.
이실장
이실장•2y ago
안드로이드는 height return해주는 method가 없을텐데.. 가능하시겠어요..? https://docs.tosspayments.com/reference/widget-ios#didupdateheight_height
결제위젯 iOS SDK | 토스페이먼츠 개발자센터
결제위젯 iOS SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
이실장
이실장•2y ago
지금 저희가 정상적으로 제공해드리는 루트로 하시는게 아니다보니. 추후에 에러가 발생할 수 있습니다. (sdk 업데이트 등으로)
개발자1
개발자1OP•2y ago
네... 그건 각오하고 있습니다. Android 는 그럼 결제 위젯 방식에서 높이 조정을 달리하나요?
이실장
이실장•2y ago
이거 각각하시는 대신.. 직연동 방식으로 연동하시는게 더 빠르실 것 같아서요! 잠시만요.. 가이드 드려볼게요...
이실장
이실장•2y ago
이실장
이실장•2y ago
차라리 이방식을 쓰시는게 어떤가요..?
이실장
이실장•2y ago
No description
No description
이실장
이실장•2y ago
혹시 마이크 되시나요? (음성채널 초대드릴게요 )
개발자1
개발자1OP•2y ago
네 가능합니다.
이실장
이실장•2y ago
expo해서 연동하는게 개념적으로 안되는 것은 아니니 안내드린 3가지 방법 중 의사결정해서 진행해주시면 될 것 같습니다.
Ayaan이안
Ayaan이안•2y ago
if문으로 메소드를 분기해야합니다 상품정보가 로딩되는 시점에 render를 시키는게 좋지 않을까라는 의견도 남겨드립니다
개발자1
개발자1OP•2y ago
view 초기화가 끝나기 전에 updateAmount를 호출해서 초기화 시점이 꼬이는 것 같습니다. Issac_님이 의견 주신 부분과도 관련이 있는 것 같습니다!
토스페이먼츠 BOT
토스페이먼츠 BOT•2y ago
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
이실장
이실장•2y ago
개발방향은 정해지셨을까요~?
개발자1
개발자1OP•2y ago
어제 초기화 과정이 꼬여서 발생한 이슈로 확인했으며, 타이밍을 잘 조절하니 정상 동작하고 있습니다. 당장 iOS 기준 앱 개발이 급하다 보니 이대로 갈 예정입니다.
이실장
이실장•2y ago
네 공유해주셔서 감사합니다.

Did you find this page helpful?