등록 중에 웹 기반 결제 앱을 구성하는 방법을 알아봅니다.
웹 기반 결제 앱은 프로그레시브 웹 앱(PWA)이며 서비스 워커에서 실행됩니다. 결제 앱의 서비스 워커는 판매자의 결제 요청을 캡처하고 결제 앱을 시작하며 판매자와의 통신을 중재하므로 중요한 역할을 합니다.
웹 기반 결제 앱을 구성하려면 사용 가능한 결제 수단과 서비스 워커를 등록해야 합니다. 웹 앱 매니페스트를 사용하여 웹 기반 결제 앱을 선언적으로 구성할 수 있습니다.
브라우저 지원
웹 결제는 몇 가지 기술로 구성되며 지원 상태는 브라우저에 따라 다릅니다.
웹 앱 매니페스트로 결제 앱 구성
웹 기반 결제 앱을 선언적으로 구성하려면 웹 앱 매니페스트를 제공합니다.
웹 앱 매니페스트의 다음 속성은 웹 기반 결제 앱과 관련이 있습니다.
nameiconsserviceworkersrcscopeuse_cache
결제 수단 설정을 확인하여 결제 수단 매니페스트가 웹 앱 매니페스트를 올바르게 가리키는지 확인하세요.
서비스 워커 적시 (JIT) 등록
JIT 등록 시에는 웹 앱 매니페스트만 제공하면 되며, 추가 코딩은 필요하지 않습니다. 웹 앱 매니페스트를 이미 구성하고 올바르게 제공하고 있다면 모든 준비가 된 것입니다. 나머지는 브라우저에서 처리합니다.
웹 기반 결제 앱 디버깅
웹 기반 결제 앱 프런트엔드를 개발할 때 판매자 컨텍스트와 결제 앱 컨텍스트 간에 전환할 수 있습니다. 다음 디버깅 팁은 Chrome에서의 개발 환경에 도움이 됩니다.
로컬 서버에서 개발
개발에 어떤 서버를 사용하시나요? 많은 개발자가 localhost 또는 회사 내부 서버 환경을 사용하는 경향이 있습니다. 브라우저의 강력한 기능에는 보안 환경 (HTTPS)과 유효한 인증서가 필요한 경우가 많기 때문에 어려울 수 있습니다. Payment Request API와 Payment Handler API도 예외는 아니며 localhost 또는 회사 내부 서버에는 일반적으로 유효한 인증서가 제공되지 않습니다.
다행히 Chrome을 비롯한 일부 브라우저는 기본적으로 http://localhost의 인증서를 제외합니다. 또한 Chrome에서는 Chrome 인스턴스를 실행하여 인증서 요구사항을 제외할 수 있습니다. 예를 들어 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
플래그를 사용하여 Chromium 실행에서 런타임 플래그로 Chrome을 실행하는 방법에 관해 자세히 알아보세요.
로컬 서버 포트 전달
Chrome의 DevTools를 사용하여 로컬 웹 서버를 Android 기기로 포팅하고 모바일 브라우저에서 작동 방식을 테스트할 수 있습니다. 방법을 알아보려면 로컬 서버 액세스를 확인하세요.
데스크톱 DevTools에서 Android Chrome의 웹사이트 원격 디버깅
데스크톱 DevTools에서 Android Chrome을 디버그할 수도 있습니다. 자세한 방법은 Android 기기 원격 디버깅 시작하기를 참고하세요.
결제 핸들러 이벤트 로깅
보다 쉬운 로컬 개발을 위해 DevTools에서 Payment Handler API 이벤트를 표시할 수 있습니다. 판매자 컨텍스트에서 DevTools를 열고 애플리케이션 창 아래의 '결제 핸들러' 섹션으로 이동합니다. '다른 도메인의 이벤트 표시'를 선택하고 '기록' 버튼을 클릭하여 결제를 처리하는 서비스 워커로 전송된 이벤트를 캡처하기 시작합니다.
다음 단계
다음 단계는 서비스 워커가 런타임에 결제 트랜잭션을 조정할 수 있는 방법을 알아보는 것입니다.