একটি অর্থপ্রদানের পদ্ধতি সেট আপ করা হচ্ছে৷

ওয়েব পেমেন্ট ব্যবহার করে একটি পেমেন্ট লেনদেন আপনার পেমেন্ট অ্যাপ আবিষ্কারের মাধ্যমে শুরু হয়। কীভাবে একটি পেমেন্ট পদ্ধতি সেট আপ করবেন এবং ব্যবসায়ী এবং গ্রাহকদের পেমেন্ট করার জন্য আপনার পেমেন্ট অ্যাপ প্রস্তুত করবেন তা শিখুন।

প্রকাশিত: ২৭ সেপ্টেম্বর, ২০১৭, সর্বশেষ আপডেট: ১ জুলাই, ২০২৫

পেমেন্ট রিকোয়েস্ট API ব্যবহার করার জন্য, একটি পেমেন্ট অ্যাপ অবশ্যই একটি পেমেন্ট পদ্ধতি শনাক্তকারীর সাথে যুক্ত থাকতে হবে। যে ব্যবসায়ীরা পেমেন্ট অ্যাপের সাথে একীভূত হতে চান তারা ব্রাউজারে এটি নির্দেশ করার জন্য পেমেন্ট পদ্ধতি শনাক্তকারী ব্যবহার করবেন। এই নিবন্ধে পেমেন্ট অ্যাপ আবিষ্কার কীভাবে কাজ করে এবং আপনার পেমেন্ট অ্যাপটি কীভাবে সঠিকভাবে আবিষ্কার এবং ব্রাউজার দ্বারা আহ্বান করা যায় তা কনফিগার করার বিষয়ে আলোচনা করা হয়েছে।

আপনি যদি ওয়েব পেমেন্টের ধারণা বা পেমেন্ট অ্যাপের মাধ্যমে পেমেন্ট লেনদেন কীভাবে কাজ করে সে সম্পর্কে নতুন হন, তাহলে প্রথমে নিম্নলিখিত নিবন্ধগুলি পড়ুন:

ব্রাউজার সাপোর্ট

ওয়েব পেমেন্টে কয়েকটি ভিন্ন প্রযুক্তি থাকে এবং সাপোর্ট স্ট্যাটাস ব্রাউজারের উপর নির্ভর করে।

ক্রোমিয়াম সাফারি ফায়ারফক্স
ডেস্কটপ অ্যান্ড্রয়েড ডেস্কটপ মোবাইল ডেস্কটপ/মোবাইল
পেমেন্ট অনুরোধ API
ওয়েব-ভিত্তিক পেমেন্ট হ্যান্ডলার API
iOS/Android পেমেন্ট অ্যাপ ✔* ✔*

কিভাবে একটি ব্রাউজার একটি পেমেন্ট অ্যাপ আবিষ্কার করে

প্রতিটি পেমেন্ট অ্যাপকে নিম্নলিখিত তথ্য প্রদান করতে হবে:

  • URL-ভিত্তিক পেমেন্ট পদ্ধতি শনাক্তকারী
  • পেমেন্ট পদ্ধতি ম্যানিফেস্ট (যদি কোনও তৃতীয় পক্ষ পেমেন্ট পদ্ধতি শনাক্তকারী সরবরাহ করে তবে তা ছাড়া)
  • ওয়েব অ্যাপ ম্যানিফেস্ট
চিত্র: কিভাবে একটি ব্রাউজার একটি URL-ভিত্তিক পেমেন্ট পদ্ধতি শনাক্তকারী থেকে পেমেন্ট অ্যাপটি আবিষ্কার করে

একজন বণিক যখন লেনদেন শুরু করেন তখন আবিষ্কার প্রক্রিয়া শুরু হয়:

  1. ব্রাউজারটি পেমেন্ট পদ্ধতি শনাক্তকারী URL-এ একটি অনুরোধ পাঠায় এবং পেমেন্ট পদ্ধতির ম্যানিফেস্ট আনে।
  2. ব্রাউজারটি পেমেন্ট মেথড ম্যানিফেস্ট থেকে ওয়েব অ্যাপ ম্যানিফেস্ট URL নির্ধারণ করে এবং ওয়েব অ্যাপ ম্যানিফেস্টটি নিয়ে আসে।
  3. ওয়েব অ্যাপ ম্যানিফেস্ট থেকে OS পেমেন্ট অ্যাপ নাকি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ চালু করা হবে তা ব্রাউজার নির্ধারণ করে।

