কীভাবে আপনার ওয়েব-ভিত্তিক অর্থপ্রদানের অ্যাপকে ওয়েব পেমেন্টের সাথে মানিয়ে নেওয়া যায় এবং গ্রাহকদের জন্য আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করা যায়।
একবার একটি ওয়েব-ভিত্তিক অর্থপ্রদান অ্যাপ একটি অর্থপ্রদানের অনুরোধ গ্রহণ করে এবং একটি অর্থপ্রদানের লেনদেন শুরু করলে , পরিষেবা কর্মী বণিক এবং অর্থপ্রদান অ্যাপের মধ্যে যোগাযোগের কেন্দ্র হিসাবে কাজ করবে। এই পোস্টটি ব্যাখ্যা করে যে কীভাবে একটি পেমেন্ট অ্যাপ পেমেন্ট পদ্ধতি, শিপিং ঠিকানা, বা পরিষেবা কর্মী ব্যবহার করে বণিকের কাছে যোগাযোগের তথ্য সম্পর্কে তথ্য পাঠাতে পারে।
পেমেন্ট পদ্ধতি পরিবর্তনের বিষয়ে বণিককে জানান
অর্থপ্রদান অ্যাপ্লিকেশনগুলি বিভিন্ন অর্থপ্রদানের পদ্ধতি সহ একাধিক অর্থপ্রদান যন্ত্র সমর্থন করতে পারে।
| ক্রেতা | মূল্যপরিশোধ পদ্ধতি | পেমেন্ট ইনস্ট্রুমেন্ট |
|---|---|---|
| ক | ক্রেডিট কার্ড প্রদানকারী ১ | ****1234 |
| ক্রেডিট কার্ড প্রদানকারী ১ | ****4242 | |
| ব্যাঙ্ক এক্স | ******123 | |
| খ | ক্রেডিট কার্ড প্রদানকারী 2 | ****5678 |
| ব্যাঙ্ক এক্স | ******456 |
উদাহরণস্বরূপ, উপরের সারণীতে, গ্রাহক A এর ওয়েব-ভিত্তিক ওয়ালেটে দুটি ক্রেডিট কার্ড এবং একটি ব্যাঙ্ক অ্যাকাউন্ট নিবন্ধিত রয়েছে৷ এই ক্ষেত্রে, অ্যাপটি তিনটি পেমেন্ট ইনস্ট্রুমেন্ট ( ****1234 , ****4242 , ******123 ) এবং দুটি পেমেন্ট পদ্ধতি (ক্রেডিট কার্ড ইস্যুয়ার 1 এবং ব্যাঙ্ক এক্স) পরিচালনা করছে। একটি অর্থপ্রদানের লেনদেনে, অর্থপ্রদানের অ্যাপটি গ্রাহককে অর্থপ্রদানের উপকরণগুলির মধ্যে একটি বেছে নিতে এবং বণিকের জন্য অর্থ প্রদানের জন্য ব্যবহার করতে দিতে পারে।
পেমেন্ট অ্যাপটি বণিককে জানাতে পারে যে গ্রাহক সম্পূর্ণ অর্থপ্রদানের প্রতিক্রিয়া পাঠানোর আগে কোন পেমেন্ট পদ্ধতি বেছে নিয়েছেন। যখন বণিক একটি নির্দিষ্ট পেমেন্ট পদ্ধতি ব্র্যান্ডের জন্য একটি ডিসকাউন্ট প্রচার চালাতে চায়, উদাহরণস্বরূপ এটি কার্যকর।
পেমেন্ট হ্যান্ডলার API-এর মাধ্যমে, পেমেন্ট অ্যাপ নতুন পেমেন্ট পদ্ধতি শনাক্তকারীকে অবহিত করার জন্য একজন পরিষেবা কর্মীর মাধ্যমে বণিককে একটি "পেমেন্ট পদ্ধতি পরিবর্তন" ইভেন্ট পাঠাতে পারে। পরিষেবা কর্মীকে নতুন অর্থপ্রদান পদ্ধতির তথ্য সহ PaymentRequestEvent.changePaymentMethod() ডাকতে হবে।
পেমেন্ট অ্যাপগুলি PaymentRequestEvent.changePaymentMethod() এর জন্য ঐচ্ছিক দ্বিতীয় আর্গুমেন্ট হিসাবে একটি methodDetails অবজেক্ট পাস করতে পারে। পরিবর্তন ইভেন্ট প্রক্রিয়া করার জন্য বণিকের জন্য প্রয়োজনীয় অর্থপ্রদানের পদ্ধতির বিবরণ এই বস্তুটিতে থাকতে পারে।
[পেমেন্ট হ্যান্ডলার] 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);
…
যখন বণিক পেমেন্ট অনুরোধ API থেকে একটি paymentmethodchange ইভেন্ট পায়, তখন তারা পেমেন্টের বিশদ আপডেট করতে পারে এবং একটি PaymentDetailsUpdate অবজেক্টের সাথে প্রতিক্রিয়া জানাতে পারে।
[বণিক]
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 অবজেক্টের মাধ্যমে সমাধান করা হবে।
[পেমেন্ট হ্যান্ডলার] 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() ডাকতে হবে।
[পেমেন্ট হ্যান্ডলার] 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);
…
বণিক পেমেন্ট অনুরোধ API থেকে একটি shippingaddresschange ইভেন্ট পাবেন যাতে তারা আপডেট করা PaymentDetailsUpdate এর সাথে প্রতিক্রিয়া জানাতে পারে।
[বণিক]
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 অবজেক্টের সাথে সমাধান হবে।
[পেমেন্ট হ্যান্ডলার] 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 এর সম্পত্তি হিসেবে প্রচার করা হয়।
[বণিক]
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 });
পেমেন্ট অ্যাপটি বণিককে জানাতে পারে যে গ্রাহক কোন শিপিং বিকল্পটি বেছে নিয়েছেন। এটি বণিক এবং গ্রাহক উভয়ের জন্যই গুরুত্বপূর্ণ কারণ শিপিং বিকল্প পরিবর্তন করলে মোট মূল্যও পরিবর্তন হয়। বণিককে পরবর্তীতে পেমেন্ট যাচাইয়ের জন্য সর্বশেষ মূল্য সম্পর্কে অবহিত করতে হবে এবং গ্রাহককেও পরিবর্তন সম্পর্কে সচেতন হতে হবে।
পেমেন্ট হ্যান্ডলার API এর সাথে, পেমেন্ট অ্যাপটি পরিষেবা কর্মী থেকে বণিকের কাছে একটি "শিপিং বিকল্প পরিবর্তন" ইভেন্ট পাঠাতে পারে। পরিষেবা কর্মীকে নতুন শিপিং বিকল্প আইডি সহ PaymentRequestEvent.changeShippingOption() ডাকতে হবে।
[পেমেন্ট হ্যান্ডলার] 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);
…
বণিক পেমেন্ট অনুরোধ API থেকে একটি shippingoptionchange ইভেন্ট পাবেন। মোট মূল্য আপডেট করতে বণিকের তথ্য ব্যবহার করা উচিত এবং তারপর আপডেট করা PaymentDetailsUpdate এর সাথে প্রতিক্রিয়া জানাতে হবে।
[বণিক]
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 অবজেক্টের মাধ্যমে সমাধান করা হবে।
[পেমেন্ট হ্যান্ডলার] 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: পেমেন্ট-পদ্ধতি-নির্দিষ্ট ত্রুটি বস্তু। আপনি বণিকদের একটি কাঠামোগত ত্রুটি প্রদান করতে বলতে পারেন, কিন্তু ওয়েব পেমেন্ট স্পেক লেখকরা এটিকে একটি সাধারণ স্ট্রিং রাখার পরামর্শ দেন।
কোডের উদাহরণ
এই নথিতে আপনি যে নমুনা কোডগুলি দেখেছেন তার বেশিরভাগই নিম্নলিখিত কাজের নমুনা অ্যাপ থেকে উদ্ধৃত ছিল:
https://paymenthandler-demo.glitch.me
[পেমেন্ট হ্যান্ডলার] পরিষেবা কর্মী
[পেমেন্ট হ্যান্ডলার] ফ্রন্টএন্ড
এটি চেষ্টা করার জন্য:
- https://paymentrequest-demo.glitch.me/ এ যান।
- পৃষ্ঠার নীচে যান।
- একটি পেমেন্ট যোগ করুন বোতাম টিপুন।
- পেমেন্ট মেথড আইডেন্টিফায়ার ফিল্ডে
https://paymenthandler-demo.glitch.meলিখুন। - ক্ষেত্রের পাশে পে বোতাম টিপুন।