웹 기반 결제 앱 등록

등록 중에 웹 기반 결제 앱을 구성하는 방법을 알아보세요.

Eiji Kitamura

웹 기반 결제 앱은 프로그레시브 웹 앱(PWA)이며 서비스 워커를 기반으로 실행됩니다. 결제 앱의 서비스 워커는 판매자의 결제 요청을 캡처하고 결제 앱을 실행하며 판매자와의 커뮤니케이션을 중재하므로 중요한 역할을 합니다.

웹 기반 결제 앱을 구성하려면 사용 가능한 결제 수단과 서비스 워커를 등록해야 합니다. 웹 앱 매니페스트를 사용하여 선언적으로 웹 기반 결제 앱을 구성할 수 있습니다.

브라우저 지원

Web Payments는 몇 가지 다른 기술로 구성되어 있으며 지원 상태는 브라우저에 따라 다릅니다.

	Chromium		Safari		Firefox
	데스크톱	Android	데스크톱	모바일	데스크톱/모바일
Payment Request API	✔	✔	✔	✔
웹 기반 결제 핸들러 API	✔	✔
iOS/Android 결제 앱	✔	✔	✔*	✔*

참고: *Safari는 Apple Pay를 지원하지만 서드 파티 결제 앱은 지원하지 않습니다.

웹 앱 매니페스트로 결제 앱 구성

선언적으로 웹 기반 결제 앱을 구성하려면 웹 앱 매니페스트를 제공하세요.

웹 앱 매니페스트의 다음 속성은 웹 기반 결제 앱과 관련이 있습니다.

• name
• icons
• serviceworker
  • src
  • scope
  • use_cache

결제 수단 설정을 확인하여 결제 수단 매니페스트가 웹 앱 매니페스트를 올바르게 가리키는지 확인하세요.

적시 (JIT) 서비스 워커 등록

핵심 용어: 서비스 워커는 일반적으로 JavaScript를 사용하여 등록되지만 사용자가 판매자 웹사이트에서 웹 기반 결제 앱으로 결제하도록 선택하면 브라우저에서 자동으로 등록할 수도 있습니다. 이를 적시 (JIT) 등록이라고 합니다.

JIT 등록에는 웹 앱 매니페스트만 제공하면 되며 추가 코딩은 필요하지 않습니다. 웹 앱 매니페스트를 이미 구성했고 제대로 제공하고 있다면 모든 설정이 완료된 것입니다. 나머지는 브라우저에서 처리합니다.

주의: 단일 결제 수단 식별자가 여러 결제 앱을 지원할 수 있지만 JIT 등록은 결제 수단 매니페스트가 단일 결제 앱을 가리키는 경우에만 발생합니다.

웹 기반 결제 앱 디버깅

웹 기반 결제 앱 프런트엔드를 개발할 때는 가맹점 컨텍스트와 결제 앱 컨텍스트 간에 전환할 수 있습니다. 다음 디버깅 팁은 Chrome에서의 개발 경험에 도움이 됩니다.

로컬 서버에서 개발

개발에 어떤 서버를 사용하시나요? 많은 개발자가 localhost 또는 회사 내부 서버 환경을 사용하는 경향이 있는데, 브라우저의 강력한 기능에는 보안 환경 (HTTPS)과 유효한 인증서가 필요한 경우가 많으므로 어려울 수 있습니다. Payment Request API와 웹 기반 Payment Handler API도 예외가 아니며, 일반적으로 localhost나 회사 내부 서버에는 유효한 인증서가 없습니다.

다행히 Chrome을 비롯한 일부 브라우저는 기본적으로 http://localhost 인증서를 면제합니다. 또한 Chrome에서 Chrome 인스턴스를 실행하여 인증서 요구사항을 면제할 수 있습니다. 예를 들어 http://*.corp.company.com에서 요구사항을 제외하려면 다음 플래그를 사용합니다.

• --ignore-certificate-errors
• --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Windows

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

런타임 플래그를 사용하여 Chrome을 실행하는 방법은 플래그를 사용하여 Chromium 실행을 참고하세요.

로컬 서버 포트 전달

Chrome의 DevTools를 사용하여 로컬 웹 서버를 Android 기기로 포트 포워딩하고 모바일 브라우저에서 작동 방식을 테스트할 수 있습니다. 방법을 알아보려면 로컬 서버 액세스를 확인하세요.

데스크톱 DevTools에서 Android Chrome의 웹사이트 원격 디버깅

데스크톱 DevTools에서 Android Chrome을 디버그할 수도 있습니다. 방법을 알아보려면 Android 기기 원격 디버깅 시작하기를 참고하세요.

결제 핸들러 이벤트 로깅

DevTools는 더 쉬운 로컬 개발을 위해 웹 기반 결제 핸들러 API 이벤트를 표시할 수 있습니다. 판매자 컨텍스트에서 DevTools를 열고 Application(애플리케이션) 창의 'Payment Handler'(결제 핸들러) 섹션으로 이동합니다. '다른 도메인의 이벤트 표시'를 선택하고 '기록' 버튼을 클릭하여 결제를 처리하는 서비스 워커로 전송된 이벤트를 캡처합니다.

웹 기반 결제 핸들러 이벤트 로깅.

다음 단계

다음 단계는 서비스 워커가 런타임에 결제 트랜잭션을 오케스트레이션하는 방법을 알아보는 것입니다.

• 서비스 워커로 결제 트랜잭션 조정