কীভাবে আপনার ওয়েব-ভিত্তিক পেমেন্ট অ্যাপকে ওয়েব পেমেন্টের সাথে মানানসই করে তুলবেন এবং গ্রাহকদের আরও ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করবেন।
ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ পেমেন্টের অনুরোধ পাওয়ার পরে পেমেন্ট ট্রানজ্যাকশন শুরু করলে, মার্চেন্ট ও পেমেন্ট অ্যাপের মধ্যে যোগাযোগের হাব হিসেবে সার্ভিস ওয়ার্কার কাজ করবে। এই পোস্টে ব্যাখ্যা করা হয়েছে যে কীভাবে সার্ভিস ওয়ার্কার ব্যবহার করে পেমেন্ট অ্যাপ মার্চেন্টকে পেমেন্ট পদ্ধতি, শিপিং অ্যাড্রেস বা যোগাযোগের তথ্য পাঠাতে পারে।
মার্চেন্টকে জানান
নিম্নলিখিত পরিবর্তনগুলি সম্পর্কে মার্চেন্টকে জানানো গুরুত্বপূর্ণ।
পেমেন্ট পদ্ধতি পরিবর্তন
পেমেন্ট অ্যাপে বিভিন্ন পেমেন্ট পদ্ধতির মাধ্যমে একাধিক পেমেন্ট ইনস্ট্রুমেন্ট ব্যবহার করা যেতে পারে।
| গ্রাহক | পেমেন্টের পদ্ধতি | পেমেন্ট পদ্ধতি |
|---|---|---|
| A | ক্রেডিট কার্ড ইস্যুকারী ১ | ****1234 |
| ক্রেডিট কার্ড ইস্যুকারী ১ | ****4242 |
|
| ব্যাঙ্ক X | ******123 |
|
| B | ক্রেডিট কার্ড ইস্যুকারী ২ | ****5678 |
| ব্যাঙ্ক X | ******456 |
যেমন, উপরের সারণীতে, গ্রাহক ক-এর ওয়েব-ভিত্তিক ওয়ালেটে দুটি ক্রেডিট কার্ড এবং একটি ব্যাঙ্ক অ্যাকাউন্ট রেজিস্টার করা আছে। এই ক্ষেত্রে, অ্যাপটি তিনটি পেমেন্ট ইনস্ট্রুমেন্ট (****1234, ****4242, ******123) এবং দুটি পেমেন্ট পদ্ধতি (ক্রেডিট কার্ড ইস্যুকারী ১ এবং ব্যাঙ্ক X) ম্যানেজ করছে। পেমেন্ট ট্রানজ্যাকশনের সময়, পেমেন্ট অ্যাপ গ্রাহককে কোনও একটি পেমেন্ট পদ্ধতি বেছে নিতে এবং মার্চেন্টকে পেমেন্ট করার জন্য সেটি ব্যবহার করতে দিতে পারে।
পেমেন্ট অ্যাপ মার্চেন্টকে জানাতে পারে যে সম্পূর্ণ পেমেন্ট রেসপন্স পাঠানোর আগে গ্রাহক কোন পেমেন্ট পদ্ধতি বেছে নিয়েছেন। এটি তখন কাজে লাগে যখন মার্চেন্ট কোনও নির্দিষ্ট পেমেন্ট পদ্ধতি ব্র্যান্ডের জন্য ডিসকাউন্ট ক্যাম্পেন চালাতে চান, যেমন।
ওয়েব-ভিত্তিক পেমেন্ট হ্যান্ডলার API-এর মাধ্যমে, পেমেন্ট অ্যাপ, নতুন পেমেন্ট পদ্ধতি শনাক্তকারীকে বিজ্ঞপ্তি দিতে, সার্ভিস ওয়ার্কারের মাধ্যমে মার্চেন্টকে "পেমেন্ট পদ্ধতি পরিবর্তন"
ইভেন্ট পাঠাতে পারে। নতুন পেমেন্ট পদ্ধতির তথ্য সহ সার্ভিস ওয়ার্কারের
PaymentRequestEvent.changePaymentMethod()
ইনভোক করা উচিত।
পেমেন্ট অ্যাপ PaymentRequestEvent.changePaymentMethod()-এর জন্য ঐচ্ছিক দ্বিতীয় আর্গুমেন্ট হিসেবে methodDetails অবজেক্ট পাস করতে পারে। এই অবজেক্টে
মার্চেন্টের ইভেন্ট পরিবর্তন প্রসেস করার জন্য প্রয়োজনীয় পেমেন্ট পদ্ধতির বিবরণ
থাকতে পারে।
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_METHOD_CHANGED':
const newMethod = e.data.paymentMethod;
const newDetails = e.data.methodDetails;
// Redact or check that no sensitive information is passed in
// `newDetails`.
// Notify the merchant of the payment method change
details =
await payment_request_event.changePaymentMethod(newMethod, newDetails);
…
মার্চেন্ট Payment Request API থেকে paymentmethodchange ইভেন্ট পেলে, তিনি পেমেন্টের বিবরণ আপডেট করতে এবং PaymentDetailsUpdate অবজেক্টের মাধ্যমে উত্তর দিতে পারবেন।
[merchant]
request.addEventListener('paymentmethodchange', e => {
if (e.methodName === 'another-pay') {
// Apply $10 discount for example.
const discount = {
label: 'special discount',
amount: {
currency: 'USD',
// The value being string complies the spec
value: '-10.00'
}
};
let total = 0;
details.displayItems.push(discount);
for (let item of details.displayItems) {
total += parseFloat(item.amount.value);
}
// Convert the number back to string
details.total.amount.value = total.toString();
}
// Pass a promise to `updateWith()` and send updated payment details
e.updateWith(details);
});
মার্চেন্ট উত্তর দিলে,
PaymentRequestEvent.changePaymentMethod()
যে প্রমিস রিটার্ন করেছে তা
PaymentRequestDetailsUpdate
অবজেক্টের মাধ্যমে সমাধান করা হবে।
[payment handler] service-worker.js
…
// Notify the merchant of the payment method change
details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
ফ্রন্টএন্ডে UI আপডেট করতে অবজেক্ট ব্যবহার করুন। আপডেট করা পেমেন্টের বিবরণ দেখুন।
শিপিং অ্যাড্রেস পরিবর্তন
পেমেন্ট অ্যাপ, পেমেন্ট ট্রানজ্যাকশনের অংশ হিসেবে মার্চেন্টকে গ্রাহকের শিপিং অ্যাড্রেস প্রদান করতে পারে।
এটি মার্চেন্টদের জন্য উপযোগী কারণ তারা ঠিকানা সংগ্রহের কাজ পেমেন্ট অ্যাপকে অর্পণ করতে পারেন। এবং, যেহেতু ঠিকানার ডেটা স্ট্যান্ডার্ড ডেটা ফর্ম্যাটে প্রদান করা হবে, মার্চেন্ট আশা করতে পারেন যে শিপিং অ্যাড্রেস একই ধরনের স্ট্রাকচারে পাবেন।
এছাড়াও, গ্রাহকরা তাদের পছন্দের পেমেন্ট অ্যাপে তাদের ঠিকানা সংক্রান্ত তথ্য রেজিস্টার করতে এবং বিভিন্ন মার্চেন্টের জন্য এটি আবার ব্যবহার করতে পারবেন।
পেমেন্ট অ্যাপ, পেমেন্ট ট্রানজ্যাকশনের সময় গ্রাহকের জন্য শিপিং অ্যাড্রেস এডিট করতে বা আগে থেকে রেজিস্টার করা অ্যাড্রেস সংক্রান্ত তথ্য বেছে নিতে UI প্রদান করতে পারে। শিপিং অ্যাড্রেস সাময়িকভাবে নির্ধারণ করা হলে, পেমেন্ট অ্যাপ মার্চেন্টকে এডিট করা অ্যাড্রেস সংক্রান্ত তথ্য জানাতে পারে। এটি মার্চেন্টদের একাধিক সুবিধা প্রদান করে:
- আইটেম শিপ করার জন্য গ্রাহক আঞ্চলিক বিধিনিষেধ মেনে চলছেন কিনা তা মার্চেন্ট নির্ধারণ করতে পারেন (যেমন, শুধু দেশীয়)।
- শিপিং অ্যাড্রেসের অঞ্চলের উপর ভিত্তি করে মার্চেন্ট শিপিং বিকল্পের তালিকা পরিবর্তন করতে পারেন (যেমন, আন্তর্জাতিক রেগুলার বা এক্সপ্রেস)।
- ঠিকানার উপর ভিত্তি করে মার্চেন্ট নতুন শিপিং কস্ট প্রয়োগ করতে এবং মোট দাম আপডেট করতে পারেন।
ওয়েব-ভিত্তিক পেমেন্ট হ্যান্ডলার API-এর মাধ্যমে, পেমেন্ট অ্যাপটি সার্ভিস ওয়ার্কার থেকে মার্চেন্টকে "শিপিং অ্যাড্রেস
পরিবর্তন" ইভেন্ট পাঠাতে পারে যাতে নতুন শিপিং
অ্যাড্রেস সম্পর্কে জানানো যায়। সার্ভিস ওয়ার্কারকে
নতুন ঠিকানা
অবজেক্ট সহ PaymentRequestEvent.changeShippingAddress()
ইনভোক করতে হবে।
[payment handler] service-worker.js
...
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_ADDRESS_CHANGED':
const newAddress = e.data.shippingAddress;
details =
await payment_request_event.changeShippingAddress(newAddress);
…
মূল শব্দ: এডিট করা ঠিকানা। এই ক্ষেত্রে মার্চেন্টকে সম্পূর্ণ শিপিং অ্যাড্রেস জানানোর প্রয়োজন নেই এবং এটি গ্রাহকের গোপনীয়তার ক্ষেত্রে ঝুঁকি তৈরি করে। শিপিং খরচ নির্ধারণ করার জন্য মার্চেন্টকে ঠিকানার শুধু সেই অংশটিই পাঠানো হয় যা তার প্রয়োজন। বিশেষ করে, মার্চেন্টের DOM-এ shippingaddresschange ইভেন্ট তোলার আগে, পেমেন্ট অ্যাপের দেওয়া ঠিকানা থেকে ব্রাউজার organization, phone, recipient, addressLine ফিল্ড মুছে দেবে।
মার্চেন্ট Payment Request API থেকে shippingaddresschange ইভেন্ট পাবেন যাতে তারা আপডেট করা PaymentDetailsUpdate-এর সাথে উত্তর দিতে পারেন।
[merchant]
request.addEventListener('shippingaddresschange', e => {
// Read the updated shipping address and update the request.
const addr = request.shippingAddress;
const details = getPaymentDetailsFromShippingAddress(addr);
// `updateWith()` sends back updated payment details
e.updateWith(details);
});
মার্চেন্ট উত্তর দিলে, ফেরত আসা
PaymentRequestEvent.changeShippingAddress()
প্রমিস
PaymentRequestDetailsUpdate
অবজেক্টের মাধ্যমে সমাধান করা হবে।
[payment handler] service-worker.js
…
// Notify the merchant of the shipping address change
details = await payment_request_event.changeShippingAddress(newAddress);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
ফ্রন্টএন্ডে UI আপডেট করতে অবজেক্ট ব্যবহার করুন। আপডেট করা পেমেন্টের বিবরণ দেখুন।
শিপিং বিকল্পে পরিবর্তন সম্পর্কে মার্চেন্টকে জানান
শিপিংয়ের বিকল্প হল ডেলিভারির পদ্ধতি যা মার্চেন্টরা গ্রাহকদের কেনা আইটেম শিপ করার জন্য ব্যবহার করেন। সাধারণ শিপিং বিকল্পের মধ্যে এগুলি পড়ে:
- ফ্রি শিপিং
- এক্সপ্রেস শিপিং
- আন্তর্জাতিক শিপিং
- প্রিমিয়াম আন্তর্জাতিক শিপিং
প্রত্যেকটির জন্য আলাদা খরচ করতে হয়। সাধারণত দ্রুত পদ্ধতি ও বিকল্পের খরচ বেশি হয়।
পেমেন্ট অনুরোধ API ব্যবহারকারী মার্চেন্টরা এই নির্বাচন কোনও পেমেন্ট অ্যাপে ডেলিগেট করতে পারেন। পেমেন্ট অ্যাপটি UI তৈরি করতে এবং গ্রাহককে শিপিং বিকল্প বেছে নিতে দেওয়ার জন্য তথ্য ব্যবহার করতে পারে।
মার্চেন্টের পেমেন্ট অনুরোধ API-তে উল্লেখ করা শিপিং বিকল্পের তালিকা
পেমেন্ট অ্যাপের সার্ভিস ওয়ার্কারের কাছে PaymentRequestEvent-এর প্রপার্টি হিসেবে
প্রেরণ করা হয়।
[merchant]
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay',
data: { transactionId: '****' }
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
shippingOptions: [{
id: 'standard',
label: 'Standard',
amount: { value: '0.00', currency: 'USD' },
selected: true
}, {
id: 'express',
label: 'Express',
amount: { value: '5.00', currency: 'USD' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, { requestShipping: true });
গ্রাহক কোন শিপিং বিকল্প বেছে নিয়েছেন তা পেমেন্ট অ্যাপ মার্চেন্টকে জানাতে পারে। এটি মার্চেন্ট ও গ্রাহক উভয়ের জন্যই গুরুত্বপূর্ণ কারণ শিপিংয়ের বিকল্প পরিবর্তন করলে মোট দামও পরিবর্তিত হয়। পরে পেমেন্ট যাচাইকরণের জন্য মার্চেন্টকে লেটেস্ট দাম সম্পর্কে জানাতে হবে এবং গ্রাহককেও এই পরিবর্তনের ব্যাপারে সচেতন হতে হবে।
Payment Handler API-এর মাধ্যমে, পেমেন্ট অ্যাপটি সার্ভিস ওয়ার্কার থেকে মার্চেন্টকে "শিপিং বিকল্প
পরিবর্তন" ইভেন্ট পাঠাতে পারে। সার্ভিস ওয়ার্কারকে
নতুন শিপিং বিকল্প আইডির সাথে
PaymentRequestEvent.changeShippingOption()
ইনভোক করতে হবে।
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_OPTION_CHANGED':
const newOption = e.data.shippingOptionId;
details =
await payment_request_event.changeShippingOption(newOption);
…
মার্চেন্ট, Payment Request API থেকে shippingoptionchange ইভেন্ট
পাবেন। মার্চেন্টকে মোট দাম আপডেট করার জন্য তথ্য ব্যবহার করতে হবে
এবং তারপর আপডেট করা
PaymentDetailsUpdate-এর সাথে উত্তর দিতে হবে।
[merchant]
request.addEventListener('shippingoptionchange', e => {
// selected shipping option
const shippingOption = request.shippingOption;
const newTotal = {
currency: 'USD',
label: 'Total due',
value: calculateNewTotal(shippingOption),
};
// `updateWith()` sends back updated payment details
e.updateWith({ total: newTotal });
});
মার্চেন্ট উত্তর দিলে,
PaymentRequestEvent.changeShippingOption()
যে প্রমিস রিটার্ন করেছে তা
PaymentRequestDetailsUpdate
অবজেক্টের মাধ্যমে সমাধান করা হবে।
[payment handler] service-worker.js
…
// Notify the merchant of the shipping option change
details = await payment_request_event.changeShippingOption(newOption);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
ফ্রন্টএন্ডে UI আপডেট করতে অবজেক্ট ব্যবহার করুন। আপডেট করা পেমেন্টের বিবরণ দেখুন।
আপডেট করা পেমেন্টের বিবরণ দেখানো
মার্চেন্ট পেমেন্টের বিবরণ আপডেট করা সম্পূর্ণ করলে, .changePaymentMethod(), .changeShippingAddress() এবং
.changeShippingOption() থেকে রিটার্ন করা প্রমিস
একটি সাধারণ
PaymentRequestDetailsUpdate
অবজেক্টের মাধ্যমে সমাধান করা হবে। পেমেন্ট হ্যান্ডলার, UI-তে আপডেট করা মোট দাম ও শিপিং বিকল্প দেখাতে
ফলাফল ব্যবহার করতে পারে।
মার্চেন্টরা কিছু কারণে সমস্যা দেখাতে পারে:
- এই পেমেন্ট পদ্ধতি গ্রহণযোগ্য নয়।
- শিপিং অ্যাড্রেসটি তাদের কাজ করে এমন অঞ্চলের বাইরে।
- শিপিং অ্যাড্রেসে ভুল তথ্য আছে।
- প্রদান করা শিপিং অ্যাড্রেসের জন্য শিপিং বিকল্প বেছে নেওয়া যাচ্ছে না অথবা অন্য কোনও কারণ আছে।
সমস্যার স্ট্যাটাস দেখাতে নিম্নলিখিত প্রপার্টি ব্যবহার করুন:
error: মানুষের-পঠনযোগ্য সমস্যার স্ট্রিং। গ্রাহকদের দেখানোর জন্য এটিই সবচেয়ে ভালো স্ট্রিং।shippingAddressErrors:AddressErrorsঅবজেক্ট যাতে প্রতিটি অ্যাড্রেস প্রপার্টি অনুযায়ী বিস্তারিত ত্রুটি স্ট্রিং থাকে। এটি তখনই উপযোগী যখন আপনি এমন একটি ফর্ম খুলতে চান যা গ্রাহককে তার ঠিকানা এডিট করতে দেয় এবং আপনাকে সরাসরি ভুল ফিল্ডে তাদের নির্দেশ করতে হবে।paymentMethodErrors: পেমেন্ট-পদ্ধতি-নির্দিষ্ট ত্রুটি অবজেক্ট। আপনি মার্চেন্টদের একটি স্ট্রাকচার্ড সমস্যা প্রদান করতে বলতে পারেন, তবে ওয়েব পেমেন্ট স্পেক লেখকরা এটি একটি সাধারণ স্ট্রিং হিসেবে রাখার পরামর্শ দেন।