Payment Handler API를 사용하면 결제 시스템 공급자가 Payment Request API와 함께 판매자에게 커스텀 결제 환경을 제공할 수 있습니다.
이 페이지의 정보는 CSP (Content-Security-Policy)와 Payment Request API를 모두 사용하는 웹사이트에만 적용됩니다. 둘 다 사용하지 않거나 둘 중 하나만 사용하는 경우 이 안내를 건너뛸 수 있습니다.
결제 시스템 공급자가 Payment Handler API를 사용하고 있는지 확인하려면 결제 시스템 공급자에게 문의하여 안내를 따르세요.
더 나은 보호를 위해 Payment Handler API 및 CSP (Content-Security-Policy)를
사용하는 경우 브라우저에서 전송된 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 제공)