কীভাবে ব্যবসায়ীরা অর্থপ্রদানের অ্যাপ্লিকেশনগুলিকে সংহত করে এবং কীভাবে অর্থপ্রদানের অনুরোধ API এর সাথে অর্থ লেনদেন কাজ করে তা জানুন৷
ওয়েব পেমেন্ট এপিআই হল ডেডিকেটেড পেমেন্ট ফিচার যা প্রথমবারের মতো ব্রাউজারে তৈরি করা হয়েছে। ওয়েব পেমেন্টের সাথে, পেমেন্ট অ্যাপের সাথে বণিক ইন্টিগ্রেশন সহজ হয়ে যায় যখন গ্রাহকের অভিজ্ঞতা স্ট্রিমলাইন এবং আরও নিরাপদ হয়।
ওয়েব পেমেন্টস ব্যবহার করার সুবিধা সম্পর্কে আরও জানতে ওয়েব পেমেন্টের মাধ্যমে অর্থপ্রদানের অ্যাপের ক্ষমতায়ন দেখুন।
এই নিবন্ধটি আপনাকে একটি বণিক ওয়েবসাইটে একটি অর্থপ্রদানের লেনদেনের মাধ্যমে নিয়ে যায় এবং আপনাকে অর্থপ্রদানের অ্যাপ ইন্টিগ্রেশন কীভাবে কাজ করে তা বুঝতে সাহায্য করে।
প্রক্রিয়াটিতে 6টি ধাপ রয়েছে:
- বণিক একটি অর্থপ্রদানের লেনদেন শুরু করে৷
- বণিক একটি পেমেন্ট বোতাম দেখায়।
গ্রাহক পেমেন্ট বোতাম টিপুন।
ব্রাউজার পেমেন্ট অ্যাপ চালু করে।
যদি গ্রাহক কোন বিবরণ (যেমন শিপিং বিকল্প বা তাদের ঠিকানা) পরিবর্তন করেন, তবে বণিক পরিবর্তন প্রতিফলিত করে লেনদেনের বিবরণ আপডেট করে।
গ্রাহক ক্রয় নিশ্চিত করার পরে, বণিক অর্থপ্রদান যাচাই করে এবং লেনদেন সম্পূর্ণ করে।
ধাপ 1: বণিক একটি অর্থপ্রদানের লেনদেন শুরু করে
যখন একজন গ্রাহক কেনাকাটা করার সিদ্ধান্ত নেন, তখন বণিক একটি PaymentRequest অবজেক্ট তৈরি করে অর্থপ্রদানের লেনদেন শুরু করে। এই বস্তুটি লেনদেন সম্পর্কে গুরুত্বপূর্ণ তথ্য অন্তর্ভুক্ত করে:
- লেনদেন প্রক্রিয়া করার জন্য গ্রহণযোগ্য অর্থপ্রদানের পদ্ধতি এবং তাদের ডেটা।
- বিশদ বিবরণ, যেমন মোট মূল্য (প্রয়োজনীয়) এবং আইটেম সম্পর্কে তথ্য।
- যে বিকল্পগুলিতে ব্যবসায়ীরা শিপিং তথ্যের অনুরোধ করতে পারে যেমন একটি শিপিং ঠিকানা এবং একটি শিপিং বিকল্প৷
- ব্যবসায়ীরা বিলিং ঠিকানা, প্রদানকারীর নাম, ইমেল এবং ফোন নম্বরের জন্যও অনুরোধ করতে পারেন।
- ব্যবসায়ীরা
PaymentRequestঐচ্ছিক শিপিং টাইপ (shipping,deliveryবাpickup) অন্তর্ভুক্ত করতে পারেন। পেমেন্ট অ্যাপটি তার UI-তে সঠিক লেবেলগুলি প্রদর্শন করতে ইঙ্গিত হিসাবে এটি ব্যবহার করতে পারে।
const request = new PaymentRequest([{
supportedMethods: 'https://bobpay.xyz/pay',
data: {
transactionId: '****'
}
}], {
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' }
}
}, {
requestShipping: true,
requestBillingAddress: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestPayerName: true,
shippingType: 'delivery'
});
কিছু পেমেন্ট হ্যান্ডলারের জন্য বণিককে লেনদেন আইডি প্রদান করতে হতে পারে যা তারা লেনদেনের তথ্যের অংশ হিসাবে অগ্রিম জারি করেছে। একটি সাধারণ ইন্টিগ্রেশনে মোট মূল্য সংরক্ষিত করার জন্য মার্চেন্ট এবং পেমেন্ট হ্যান্ডলারের সার্ভারের মধ্যে যোগাযোগ অন্তর্ভুক্ত থাকে। এটি দূষিত গ্রাহকদের মূল্য পরিবর্তন করা এবং লেনদেনের শেষে একটি বৈধতা দিয়ে বণিককে প্রতারণা করা থেকে বাধা দেয়।
বণিক PaymentMethodData অবজেক্টের data সম্পত্তির অংশ হিসাবে একটি লেনদেন আইডি পাস করতে পারে।
লেনদেনের তথ্য প্রদান করে, ব্রাউজার পেমেন্ট পদ্ধতি শনাক্তকারীর উপর ভিত্তি করে PaymentRequest এ নির্দিষ্ট করা পেমেন্ট অ্যাপগুলির একটি আবিষ্কার প্রক্রিয়ার মধ্য দিয়ে যায়। এইভাবে, বণিক লেনদেনের সাথে এগিয়ে যাওয়ার জন্য প্রস্তুত হওয়ার সাথে সাথে ব্রাউজার পেমেন্ট অ্যাপটি চালু করার জন্য নির্ধারণ করতে পারে।
কিভাবে আবিষ্কার প্রক্রিয়া বিস্তারিতভাবে কাজ করে তা জানতে একটি অর্থপ্রদানের পদ্ধতি সেট আপ করা দেখুন।
ধাপ 2: বণিক একটি পেমেন্ট বোতাম দেখায়
ব্যবসায়ীরা অনেক অর্থপ্রদানের পদ্ধতি সমর্থন করতে পারে, কিন্তু শুধুমাত্র সেইগুলির জন্য অর্থপ্রদানের বোতামগুলি উপস্থাপন করা উচিত যা একজন গ্রাহক আসলে ব্যবহার করতে পারে। অব্যবহারযোগ্য একটি পেমেন্ট বোতাম দেখানো খারাপ ব্যবহারকারীর অভিজ্ঞতা। যদি একজন বণিক ভবিষ্যদ্বাণী করতে পারেন যে PaymentRequest অবজেক্টে নির্দিষ্ট করা একটি অর্থপ্রদানের পদ্ধতি গ্রাহকের জন্য কাজ করবে না, তাহলে তারা একটি ফলব্যাক সমাধান প্রদান করতে পারে বা সেই বোতামটি একেবারেই দেখাতে পারে না।
একটি PaymentRequest উদাহরণ ব্যবহার করে, একজন বণিক জিজ্ঞাসা করতে পারেন যে একজন গ্রাহকের কাছে অর্থপ্রদানের অ্যাপ উপলব্ধ আছে কিনা।
গ্রাহকের কি পেমেন্ট অ্যাপ পাওয়া যায়?
গ্রাহকের ডিভাইসে পেমেন্ট অ্যাপ উপলব্ধ থাকলে PaymentRequest এর canMakePayment() পদ্ধতিটি true হয়ে ওঠে। "উপলব্ধ" এর অর্থ হল পেমেন্ট পদ্ধতি সমর্থন করে এমন একটি পেমেন্ট অ্যাপ আবিষ্কৃত হয়েছে, এবং প্ল্যাটফর্ম-নির্দিষ্ট পেমেন্ট অ্যাপ ইনস্টল করা হয়েছে, অথবা ওয়েব-ভিত্তিক অর্থপ্রদান অ্যাপ নিবন্ধিত হওয়ার জন্য প্রস্তুত ।
const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
// Fallback to other means of payment or hide the button.
}
ধাপ 3: গ্রাহক পেমেন্ট বোতাম টিপুন
যখন গ্রাহক পেমেন্ট বোতাম টিপে, মার্চেন্ট PaymentRequest ইনস্ট্যান্সের show() পদ্ধতিতে কল করে যা অবিলম্বে পেমেন্ট UI চালু করে।
যদি চূড়ান্ত মোট মূল্য গতিশীলভাবে সেট করা হয় (উদাহরণস্বরূপ, একটি সার্ভার থেকে পুনরুদ্ধার করা হয়), মোট মূল্য জানা না হওয়া পর্যন্ত বণিক পেমেন্ট UI চালু করা পিছিয়ে দিতে পারেন।
পেমেন্ট UI চালু করা পিছিয়ে দেওয়া হচ্ছে
চূড়ান্ত মোট মূল্য নির্ধারণ না হওয়া পর্যন্ত পেমেন্ট UI স্থগিত করার একটি ডেমো দেখুন।
পেমেন্ট UI পিছিয়ে দিতে, বণিক show() পদ্ধতিতে একটি প্রতিশ্রুতি দেয়। প্রতিশ্রুতি সমাধান না হওয়া পর্যন্ত এবং লেনদেন শুরু করার জন্য প্রস্তুত না হওয়া পর্যন্ত ব্রাউজার একটি লোডিং সূচক দেখাবে।
const getTotalAmount = async () => {
// Fetch the total amount from the server, etc.
};
try {
const result = await request.show(getTotalAmount());
// Process the result…
} catch(e) {
handleError(e);
}
show() এর জন্য যুক্তি হিসাবে নির্দিষ্ট কোন প্রতিশ্রুতি না থাকলে, ব্রাউজার অবিলম্বে পেমেন্ট UI চালু করবে।
ধাপ 4: ব্রাউজার পেমেন্ট অ্যাপ চালু করে
ব্রাউজারটি একটি প্ল্যাটফর্ম-নির্দিষ্ট বা একটি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ চালু করতে পারে। ( কোন পেমেন্ট অ্যাপ চালু করতে হবে তা Chrome কীভাবে নির্ধারণ করে সে সম্পর্কে আপনি আরও জানতে পারেন।)
পেমেন্ট অ্যাপটি কীভাবে তৈরি করা হয় তা বেশিরভাগ ক্ষেত্রেই ডেভেলপারের উপর নির্ভর করে, তবে মার্চেন্টের কাছ থেকে এবং তার কাছে নির্গত ইভেন্টগুলি, সেইসাথে সেই ইভেন্টগুলির সাথে পাস করা ডেটার গঠন প্রমিত।
পেমেন্ট অ্যাপ চালু হলে, এটি ধাপ 1-এ PaymentRequest অবজেক্টে পাঠানো লেনদেনের তথ্য পায়, যার মধ্যে নিম্নলিখিতগুলি রয়েছে:
- পেমেন্ট পদ্ধতি ডেটা
- মোট দাম
- পেমেন্ট অপশন
পেমেন্ট অ্যাপটি তার UI লেবেল করতে লেনদেনের তথ্য ব্যবহার করে।
ধাপ 5: একজন বণিক কীভাবে গ্রাহকের কর্মের উপর নির্ভর করে লেনদেনের বিবরণ আপডেট করতে পারে
গ্রাহকদের কাছে পেমেন্ট অ্যাপে অর্থপ্রদানের পদ্ধতি এবং শিপিং বিকল্পের মতো লেনদেনের বিবরণ পরিবর্তন করার একটি বিকল্প রয়েছে। গ্রাহক পরিবর্তন করার সময়, বণিক পরিবর্তন ইভেন্টগুলি গ্রহণ করে এবং লেনদেনের বিবরণ আপডেট করে।
একজন ব্যবসায়ী চার ধরনের ইভেন্ট পেতে পারেন:
- পেমেন্ট পদ্ধতি পরিবর্তন ইভেন্ট
- শিপিং ঠিকানা পরিবর্তন ইভেন্ট
- শিপিং বিকল্প পরিবর্তন ইভেন্ট
- বণিক বৈধতা ইভেন্ট
পেমেন্ট পদ্ধতি পরিবর্তন ইভেন্ট
একটি পেমেন্ট অ্যাপ একাধিক পেমেন্ট পদ্ধতি সমর্থন করতে পারে এবং একজন বণিক গ্রাহকের নির্বাচনের উপর নির্ভর করে একটি বিশেষ ছাড় দিতে পারে। এই ব্যবহারের ক্ষেত্রে কভার করার জন্য, পেমেন্ট পদ্ধতি পরিবর্তন ইভেন্ট নতুন পেমেন্ট পদ্ধতি সম্পর্কে বণিককে জানাতে পারে যাতে তারা ডিসকাউন্ট সহ মোট মূল্য আপডেট করতে পারে এবং পেমেন্ট অ্যাপে ফেরত দিতে পারে।
request.addEventListener('paymentmethodchange', e => {
e.updateWith({
// Add discount etc.
});
});
শিপিং ঠিকানা পরিবর্তন ইভেন্ট
একটি পেমেন্ট অ্যাপ ঐচ্ছিকভাবে গ্রাহকের শিপিং ঠিকানা প্রদান করতে পারে। এটি গ্রাহকদের জন্য সুবিধাজনক কারণ তাদের একটি ফর্মে ম্যানুয়ালি কোনো বিবরণ লিখতে হবে না এবং তারা একাধিক বিভিন্ন বণিক ওয়েবসাইটের পরিবর্তে তাদের পছন্দের পেমেন্ট অ্যাপে তাদের শিপিং ঠিকানা সংরক্ষণ করতে পারে।
লেনদেন শুরু হওয়ার পরে যদি কোনও গ্রাহক কোনও অর্থপ্রদানের অ্যাপে তাদের শিপিং ঠিকানা আপডেট করে, তবে একটি 'shippingaddresschange' ইভেন্ট বণিককে পাঠানো হবে। এই ইভেন্টটি বণিককে নতুন ঠিকানার ভিত্তিতে শিপিং খরচ নির্ধারণ করতে, মোট মূল্য আপডেট করতে এবং পেমেন্ট অ্যাপে ফেরত দিতে সাহায্য করে।
request.addEventListener('shippingaddresschange', e => {
e.updateWith({
// Update the details
});
});
যদি বণিক আপডেট করা ঠিকানায় পাঠাতে না পারে, তাহলে পেমেন্ট অ্যাপে ফেরত দেওয়া লেনদেনের বিবরণে একটি ত্রুটির প্যারামিটার যোগ করে তারা একটি ত্রুটির বার্তা দিতে পারে।
শিপিং বিকল্প পরিবর্তন ইভেন্ট
একজন বণিক গ্রাহককে একাধিক শিপিং বিকল্প অফার করতে পারে এবং সেই পছন্দটি পেমেন্ট অ্যাপে অর্পণ করতে পারে। শিপিং বিকল্পগুলি মূল্য এবং পরিষেবার নামের তালিকা হিসাবে প্রদর্শিত হয় যা গ্রাহক নির্বাচন করতে পারেন। যেমন:
- স্ট্যান্ডার্ড শিপিং - বিনামূল্যে
- এক্সপ্রেস শিপিং - 5 মার্কিন ডলার
যখন একজন গ্রাহক একটি পেমেন্ট অ্যাপে শিপিং বিকল্পটি আপডেট করেন, তখন একটি 'shippingoptionchange' ইভেন্ট বণিককে পাঠানো হবে। তারপর ব্যবসায়ী শিপিং খরচ নির্ধারণ করতে, মোট মূল্য আপডেট করতে এবং পেমেন্ট অ্যাপে ফেরত দিতে পারে।
request.addEventListener('shippingoptionchange', e => {
e.updateWith({
// Update the details
});
});
বণিক গতিশীলভাবে গ্রাহকের শিপিং ঠিকানার উপর ভিত্তি করে শিপিং বিকল্পগুলি পরিবর্তন করতে পারে। যখন একজন বণিক দেশীয় এবং আন্তর্জাতিক গ্রাহকদের জন্য শিপিং বিকল্পের বিভিন্ন সেট অফার করতে চায় তখন এটি কার্যকর।
বণিক বৈধতা ইভেন্ট
অতিরিক্ত নিরাপত্তার জন্য, একটি পেমেন্ট অ্যাপ পেমেন্ট প্রবাহে এগিয়ে যাওয়ার আগে একটি বণিক যাচাই করতে পারে। বৈধকরণ প্রক্রিয়ার নকশাটি অর্থপ্রদানের অ্যাপের উপর নির্ভর করে, তবে বণিক যাচাইকরণ ইভেন্টটি ব্যবসায়ীকে সেই URL সম্পর্কে অবহিত করে যা তারা নিজেদের যাচাই করতে ব্যবহার করতে পারে।
request.addEventListener('merchantvalidation', e => {
e.updateWith({
// Use `e.validateURL` to validate
});
});
ধাপ 6: বণিক অর্থপ্রদান যাচাই করে এবং লেনদেন সম্পূর্ণ করে
যখন গ্রাহক সফলভাবে অর্থপ্রদানের অনুমোদন দেন, show() পদ্ধতিটি একটি প্রতিশ্রুতি প্রদান করে যা একটি PaymentResponse এ সমাধান করে। PaymentResponse অবজেক্টে নিম্নলিখিত তথ্য রয়েছে:
- পেমেন্ট ফলাফল বিবরণ
- শিপিং ঠিকানা
- শিপিং বিকল্প
- যোগাযোগের তথ্য
এই মুহুর্তে, ব্রাউজার UI এখনও একটি লোডিং সূচক দেখাতে পারে যার অর্থ লেনদেন এখনও সম্পূর্ণ হয়নি৷
যদি পেমেন্ট অ্যাপটি পেমেন্ট ব্যর্থতা বা ত্রুটির কারণে বন্ধ হয়ে যায়, তাহলে show() থেকে প্রত্যাবর্তিত প্রতিশ্রুতি প্রত্যাখ্যান করে এবং ব্রাউজার পেমেন্ট লেনদেন বন্ধ করে দেয়।
অর্থপ্রদান প্রক্রিয়াকরণ এবং যাচাইকরণ
PaymentResponse এ details হল পেমেন্ট অ্যাপ থেকে ফেরত পেমেন্ট ক্রেডেনশিয়াল বস্তু। বণিক পেমেন্ট প্রক্রিয়া বা যাচাই করতে শংসাপত্র ব্যবহার করতে পারেন। এই জটিল প্রক্রিয়াটি কীভাবে কাজ করে তা পেমেন্ট হ্যান্ডলারের উপর নির্ভর করে।
লেনদেন সম্পূর্ণ করা বা পুনরায় চেষ্টা করা
লেনদেন সফল বা ব্যর্থ হয়েছে কিনা তা ব্যবসায়ী নির্ধারণ করার পরে, তারা হয়:
- লেনদেন সম্পূর্ণ করতে
.complete()পদ্ধতিতে কল করুন এবং লোডিং সূচকটি খারিজ করুন। -
retry()পদ্ধতিতে কল করে গ্রাহককে পুনরায় চেষ্টা করতে দিন।
async function doPaymentRequest() {
try {
const request = new PaymentRequest(methodData, details, options);
const response = await request.show();
await validateResponse(response);
} catch (err) {
// AbortError, SecurityError
console.error(err);
}
}
async function validateResponse(response) {
try {
const errors = await checkAllValuesAreGood(response);
if (errors.length) {
await response.retry(errors);
return validateResponse(response);
}
await response.complete("success");
} catch (err) {
// Something went wrong…
await response.complete("fail");
}
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();
পরবর্তী পদক্ষেপ
- একটি অর্থপ্রদানের পদ্ধতি সেট আপ করার মধ্যে বিস্তারিতভাবে একটি অর্থপ্রদানের পদ্ধতি শনাক্তকারীকে কীভাবে ঘোষণা করতে হয় তা শিখুন।
- অ্যান্ড্রয়েড পেমেন্ট অ্যাপস ডেভেলপারের গাইডে কীভাবে একটি প্ল্যাটফর্ম-নির্দিষ্ট পেমেন্ট অ্যাপ তৈরি করবেন তা শিখুন।
- ওয়েব-ভিত্তিক পেমেন্ট অ্যাপস ডেভেলপারের গাইডে কীভাবে একটি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ তৈরি করবেন তা শিখুন।