Payment Handler API به CSP connect-src نیاز دارد

Payment Handler API به ارائه‌دهندگان پرداخت اجازه می‌دهد تا تجربه پرداخت سفارشی خود را همراه با API درخواست پرداخت برای بازرگانان در دسترس قرار دهند.

اطلاعات این صفحه فقط برای وب سایت هایی اعمال می شود که از CSP (Content-Security-Policy) و API درخواست پرداخت استفاده می کنند. اگر از هیچ یک یا فقط یکی از این دو استفاده نمی کنید، می توانید این دستورالعمل ها را نادیده بگیرید.

برای بررسی اینکه آیا ارائه‌دهنده پرداخت شما از Payment Handler API استفاده می‌کند، با آنها تماس بگیرید و دستورالعمل‌های آنها را دنبال کنید.

اگر از Payment Handler API و CSP (Content-Security-Policy) برای محافظت بهتر استفاده می کنید، باید مطمئن شوید که دامنه های درخواست های HTTP ارسال شده از مرورگر به دستورالعمل connect-src هدر CSP اضافه شده است.

برای مثال، اگر کد جاوا اسکریپت شما 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

آن را به صورت محلی امتحان کنید

برای فعال کردن این ویژگی به صورت محلی قبل از ارسال:

  1. در کروم به chrome://flags/#web-payment-api-csp بروید.
  2. «سیاست CSP برای Web Payment API» را از «پیش‌فرض» به «فعال» تغییر دهید.
  3. کروم را مجددا راه اندازی کنید.

URL های درخواست را بررسی کنید

برای بررسی آدرس‌های اینترنتی درخواست‌های ارسال‌شده از Payment Handler API:

  1. chrome://flags/#web-payment-api-csp را فعال کنید.
  2. به صفحه پرداخت خود بروید و ابزار برنامه نویس Chrome را باز کنید.
  3. به دنبال پیام‌های خطایی مانند زیر بگردید: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. شناسه متد مشخص شده را به CSP خود اضافه کنید.

عکس ادواردو سوارس در Unsplash