ওয়েব পেমেন্ট ব্যবহার করে পেমেন্ট ট্রানজ্যাকশন শুরু হয় আপনার পেমেন্ট অ্যাপ খোঁজার মাধ্যমে। কীভাবে পেমেন্ট পদ্ধতি সেট-আপ করবেন এবং মার্চেন্ট ও গ্রাহকদের পেমেন্ট করার জন্য আপনার পেমেন্ট অ্যাপ রেডি করবেন তা জানুন।
প্রকাশিত: ২৭ সেপ্টেম্বর, ২০১৭, শেষবার আপডেট করা হয়েছে: ১৬ অক্টোবর, ২০২৬
পেমেন্ট অনুরোধ API-এর সাথে ব্যবহার করার জন্য, পেমেন্ট অ্যাপকে অবশ্যই পেমেন্ট পদ্ধতি শনাক্তকারীর সাথে যুক্ত হতে হবে। যেসব মার্চেন্ট পেমেন্ট অ্যাপের সাথে ইন্টিগ্রেট করতে চান তারা ব্রাউজারকে তা জানাতে পেমেন্ট পদ্ধতির আইডেন্টিফায়ার ব্যবহার করবেন। এই নিবন্ধে আলোচনা করা হয়েছে যে কীভাবে পেমেন্ট অ্যাপ ডিসকভারি কাজ করে এবং কীভাবে আপনার পেমেন্ট অ্যাপ কনফিগার করবেন যাতে এটি সঠিকভাবে ডিসকভার করা যায় এবং ব্রাউজার দ্বারা চালু করা যায়।
আপনি ওয়েব পেমেন্ট প্রথমবার ব্যবহার করলে, প্রথমে ওয়েব পেমেন্ট ওভারভিউ পড়ুন।
পেমেন্ট অ্যাপের ধরন
কোনও পেমেন্ট পদ্ধতি Android পেমেন্ট অ্যাপ, ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ অথবা উভয় অ্যাপেই কাজ করতে পারে:
- Android পেমেন্ট অ্যাপ: ইনস্টল করা অ্যাপ যা Chrome, Android ইনটেন্টের মাধ্যমে লঞ্চ করে। Chrome অ্যাপের প্যাকেজের নাম ও সাইনিং সার্টিফিকেট যাচাই করে।
- ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ: একটি সার্ভিস ওয়ার্কার যা Chrome একটি মোডাল উইন্ডোতে লঞ্চ করে। ব্যবহারকারীদের কিছু ইনস্টল করতে হবে না।
Android-এ Chrome এবং WebView-তে Android পেমেন্ট অ্যাপ উপলভ্য। ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ Chrome-এর সব প্ল্যাটফর্মে উপলভ্য, তবে WebView-তে নয়।
কোনও পেমেন্ট পদ্ধতির জন্য দুই ধরনের অ্যাপই উপলভ্য থাকলে এবং আপনার ওয়েব অ্যাপ ম্যানিফেস্ট
prefer_related_applications-কে true হিসেবে সেট করলে, Chrome আপনার ওয়েব-ভিত্তিক
পেমেন্ট অ্যাপ লুকিয়ে রাখে। অন্যথায়, ব্যবহারকারীরা পেমেন্ট অনুরোধ UI-তে দুটিই দেখতে পেতে পারেন এবং
সেগুলির মধ্যে থেকে বেছে নিতে পারেন।
ব্রাউজার সহায়তা
ওয়েব পেমেন্টসে কয়েকটি আলাদা আলাদা প্রযুক্তি ব্যবহার করা হয় এবং এর কাজ করার ক্ষমতা ব্রাউজারের উপর নির্ভর করে।
ব্রাউজার কীভাবে পেমেন্ট অ্যাপ খুঁজে পায়
প্রতিটি পেমেন্ট অ্যাপকে নিম্নলিখিত তথ্য প্রদান করতে হবে:
- URL-ভিত্তিক পেমেন্ট পদ্ধতি শনাক্তকারী
- পেমেন্ট পদ্ধতি ম্যানিফেস্ট (পেমেন্ট পদ্ধতি শনাক্তকারী থার্ড-পার্টি প্রদান করলে, সেটি ছাড়া)
- ওয়েব অ্যাপ ম্যানিফেস্ট
কোনও মার্চেন্ট ট্রানজ্যাকশন শুরু করলে ডিসকভারি প্রসেস শুরু হয়:
- ব্রাউজার পেমেন্ট পদ্ধতি আইডেন্টিফায়ার URL-এ অনুরোধ পাঠায় এবং পেমেন্ট পদ্ধতি ম্যানিফেস্ট ফেচ করে।
- ব্রাউজার পেমেন্ট পদ্ধতি ম্যানিফেস্ট থেকে ওয়েব অ্যাপ ম্যানিফেস্ট URL নির্ধারণ করে এবং ওয়েব অ্যাপ ম্যানিফেস্ট ফেচ করে।
- ব্রাউজার নির্ধারণ করে যে OS পেমেন্ট অ্যাপ নাকি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ ওয়েব অ্যাপ ম্যানিফেস্ট থেকে লঞ্চ করা হবে।
পরবর্তী বিভাগে আপনার নিজস্ব পেমেন্ট পদ্ধতি কীভাবে সেট-আপ করবেন তা বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে যাতে ব্রাউজার এটি খুঁজে পেতে পারে।
ধাপ ১: পেমেন্ট পদ্ধতি শনাক্তকারী প্রদান করুন
পেমেন্ট পদ্ধতি
শনাক্তকারী
হল URL-ভিত্তিক স্ট্রিং। যেমন, Google Pay-এর আইডেন্টিফায়ার হল
https://google.com/pay। পেমেন্ট অ্যাপ ডেভেলপাররা পেমেন্ট পদ্ধতি শনাক্তকারী হিসেবে যেকোনও URL বেছে নিতে পারেন, যতক্ষণ না পর্যন্ত তারা এটি নিয়ন্ত্রণ করতে পারেন এবং ইচ্ছামতো কন্টেন্ট এবং 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 ফাইল যা কোন পেমেন্ট অ্যাপ এই পেমেন্ট পদ্ধতি ব্যবহার করতে পারবে তা নির্ধারণ করে।
পেমেন্ট পদ্ধতির ম্যানিফেস্ট প্রদান করুন
কোনও মার্চেন্ট পেমেন্ট ট্রানজ্যাকশন শুরু করলে, ব্রাউজার পেমেন্ট পদ্ধতি শনাক্তকারী URL-এ
HEAD HTTP অনুরোধ পাঠায়। পেমেন্ট পদ্ধতির
আইডেন্টিফায়ার URL, Link HTTP হেডারের মাধ্যমে উত্তর দেয় যা সেই URL-কে পয়েন্ট করে
যেখানে ব্রাউজার পেমেন্ট পদ্ধতির ম্যানিফেস্ট ফেচ করতে পারে।
পেমেন্ট পদ্ধতির সার্ভার কনফিগার করুন যাতে এটি HTTP Link হেডারের সাথে rel="payment-method-manifest" অ্যাট্রিবিউট এবং পেমেন্ট পদ্ধতির
ম্যানিফেস্ট URL-এর মাধ্যমে উত্তর দেয়। যেমন, ম্যানিফেস্ট
https://bobbucks.dev/pay/payment-manifest.json-এ থাকলে, রেসপন্স হেডারে
এগুলি অন্তর্ভুক্ত থাকবে:
Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"
URL-টি সম্পূর্ণভাবে উপযুক্ত ডোমেনের নাম (FQDN) বা রিলেটিভ পাথ হতে পারে। উদাহরণ দেখতে নেটওয়ার্ক ট্রাফিকের জন্য
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 handler] /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
},
"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 |
যে URL থেকে সার্ভিস ওয়ার্কার স্ক্রিপ্ট ডাউনলোড করতে হবে। |
serviceworker.scope |
একটি স্ট্রিং যা একটি URL-কে উপস্থাপন করে যা একটি পরিষেবা কর্মীর রেজিস্ট্রেশন স্কোপকে সংজ্ঞায়িত করে। |
serviceworker.use_cache |
পরিষেবা কর্মী স্ক্রিপ্ট আনার সময় ব্রাউজার তার HTTP ক্যাশে ব্যবহার করতে পারবে কিনা। |
payment.supported_delegations |
শুধুমাত্র ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ। পেমেন্ট অ্যাপ শিপিং ও যোগাযোগের যে তথ্য
প্রদান করতে পারে: shippingAddress,
payerName, payerEmail, অথবা
payerPhone. Android পেমেন্ট অ্যাপ এটি
AndroidManifest.xml
-এ ঘোষণা করে।
|
related_applications
|
শুধুমাত্র Android পেমেন্ট অ্যাপ। অ্যাপ ও তার সাইনিং সার্টিফিকেট শনাক্ত করে। Android পেমেন্ট অ্যাপ ডেভেলপার নির্দেশিকা থেকে আরও বিবরণ দেখুন। |
prefer_related_applications
|
Android পেমেন্ট অ্যাপ ইনস্টল করা থাকলে, ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ লুকানোর জন্য true-এ সেট করুন।
|
ওয়েব অ্যাপ ম্যানিফেস্টের 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 ফিল্ডে উল্লেখ করতে হবে।
[পেমেন্ট হ্যান্ডলার] /manifest.json:
"serviceworker": {
"src": "payment-handler.js"
}
ব্রাউজার, সার্ভিস ওয়ার্কারকে paymentrequest
ইভেন্ট পাঠিয়ে ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ চালু করে। সার্ভিস ওয়ার্কারকে আগে থেকে রেজিস্টার করতে
হবে না। এটি ঠিক সময়ে রেজিস্টার করা যেতে পারে।
বিশেষ অপ্টিমাইজেশন সম্পর্কে বোঝা
কীভাবে ব্রাউজার পেমেন্ট অনুরোধ UI এড়িয়ে গিয়ে সরাসরি পেমেন্ট অ্যাপ চালু করতে পারে
Chrome-এ, PaymentRequest-এর show() পদ্ধতি কল করা হলে, পেমেন্ট
অনুরোধ API "পেমেন্ট অনুরোধ UI" নামে ব্রাউজার-প্রদত্ত UI দেখায়। এই
UI ব্যবহারকারীকে পেমেন্ট অ্যাপ বেছে নিতে দেয়। পেমেন্ট অনুরোধ UI-তে চালিয়ে যান বোতামে
প্রেস করার পরে, বেছে নেওয়া পেমেন্ট অ্যাপ চালু হয়।
পেমেন্ট অ্যাপ চালু করার আগে পেমেন্ট অনুরোধ UI দেখালে, পেমেন্ট সম্পূর্ণ করার জন্য
ব্যবহারকারীকে আরও বেশি ধাপ অনুসরণ করতে হয়। প্রসেস অপ্টিমাইজ করতে,
ব্রাউজার পেমেন্ট অ্যাপে সেই তথ্য পূরণ করার দায়িত্ব দিতে পারে এবং
show() কল করা হলে,
পেমেন্ট অনুরোধ UI না দেখিয়ে সরাসরি পেমেন্ট অ্যাপ লঞ্চ করতে পারে।
সরাসরি পেমেন্ট অ্যাপ চালু করতে, নিম্নলিখিত শর্ত পূরণ করতে হবে:
show()ইউজার জেসচারের (যেমন, মাউস ক্লিক) মাধ্যমে ট্রিগার করা হয়।- শুধুমাত্র একটি পেমেন্ট অ্যাপ আছে যা:
- অনুরোধ করা পেমেন্ট পদ্ধতি শনাক্তকারীকে সাপোর্ট করে।
- মার্চেন্টের অনুরোধ করা সমস্ত শিপিং এবং যোগাযোগের তথ্য সমর্থন করে।
ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ কখন জাস্ট-ইন-টাইম (JIT) হিসেবে রেজিস্টার করা হয়?
ব্যবহারকারী পেমেন্ট অ্যাপের ওয়েবসাইটে আগে থেকে না গিয়ে এবং সার্ভিস ওয়ার্কার রেজিস্টার না করেই ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ চালু করা যেতে পারে। ব্যবহারকারী ওয়েব-ভিত্তিক পেমেন্ট অ্যাপের মাধ্যমে পেমেন্ট করার বিকল্প বেছে নিলে, ঠিক সেই সময়েই সার্ভিস ওয়ার্কার রেজিস্টার করা যেতে পারে। রেজিস্ট্রেশনের সময়ের ক্ষেত্রে দুটি বিকল্প আছে:
- ব্যবহারকারীকে পেমেন্ট অনুরোধের UI দেখানো হলে, অ্যাপটি ঠিক সময়ে রেজিস্টার করা হয় এবং ব্যবহারকারী চালিয়ে যান বিকল্পে ক্লিক করলে চালু হয়।
- পেমেন্ট অনুরোধ UI এড়িয়ে গেলে, পেমেন্ট অ্যাপ ঠিক সময়ে রেজিস্টার করা হয় এবং সরাসরি লঞ্চ করা হয়। জাস্ট-ইন-টাইম রেজিস্টার করা অ্যাপ লঞ্চ করার জন্য পেমেন্ট অনুরোধ UI এড়িয়ে যেতে ব্যবহারকারীর জেসচার প্রয়োজন, যা ক্রস-অরিজিন সার্ভিস ওয়ার্কারের অপ্রত্যাশিত রেজিস্ট্রেশন আটকায়।
ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ তৈরি করা
মার্চেন্ট show() কল করলে, Chrome আপনার সার্ভিস ওয়ার্কারকে একটি
paymentrequest
ইভেন্ট পাঠায়। আপনার পেমেন্ট UI দেখাতে respondWith()-এর মধ্যে
openWindow()
কল করুন, তারপর পেমেন্ট
রেসপন্স দিয়ে সমাধান করুন।
সম্পূর্ণ API-এর জন্য, MDN-এ ওয়েব-ভিত্তিক পেমেন্ট হ্যান্ডলার API দেখুন।