পরবর্তী বিভাগগুলিতে বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে কিভাবে আপনার নিজস্ব পেমেন্ট পদ্ধতি সেট আপ করবেন যাতে ব্রাউজারগুলি এটি আবিষ্কার করতে পারে।

ধাপ ১: পেমেন্ট পদ্ধতি শনাক্তকারী প্রদান করুন

পেমেন্ট পদ্ধতি শনাক্তকারী হল একটি URL-ভিত্তিক স্ট্রিং। উদাহরণস্বরূপ, Google Pay এর শনাক্তকারী হল https://google.com/pay । পেমেন্ট অ্যাপ ডেভেলপাররা যেকোনো URL কে পেমেন্ট পদ্ধতি শনাক্তকারী হিসেবে বেছে নিতে পারেন যতক্ষণ না তাদের এর উপর নিয়ন্ত্রণ থাকে এবং তারা ইচ্ছামত কন্টেন্ট এবং HTTP হেডার পরিবেশন করতে পারে। এই নিবন্ধে, আমরা পেমেন্ট পদ্ধতি শনাক্তকারী হিসেবে https://bobbucks.dev/pay ব্যবহার করব।

ব্যবসায়ীরা কীভাবে পেমেন্ট পদ্ধতি শনাক্তকারী ব্যবহার করে

একটি PaymentRequest অবজেক্ট তৈরি করা হয় পেমেন্ট পদ্ধতি শনাক্তকারীদের একটি তালিকা দিয়ে যা একজন ব্যবসায়ী যে পেমেন্ট অ্যাপগুলি গ্রহণ করার সিদ্ধান্ত নেন তা সনাক্ত করে। পেমেন্ট পদ্ধতি শনাক্তকারীদের supportedMethods সম্পত্তির জন্য একটি মান হিসাবে সেট করা হয়। উদাহরণস্বরূপ:

[বণিক] পেমেন্টের অনুরোধ করছে:

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

ধাপ ২: পেমেন্ট পদ্ধতির ম্যানিফেস্ট পরিবেশন করুন

একটি পেমেন্ট মেথড ম্যানিফেস্ট হল একটি JSON ফাইল যা কোন পেমেন্ট অ্যাপ এই পেমেন্ট পদ্ধতি ব্যবহার করতে পারে তা নির্ধারণ করে।

পেমেন্ট পদ্ধতির ম্যানিফেস্ট প্রদান করুন

যখন একজন বণিক একটি পেমেন্ট লেনদেন শুরু করেন, তখন ব্রাউজার পেমেন্ট পদ্ধতি শনাক্তকারী URL-এ একটি HTTP HEAD অনুরোধ পাঠায় । পেমেন্ট পদ্ধতি শনাক্তকারী URL একটি Link HTTP হেডার দিয়ে সাড়া দেয় যা URL-এর দিকে নির্দেশ করে যেখানে ব্রাউজার পেমেন্ট পদ্ধতি ম্যানিফেস্ট আনতে পারে।

পেমেন্ট পদ্ধতি সার্ভারটি এমনভাবে কনফিগার করুন যাতে rel="payment-method-manifest" অ্যাট্রিবিউট এবং পেমেন্ট পদ্ধতি ম্যানিফেস্ট URL সহ একটি HTTP Link হেডার ব্যবহার করে প্রতিক্রিয়া জানানো যায়। উদাহরণস্বরূপ, যদি ম্যানিফেস্টটি https://bobbucks.dev/pay/payment-manifest.json এ থাকে, তাহলে রেসপন্স হেডারে অন্তর্ভুক্ত থাকবে:

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

URLটি সম্পূর্ণরূপে যোগ্যতাসম্পন্ন ডোমেন নাম অথবা একটি আপেক্ষিক পথ হতে পারে। উদাহরণ দেখতে নেটওয়ার্ক ট্র্যাফিকের জন্য https://bobbucks.dev/pay পরিদর্শন করুন। আপনি একটি curl কমান্ডও ব্যবহার করতে পারেন:

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

