연동 방식 선택

point3 결제창은 웹과 앱 모두 JavaScript SDK로 연동합니다. 결제하기 화면을 무엇으로 만들었는지에 따라 SDK를 연동하는 위치만 달라집니다.

서비스 형태로 고르기

결제 세션 생성과 결제 승인은 웹과 앱 모두 같습니다.

웹, 하이브리드 앱

결제하기 페이지에 JavaScript SDK로 결제창을 연동합니다. 결제 버튼을 누르면 SDK가 전체 화면 결제창을 띄우고, 구매자가 결제를 확정하면 가맹점이 정한 successUrl로 이동합니다. 가맹점은 성공·실패 결과 페이지만 만들면 됩니다.

앱 안의 WebView에서 결제하기 페이지를 보여 주는 하이브리드 앱도 같은 방법으로 연동합니다. 앱에서는 아래 WebView 화면 기준만 확인하세요.

시작하기: JavaScript SDK 설정 및 초기화 → JavaScript SDK 결제 연동

React Native, Flutter, 네이티브 앱

앱에서는 JavaScript SDK로 결제창을 연동한 HTML을 WebView로 띄워 결제를 진행할 수 있습니다. 결제하기 화면은 앱 화면 그대로 두고, 결제가 필요할 때만 WebView를 띄우면 됩니다.

HTML은 간단한 단일 페이지로 충분합니다. 웹 연동과 같은 방법으로 SDK를 호출하고, sessionId 등 결제에 필요한 값은 가맹점 서버에서 받아 전달합니다. 결제가 끝나면 결제창이 successUrl 또는 failUrl로 이동하므로, 앱은 WebView에서 이 이동을 감지해 결과를 처리할 수 있습니다. 결과 값은 웹과 같습니다.

HTML을 앱의 정적 에셋으로 포함할 경우, file://로 불러오면 결제창이 열리지 않습니다. 가맹점 도메인(예: https://merchant.example.com)을 base URL로 지정해 불러오면 됩니다. 이때 successUrl과 failUrl은 앱이 이동을 감지해 처리한다면 실제로 존재하는 페이지가 아니어도 됩니다. HTML을 가맹점 서버에서 제공할 경우에는 그 주소를 WebView로 열면 됩니다.

시작하기: JavaScript SDK 설정 및 초기화 → JavaScript SDK 결제 연동

WebView 화면

결제창을 WebView로 띄울 경우 다음을 확인하세요. 하이브리드 앱도 같습니다.

• 결제창 상단에는 뒤로가기 버튼과 메뉴가 있습니다. WebView가 상태바나 노치에 가려지지 않도록 safe area 안에 띄워 주세요.
• 구매자는 결제창의 뒤로가기로 결제를 취소할 수 있고, 이때 failUrl로 PAYMENT_WINDOW_CLOSED가 전달됩니다. 결제창 위에 별도의 닫기 버튼을 두지 마세요.
• 결제 중에 시스템 뒤로가기나 스와이프로 WebView가 닫히거나 이전 페이지로 이동하면 결과 없이 결제가 끝납니다. 결제창이 떠 있는 동안에는 막아 두는 것을 권장합니다.
• WebView에서 JavaScript를 활성화해 주세요.

등록 전용 위젯

결제 없이 구매자의 결제 수단만 미리 등록받는 위젯입니다. 등록이 끝나면 payerId를 받고, 이 값을 다음 결제에 전달하면 구매자가 일부 인증 단계를 건너뛸 수 있습니다.

등록 전용 위젯은 필수가 아닙니다. 결제창만 연동해도 구매자는 첫 결제 과정에서 결제 수단을 등록할 수 있습니다. 회원가입 직후처럼 결제 전에 등록을 유도해 결제 단계를 짧게 만들고 싶을 때 선택적으로 연동하세요. 앱에서는 결제창과 같은 방법으로 등록창을 연동한 HTML을 WebView로 띄웁니다.

시작하기: JavaScript SDK 등록 연동