Google I/O-তে টিউন করার জন্য ধন্যবাদ! চাহিদা অনুযায়ী সামগ্রী দেখুন ।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি পরিষেবা কর্মীর সাথে অর্থ লেনদেন অর্কেস্ট্রেটিং

কীভাবে আপনার ওয়েব-ভিত্তিক পেমেন্ট অ্যাপটিকে ওয়েব পেমেন্টের সাথে মানিয়ে নেবেন এবং গ্রাহকদের জন্য আরও ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করবেন।

Eiji Kitamura

একবার পেমেন্ট অ্যাপটি নিবন্ধিত হয়ে গেলে , আপনি ব্যবসায়ীদের কাছ থেকে পেমেন্ট অনুরোধ গ্রহণ করতে প্রস্তুত। এই পোস্টে রানটাইম চলাকালীন (অর্থাৎ যখন একটি উইন্ডো প্রদর্শিত হয় এবং ব্যবহারকারী এটির সাথে ইন্টারঅ্যাক্ট করছেন) একজন পরিষেবা কর্মীর কাছ থেকে পেমেন্ট লেনদেন কীভাবে পরিচালনা করবেন তা ব্যাখ্যা করা হয়েছে।

একজন পরিষেবা কর্মীর সাথে অর্থপ্রদানের লেনদেন পরিচালনা করা

"রানটাইম পেমেন্ট প্যারামিটার পরিবর্তন" বলতে এমন কিছু ইভেন্টকে বোঝায় যা ব্যবহারকারী যখন পেমেন্ট হ্যান্ডলারের সাথে ইন্টারঅ্যাক্ট করছেন তখন মার্চেন্ট এবং পেমেন্ট হ্যান্ডলারকে বার্তা বিনিময় করতে দেয়। পরিষেবা কর্মীর সাথে ঐচ্ছিক পেমেন্ট তথ্য পরিচালনা করা বিভাগে আরও জানুন।

বণিকের কাছ থেকে একটি পেমেন্ট অনুরোধ ইভেন্ট পান

যখন কোনও গ্রাহক আপনার ওয়েব-ভিত্তিক পেমেন্ট অ্যাপ দিয়ে অর্থ প্রদান করতে চান এবং ব্যবসায়ী PaymentRequest.show() ব্যবহার করেন , তখন আপনার পরিষেবা কর্মী একটি paymentrequest ইভেন্ট পাবেন। ইভেন্টটি ক্যাপচার করতে এবং পরবর্তী পদক্ষেপের জন্য প্রস্তুত হতে পরিষেবা কর্মীর সাথে একটি ইভেন্ট শ্রোতা যোগ করুন।

[পেমেন্ট হ্যান্ডলার] service-worker.js:

…
let payment_request_event;
let resolver;
let client;