ব্রাউজারটি পরবর্তীতে পেমেন্ট মেথড ম্যানিফেস্ট URL-এ একটি HTTP GET অনুরোধ পাঠায়। সার্ভার পেমেন্ট মেথড ম্যানিফেস্ট বডি দিয়ে সাড়া দেয়।

একটি পেমেন্ট পদ্ধতি ম্যানিফেস্টে দুটি ক্ষেত্র থাকে, default_applications এবং supported_origins

সম্পত্তির নাম বিবরণ
default_applications (প্রয়োজনীয়) পেমেন্ট অ্যাপগুলি যেখানে হোস্ট করা হয় সেখানে ওয়েব অ্যাপ ম্যানিফেস্ট নির্দেশ করে এমন URL গুলির একটি অ্যারে। (URLটি একটি আপেক্ষিক হতে পারে)। এই অ্যারেটি ডেভেলপমেন্ট ম্যানিফেস্ট, প্রোডাকশন ম্যানিফেস্ট ইত্যাদির উল্লেখ করবে বলে আশা করা হচ্ছে।
supported_origins একই পেমেন্ট পদ্ধতি প্রয়োগকারী তৃতীয় পক্ষের পেমেন্ট অ্যাপ হোস্ট করতে পারে এমন উৎসের দিকে নির্দেশ করে এমন URL গুলির একটি অ্যারে। মনে রাখবেন যে একটি পেমেন্ট পদ্ধতি একাধিক পেমেন্ট অ্যাপ দ্বারা প্রয়োগ করা যেতে পারে।
পেমেন্ট পদ্ধতির ম্যানিফেস্ট ক্ষেত্রগুলি

একটি পেমেন্ট পদ্ধতির ম্যানিফেস্ট ফাইলটি দেখতে এইরকম হওয়া উচিত:

[পেমেন্ট হ্যান্ডলার] /payment-manifest.json:

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

যখন ব্রাউজারটি default_applications ফিল্ডটি পড়ে, তখন এটি সমর্থিত পেমেন্ট অ্যাপের ওয়েব অ্যাপ ম্যানিফেস্টের লিঙ্কগুলির একটি তালিকা খুঁজে পায়।

ধাপ ৩: একটি ওয়েব অ্যাপ ম্যানিফেস্ট পরিবেশন করুন

নাম থেকেই বোঝা যায়, একটি ওয়েব অ্যাপ ম্যানিফেস্ট একটি ওয়েব অ্যাপকে সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটি একটি প্রোগ্রেসিভ ওয়েব অ্যাপ (PWA) সংজ্ঞায়িত করার জন্য বহুল ব্যবহৃত একটি ম্যানিফেস্ট ফাইল।

সাধারণ ওয়েব অ্যাপ ম্যানিফেস্টটি দেখতে এরকম হবে:

[পেমেন্ট হ্যান্ডলার] /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"
        }
      ]
    }
  ]
}

একটি ওয়েব অ্যাপ ম্যানিফেস্টে বর্ণিত তথ্য পেমেন্ট রিকোয়েস্ট UI-তে একটি পেমেন্ট অ্যাপ কীভাবে প্রদর্শিত হবে তা নির্ধারণ করতেও ব্যবহৃত হয়।

