이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Payment Handler API의 CanMakePayment 이벤트 동작 업데이트

Eiji Kitamura

Payment Handler API를 사용하면 결제 제공업체가 Payment Request API와 함께 판매자에게 맞춤 결제 환경을 제공할 수 있습니다. Payment Request API가 new PaymentRequest() 생성자를 통해 초기화되면 판매자의 출처와 임의 데이터가 포함된 canmakepayment 이벤트를 Payment Handler API에 등록된 서비스 워커에 자동으로 실행합니다. 이 교차 출처 통신은 사용자 동작이 필요하지 않으며 사용자 인터페이스를 표시하지 않습니다.

Chrome은 canmakepayment 이벤트에서 식별 필드를 삭제하고 Chrome 108부터 오리진 트라이얼을 시작할 예정입니다.

이 페이지의 정보는 Payment Handler API를 사용하는 결제 앱 제공업체에만 적용됩니다. 사용하지 않는 경우 이 안내를 건너뛰어도 됩니다.

변경되는 사항

판매자가 new PaymentRequest()를 호출하면 등록된 서비스 워커는 다음 정보가 포함된 canmakepayment 이벤트(CanMakePaymentEvent)를 수신합니다.

topOrigin
paymentRequestOrigin
methodData
modifiers

이러한 이벤트는 삭제되며 서비스 워커는 추가 정보 없이 canmakepayment 이벤트만 수신합니다.

특성 감지

서비스 워커 코드에서 canmakepayment 이벤트가 변경되는지 감지하려면 다음과 같이 각 속성을 검사합니다.

self.addEventListener(e => {
  if (e.paymentRequestOrigin) {...}
  if (e.topOrigin) {...}
  if (e.methodData && e.methodData.length > 0) {...}
  if (e.modifiers && e.modifiers.length > 0) {...}
  ...
});

로컬에서 변경사항 사용해 보기

개발 목적으로 변경사항을 로컬에서 사용 설정하려면 다음 안내를 따르세요.

Chrome 108, 109 또는 110을 사용합니다.
URL 표시줄에 chrome://flags/#clear-identity-in-can-make-payment를 입력합니다.
플래그를 사용 설정합니다.
Chrome을 다시 실행합니다.

플래그를 사용 설정하면 canmakepayment 이벤트의 ID 필드 (및 Android IS_READY_TO_PAY 인텐트)가 비워집니다.

프로덕션에서 변경 사용 설정

변경사항이 Chrome에 실제로 적용되기 전에 테스트 목적으로 프로덕션에서 변경사항을 사용 설정할 수도 있습니다. 이 메커니즘을 오리진 트라이얼이라고 합니다.

오리진 트라이얼을 통해 새로운 기능을 사용해 보고 웹 표준 커뮤니티에 사용성, 실용성, 효과에 관한 의견을 제공할 수 있습니다. 자세한 내용은 웹 개발자를 위한 출처 무료 체험판 가이드를 참고하세요. 이 무료 체험 또는 다른 출처 무료 체험에 가입하려면 등록 페이지를 방문하세요.

오리진 트라이얼을 등록하려면 다음 단계를 따르세요.

출처에 대해 토큰을 요청합니다.
Origin-Trial HTTP 헤더를 사용하여 서비스 워커 JavaScript 파일에 토큰을 추가합니다. HTTP 헤더를 설정하려면 서버 구성에 액세스해야 합니다. 결과 응답 헤더는 다음과 같이 표시됩니다.

Origin-Trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71...

서비스 워커 파일에서 오리진 트라이얼 토큰을 보려면 다음과 같이 DevTools 또는 curl 명령어를 사용하세요.

$ curl --head <Service Worker JS file URL> | grep -i origin-trial
origin-trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71...

Chrome 111 이후 로컬에서 ID 필드 다시 사용 설정

Chrome 111 이상을 사용하는 경우 canmakepayment 이벤트의 ID 필드는 비워 둡니다. 필드를 로컬에서 다시 사용 설정하려면 다음을 수행하면 됩니다.

Chrome 111 이상을 사용합니다.
URL 표시줄에 chrome://flags/#add-identity-in-can-make-payment를 입력합니다.
플래그를 사용 설정합니다.
Chrome을 다시 실행합니다.

다음 단계

이 변경사항은 Chrome 111부터 기본적으로 사용 설정될 예정입니다. 출시 시간 변경에 대비하기 위해 지금 바로 테스트를 시작할 수 있습니다.