[Flutter] PG결제 웹뷰 만들다 만난 이슈들

안녕하세요!

오늘은 PG 결제 웹뷰를 만들다 만난 이슈들에 대해서 적어볼까 합니다. 찾으면서 자료도 많이 없었고, 황당한 이슈도 만나서 기록해두려 합니다.

---

PG결제 웹뷰 같은 경우에는 미리 구현된 상태였습니다. 제 개인폰에서 제가 가진 카드들로는 매우 잘된 상태였습니다. 하지만 여러 카드사를 다 테스트해보아야 했기에, 회사 다른 분들에게 테스트를 요청하였고, '대응 다 했으니 오류 안 뜨겠지~'라는 안일한 마인드로 기다리고 있었습니다. 하지만 오류는 이 생각을 비웃으며 떴고, 저를 매우 답답하게 하였습니다.

간단한 코드 설명

오류에 대해 설명드리기 전에, 간단하게 제가 짰던 코드를 먼저 알려드리겠습니다.

inappwebview를 통해 웹뷰를 구성하였고, 그 안에서 Android는 shouldOverrideUrlLoading을 통해, iOS는 onUpdateVisitedHistory를 통해 url에 따른 분기를 처리하였습니다. Android는 Method Channel을 통해 네이티브 코드에서 카드앱으로의 Intent 링크를 파싱하여 url_launcher로 이동시켜주었고, iOS는 유니버설 링크기 때문에, 바로 url_launcher로 이동시켜 주었습니다.

예기치 못한 문제...

처음 보고 받은 오류는 ERR_UNKNOWN_URL_SCHEME이였습니다.

왜?

웹뷰에서 intent 링크를 load 하고 있었던 것이었습니다. 다행히 이 부분에 관해서는, 빠르게 구글링을 통해 해결할 수 있었습니다. [참고 링크] shouldOverrideUrlLoading 함수 내에서 intent 링크를 load 하지 않기 위해서 NavigationActionPolicy.CANCEL를 반환하고 있었는데, 이 부분이 먹히지 않던 것이었고, (Chrome 99 버전 이상에서 발생한다고 합니다.) 아래 코드를 추가하여 해결하였습니다.

if (url.startsWith('intent')) {
    await controller.stopLoading(); // InAppWebViewController
}

 

iOS에서는 문제가 발생하지 않았으나, Android에서 발생하는 오류라 Android 테스트 기기를 통해, 카드앱으로 넘어가는 부분까지만 테스트해 보기로 하고, 테스트해 보던 도중, Android에서 특정 카드사(KB페이, 롯데카드, ISP 등)에서 카드앱으로 넘어가지 않는다는 것을 알게 되었습니다. 이게 진짜 무슨 문제일까 찾아보면서, 네이티브 코드 문제일까 싶어서 쭉 찾아보고, 카드사 자체 문제인가 싶어서 쭉 찾아보았으나, 모두 아니었습니다.

진짜 이건 아니잖아...

저만이 아닌 개발팀 전체가 테스트해보면서, 드디어 오류를 알아냈습니다. 오류는 바로 Uri.parse() 함수에서 소문자로 만들어버렸기 때문이었습니다.

어이X

진짜 이게 맞나 싶어 간단하게 코드도 짜서 돌려보았는데, 진짜였습니다...

String s = 'intent://sGPayment'; // Example
Uri uri = Uri.parse(s);

아...

Uri 파싱 과정에서 모든 문자가 소문자가 되어버렸고, 이로 인해 링크의 인자가 다르다 판단되어 카드앱이 열리지 않았던 것이었습니다. url_launcher도 이에 대해 인지했는지, 이에 대한 해결방법이 제시되어 있었습니다. 이 방법을 사용하여 다시 한번 빌드하였고, 카드앱으로의 이동이 잘되었습니다...

 

건드릴 수 없는 부분에서의 오류는 아니라 다행이긴 한데, 너무 허무하게 생긴 오류라 더욱 어이없었던 것 같습니다. 결제 웹뷰는 돈과 관련되어 있어, 더욱 민감하게 생각하다 보니 힘이 쫙 빠지기도 했고요... 그래도 이번에 만나서 해결했으니, 나중에 구현할 일이 생기면 빠르게 대처가 가능하지 않을까 싶습니다.