সম্পত্তির নাম বিবরণ
name (প্রয়োজনীয়) পেমেন্ট অ্যাপের নাম হিসেবে ব্যবহৃত।
icons (প্রয়োজনীয়) পেমেন্ট অ্যাপ আইকন হিসেবে ব্যবহৃত হয়। শুধুমাত্র Chrome এই আইকনগুলি ব্যবহার করে; যদি আপনি পেমেন্ট উপকরণের অংশ হিসেবে এগুলি নির্দিষ্ট না করেন তবে অন্যান্য ব্রাউজারগুলি এগুলিকে ফলব্যাক আইকন হিসেবে ব্যবহার করতে পারে।
serviceworker ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ হিসেবে পরিচালিত পরিষেবা কর্মী সনাক্ত করতে ব্যবহৃত হয়।
serviceworker.src যে URL থেকে সার্ভিস ওয়ার্কার স্ক্রিপ্ট ডাউনলোড করা হবে।
serviceworker.scope একটি স্ট্রিং যা একটি URL প্রতিনিধিত্ব করে যা একজন পরিষেবা কর্মীর নিবন্ধনের সুযোগকে সংজ্ঞায়িত করে।
serviceworker.use_cache যে URL থেকে সার্ভিস ওয়ার্কার স্ক্রিপ্ট ডাউনলোড করা হবে।
related_applications অপারেটিং সিস্টেম-প্রদত্ত পেমেন্ট অ্যাপ হিসেবে কাজ করে এমন অ্যাপটি সনাক্ত করতে ব্যবহৃত হয়। আরও বিস্তারিত জানতে অ্যান্ড্রয়েড পেমেন্ট অ্যাপস ডেভেলপার গাইড দেখুন।
prefer_related_applications যখন একটি OS-প্রদত্ত পেমেন্ট অ্যাপ এবং একটি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ উভয়ই উপলব্ধ থাকে, তখন কোন পেমেন্ট অ্যাপ চালু করতে হবে তা নির্ধারণ করতে ব্যবহৃত হয়।
গুরুত্বপূর্ণ ওয়েব অ্যাপ ম্যানিফেস্ট ক্ষেত্র

ওয়েব অ্যাপ ম্যানিফেস্টের name সম্পত্তি পেমেন্ট অ্যাপের নাম হিসেবে ব্যবহৃত হয়, icons সম্পত্তি পেমেন্ট অ্যাপ আইকন হিসেবে ব্যবহৃত হয়।

কোন পেমেন্ট অ্যাপ চালু করতে হবে তা Chrome কীভাবে নির্ধারণ করে

প্ল্যাটফর্ম-নির্দিষ্ট পেমেন্ট অ্যাপ চালু করা হচ্ছে

প্ল্যাটফর্ম-নির্দিষ্ট পেমেন্ট অ্যাপ চালু করতে, নিম্নলিখিত শর্তগুলি পূরণ করতে হবে:

  • related_applications ক্ষেত্রটি ওয়েব অ্যাপ ম্যানিফেস্টে নির্দিষ্ট করা আছে এবং:
    • ইনস্টল করা অ্যাপের প্যাকেজ আইডি এবং স্বাক্ষর মিলে যায়, যখন ওয়েব অ্যাপ ম্যানিফেস্টে ন্যূনতম সংস্করণ ( min_version ) ইনস্টল করা অ্যাপ্লিকেশনের সংস্করণের চেয়ে কম বা সমান।
  • prefer_related_applications ক্ষেত্রটি true
  • প্ল্যাটফর্ম-নির্দিষ্ট পেমেন্ট অ্যাপটি ইনস্টল করা আছে এবং এতে রয়েছে:
    • org.chromium.action.PAY এর একটি ইন্টেন্ট ফিল্টার।
    • org.chromium.default_payment_method_name প্রপার্টির মান হিসেবে নির্দিষ্ট করা একটি পেমেন্ট পদ্ধতি শনাক্তকারী।

এগুলি কীভাবে সেট আপ করবেন সে সম্পর্কে আরও তথ্যের জন্য অ্যান্ড্রয়েড পেমেন্ট অ্যাপস: ডেভেলপারের নির্দেশিকা দেখুন।

[পেমেন্ট হ্যান্ডলার] /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 ফিল্ডে নির্দিষ্ট করা উচিত।

[পেমেন্ট হ্যান্ডলার] /manifest.json:

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

ব্রাউজারটি পরিষেবা কর্মীর কাছে একটি paymentrequest ইভেন্ট পাঠিয়ে ওয়েব-ভিত্তিক পেমেন্ট অ্যাপটি চালু করে। পরিষেবা কর্মীকে আগে থেকে নিবন্ধিত হতে হবে না। এটি ঠিক সময়ে নিবন্ধিত হতে পারে

বিশেষ অপ্টিমাইজেশন বোঝা

ব্রাউজাররা কীভাবে পেমেন্ট রিকোয়েস্ট UI এড়িয়ে সরাসরি একটি পেমেন্ট অ্যাপ চালু করতে পারে

