Payment Handler API를 사용하면 결제 제공업체가 Payment Request API와 함께 판매자에게 맞춤 결제 환경을 제공할 수 있습니다.
이 페이지의 정보는 CSP (Content-Security-Policy)와 Payment Request API를 모두 사용하는 웹사이트에만 적용됩니다. 두 가지 중 하나도 사용하지 않거나 둘 중 하나만 사용하는 경우 이 안내를 건너뛰어도 됩니다.
결제 제공업체에서 Payment Handler API를 사용 중인지 확인하려면 해당 업체에 문의하여 안내를 따르세요.
더 나은 보호를 위해 Payment Handler API 및 CSP (콘텐츠 보안 정책)를 사용하는 경우 브라우저에서 전송된 HTTP 요청의 도메인이 CSP 헤더의 connect-src 지시어에 추가되어 있는지 확인해야 합니다.
예를 들어 JavaScript 코드가 new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details)를 호출하는 경우 CSP connect-src에 https://example.com 또는 https://example.com/pay가 포함되어야 합니다.
Content-Security-Policy: connect-src https://example.com/pay
https://example.com/pay가 교차 출처 리디렉션인 경우 대상 출처도 CSP에 포함되어야 합니다. 예를 들어 https://example.com/pay이 https://pay.example.com로 리디렉션되는 경우 두 출처 모두 CSP에 포함되어야 합니다.
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
로컬에서 사용해 보기
기능이 출시되기 전에 로컬에서 기능을 사용 설정하려면 다음 단계를 따르세요.
- Chrome에서
chrome://flags/#web-payment-api-csp로 이동합니다. - 'Web Payment API의 CSP 정책'을 '기본값'에서 '사용 설정됨'으로 변경합니다.
- Chrome을 다시 시작합니다.
요청 URL 확인
Payment Handler API에서 전송된 요청의 URL을 확인하려면 다음 단계를 따르세요.
chrome://flags/#web-payment-api-csp를 사용 설정합니다.- 결제 페이지로 이동하여 Chrome의 개발자 도구를 엽니다.
- 다음과 같은 오류 메시지를 찾습니다.
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy. - 지정된 메서드 식별자를 CSP에 추가합니다.
사진: Unsplash의 에두아르도 소아레스