راه اندازی روش پرداخت

تراکنش پرداخت با استفاده از Web Payments با کشف برنامه پرداخت شما شروع می شود. با نحوه تنظیم یک روش پرداخت آشنا شوید و برنامه پرداخت خود را آماده کنید تا بازرگانان و مشتریان بتوانند پرداخت را انجام دهند.

برای استفاده با API درخواست پرداخت، برنامه پرداخت باید با شناسه روش پرداخت مرتبط باشد. تاجرانی که می خواهند با یک برنامه پرداخت ادغام شوند، از شناسه روش پرداخت برای نشان دادن آن به مرورگر استفاده می کنند. این مقاله نحوه عملکرد کشف برنامه پرداخت و نحوه پیکربندی برنامه پرداخت خود را برای شناسایی و فراخوانی صحیح توسط مرورگر مورد بحث قرار می دهد.

اگر با مفهوم پرداخت های وب یا نحوه عملکرد تراکنش پرداخت از طریق برنامه های پرداخت آشنا هستید، ابتدا مقالات زیر را بخوانید:

پشتیبانی از مرورگر

پرداخت های وب از چند فناوری مختلف تشکیل شده است و وضعیت پشتیبانی به مرورگر بستگی دارد.

کروم سافاری فایرفاکس
دسکتاپ اندروید دسکتاپ سیار رومیزی/موبایل
API درخواست پرداخت
Payment Handler API
اپلیکیشن پرداخت iOS/اندروید ✔* ✔*

چگونه یک مرورگر یک برنامه پرداخت را کشف می کند

هر برنامه پرداخت باید موارد زیر را ارائه دهد:

  • شناسه روش پرداخت مبتنی بر URL
  • مانیفست روش پرداخت (به جز زمانی که شناسه روش پرداخت توسط شخص ثالث ارائه شده باشد)
  • مانیفست برنامه وب
نمودار: چگونه یک مرورگر برنامه پرداخت را از یک شناسه روش پرداخت مبتنی بر URL کشف می کند

فرآیند کشف زمانی شروع می شود که یک تاجر معامله ای را آغاز می کند:

  1. مرورگر درخواستی را به نشانی اینترنتی شناسه روش پرداخت ارسال می کند و مانیفست روش پرداخت را واکشی می کند.
  2. مرورگر نشانی وب مانیفست برنامه وب را از مانیفست روش پرداخت تعیین می کند و مانیفست برنامه وب را واکشی می کند.
  3. مرورگر تعیین می کند که آیا برنامه پرداخت سیستم عامل یا برنامه پرداخت مبتنی بر وب را از مانیفست برنامه وب راه اندازی کند.

بخش‌های بعدی به تفصیل توضیح می‌دهند که چگونه روش پرداخت خود را تنظیم کنید تا مرورگرها بتوانند آن را کشف کنند.

مرحله 1: شناسه روش پرداخت را ارائه دهید

شناسه روش پرداخت یک رشته مبتنی بر URL است. به عنوان مثال، شناسه Google Pay https://google.com/pay است. توسعه دهندگان برنامه پرداخت می توانند هر URL را به عنوان شناسه روش پرداخت انتخاب کنند تا زمانی که روی آن کنترل داشته باشند و بتوانند محتوای دلخواه را ارائه دهند. در این مقاله از https://bobbucks.dev/pay به عنوان شناسه روش پرداخت استفاده خواهیم کرد.

نحوه استفاده تاجران از شناسه روش پرداخت

یک شی PaymentRequest با فهرستی از شناسه‌های روش پرداخت ساخته می‌شود که برنامه‌های پرداختی را که تاجر تصمیم به پذیرش آن می‌گیرد، شناسایی می‌کند. شناسه های روش پرداخت به عنوان یک مقدار برای ویژگی supportedMethods تنظیم می شوند. مثلا:

[بازرگان] درخواست پرداخت می کند:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

مرحله 2: مانیفست روش پرداخت را ارائه دهید

مانیفست روش پرداخت یک فایل JSON است که مشخص می کند کدام برنامه پرداخت می تواند از این روش پرداخت استفاده کند.

مانیفست روش پرداخت را ارائه دهید

هنگامی که یک تاجر تراکنش پرداخت را آغاز می کند، مرورگر یک درخواست HTTP GET را به نشانی اینترنتی شناسه روش پرداخت ارسال می کند . سرور با بدنه مانیفست روش پرداخت پاسخ می دهد.

مانیفست روش پرداخت دارای دو فیلد default_applications و supported_origins است.

