পেমেন্ট অনুরোধ API কিভাবে কাজ করে

পেমেন্ট রিকোয়েস্ট API কীভাবে উচ্চ স্তরে কাজ করে তা জানুন।

ইজি কিতামুরা

পেমেন্ট অনুরোধ API

যখন একজন গ্রাহক আপনার ওয়েবসাইট থেকে কিছু কেনার চেষ্টা করেন, তখন সাইটটিকে অবশ্যই গ্রাহককে অর্থপ্রদানের তথ্য এবং ঐচ্ছিকভাবে, শিপিং পছন্দের মতো অন্যান্য তথ্য প্রদান করতে বলতে হবে। আপনি পেমেন্ট রিকোয়েস্ট API (PR API) ব্যবহার করে সহজেই এবং দ্রুত এটি অর্জন করতে পারেন।

মৌলিক কাঠামো

একটি PaymentRequest অবজেক্ট তৈরি করতে দুটি প্যারামিটার প্রয়োজন: অর্থপ্রদানের পদ্ধতি এবং অর্থপ্রদানের বিবরণ । উপরন্তু, একটি তৃতীয় পেমেন্ট বিকল্প পরামিতি ঐচ্ছিক। একটি মৌলিক অনুরোধ এই মত তৈরি করা যেতে পারে:

const request = new PaymentRequest(paymentMethods, paymentDetails);

আসুন দেখি কিভাবে প্রতিটি প্যারামিটার তৈরি এবং ব্যবহার করা হয়।

পেমেন্ট পদ্ধতি

প্রথম প্যারামিটার, পেমেন্ট মেথডস হল একটি অ্যারে ভেরিয়েবলে সমর্থিত পেমেন্ট পদ্ধতির একটি তালিকা। অ্যারের প্রতিটি উপাদানে দুটি উপাদান রয়েছে, 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.
  }
}];

পেমেন্ট বিশদ

দ্বিতীয় প্যারামিটার, পেমেন্টের বিবরণ , একটি বস্তু হিসাবে পাস করা হয় এবং লেনদেনের জন্য অর্থপ্রদানের বিবরণ নির্দিষ্ট করে। এটিতে প্রয়োজনীয় 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' }
  }
};

পেমেন্ট পদ্ধতি উপলব্ধ কিনা পরীক্ষা করুন

Chrome একটি PaymentRequest অবজেক্ট নির্মাণের সময় ব্যবহারকারী এবং পরিবেশ অর্থ প্রদানের জন্য প্রস্তুত কিনা তা পরীক্ষা করে।

ব্যবহারকারী এবং পরিবেশ একটি অর্থপ্রদানের জন্য প্রস্তুত কিনা তা পরীক্ষা করতে, অর্থপ্রদানের পদ্ধতি চালু করার আগে 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 এ পাঠাতে পারেন।

অবশেষে, আপনি পেমেন্ট রিকোয়েস্ট UI বন্ধ করতে পারেন response.complete('success') অথবা response.complete('fail') দিয়ে প্রক্রিয়াটি সম্পন্ন করে PSP যে ফলাফল দেয় তার উপর নির্ভর করে।

পরবর্তী আপ

ওয়েব পেমেন্ট সম্পর্কে আরও জানুন।

,

পেমেন্ট রিকোয়েস্ট API কীভাবে উচ্চ স্তরে কাজ করে তা জানুন।

ইজি কিতামুরা

পেমেন্ট অনুরোধ API

যখন একজন গ্রাহক আপনার ওয়েবসাইট থেকে কিছু কেনার চেষ্টা করেন, তখন সাইটটিকে অবশ্যই গ্রাহককে অর্থপ্রদানের তথ্য এবং ঐচ্ছিকভাবে, শিপিং পছন্দের মতো অন্যান্য তথ্য প্রদান করতে বলতে হবে। আপনি পেমেন্ট রিকোয়েস্ট API (PR API) ব্যবহার করে সহজেই এবং দ্রুত এটি অর্জন করতে পারেন।

মৌলিক কাঠামো

একটি PaymentRequest অবজেক্ট তৈরি করতে দুটি প্যারামিটার প্রয়োজন: অর্থপ্রদানের পদ্ধতি এবং অর্থপ্রদানের বিবরণ । উপরন্তু, একটি তৃতীয় পেমেন্ট বিকল্প পরামিতি ঐচ্ছিক। একটি মৌলিক অনুরোধ এই মত তৈরি করা যেতে পারে:

const request = new PaymentRequest(paymentMethods, paymentDetails);

আসুন দেখি কিভাবে প্রতিটি প্যারামিটার তৈরি এবং ব্যবহার করা হয়।

পেমেন্ট পদ্ধতি