// `self` is the global object in service worker
self.addEventListener('paymentrequest', async e => {
  if (payment_request_event) {
    // If there's an ongoing payment transaction, reject it.
    resolver.reject();
  }
  // Preserve the event for future use
  payment_request_event = e;
…

সংরক্ষিত PaymentRequestEvent এ এই লেনদেন সম্পর্কে গুরুত্বপূর্ণ তথ্য রয়েছে:

সম্পত্তির নাম	বিবরণ
`topOrigin`	একটি স্ট্রিং যা শীর্ষ-স্তরের ওয়েব পৃষ্ঠার (সাধারণত প্রাপক ব্যবসায়ী) উৎস নির্দেশ করে। ব্যবসায়ীর উৎস শনাক্ত করতে এটি ব্যবহার করুন।
`paymentRequestOrigin`	একটি স্ট্রিং যা ইনভোকারের উৎপত্তি নির্দেশ করে। এটি `topOrigin` এর মতো হতে পারে যখন মার্চেন্ট সরাসরি পেমেন্ট রিকোয়েস্ট API ব্যবহার করে, কিন্তু যদি কোনও তৃতীয় পক্ষ যেমন পেমেন্ট গেটওয়ের মাধ্যমে iframe-এর মধ্যে থেকে API ব্যবহার করে তবে এটি ভিন্ন হতে পারে।
`paymentRequestId`	পেমেন্ট রিকোয়েস্ট API-তে প্রদত্ত `PaymentDetailsInit` এর `id` প্রপার্টি। যদি বণিক বাদ দেন, তাহলে ব্রাউজারটি একটি স্বয়ংক্রিয়ভাবে তৈরি আইডি প্রদান করবে।
`methodData`	`PaymentMethodData` এর অংশ হিসেবে বণিক কর্তৃক প্রদত্ত পেমেন্ট-পদ্ধতি-নির্দিষ্ট ডেটা। পেমেন্ট লেনদেনের বিবরণ নির্ধারণ করতে এটি ব্যবহার করুন।
`total`	`PaymentDetailsInit` এর অংশ হিসেবে বণিক কর্তৃক প্রদত্ত মোট পরিমাণ। গ্রাহককে মোট কত টাকা দিতে হবে তা জানাতে একটি UI তৈরি করতে এটি ব্যবহার করুন।
`instrumentKey`	ব্যবহারকারীর দ্বারা নির্বাচিত ইন্সট্রুমেন্ট কী। এটি আপনার আগে থেকে দেওয়া `instrumentKey` প্রতিফলিত করে। একটি খালি স্ট্রিং নির্দেশ করে যে ব্যবহারকারী কোনও ইন্সট্রুমেন্ট নির্দিষ্ট করেননি।

ওয়েব-ভিত্তিক পেমেন্ট অ্যাপের ফ্রন্টএন্ড প্রদর্শনের জন্য পেমেন্ট হ্যান্ডলার উইন্ডোটি খুলুন।

যখন কোনও paymentrequest ইভেন্ট গৃহীত হয়, তখন পেমেন্ট অ্যাপটি PaymentRequestEvent.openWindow() এ কল করে একটি পেমেন্ট হ্যান্ডলার উইন্ডো খুলতে পারে। পেমেন্ট হ্যান্ডলার উইন্ডোটি গ্রাহকদের আপনার পেমেন্ট অ্যাপের ইন্টারফেস উপস্থাপন করবে যেখানে তারা প্রমাণীকরণ করতে, শিপিং ঠিকানা এবং বিকল্পগুলি চয়ন করতে এবং পেমেন্ট অনুমোদন করতে পারবে। আমরা পেমেন্ট ফ্রন্টএন্ডে হ্যান্ডলিং পেমেন্ট বিভাগে ফ্রন্টএন্ড কোড কীভাবে লিখতে হয় তা আলোচনা করব (শীঘ্রই আসছে)।

একটি ওয়েব-ভিত্তিক পেমেন্ট অ্যাপের মাধ্যমে চেকআউট ফ্লো।

PaymentRequestEvent.respondWith() কে একটি সংরক্ষিত প্রতিশ্রুতি দিন যাতে আপনি ভবিষ্যতে পেমেন্ট ফলাফলের মাধ্যমে এটি সমাধান করতে পারেন।

[পেমেন্ট হ্যান্ডলার] service-worker.js:

…
self.addEventListener('paymentrequest', async e => {
…
  // Retain a promise for future resolution
  // Polyfill for PromiseResolver is provided below.
  resolver = new PromiseResolver();

  // Pass a promise that resolves when payment is done.
  e.respondWith(resolver.promise);
  // Open the checkout page.
  try {
    // Open the window and preserve the client
    client = await e.openWindow(checkoutURL);
    if (!client) {
      // Reject if the window fails to open
      throw 'Failed to open window';
    }
  } catch (err) {
    // Reject the promise on failure
    resolver.reject(err);
  };
});
…

আপনি ইচ্ছামত সময়ে কোনও প্রতিশ্রুতি সমাধানের জন্য একটি সুবিধাজনক PromiseResolver polyfill ব্যবহার করতে পারেন।

class PromiseResolver {
  constructor() {
    this.promise_ = new Promise((resolve, reject) => {
      this.resolve_ = resolve;
      this.reject_ = reject;
    })
  }
  get promise() { return this.promise_ }
  get resolve() { return this.resolve_ }
  get reject() { return this.reject_ }
}

ফ্রন্টএন্ডের সাথে তথ্য বিনিময় করুন

পেমেন্ট অ্যাপের সার্ভিস কর্মী ServiceWorkerController.postMessage() এর মাধ্যমে পেমেন্ট অ্যাপের ফ্রন্টএন্ডের সাথে বার্তা বিনিময় করতে পারেন। ফ্রন্টএন্ড থেকে বার্তা গ্রহণ করতে, message ইভেন্টগুলি শুনুন।

[পেমেন্ট হ্যান্ডলার] service-worker.js:

// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
  if (client) client.postMessage({ type, ...contents });
}

ফ্রন্টএন্ড থেকে প্রস্তুত সংকেত গ্রহণ করুন

পেমেন্ট হ্যান্ডলার উইন্ডোটি খোলার পর, পরিষেবা কর্মীকে পেমেন্ট অ্যাপ ফ্রন্টএন্ড থেকে একটি প্রস্তুত-অবস্থার সংকেতের জন্য অপেক্ষা করতে হবে। পরিষেবা কর্মী ফ্রন্টএন্ড প্রস্তুত হলে গুরুত্বপূর্ণ তথ্য প্রেরণ করতে পারবেন।

[পেমেন্ট হ্যান্ডলার] ফ্রন্টএন্ড:

navigator.serviceWorker.controller.postMessage({
  type: 'WINDOW_IS_READY'
});

[পেমেন্ট হ্যান্ডলার] service-worker.js:

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      // `WINDOW_IS_READY` is a frontend's ready state signal
      case 'WINDOW_IS_READY':
        const { total } = payment_request_event;
…

লেনদেনের বিবরণ ফ্রন্টএন্ডে পাঠান

এখন পেমেন্টের বিবরণ ফেরত পাঠান। এই ক্ষেত্রে আপনি কেবল মোট পেমেন্ট অনুরোধ পাঠাচ্ছেন, তবে আপনি চাইলে আরও বিশদ পাঠাতে পারেন।

[পেমেন্ট হ্যান্ডলার] service-worker.js:

…
        // Pass the payment details to the frontend
        postMessage('PAYMENT_IS_READY', { total });
        break;
…

[পেমেন্ট হ্যান্ডলার] ফ্রন্টএন্ড:

let total;

navigator.serviceWorker.addEventListener('message', async e => {
  switch (e.data.type) {
      case 'PAYMENT_IS_READY':
        ({ total } = e.data);
        // Update the UI
        renderHTML(total);
        break;
…

গ্রাহকের পেমেন্ট শংসাপত্র ফেরত দিন

গ্রাহক যখন অর্থপ্রদান অনুমোদন করেন, তখন ফ্রন্টএন্ড পরিষেবা কর্মীকে এগিয়ে যাওয়ার জন্য একটি পোস্ট বার্তা পাঠাতে পারে। আপনি PaymentRequestEvent.respondWith() কে দেওয়া প্রতিশ্রুতি সমাধান করে ফলাফলটি মার্চেন্টের কাছে ফেরত পাঠাতে পারেন। একটি PaymentHandlerResponse অবজেক্ট পাস করুন।

সম্পত্তির নাম	বিবরণ
`methodName`	পেমেন্ট করার জন্য ব্যবহৃত পেমেন্ট পদ্ধতি শনাক্তকারী।
`details`	পেমেন্ট পদ্ধতি নির্দিষ্ট ডেটা যা ব্যবসায়ীকে পেমেন্ট প্রক্রিয়া করার জন্য প্রয়োজনীয় তথ্য প্রদান করে।

[পেমেন্ট হ্যান্ডলার] ফ্রন্টএন্ড:

  const paymentMethod = …

  postMessage('PAYMENT_AUTHORIZED', {
    paymentMethod,              // Payment method identifier
  });

[পেমেন্ট হ্যান্ডলার] service-worker.js:

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'PAYMENT_AUTHORIZED':
        // Resolve the payment request event promise
        // with a payment response object
        const response = {
          methodName: e.data.paymentMethod,
          details: { id: 'put payment credential here' },
        }
        resolver.resolve(response);
        // Don't forget to initialize.
        payment_request_event = null;
        break;
      …

পেমেন্ট লেনদেন বাতিল করুন

গ্রাহককে লেনদেন বাতিল করার অনুমতি দেওয়ার জন্য, ফ্রন্টএন্ড পরিষেবা কর্মীকে একটি পোস্ট বার্তা পাঠাতে পারে যাতে এটি করা হয়। পরিষেবা কর্মী তারপর PaymentRequestEvent.respondWith() কে দেওয়া প্রতিশ্রুতি null দিয়ে সমাধান করতে পারেন যাতে ব্যবসায়ীকে বোঝানো যায় যে লেনদেন বাতিল করা হয়েছে।

[পেমেন্ট হ্যান্ডলার] ফ্রন্টএন্ড:

  postMessage('CANCEL_PAYMENT');

[পেমেন্ট হ্যান্ডলার] service-worker.js:

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'CANCEL_PAYMENT':
        // Resolve the payment request event promise
        // with null
        resolver.resolve(null);
        // Don't forget to initialize.
        payment_request_event = null;
        break;
      …

নমুনা কোড

এই ডকুমেন্টে আপনি যে সমস্ত নমুনা কোড দেখেছেন তা নিম্নলিখিত কোডগুলির উদ্ধৃতি: ওয়েব-ভিত্তিক পেমেন্ট হ্যান্ডলার ডেমো

পরবর্তী পদক্ষেপ

এই প্রবন্ধে, আমরা শিখেছি কিভাবে একজন পরিষেবা কর্মীর কাছ থেকে অর্থপ্রদানের লেনদেন পরিচালনা করতে হয়। পরবর্তী ধাপ হল পরিষেবা কর্মীর সাথে আরও কিছু উন্নত বৈশিষ্ট্য কীভাবে যুক্ত করতে হয় তা শেখা।

একজন পরিষেবা কর্মীর সাথে ঐচ্ছিক অর্থপ্রদানের তথ্য পরিচালনা করা