نام ملک شرح
default_applications (الزامی) آرایه‌ای از نشانی‌های وب که به برنامه وب اشاره می‌کنند، جایی را نشان می‌دهند که برنامه‌های پرداخت میزبانی می‌شوند. (URL می تواند نسبی باشد). انتظار می رود این آرایه به مانیفست توسعه، مانیفست تولید و غیره اشاره کند.
supported_origins آرایه‌ای از نشانی‌های وب که به مبداهایی اشاره می‌کنند که ممکن است میزبان برنامه‌های پرداخت شخص ثالث باشند که همان روش پرداخت را اجرا می‌کنند. توجه داشته باشید که یک روش پرداخت را می توان توسط چندین برنامه پرداخت پیاده سازی کرد.
فیلدهای مانیفست روش پرداخت

فایل مانیفست روش پرداخت باید به شکل زیر باشد:

[Payment handler] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

وقتی مرورگر فیلد default_applications را می خواند، فهرستی از پیوندها به مانیفست برنامه های وب برنامه های پرداخت پشتیبانی شده را پیدا می کند.

در صورت تمایل، مرورگر را برای یافتن مانیفست روش پرداخت در مکان دیگری هدایت کنید

نشانی وب شناسه روش پرداخت می‌تواند به صورت اختیاری با یک سرصفحه Link پاسخ دهد که به نشانی اینترنتی دیگری اشاره می‌کند که مرورگر می‌تواند مانیفست روش پرداخت را واکشی کند. این زمانی مفید است که مانیفست روش پرداخت در سرور دیگری میزبانی می‌شود یا زمانی که برنامه پرداخت توسط شخص ثالث ارائه می‌شود.

چگونه یک مرورگر برنامه پرداخت را از یک شناسه روش پرداخت مبتنی بر URL با تغییر مسیرها کشف می کند

سرور روش پرداخت را پیکربندی کنید تا با هدر Link HTTP با ویژگی rel="payment-method-manifest" و نشانی اینترنتی مانیفست روش پرداخت پاسخ دهد.

برای مثال، اگر مانیفست در https://bobbucks.dev/payment-manifest.json باشد، سرصفحه پاسخ شامل موارد زیر است:

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

URL می تواند یک نام دامنه کاملاً واجد شرایط یا یک مسیر نسبی باشد. برای مشاهده یک مثال، https://bobbucks.dev/pay/ برای ترافیک شبکه بررسی کنید. می توانید از دستور curl نیز استفاده کنید:

curl --include https://bobbucks.dev/pay

مرحله 3: یک مانیفست برنامه وب را ارائه دهید

مانیفست برنامه وب برای تعریف یک برنامه وب همانطور که از نام آن پیداست استفاده می شود. این یک فایل مانیفست پر استفاده برای تعریف برنامه وب پیشرو (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
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "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"
        }
      ]
    }
  ]
}

اطلاعاتی که در مانیفست برنامه وب توضیح داده شده است نیز برای تعیین نحوه نمایش یک برنامه پرداخت در واسط درخواست پرداخت استفاده می شود.

نام ملک شرح
name (الزامی) به عنوان نام برنامه پرداخت استفاده می شود.
icons (الزامی) به عنوان نماد برنامه پرداخت استفاده می شود. فقط کروم از این نمادها استفاده می کند. اگر شما آنها را به عنوان بخشی از ابزار پرداخت مشخص نکنید، مرورگرهای دیگر ممکن است از آنها به عنوان نمادهای بازگشتی استفاده کنند.
serviceworker برای شناسایی کارگر خدماتی که به عنوان برنامه پرداخت مبتنی بر وب اجرا می شود استفاده می شود.
serviceworker.src URL برای دانلود اسکریپت Service Worker از.
serviceworker.scope رشته‌ای که نشان‌دهنده یک URL است که محدوده ثبت نام یک کارگر خدماتی را مشخص می‌کند.
serviceworker.use_cache URL برای دانلود اسکریپت Service Worker از.
related_applications برای شناسایی برنامه ای که به عنوان برنامه پرداخت ارائه شده توسط سیستم عامل عمل می کند، استفاده می شود. جزئیات بیشتر را در راهنمای برنامه‌نویس برنامه‌های پرداخت Android بیابید.
prefer_related_applications وقتی برنامه پرداخت ارائه شده توسط سیستم عامل و برنامه پرداخت مبتنی بر وب در دسترس هستند، برای تعیین اینکه کدام برنامه پرداخت راه اندازی شود.
فیلدهای مانیفست برنامه وب مهم
برنامه پرداخت با نماد.
برچسب و نماد برنامه پرداخت.

ویژگی name مانیفست برنامه وب به عنوان نام برنامه پرداخت استفاده می شود، ویژگی icons به عنوان نماد برنامه پرداخت استفاده می شود.

چگونه Chrome تعیین می کند که کدام برنامه پرداخت راه اندازی شود

راه اندازی برنامه پرداخت ویژه پلتفرم

