تراکنش پرداخت بااستفاده از Web Payments با کشف برنامه پرداخت شما شروع می‌شود. با نحوه راه‌اندازی روش پرداخت و آماده کردن برنامه پرداختتان برای پرداخت‌های فروشندگان و مشتریان آشنا شوید.
تاریخ انتشار: ۲۷ سپتامبر ۲۰۱۷، آخرین به‌روزرسانی: ۱۶ اکتبر ۲۰۲۶
برای استفاده با میانای برنامه‌سازی کاربردی Payment Request، برنامه پرداخت باید با شناسه روش پرداخت مرتبط باشد. فروشندگانی که می‌خواهند با برنامه پرداخت ادغام شوند از شناسه روش پرداخت برای نشان دادن آن به مرورگر استفاده خواهند کرد. این مقاله درباره نحوه عملکرد شناسایی برنامه پرداخت و نحوه پیکربندی برنامه پرداخت برای شناسایی و فراخوانی صحیح توسط مرورگر بحث می‌کند.
اگر با «پرداخت‌های وب» آشنایی ندارید، ابتدا نمای کلی پرداخت‌های وب را بخوانید.
انواع برنامه پرداخت
روش پرداخت می‌تواند توسط برنامه پرداخت Android، برنامه پرداخت مبتنی بر وب، یا هر دو پشتیبانی شود:
- برنامه پرداخت Android: برنامه نصب‌شده‌ای که Chrome با هدف Android راه‌اندازی می‌کند. Chrome نام بسته و گواهی امضای برنامه را درستی‌سنجی می‌کند.
- برنامه پرداخت مبتنی بر وب: یک Service Worker که Chrome در پنجره مقید راه‌اندازی می‌کند. کاربران نیازی به نصب هیچ چیزی ندارند.
برنامه‌های پرداخت Android در Chrome در Android و در WebView دردسترس هستند. برنامه‌های پرداخت مبتنی بر وب در Chrome در همه پلاتفرم‌ها دردسترس است، اما در WebView دردسترس نیست.
اگر هر دو نوع برنامه برای روش پرداخت دردسترس باشد و مانیفست برنامه وب شما
prefer_related_applications را روی true تنظیم کند، Chrome برنامه پرداخت مبتنی بر وب شما را پنهان می‌کند. درغیراین‌صورت، ممکن است کاربران هر دو را در میانای کاربری «درخواست پرداخت» ببینند و
یکی از آن‌ها را انتخاب کنند.
پشتیبانی مرورگر
Web Payments از چند فناوری مختلف تشکیل شده است و وضعیت پشتیبانی به مرورگر بستگی دارد.
نحوه شناسایی برنامه پرداخت توسط مرورگر
هر برنامه پرداخت باید موارد زیر را ارائه دهد:
- شناسه روش پرداخت مبتنی بر نشانی وب
- مانیفست روش پرداخت (به‌جز زمانی که شناسه روش پرداخت توسط شخص ثالث ارائه شده باشد)
- مانیفست برنامه وب
فرایند شناسایی زمانی شروع می‌شود که فروشنده تراکنشی را آغاز کند:
- مرورگر درخواستی به نشانی وب شناسه روش پرداخت ارسال می‌کند و مانیفست روش پرداخت را واکشی می‌کند.
- مرورگر نشانی وب مانیفست برنامه وب را از مانیفست روش پرداخت تعیین می‌کند و مانیفست برنامه وب را واکشی می‌کند.
- مرورگر براساس مانیفست برنامه وب تعیین می‌کند که برنامه پرداخت سیستم‌عامل را راه‌اندازی کند یا برنامه پرداخت مبتنی بر وب را.
بخش‌های بعدی به‌طور مفصل توضیح می‌دهند که چگونه روش پرداخت خود را راه‌اندازی کنید تا مرورگرها بتوانند آن را پیدا کنند.
مرحله ۱: شناسه روش پرداخت را ارائه دهید
شناسه روش پرداخت
رشته‌ای مبتنی بر نشانی وب است. برای مثال، شناسه Google Pay
https://google.com/pay است. توسعه‌دهندگان برنامه پرداخت می‌توانند هر نشانی وبی را به‌عنوان شناسه روش پرداخت انتخاب کنند، به‌شرطی که بر آن کنترل داشته باشند و بتوانند محتوای دلخواه و سرایندهای HTTP را ارائه دهند. در این مقاله، از
https://bobbucks.dev/pay به‌عنوان شناسه روش پرداخت
استفاده می‌کنیم.
نحوه استفاده فروشندگان از شناسه روش پرداخت
یک شیء PaymentRequest با فهرستی از شناسه‌های روش پرداخت ساخته می‌شود که برنامه‌های پرداخت موردقبول فروشنده را شناسایی می‌کند. شناسه‌های روش پرداخت به‌عنوان مقداری برای ویژگی supportedMethods تنظیم شده‌اند. برای مثال:
[merchant] درخواست پرداخت دارد:
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
مرحله ۲: ارائه مانیفست روش پرداخت
مانیفست روش پرداخت یک فایل JSON است که مشخص می‌کند کدام برنامه پرداخت می‌تواند از این روش پرداخت استفاده کند.
ارائه مانیفست روش پرداخت
وقتی فروشنده تراکنش پرداختی را آغاز می‌کند، مرورگر درخواست HTTP
HEAD به نشانی وب شناسه روش پرداخت
ارسال می‌کند. نشانی وب شناسه روش پرداخت با سرایند HTTP Link پاسخ می‌دهد که به نشانی وبی اشاره می‌کند که مرورگر می‌تواند مانیفست روش پرداخت را از آنجا واکشی کند.
سرور روش پرداخت را پیکربندی کنید تا با سرایند HTTP Link با مشخصه rel="payment-method-manifest" و نشانی وب مانیفست روش پرداخت پاسخ دهد. برای مثال، اگر
مانیفست در https://bobbucks.dev/pay/payment-manifest.json باشد،
سرایند پاسخ شامل این موارد خواهد بود:
Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"
نشانی وب می‌تواند نام دامنه کاملاً واجدشرایط یا مسیر مرتبط باشد. برای دیدن نمونه،
https://bobbucks.dev/pay را برای ترافیک شبکه بازرسی کنید. می‌توانید از فرمان
curl نیز استفاده کنید:
curl --include https://bobbucks.dev/pay
سپس مرورگر درخواست HTTP GET را به مانیفست روش پرداخت
نشانی وب ارسال می‌کند. سرور با بدنه مانیفست روش پرداخت پاسخ می‌دهد.
مانیفست روش پرداخت دو فیلد دارد: default_applications و
supported_origins.
| نام دارایی | شرح |
|---|---|
default_applications (ضروری) |
آرایه‌ای از نشانی‌های وب که به مانیفست‌های برنامه وب اشاره می‌کند که برنامه‌های پرداخت در آن میزبانی می‌شوند. (نشانی وب می‌تواند نسبی باشد). انتظار می‌رود این آرایه به مانیفست توسعه، مانیفست تولید، و غیره ارجاع دهد. |
supported_origins |
آرایه‌ای از نشانی‌های وب که به مبدأهایی اشاره می‌کند که ممکن است میزبان برنامه‌های پرداخت شخص ثالثی باشند که همان روش پرداخت را پیاده‌سازی می‌کنند. توجه داشته باشید که یک روش پرداخت می‌تواند توسط چند برنامه پرداخت پیاده‌سازی شود. |
فایل مانیفست روش پرداخت باید به این شکل باشد:
[payment handler] /payment-manifest.json:
{
"default_applications": ["https://bobbucks.dev/manifest.json"],
"supported_origins": [
"https://alicepay.friendsofalice.example"
]
}
وقتی مرورگر فیلد default_applications را می‌خواند، فهرستی از پیوندها به مانیفست‌های برنامه وب برنامه‌های پرداخت پشتیبانی‌شده را پیدا می‌کند.
مرحله ۳: ارائه مانیفست برنامه وب
همان‌طور که از نامش پیداست، از مانیفست برنامه وب برای تعریف برنامه وب استفاده می‌شود. این فایل مانیفست به‌طور گسترده‌ای برای تعریف «برنامه وب پیش‌رو» (PWA) استفاده می‌شود.
مانیفست برنامه وب معمولی به این شکل است:
[payment handler] /manifest.json:
{
"name": "Pay with Bobpay",
"short_name": "Bobpay",
"description": "This is an example of the Payment Handler API.",
"icons": [
{
"src": "images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"serviceworker": {
"src": "service-worker.js",
"scope": "/",
"use_cache": false
},
"payment": {
"supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
},
"start_url": "/",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"id": "com.example.android.samplepay",
"min_version": "1",
"fingerprints": [
{
"type": "sha256_cert",
"value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
}
]
}
]
}
Chrome فیلدهای مختلف را بسته به نوع برنامه پرداخت می‌خواند. برای
برنامه پرداخت Android، Chrome فقط related_applications را می‌خواند. برای برنامه پرداخت مبتنی بر وب، Chrome name، icons، serviceworker، payment، و prefer_related_applications را می‌خواند.
| نام دارایی | شرح |
|---|---|
name (ضروری)
|
به‌عنوان نام برنامه پرداخت استفاده می‌شود. |
icons (ضروری)
|
به‌عنوان نماد برنامه پرداخت استفاده می‌شود. فقط Chrome از این نمادها استفاده می‌کند؛ اگر این نمادها را به‌عنوان بخشی از ابزار پرداخت مشخص نکنید، ممکن است مرورگرهای دیگر از آن‌ها به‌عنوان نمادهای جایگزین استفاده کنند. |
serviceworker
|
فقط برنامه‌های پرداخت مبتنی بر وب. سرویس ورکر را که به‌عنوان برنامه پرداخت اجرا می‌شود تعریف می‌کند. |
serviceworker.src |
نشانی وب برای بارگیری اسکریپت عامل خدماتی از آن. |
serviceworker.scope |
رشته‌ای که نشانی وبی را نشان می‌دهد که دامنه ثبت کارگر سرویس را تعریف می‌کند. |
serviceworker.use_cache |
آیا مرورگر می‌تواند هنگام واکشی اسکریپت کارگر سرویس از حافظه نهان HTTP خود استفاده کند. |
payment.supported_delegations |
فقط برنامه‌های پرداخت مبتنی بر وب. اطلاعات تماس و ارسال که
برنامه پرداخت می‌تواند ارائه دهد: shippingAddress،
payerName، payerEmail، یا
payerPhone. برنامه‌های پرداخت Android این را در
AndroidManifest.xml
اعلام می‌کنند.
|
related_applications
|
فقط برنامه‌های پرداخت Android. برنامه و گواهی امضای آن را شناسایی می‌کند. جزئیات بیشتر را در راهنمای توسعه‌دهنده برنامه‌های پرداخت Android ببینید. |
prefer_related_applications
|
روی true تنظیم کنید تا برنامه پرداخت مبتنی بر وب هنگام نصب برنامه پرداخت Android پنهان شود.
|
از ویژگی name مانیفست برنامه وب به‌عنوان نام برنامه پرداخت استفاده می‌شود،
از ویژگی icons به‌عنوان نماد برنامه پرداخت استفاده می‌شود.
نحوه تعیین برنامه پرداخت برای راه‌اندازی توسط Chrome
درحال راه‌اندازی برنامه پرداخت مختص پلاتفرم
برای راه‌اندازی برنامه پرداخت مختص پلاتفرم، شرایط زیر باید برآورده شود:
- فیلد
related_applicationsدر مانیفست برنامه وب مشخص شده است و:- شناسه بسته و امضای برنامه نصب‌شده مطابقت دارد، درحالی‌که حداقل
نسخه (
min_version) در مانیفست برنامه وب کمتر یا برابر با نسخه برنامه نصب‌شده است.
- شناسه بسته و امضای برنامه نصب‌شده مطابقت دارد، درحالی‌که حداقل
نسخه (
- برنامه پرداخت مختص پلاتفرم نصب شده است و دارای موارد زیر است:
- فیلتر قصد
org.chromium.intent.action.PAY. - شناسه روش پرداخت که به‌عنوان مقدار برای ویژگی
org.chromium.default_payment_method_nameمشخص شده است.
- فیلتر قصد
برای جزئیات بیشتر درباره نحوه راه‌اندازی این موارد، برنامه‌های پرداخت Android: راهنمای توسعه‌دهنده را بررسی کنید.
[payment handler] /manifest.json
"prefer_related_applications": true,
"related_applications": [{
"platform": "play",
"id": "xyz.bobpay.app",
"min_version": "1",
"fingerprints": [{
"type": "sha256_cert",
"value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
}]
}]
اگر prefer_related_applications برابر با true باشد و برنامه پرداخت مختص پلاتفرم
دردسترس باشد، Chrome برنامه پرداخت مبتنی بر وب را پنهان می‌کند. درغیراین‌صورت، Chrome
برنامه پرداخت مبتنی بر وب را نیز جستجو می‌کند.
درحال راه‌اندازی برنامه پرداخت مبتنی بر وب
برنامه پرداخت تحت وب باید در فیلد serviceworker مانیفست برنامه وب مشخص شود.
[payment handler] /manifest.json:
"serviceworker": {
"src": "payment-handler.js"
}
مرورگر با ارسال رویداد paymentrequest به سرویس‌کار، برنامه پرداخت مبتنی بر وب را راه‌اندازی می‌کند. لازم نیست عامل خدماتی ازقبل ثبت شده باشد. می‌تواند به‌موقع ثبت شود.
آشنایی با بهینه‌سازی‌های ویژه
چگونه مرورگرها می‌توانند از واسط کاربر «درخواست پرداخت» رد شوند و مستقیماً برنامه پرداخت را راه‌اندازی کنند
در Chrome، وقتی روش show() از PaymentRequest فراخوانی می‌شود، Payment
Request API میانای کاربر ارائه‌شده توسط مرورگر را با نام «میانای کاربر درخواست پرداخت» نمایش می‌دهد. این
واسط کاربر به کاربران امکان می‌دهد برنامه پرداخت را انتخاب کنند. پس‌از فشار دادن دکمه ادامه
در واسط کاربر «درخواست پرداخت»، برنامه پرداخت انتخاب‌شده راه‌اندازی می‌شود.
نمایش دادن میانای کاربری «درخواست پرداخت» قبل‌از راه‌اندازی برنامه پرداخت، تعداد مراحل لازم برای تکمیل پرداخت توسط کاربر را افزایش می‌دهد. برای بهینه‌سازی فرایند،
مرورگر می‌تواند تکمیل آن اطلاعات را به برنامه‌های پرداخت واگذار کند و
هنگام فراخوانی show()،
برنامه پرداخت را مستقیماً بدون نشان دادن «میانای کاربری درخواست پرداخت» راه‌اندازی کند.
برای راه‌اندازی مستقیم برنامه پرداخت، شرایط زیر باید رعایت شود:
show()با اشاره کاربر (مثلاً کلیک موشواره) راه‌اندازی می‌شود.- فقط یک برنامه پرداخت وجود دارد که:
- از شناسه روش پرداخت درخواست‌شده پشتیبانی می‌کند.
- از همه اطلاعات تماس و ارسال که فروشنده درخواست می‌کند پشتیبانی می‌کند.
برنامه پرداخت مبتنی بر وب چه زمانی به‌موقع (JIT) ثبت می‌شود؟
برنامه‌های پرداخت مبتنی بر وب را می‌توان بدون بازدید صریح قبلی کاربر از وب‌سایت برنامه پرداخت و ثبت‌نام کارگر خدمات راه‌اندازی کرد. The service worker can be registered just-in-time when the user chooses to pay with the web-based payment app. There are two variations for the registration timing:
- اگر «رابط کاربری درخواست پرداخت» به کاربر نشان داده شود، برنامه به‌موقع ثبت می‌شود و وقتی کاربر روی ادامه کلیک کند، راه‌اندازی می‌شود.
- اگر از واسط کاربر «درخواست پرداخت» رد شوید، برنامه پرداخت درست به‌موقع ثبت می‌شود و مستقیماً راه‌اندازی می‌شود. رد شدن از میانای کاربر «درخواست پرداخت» برای راه‌اندازی برنامه ثبت‌شده به‌موقع به اشاره کاربر نیاز دارد، که از ثبت غیرمنتظره سرویس‌کاران میان‌مبدئی جلوگیری می‌کند.
ساختن برنامه پرداخت مبتنی بر وب
وقتی فروشنده show() را فراخوانی می‌کند، Chrome رویداد
paymentrequest
را به کارگر سرویس شما ارسال می‌کند. openWindow()
را در respondWith() فراخوانی کنید تا واسط کاربر پرداختتان نشان داده شود، سپس با پاسخ پرداخت
مشکل را برطرف کنید.
برای مشاهده API کامل، Web-Based Payment Handler API on MDN را ببینید.