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

Payment Handler API를 사용하면 결제 시스템 공급자가 Payment Request API와 함께 판매자에게 커스텀 결제 환경을 제공할 수 있습니다. Payment Request APInew 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) {...}
  ...
});

로컬에서 변경 시도

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

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

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

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

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

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

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

  1. 출처의 토큰을 요청합니다.
  2. 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 필드는 비어 있습니다. 필드를 로컬에서 다시 사용 설정하려면 다음을 수행하면 됩니다.

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

다음 단계

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