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

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

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

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

ব্রাউজার সমর্থন

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

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

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

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

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

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

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

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

ধাপ 1: অর্থপ্রদানের পদ্ধতি শনাক্তকারী প্রদান করুন

একটি অর্থপ্রদান পদ্ধতি শনাক্তকারী একটি URL-ভিত্তিক স্ট্রিং। উদাহরণস্বরূপ, Google Pay-এর শনাক্তকারী হল https://google.com/pay । পেমেন্ট অ্যাপ ডেভেলপাররা পেমেন্ট পদ্ধতি শনাক্তকারী হিসেবে যেকোনো ইউআরএল বেছে নিতে পারে যতক্ষণ না তাদের নিয়ন্ত্রণ থাকে এবং ইচ্ছাকৃত বিষয়বস্তু পরিবেশন করতে পারে। এই নিবন্ধে, আমরা 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 ফাইল যা নির্ধারণ করে যে কোন পেমেন্ট অ্যাপ এই পেমেন্ট পদ্ধতি ব্যবহার করতে পারে।

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

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

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

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

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

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

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

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

ঐচ্ছিকভাবে অন্য অবস্থানে পেমেন্ট পদ্ধতি ম্যানিফেস্ট খুঁজতে ব্রাউজারটিকে রুট করুন

পেমেন্ট মেথড আইডেন্টিফায়ার ইউআরএল ঐচ্ছিকভাবে একটি Link হেডার দিয়ে সাড়া দিতে পারে যা অন্য ইউআরএলে নির্দেশ করে যেখানে ব্রাউজার পেমেন্ট মেথড ম্যানিফেস্ট আনতে পারে। এটি উপযোগী হয় যখন একটি অর্থপ্রদানের পদ্ধতি ম্যানিফেস্ট একটি ভিন্ন সার্ভারে হোস্ট করা হয় বা যখন একটি তৃতীয় পক্ষ দ্বারা অর্থপ্রদানের অ্যাপ পরিবেশন করা হয়।

কিভাবে একটি ব্রাউজার রিডাইরেক্ট সহ একটি URL-ভিত্তিক পেমেন্ট পদ্ধতি শনাক্তকারী থেকে পেমেন্ট অ্যাপটি আবিষ্কার করে

rel="payment-method-manifest" অ্যাট্রিবিউট এবং পেমেন্ট মেথড ম্যানিফেস্ট ইউআরএল সহ একটি HTTP Link হেডারের সাথে প্রতিক্রিয়া জানাতে অর্থপ্রদানের পদ্ধতি সার্ভার কনফিগার করুন।

উদাহরণস্বরূপ, যদি ম্যানিফেস্টটি 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) সংজ্ঞায়িত করার জন্য একটি বহুল ব্যবহৃত ম্যানিফেস্ট ফাইল।

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

[পেমেন্ট হ্যান্ডলার] /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 একটি ইউআরএল প্রতিনিধিত্বকারী একটি স্ট্রিং যা একটি পরিষেবা কর্মীর নিবন্ধন সুযোগ সংজ্ঞায়িত করে।
serviceworker.use_cache যে URL থেকে পরিষেবা কর্মী স্ক্রিপ্ট ডাউনলোড করতে হবে৷
related_applications OS-প্রদত্ত পেমেন্ট অ্যাপ হিসেবে কাজ করে এমন অ্যাপ শনাক্ত করতে ব্যবহৃত হয়। অ্যান্ড্রয়েড পেমেন্ট অ্যাপস ডেভেলপার গাইডে আরও বিস্তারিত জানুন।
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-এ, যখন show() পদ্ধতিতে PaymentRequest কল করা হয়, তখন পেমেন্ট রিকোয়েস্ট API ব্রাউজার-প্রদত্ত UI প্রদর্শন করে যাকে "পেমেন্ট অনুরোধ UI" বলা হয়। এই UI ব্যবহারকারীদের একটি অর্থপ্রদানের অ্যাপ বেছে নিতে দেয়। পেমেন্ট রিকোয়েস্ট UI-তে Continue বাটন চাপার পর, নির্বাচিত পেমেন্ট অ্যাপটি চালু হয়।

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

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

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

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

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

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

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

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

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

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