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

Payment Handler API 을(를) 사용하면 결제 시스템 공급자가 Payment Request API와 함께 제공해야 합니다. Payment Request API가 다음을 통해 초기화되는 경우: new PaymentRequest() 생성자가 반환되면 자동으로 canmakepayment 이벤트를 실행합니다. 판매자의 출처와 임의의 데이터를 Payment Handler API에 등록된 서비스 워커. 이러한 교차 출처 통신에는 사용자 동작이 필요하지 않으며 사용자 인터페이스를 표시합니다.

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

이 페이지의 정보는 Google 결제 서비스를 사용하는 바로 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를 사용하여 서비스 워커 JavaScript 파일에 토큰을 추가합니다. HTTP 헤더입니다. 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 이벤트가 비어 있습니다. 사용 설정하는 방법은 다음과 같습니다. 로컬 필드에서 다음을 수행할 수 있습니다.

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

다음 단계

이 변경사항은 Chrome 111부터 기본적으로 사용 설정될 예정입니다. 지금 바로 테스트를 시작하여 알림을 받아볼 수 있습니다