প্রথম প্যারামিটার, পেমেন্ট মেথডস হল একটি অ্যারে ভেরিয়েবলে সমর্থিত পেমেন্ট পদ্ধতির একটি তালিকা। অ্যারের প্রতিটি উপাদানে দুটি উপাদান রয়েছে, 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.
  }
}];

পেমেন্ট বিশদ

দ্বিতীয় প্যারামিটার, পেমেন্টের বিবরণ , একটি বস্তু হিসাবে পাস করা হয় এবং লেনদেনের জন্য অর্থপ্রদানের বিবরণ নির্দিষ্ট করে। এটিতে প্রয়োজনীয় 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' }
  }
};

পেমেন্ট পদ্ধতি উপলব্ধ কিনা পরীক্ষা করুন

Chrome একটি PaymentRequest অবজেক্ট নির্মাণের সময় ব্যবহারকারী এবং পরিবেশ অর্থ প্রদানের জন্য প্রস্তুত কিনা তা পরীক্ষা করে।

ব্যবহারকারী এবং পরিবেশ একটি অর্থপ্রদানের জন্য প্রস্তুত কিনা তা পরীক্ষা করতে, অর্থপ্রদানের পদ্ধতি চালু করার আগে 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 এ পাঠাতে পারেন।

অবশেষে, আপনি পেমেন্ট রিকোয়েস্ট UI বন্ধ করতে পারেন response.complete('success') অথবা response.complete('fail') দিয়ে প্রক্রিয়াটি সম্পন্ন করে PSP যে ফলাফল দেয় তার উপর নির্ভর করে।

পরবর্তী আপ

ওয়েব পেমেন্ট সম্পর্কে আরও জানুন।

,

পেমেন্ট রিকোয়েস্ট API কীভাবে উচ্চ স্তরে কাজ করে তা জানুন।

ইজি কিতামুরা

পেমেন্ট অনুরোধ API

যখন একজন গ্রাহক আপনার ওয়েবসাইট থেকে কিছু কেনার চেষ্টা করেন, তখন সাইটটিকে অবশ্যই গ্রাহককে অর্থপ্রদানের তথ্য এবং ঐচ্ছিকভাবে, শিপিং পছন্দের মতো অন্যান্য তথ্য প্রদান করতে বলতে হবে। আপনি পেমেন্ট রিকোয়েস্ট API (PR API) ব্যবহার করে সহজেই এবং দ্রুত এটি অর্জন করতে পারেন।

মৌলিক কাঠামো

একটি PaymentRequest অবজেক্ট তৈরি করতে দুটি প্যারামিটার প্রয়োজন: অর্থপ্রদানের পদ্ধতি এবং অর্থপ্রদানের বিবরণ । উপরন্তু, একটি তৃতীয় পেমেন্ট বিকল্প পরামিতি ঐচ্ছিক। একটি মৌলিক অনুরোধ এই মত তৈরি করা যেতে পারে:

const request = new PaymentRequest(paymentMethods, paymentDetails);

আসুন দেখি কিভাবে প্রতিটি প্যারামিটার তৈরি এবং ব্যবহার করা হয়।

পেমেন্ট পদ্ধতি

প্রথম প্যারামিটার, পেমেন্ট মেথডস হল একটি অ্যারে ভেরিয়েবলে সমর্থিত পেমেন্ট পদ্ধতির একটি তালিকা। অ্যারের প্রতিটি উপাদানে দুটি উপাদান রয়েছে, 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.
  }
}];

পেমেন্ট বিশদ

দ্বিতীয় প্যারামিটার, পেমেন্টের বিবরণ , একটি বস্তু হিসাবে পাস করা হয় এবং লেনদেনের জন্য অর্থপ্রদানের বিবরণ নির্দিষ্ট করে। এটিতে প্রয়োজনীয় 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' }
  }
};

পেমেন্ট পদ্ধতি উপলব্ধ কিনা পরীক্ষা করুন

Chrome একটি PaymentRequest অবজেক্ট নির্মাণের সময় ব্যবহারকারী এবং পরিবেশ অর্থ প্রদানের জন্য প্রস্তুত কিনা তা পরীক্ষা করে।

ব্যবহারকারী এবং পরিবেশ একটি অর্থপ্রদানের জন্য প্রস্তুত কিনা তা পরীক্ষা করতে, অর্থপ্রদানের পদ্ধতি চালু করার আগে 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 এ পাঠাতে পারেন।

অবশেষে, আপনি পেমেন্ট রিকোয়েস্ট UI বন্ধ করতে পারেন response.complete('success') অথবা response.complete('fail') দিয়ে প্রক্রিয়াটি সম্পন্ন করে PSP যে ফলাফল দেয় তার উপর নির্ভর করে।

পরবর্তী আপ

ওয়েব পেমেন্ট সম্পর্কে আরও জানুন।