웹뷰(WebView) 연동하기(작성중)

모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.

모바일 결제에서는 어떤 과정이 있을까요? 구매자의 입장에서 생각해볼게요. 상점 앱에서 결제하기를 누르면 구매자가 선택한 카드사·은행 앱으로 이동하는데요. 이 과정이 바로 앱투앱 이동입니다. 이동하고 싶은 카드사·은행 앱의 앱스키을 미리 등록해야 문제없이 앱투앱 이동을 할 수 있어요. 온라인 결제 과정에서 등록해야 되는 앱스킴을 알려드릴게요.

앱스킴 리스트

내 상점 앱에서 인증을 위해 이동하게 되는 3rd-party 앱에는 ISP 앱, 카드사별 앱카드 등이 있습니다. 필요한 앱스킴을 추가해보세요.

카드사·본인확인기관	앱스킴
국민카드	kb-acp://, liivbank:/, newliiv://, kbbank://
농협카드	nhappcardansimclick://, nhallonepayansimclick://, nonghyupcardansimclick://
롯데카드	lottesmartpay://, lotteappcard://
삼성카드	mpocket.online.ansimclick://, mpocket.ansimclick.cert://, vguardstart://, samsungpay://,monimopay://, monimopayauth://
신한카드	shinhan-sr-ansimclick://, smshinhanansimclick://
우리카드	com.wooricard.wcard://, newsmartpib://
하나카드	cloudpay://, hanawalletmembers://
현대카드	hdcardappcardansimclick://, smhyundaiansimclick://
간편결제	shinsegaeeasypayment://, payco://, lpayapp://
ISP(BC/국민)	ispmobile://
카카오페이	kakaobank://
네이버페이
Lpay

결제선생 구현 코드

1-1. javascript

export const callAppBridge = (message) => {
  // payload의 경우 "2-1.공통 메세지 포맷" 참고
  const payload = { type: "PARTNER_EVENT", ...message };
  const jsonPayload = JSON.stringify(payload);

  try {
    // iOS (Native WKWebView)
    if (window.webkit?.messageHandlers?.partnerBridge) {
      window.webkit.messageHandlers.partnerBridge.postMessage(payload);
      return;
    }

    // Android (Native / RN / Flutter 일부)
    if (window.partnerBridge?.postMessage) {
      window.partnerBridge.postMessage(jsonPayload);
      return;
    }

    // Flutter
    if (window.flutter_inappwebview?.callHandler) {
      window.flutter_inappwebview.callHandler("partnerBridge", payload);
      return;
    }
  } catch (error) {
    console.error("브릿지 호출 중 오류 발생 :", error);
  }
};

2. 통신 규격

2-1. 공통 메세지 포맷

{
  "type": "STRING",
  "action": "STRING"
}

• type: 고정 값 (예 : “PARTNER_EVENT”)

• action : 이벤트 종류 (예 : “CLOSE”)

2-2. 현재 지원하는 이벤트 (메세지)

2-2-1. 새창 닫기

• 헤더 닫기 버튼 클릭 시 아래 메세지를 웹 → 앱으로 송신합니다.

• 송신 메세지

{
  "type": "PARTNER_EVENT",
  "action": "CLOSE"
}

2-3. 당사 예외처리

• 브릿지가 존재하는 경우, 해당 메세지를 송신한 뒤 이벤트가 종료됩니다.

• redirect url과 브릿지가 동시에 존재하는 경우, 브릿지 이벤트만 실행됩니다.

3. 연동 코드 (참고)

• 아래 연동 코드는 참고용입니다.

• action이 "CLOSE"인 경우, WebView를 종료하는 처리를 수행합니다.

• WebView 종료 방식은 파트너 앱 구조에 따라 구현합니다.

3-1. iOS (Native / React Native / Flutter iOS)

3-1-1. 구현 예시 (Swift)

class PartnerBridge: NSObject, WKScriptMessageHandler {
  func userContentController(
    _ userContentController: WKUserContentController,
    didReceive message: WKScriptMessage
  ) {
    guard let body = message.body as? [String: Any] else { return }

    let type = body["type"] as? String
    let action = body["action"] as? String

    if type == "PARTNER_EVENT" && action == "CLOSE" {
      DispatchQueue.main.async {
        self.closeWebView()
      }
    }
  }
}

3-1-2. WebView 설정

contentController.add(PartnerBridge(), name: "partnerBridge")

3-2. Android (Native / React Native / Flutter Android)

3-2-1. 구현 예시 (Kotlin)

class PartnerBridge {
  @JavascriptInterface
  fun postMessage(message: String) {
    val json = JSONObject(message)
    val type = json.optString("type")
    val action = json.optString("action")

    if (type == "PARTNER_EVENT" && action == "CLOSE") {
      closeWebView()
    }
  }
}

3-2-2. WebView 설정

webView.addJavascriptInterface(
  PartnerBridge(),
  "partnerBridge"
)

3-3. Flutter (flutter_inappwebview)

3-3-1. 구현 예시

InAppWebView(
  onWebViewCreated: (controller) {
    controller.addJavaScriptHandler(
      handlerName: 'partnerBridge',
      callback: (args) {
        final data = args.first;
        if (data['type'] == 'PARTNER_EVENT' &&
            data['action'] == 'CLOSE') {
          closeWebView();
        }
      },
    );
  },
)

3-4. React Native

3-4-1. 구현 예시

import { WebView } from 'react-native-webview';

function PartnerWebView() {
  return (
    <WebView
      source={{ uri: 'https://manager.payssam.kr/partner_v2/short_url/...' }}
      onMessage={(event) => {
        const data = JSON.parse(event.nativeEvent.data);

        if (
          data.type === 'PARTNER_EVENT' &&
          data.action === 'CLOSE'
        ) {
          closeWebView();
        }
      }}
    />
  );
}