برای راه اندازی اپلیکیشن پرداخت ویژه پلتفرم، باید شرایط زیر را داشته باشید:

  • فیلد related_applications در مانیفست برنامه وب مشخص شده است و:
    • شناسه بسته و امضای برنامه نصب‌شده مطابقت دارد، در حالی که حداقل نسخه ( min_version ) در مانیفست برنامه وب کمتر یا برابر با نسخه برنامه نصب‌شده است.
  • فیلد prefer_related_applications true است.
  • برنامه پرداخت ویژه پلت فرم نصب شده است و دارای:
    • فیلتر هدف org.chromium.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"
  }]
}]

اگر مرورگر تشخیص داده باشد که برنامه پرداخت ویژه پلتفرم در دسترس است، جریان کشف در اینجا خاتمه می یابد. در غیر این صورت به مرحله بعدی ادامه می دهد - راه اندازی برنامه پرداخت مبتنی بر وب.

راه اندازی برنامه پرداخت مبتنی بر وب

برنامه پرداخت مبتنی بر وب باید در قسمت serviceworker مانیفست برنامه وب مشخص شود.

[Payment handler] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

مرورگر برنامه پرداخت مبتنی بر وب را با ارسال یک رویداد paymentrequest به کارمند سرویس راه اندازی می کند. کارگر خدماتی لازم نیست از قبل ثبت نام کرده باشد. می توان آن را به موقع ثبت کرد .

درک بهینه سازی های خاص

چگونه مرورگرها می توانند رابط کاربری درخواست پرداخت را رد کنند و برنامه پرداخت را مستقیماً راه اندازی کنند

در کروم، زمانی که متد show() PaymentRequest فراخوانی می‌شود، API درخواست پرداخت یک رابط کاربری ارائه‌شده توسط مرورگر به نام «واسطه درخواست پرداخت» را نمایش می‌دهد. این رابط کاربری به کاربران امکان می دهد یک برنامه پرداخت را انتخاب کنند. پس از فشار دادن دکمه ادامه در رابط کاربری درخواست پرداخت، برنامه پرداخت انتخابی راه اندازی می شود.

رابط کاربری درخواست پرداخت قبل از راه‌اندازی برنامه پرداخت دخالت می‌کند.

نمایش رابط کاربری درخواست پرداخت قبل از راه‌اندازی برنامه پرداخت، تعداد مراحل مورد نیاز کاربر برای انجام پرداخت را افزایش می‌دهد. برای بهینه‌سازی فرآیند، مرورگر می‌تواند انجام آن اطلاعات را به برنامه‌های پرداخت واگذار کند و یک برنامه پرداخت را مستقیماً بدون نشان دادن واسط درخواست پرداخت هنگام فراخوانی show() راه‌اندازی کند.

UI درخواست پرداخت را رد کنید و برنامه پرداخت را مستقیماً راه اندازی کنید.

برای راه اندازی مستقیم یک برنامه پرداخت، شرایط زیر باید رعایت شود:

  • show() با ژست کاربر (به عنوان مثال، کلیک ماوس) راه اندازی می شود.
  • تنها یک برنامه پرداخت وجود دارد که:
    • از شناسه روش پرداخت درخواستی پشتیبانی می کند.

چه زمانی یک برنامه پرداخت مبتنی بر وب به‌موقع (JIT) ثبت می‌شود؟

برنامه‌های پرداخت مبتنی بر وب را می‌توان بدون مراجعه صریح قبلی کاربر به وب‌سایت برنامه پرداخت و ثبت نام کارگر سرویس راه‌اندازی کرد. هنگامی که کاربر انتخاب می کند با برنامه پرداخت مبتنی بر وب پرداخت کند، کارگر خدمات می تواند به موقع ثبت نام کند. دو تغییر برای زمان ثبت نام وجود دارد:

  • اگر رابط کاربری درخواست پرداخت به کاربر نشان داده شود، برنامه به‌موقع ثبت می‌شود و زمانی که کاربر روی «ادامه» کلیک می‌کند، راه‌اندازی می‌شود.
  • اگر رابط کاربری درخواست پرداخت نادیده گرفته شود، برنامه پرداخت به موقع ثبت می شود و مستقیماً راه اندازی می شود. پرش از واسط درخواست پرداخت برای راه‌اندازی یک برنامه ثبت‌شده به‌موقع، نیاز به یک حرکت کاربر دارد، که از ثبت نام غیرمنتظره کارکنان خدمات متقاطع جلوگیری می‌کند.

مراحل بعدی

اکنون که برنامه پرداخت خود را قابل شناسایی هستید، یاد بگیرید که چگونه یک برنامه پرداخت ویژه پلتفرم و یک برنامه پرداخت مبتنی بر وب ایجاد کنید.