iOS와 Android 네이티브 클라이언트에 결제 모듈을 연동을 하면서 소소한 부분 포스팅합니다.
Webview로 PG사 연동을 진행하면서 클라이언트에 Javascript로 결제 연동 결과 값을 내려주기까지 변경했던 코드를 조금 공유합니다. 🙂
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body onload="callClient();"></body>
<script type='text/javascript'>
function callClient() {
/*<![CDATA[*/ var message = '${value}'; /*]]>*/
if (window.webkit != undefined) {
if (window.webkit.messageHandlers.payment != undefined) {
window.webkit.messageHandlers.payment.postMessage(message)
}
}
if (window.payment != undefined) {
window.payment.postMessage(message)
}
}
</script>
</html>
# CDATA
이 코드 이전에는 thymeleaf 템플릿을 쓰고 있었는데 (tmi) 지금은 freemarker를 쓰고 있습니다. (tmi2어쨌든 템플릿을 쓰고 있다는 얘기)
변수를 할당하기 위해서 CDATA 라는 녀석을 붙여줘야하는데 문자열이 아닌 것으로 인식하지 않기 위해 사용해야합니다.
제대로 된 json string을 내려주는 데 무엇이 문제인지 조금 걸렸습니다.
템플릿 메뉴얼에 보니 모두 CDATA를 쓰고 있는 건 한참 뒤에 안 사실!
# MessageHandler
자바스크립트로 클라이언트 함수를 호출해야했던 건인데, iOS와 안드로이드 거의 동일한데 조금 다른 부분이 있었습니다.
Android ; `window.{인터페이스명}.{함수}`
iOS: `window.webkit.messageHandlers.{name}.postMessage(messageBody)`
어쨌든 두 클라이언트 모두 웹뷰 컨트롤러에 인터페이스를 정의해서 등록을 해야한다는 것.
결제 연동은 미끼였을 뿐 javascript를 이용해 클라이언트 함수를 실행하는 방법에 대해서 포스팅 마칩니다.
'javascript' 카테고리의 다른 글
| Node.js (0) | 2016.08.29 |
|---|
댓글