Chrome-এ, যখন PaymentRequest এর show() পদ্ধতিটি কল করা হয়, তখন Payment Request API ব্রাউজার-প্রদত্ত একটি UI প্রদর্শন করে যা "Payment Request UI" নামে পরিচিত। এই UI ব্যবহারকারীদের একটি পেমেন্ট অ্যাপ বেছে নিতে দেয়। Payment Request UI-তে Continue বোতাম টিপে নির্বাচিত পেমেন্ট অ্যাপটি চালু হয়।

পেমেন্ট অ্যাপ চালু করার আগে পেমেন্ট রিকোয়েস্ট UI হস্তক্ষেপ করে।

পেমেন্ট অ্যাপ চালু করার আগে পেমেন্ট রিকোয়েস্ট UI দেখানোর ফলে ব্যবহারকারীর পেমেন্ট পূরণের জন্য প্রয়োজনীয় ধাপগুলির সংখ্যা বৃদ্ধি পায়। প্রক্রিয়াটি অপ্টিমাইজ করার জন্য, ব্রাউজারটি সেই তথ্য পূরণের জন্য পেমেন্ট অ্যাপগুলিকে অর্পণ করতে পারে এবং show() কল করা হলে পেমেন্ট রিকোয়েস্ট UI না দেখিয়ে সরাসরি একটি পেমেন্ট অ্যাপ চালু করতে পারে।

পেমেন্ট রিকোয়েস্ট UI এড়িয়ে যান এবং সরাসরি পেমেন্ট অ্যাপটি চালু করুন।

সরাসরি একটি পেমেন্ট অ্যাপ চালু করতে, নিম্নলিখিত শর্তগুলি পূরণ করতে হবে:

  • show() একটি ব্যবহারকারীর অঙ্গভঙ্গির মাধ্যমে ট্রিগার করা হয় (উদাহরণস্বরূপ, একটি মাউস ক্লিক)।
  • শুধুমাত্র একটি একক পেমেন্ট অ্যাপ আছে যা:
    • অনুরোধকৃত পেমেন্ট পদ্ধতি শনাক্তকারীকে সমর্থন করে।

কখন একটি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ জাস্ট-ইন-টাইম (JIT) নিবন্ধিত হয়?

ওয়েব-ভিত্তিক পেমেন্ট অ্যাপগুলি ব্যবহারকারীর পেমেন্ট অ্যাপ ওয়েবসাইটে স্পষ্টভাবে প্রবেশ এবং পরিষেবা কর্মীকে নিবন্ধন না করেই চালু করা যেতে পারে। ব্যবহারকারী যখন ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ দিয়ে অর্থ প্রদান করতে চান তখনই পরিষেবা কর্মীকে নিবন্ধন করা যেতে পারে। নিবন্ধনের সময় নির্ধারণের জন্য দুটি ভিন্নতা রয়েছে:

  • যদি ব্যবহারকারীকে পেমেন্ট রিকোয়েস্ট UI দেখানো হয়, তাহলে অ্যাপটি ঠিক সময়ে নিবন্ধিত হয় এবং ব্যবহারকারী যখন Continue এ ক্লিক করেন তখন চালু হয়।
  • যদি পেমেন্ট রিকোয়েস্ট UI বাদ দেওয়া হয়, তাহলে পেমেন্ট অ্যাপটি ঠিক সময়ে নিবন্ধিত হয় এবং সরাসরি চালু হয়। পেমেন্ট রিকোয়েস্ট UI বাদ দিয়ে জাস্ট-ইন-টাইম নিবন্ধিত অ্যাপ চালু করার জন্য ব্যবহারকারীর একটি অঙ্গভঙ্গির প্রয়োজন হয়, যা ক্রস-অরিজিন পরিষেবা কর্মীদের অপ্রত্যাশিত নিবন্ধন প্রতিরোধ করে।

পরবর্তী পদক্ষেপ

এখন যেহেতু আপনার পেমেন্ট অ্যাপটি আবিষ্কারযোগ্য, তাই শিখুন কিভাবে একটি প্ল্যাটফর্ম-নির্দিষ্ট পেমেন্ট অ্যাপ এবং একটি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ তৈরি করতে হয়।