যখন কোনও গ্রাহক আপনার ওয়েবসাইট থেকে কিছু কেনার চেষ্টা করেন, তখন সাইটটিকে অবশ্যই গ্রাহককে অর্থপ্রদানের তথ্য এবং ঐচ্ছিকভাবে, শিপিং পছন্দের মতো অন্যান্য তথ্য সরবরাহ করতে হবে। আপনি পেমেন্ট রিকোয়েস্ট API (PR API) ব্যবহার করে দ্রুত এটি অর্জন করতে পারেন।
মৌলিক পেমেন্ট কাঠামো
একটি PaymentRequest অবজেক্ট তৈরি করতে দুটি প্যারামিটারের প্রয়োজন হয়: পেমেন্ট পদ্ধতি এবং পেমেন্টের বিবরণ । এছাড়াও, তৃতীয় একটি পেমেন্ট অপশন প্যারামিটার ঐচ্ছিক। একটি মৌলিক অনুরোধ এভাবে তৈরি করা যেতে পারে:
const request = new PaymentRequest(paymentMethods, paymentDetails);
প্রতিটি প্যারামিটার কীভাবে তৈরি এবং ব্যবহার করা হয় তা একবার দেখে নিন।
পেমেন্ট পদ্ধতি
প্রথম প্যারামিটার, paymentMethods , হল একটি অ্যারে ভেরিয়েবলে সমর্থিত পেমেন্ট পদ্ধতির একটি তালিকা। অ্যারের প্রতিটি উপাদান দুটি উপাদান নিয়ে গঠিত, supportedMethods এবং, ঐচ্ছিকভাবে, data ।
supportedMethods এর জন্য, বণিককে https://bobbucks.dev/pay এর মতো একটি পেমেন্ট মেথড আইডেন্টিফায়ার নির্দিষ্ট করতে হবে। data অস্তিত্ব এবং বিষয়বস্তু supportedMethods এর বিষয়বস্তু এবং পেমেন্ট অ্যাপ প্রদানকারীর ডিজাইনের উপর নির্ভর করে।
উভয় তথ্যই পেমেন্ট অ্যাপ প্রদানকারীর দ্বারা সরবরাহ করা উচিত।
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
পেমেন্টের বিবরণ
দ্বিতীয় প্যারামিটার, paymentDetails , একটি অবজেক্ট হিসেবে পাস করা হয় এবং লেনদেনের জন্য পেমেন্টের বিবরণ নির্দিষ্ট করে। এতে প্রয়োজনীয় মান total থাকে, যা গ্রাহকের কাছ থেকে মোট বকেয়া পরিমাণ নির্দিষ্ট করে। এই প্যারামিটারটি ঐচ্ছিকভাবে ক্রয়কৃত আইটেমগুলিও তালিকাভুক্ত করতে পারে।
নিম্নলিখিত উদাহরণে, ঐচ্ছিক ক্রয়কৃত আইটেমের তালিকা (এই ক্ষেত্রে, শুধুমাত্র একটি আইটেম) দেখানো হয়েছে, এবং প্রয়োজনীয় মোট বকেয়া পরিমাণও দেখানো হয়েছে। উভয় ক্ষেত্রেই প্রতিটি পৃথক পরিমাণের সাথে মুদ্রা ইউনিট নির্দিষ্ট করা আছে।
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
পেমেন্ট পদ্ধতি উপলব্ধ কিনা তা পরীক্ষা করুন।
PaymentRequest অবজেক্ট তৈরির সময় Chrome ব্যবহারকারী এবং পরিবেশ অর্থপ্রদানের জন্য প্রস্তুত কিনা তা পরীক্ষা করে।
ব্যবহারকারী এবং পরিবেশ পেমেন্ট করার জন্য প্রস্তুত কিনা তা পরীক্ষা করার জন্য, পেমেন্ট পদ্ধতি চালু করার আগে canMakePayment() কল করুন। যদি ব্রাউজারটি অবজেক্টে উল্লেখিত কমপক্ষে একটি পেমেন্ট পদ্ধতি সমর্থন করে তবে canMakePayment() কল করলে true ফিরে আসে।
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
MDN-তে PaymentRequest.canMakePayment() সম্পর্কে আরও জানুন।
show() পদ্ধতি
দুটি প্যারামিটার সেট করার পরে এবং request অবজেক্ট তৈরি করার পরে, আপনি show() পদ্ধতিটি কল করতে পারেন, যা পেমেন্ট অ্যাপ ব্যবহারকারী ইন্টারফেস প্রদর্শন করে।
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
পেমেন্ট অ্যাপের ইউজার ইন্টারফেস কেমন হবে তা সম্পূর্ণরূপে পেমেন্ট অ্যাপ প্রদানকারীর উপর নির্ভর করে। গ্রাহক পেমেন্ট করতে সম্মত হওয়ার পর, একটি JSON অবজেক্ট মার্চেন্টের কাছে পাঠানো হয় যাতে টাকা ট্রান্সফার করার জন্য প্রয়োজনীয় সমস্ত তথ্য থাকে। এরপর মার্চেন্ট পেমেন্ট প্রক্রিয়া করার জন্য এটি PSP-তে পাঠাতে পারেন।
অবশেষে, PSP যে ফলাফল প্রদান করবে তার উপর নির্ভর করে আপনি response.complete('success') অথবা response.complete('fail') লিখে প্রক্রিয়াটি সম্পন্ন করে পেমেন্ট রিকোয়েস্ট UI বন্ধ করতে পারেন।
পরবর্তী
ওয়েব পেমেন্ট সম্পর্কে আরও জানুন।