등록 중에 웹 기반 결제 앱을 구성하는 방법을 알아봅니다.
웹 기반 결제 앱은 프로그레시브 웹 앱(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를 열고 Application 창 아래의 'Payment Handler' 섹션으로 이동합니다. '다른 도메인의 이벤트 표시'를 선택하고 '기록' 버튼을 클릭하여 결제를 처리하는 서비스 워커에 전송된 이벤트 캡처를 시작합니다.
다음 단계
다음 단계는 서비스 워커가 런타임에 결제 거래를 조정하는 방법을 알아보는 것입니다.