ওয়েব পেমেন্টে নতুন কি আছে সে সম্পর্কে আপ টু ডেট থাকুন।
ওয়েব পেমেন্টগুলি 2016 সাল থেকে ব্রাউজারগুলিতে সর্বজনীনভাবে উপলব্ধ৷ মূল বৈশিষ্ট্যটি— পেমেন্ট অনুরোধ API —এখন একাধিক ব্রাউজারে উপলব্ধ: Chrome, Safari, Edge এবং শীঘ্রই Firefox৷ আপনি যদি ওয়েব পেমেন্টে নতুন হয়ে থাকেন তাহলে শুরু করতে "ওয়েব পেমেন্ট ওভারভিউ" দেখুন।
পেমেন্ট রিকোয়েস্ট এপিআই এবং পেমেন্ট হ্যান্ডলার এপিআই চালু হওয়ার পর থেকে তাদের নিজ নিজ স্পেসিফিকেশনে বেশ কিছু পরিবর্তন করা হয়েছে। এই পরিবর্তনগুলি আপনার কাজের কোড ভঙ্গ করবে না, তবে আমরা সুপারিশ করি যে আপনি সেগুলি সন্ধান করুন৷ এই পোস্টটি সেই আপডেটগুলিকে সংক্ষিপ্ত করে এবং সেই API পরিবর্তনগুলি জমা করতে থাকবে৷
নতুন পদ্ধতি: hasEnrolledInstrument()
পেমেন্ট রিকোয়েস্ট API-এর পূর্ববর্তী সংস্করণে, canMakePayment() ব্যবহারকারীর অর্থপ্রদানের উপকরণের ব্যবহারকারীর উপস্থিতি পরীক্ষা করার জন্য ব্যবহার করা হয়েছিল। স্পেকের সাম্প্রতিক আপডেটে, canMakePayment() এর কার্যকারিতা পরিবর্তন না করে hasEnrolledInstrument() দিয়ে প্রতিস্থাপিত হয়েছে।
hasEnrolledInstrument() পদ্ধতিতে সমস্ত প্রধান ব্রাউজার থেকে ঐকমত্য রয়েছে। ক্রোম এটিকে 74 সংস্করণে প্রয়োগ করেছে এবং Webkit এবং Gecko উভয়েরই ট্র্যাকিং বাগ রয়েছে কিন্তু জুন 2019 পর্যন্ত পদ্ধতিটি এখনও প্রয়োগ করেনি।
নতুন hasEnrolledInstrument() পদ্ধতি ব্যবহার করতে, এইরকম দেখতে কোড প্রতিস্থাপন করুন:
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
এই মত দেখায় কোড সহ:
// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
// hasEnrolledInstrument() is available.
request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}
canMakePayment() আর যন্ত্রের উপস্থিতি পরীক্ষা করে না
যেহেতু hasEnrolledInstrument() এখন ব্যবহারকারীর অর্থপ্রদানের উপকরণের জন্য চেকিং পরিচালনা করে, canMakePayment() শুধুমাত্র পেমেন্ট অ্যাপের উপলব্ধতা পরীক্ষা করার জন্য আপডেট করা হয়েছে।
canMakePayment() এ এই পরিবর্তন hasEnrolledInstrument() এর বাস্তবায়নে আবদ্ধ। জুন 2019 পর্যন্ত, এটি Chrome 74 এ প্রয়োগ করা হয়েছে কিন্তু অন্য কোনো ব্রাউজারে নয়। ব্যবহার করার চেষ্টা করার আগে ব্যবহারকারীর ব্রাউজারে hasEnrolledInstrument() পদ্ধতিটি উপলব্ধ কিনা তা নিশ্চিত করুন।
// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
// `canMakePayment()` behavior change corresponds to
// `hasEnrolledInstrument()` availability.
request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
console.log("Cannot check for payment app availability without checking for instrument presence.");
}
basic-card পেমেন্ট পদ্ধতি থেকে languageCode সরানো হয়েছে
PaymentAddress.languageCode শিপিং ঠিকানা এবং basic-card বিলিং ঠিকানা থেকে সরানো হয়েছে। অন্যান্য পেমেন্ট পদ্ধতির (যেমন Google Pay) বিলিং ঠিকানা প্রভাবিত হয় না।
এই পরিবর্তনটি Chrome 74, Firefox এবং Safari-এ প্রয়োগ করা হয়েছে।
PaymentRequest.show() এখন একটি ঐচ্ছিক detailsPromise নেয়
PaymentRequest.show() চূড়ান্ত মোট জানার আগে একজন বণিককে একটি অর্থপ্রদানের অনুরোধ UI উপস্থাপন করার অনুমতি দেয়। বণিকের কাছে সময় শেষ হওয়ার আগে detailsPromise সমাধানের জন্য দশ সেকেন্ড সময় আছে। এই বৈশিষ্ট্যটি একটি দ্রুত সার্ভার-সাইড রাউন্ডট্রিপের উদ্দেশ্যে।
এই বৈশিষ্ট্যটি Chrome 75 এবং Safari-এ পাঠানো হয়েছে।
// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
return;
}
// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
// Find out the exact total amount and call
// `resolveDetailsPromise(details)`.
// Use a 3 second timeout as an example.
window.setTimeout(function() {
resolveDetailsPromise(details);
}, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);
PaymentRequestEvent.changePaymentMethod()
পেমেন্ট হ্যান্ডলার API বৈশিষ্ট্য PaymentRequestEvent.changePaymentMethod() পেমেন্ট হ্যান্ডলারদের (যেমন, Google Pay) onpaymentmethodchange ইভেন্ট হ্যান্ডলারকে ট্রিগার করতে দেয়। changePaymentMethod() একটি প্রতিশ্রুতি প্রদান করে যা আপডেট করা মূল্য তথ্যের সাথে একটি বণিক প্রতিক্রিয়ার সমাধান করে (যেমন, ট্যাক্স পুনঃগণনা)।
PaymentRequestEvent.changePaymentMethod() এবং paymentmethodchange ইভেন্ট উভয়ই Chrome 76-এ উপলব্ধ এবং Webkit এর প্রযুক্তিগত প্রিভিউতে paymentmethodchange ইভেন্টটি প্রয়োগ করেছে।
// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
if (evt.changePaymentMethod === undefined) {
// Not implemented in this version of Chrome.
return;
}
// Notify merchant that the user selected a different payment method.
evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
.then((responseFromMerchant) => {
if (responseFromMerchant === null) {
// Merchant ignored the 'paymentmethodchange' event.
return;
}
handleResponseFromMerchant(responseFromMerchant);
})
.catch((error) => {
handleError(error);
});
}));
});
বণিক উদাহরণ:
if (request.onpaymentmethodchange === undefined) {
// Feature not available in this browser.
return;
}
request.addEventListener('paymentmethodchange', (evt) => {
evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});
উন্নত স্থানীয় উন্নয়ন
Chrome 76 ডেভেলপার উৎপাদনশীলতার জন্য দুটি ছোট উন্নতি যোগ করে। যদি আপনার স্থানীয় উন্নয়ন পরিবেশ একটি স্ব-স্বাক্ষরিত শংসাপত্র ব্যবহার করে, তাহলে আপনি এখন --ignore-certificate-errors কমান্ড লাইন পতাকা ব্যবহার করতে পারেন যাতে Chrome আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে ওয়েব পেমেন্ট API-কে অনুমতি দেয়। আপনি যদি একটি স্থানীয় ওয়েব সার্ভার ব্যবহার করে বিকাশ করেন যা HTTPS সমর্থন করে না, তাহলে আপনি --unsafely-treat-insecure-origin-as-secure=<origin> পতাকা ব্যবহার করে Chrome-কে HTTP-এর উৎপত্তিকে HTTPS হিসাবে ব্যবহার করতে পারেন।