웹 기반 결제 앱 등록

등록 중에 웹 기반 결제 앱을 구성하는 방법을 알아봅니다.

웹 기반 결제 앱은 프로그레시브 웹 앱입니다. (PWA) 서비스에서 실행 작업자를 지원합니다. 이 결제 앱에서 서비스 워커는 결제를 캡처하므로 중요한 역할을 합니다. 결제 앱을 실행하고, 판매자와 통신해야 합니다

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

브라우저 지원

웹 결제는 몇 가지 기술과 브라우저에 따라 다릅니다.

Chromium Safari Firefox
데스크톱 Android 데스크톱 모바일 데스크톱/모바일
결제 요청 API
결제 핸들러 API
iOS/Android 결제 앱 ✔* ✔*

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

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

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

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

자세한 내용은 결제 설정 결제 수단 결제 수단 매니페스트가 웹 앱 매니페스트를 가리키도록 합니다. 있습니다.

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

JIT 등록 시 웹 앱 제공만 필요 매니페스트 추가적인 코딩이 필요하지 않습니다 웹 앱 매니페스트를 이미 구성했고 모든 준비가 완료된 것입니다. 브라우저는 있습니다.

웹 기반 결제 앱 디버깅

웹 기반 결제 앱 프런트엔드를 개발할 때는 결제 앱 컨텍스트입니다 다음 디버깅 팁이 도움이 될 수 있습니다. Chrome에서 개발 환경을 개선할 수 있습니다.

로컬 서버에서 개발

개발에 어떤 서버를 사용하시나요? 많은 개발자가 로컬 호스트를 사용하는 경향이 있음 또는 회사 내부 서버 환경이 매우 까다로울 수 있습니다. 브라우저의 강력한 기능을 사용하려면 보안 환경 (HTTPS)이 필요한 경향이 있음 유효한 인증서가 있어야 합니다 Payment Request API와 Payment Handler API는 로컬 호스트 또는 회사 내부 서버는 일반적으로 유효한 인증서가 있어야 합니다

다행히 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의 모바일 브라우저에서 어떻게 작동하는지 테스트하세요. 방법을 알아보려면 로컬 액세스 액세스 서버.

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

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

결제 핸들러 이벤트 로깅

DevTools에 Payment Handler API 표시 가능 이벤트를 위한 더 쉬운 로컬 개발 환경입니다. 판매자 컨텍스트에서 DevTools를 열고 "결제 핸들러" Application 창 아래에 있습니다. '이벤트 표시' 체크박스를 선택합니다. 다른 도메인의 사용자' '녹화'를 클릭합니다 전송된 이벤트 캡처를 시작하는 버튼 지불을 처리하는 서비스 워커에게 보냅니다.

<ph type="x-smartling-placeholder">
</ph> 결제 핸들러 이벤트 로깅의 스크린샷 <ph type="x-smartling-placeholder">
</ph> 결제 핸들러 이벤트 로깅입니다.

다음 단계

다음 단계는 서비스 워커가 결제를 조정하는 방법을 알아보는 것입니다. 실행할 수 있습니다