Google Pay-এর মাধ্যমে ওয়েবে দ্রুত চেকআউট করার অভিজ্ঞতা তৈরি করুন

Google Pay API ব্যবহারকারীদের তাদের Google অ্যাকাউন্টে সঞ্চিত অর্থপ্রদানের তথ্য ব্যবহার করে সর্বত্র অর্থপ্রদান করার সুযোগ দেয়। এই ল্যাবে, আপনি একটি সরলীকৃত নমুনা অনলাইন স্টোরের চেকআউট অভিজ্ঞতা উন্নত করতে ওয়েবের জন্য Google Pay-এর ক্লায়েন্ট লাইব্রেরি ব্যবহার করেন, একটি দ্রুত, আরও সুবিধাজনক এবং নিরাপদ অভিজ্ঞতা তৈরি করে, যার ফলে আরও বেশি রূপান্তর হয় এবং গ্রাহকদের খুশি হয়।

অটো টি-শার্ট শপ হল একটি উদ্ভাবনী দোকান যা কৃত্রিম বুদ্ধিমত্তার সাম্প্রতিক অগ্রগতিগুলিকে কাজে লাগায় এবং আপনার কেনার জন্য সবচেয়ে উপযুক্ত আইটেমটি সাজেস্ট করতে শৈলী পছন্দ, আবহাওয়া, বছরের সময় এবং ফ্যাশন প্রবণতার মতো তথ্য ব্যবহার করে৷

এই দোকানের জন্য ব্যস্ততার মেট্রিক্স ছাদের মধ্য দিয়ে। দুর্ভাগ্যবশত, মেট্রিক্স চেকআউট প্রক্রিয়া চলাকালীন প্রচুর পরিমাণে পরিত্যাগও প্রতিফলিত করে। এটি মোকাবেলা করার জন্য দৃঢ়প্রতিজ্ঞ, প্রোজেক্টের মালিকদের একজন মনে করেন যে Google Pay অনুরূপ সাইটগুলির জন্য প্রতিশ্রুতিবদ্ধ ফলাফল দেখানো একটি ভিডিও দেখেছে, তাই তারা এটিকে ছেড়ে দেওয়ার সিদ্ধান্ত নিয়েছে এবং ইন্টিগ্রেশনের যত্ন নেওয়ার জন্য আপনাকে বিশ্বাস করবে।

আপনি কি নির্মাণ করবেন

এই কোডল্যাবটি আপনাকে একটি বিদ্যমান সাইটে Google Pay সংহত করার মাধ্যমে নিয়ে যায়, যার মধ্যে একজন ব্যবহারকারী Google Pay দ্বারা সমর্থিত একটি অর্থপ্রদানের পদ্ধতি ব্যবহার করে অর্থপ্রদান করতে সক্ষম কিনা তা নির্ধারণ করা, পেমেন্ট বোতামের প্লেসমেন্ট এবং ডিজাইন এবং লেনদেন সম্পাদন করা।

আপনি কি শিখবেন

  • একটি বিদ্যমান চেকআউট পৃষ্ঠায় কীভাবে Google Pay সংহত করবেন
  • আপনার পছন্দের অর্থপ্রদানের পদ্ধতিগুলির মধ্যে কীভাবে চয়ন করবেন
  • একজন ব্যবহারকারী Google Pay দিয়ে পেমেন্ট করতে প্রস্তুত কিনা তা কীভাবে নির্ধারণ করবেন

আপনার যা দরকার

  • ইন্টারনেট অ্যাক্সেস সহ একটি কম্পিউটার
  • জাভাস্ক্রিপ্টের প্রাথমিক জ্ঞান

glitch.com এ নমুনা সাইট চালান

যত তাড়াতাড়ি সম্ভব উঠতে এবং চালানোর জন্য, এই কোডল্যাবটি glitch.com-এ উপলব্ধ করা হয়েছে। গ্লিচ হল একটি বিনামূল্যের ওয়েব-ভিত্তিক পরিবেশ যা একটি কোড এডিটর এবং হোস্টিং এবং স্থাপনার বৈশিষ্ট্যগুলি প্রদান করে যা আপনি ওয়েব অ্যাপ্লিকেশন তৈরি এবং পরিবেশন করতে ব্যবহার করতে পারেন।

শুরু করতে, এই কোডল্যাবের একটি অনুলিপি সহ ইতিমধ্যে সেট আপ করা সমস্যাটিতে একটি নতুন উন্নয়ন পরিবেশের ব্যবস্থা করতে নীচের বোতামটি ব্যবহার করুন৷

Glitch.com এ উন্নয়ন পরিবেশ শুরু করুন

এখান থেকে, আপনি আপনার ফাইলগুলি সংশোধন করতে Glitch-এ কোড এডিটর ব্যবহার করতে পারেন। উপরে দেখান মেনু ব্যবহার করে আপনার অ্যাপ্লিকেশন পরিবেশন করা শুরু করুন এবং একটি নতুন উইন্ডোতে নির্বাচন করুন।

নমুনা সাইটের মাধ্যমে স্কিম

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

সাইট অন্বেষণ

এই ডেমো মার্কেটপ্লেসটি এমনভাবে তৈরি করা হয়েছে যাতে আপনি ক্রয়ের কোনো উপায় যোগ করার আগে আপনার বিদ্যমান বা সম্ভাব্য অ্যাপ্লিকেশনটি আজকের দেখতে কেমন হতে পারে তা বিনীতভাবে অনুরূপ। প্রকৃতপক্ষে, যদিও আমরা আপনাকে এই ডেমো অ্যাপ্লিকেশনের উপরে কাজ করার পরামর্শ দিই, আপনি আপনার বিদ্যমান অ্যাপ্লিকেশানগুলিতে Google Pay সংহত করতে এই কোডল্যাবটি ব্যবহার করতে পারবেন।

এখন, যদি আপনি ইতিমধ্যে এটি না করে থাকেন তবে ডেমো সাইটটি খুলুন যেমন এটি বর্তমানে দাঁড়িয়ে আছে। এটি করতে, আপনি যদি গ্লিচ ব্যবহার করেন তবে দেখান বোতামে ক্লিক করুন বা আপনার স্থানীয় ওয়েব সার্ভারটি যেখানে চলছে সেটি খুলুন।

ডেমো সাইট আশ্চর্যজনক কিছু নয়, তাই না? একটি পণ্যের বিস্তারিত পৃষ্ঠা, একটি ছবি, মূল্য, একটি বিবরণ, কিছু নির্বাচক এবং একটি বোতাম যা আপনাকে একটি কাল্পনিক এবং সাধারণ অর্থপ্রদানের ফর্মে নিয়ে যাবে৷

এই ল্যাবের উদ্দেশ্য হল এই প্রবাহটিকে Google Pay দ্বারা চালিত একটি দুই-ক্লিক অভিজ্ঞতা দিয়ে প্রতিস্থাপন করা।

এর এই পরিকল্পনা করা যাক!

এই একীকরণকে আরও ভালভাবে বোঝার জন্য, প্রক্রিয়াটিকে নিম্নলিখিত মৌলিক ধাপে বিভক্ত করা হয়েছে:

  1. লাইব্রেরি লোড করুন
  2. Google Pay দিয়ে পেমেন্ট করার ক্ষমতা নির্ধারণ করুন
  3. Google Pay দিয়ে পেমেন্ট করার বোতামটি দেখান
  4. পেমেন্টের জন্য অনুরোধ তৈরি করুন এবং পাঠান
  5. ফলাফল সংগ্রহ করুন

script ট্যাগ যোগ করুন

Google Pay API ব্যবহার শুরু করার জন্য আপনাকে প্রথমে যা করতে হবে তা হল JavaScript লাইব্রেরি লোড করা। এটি করার জন্য, HTML ফাইলে একটি script ট্যাগ অন্তর্ভুক্ত করুন যেখান থেকে আপনি API কল করতে চান, একটি src বৈশিষ্ট্য সহ যা বহিরাগত জাভাস্ক্রিপ্ট লাইব্রেরির দিকে নির্দেশ করে।

এই কোডল্যাবের জন্য, index.html ফাইলটি খুলুন। আপনার দেখতে হবে যে স্ক্রিপ্ট ট্যাগটি ইতিমধ্যেই আপনার জন্য অন্তর্ভুক্ত করা হয়েছে:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

src ছাড়াও, আপনি আরও দুটি বৈশিষ্ট্য যুক্ত করেছেন।

  • async আপনার স্ক্রিপ্টটিকে লোড করার এবং বাকি পৃষ্ঠার পাশাপাশি অ্যাসিঙ্ক্রোনাসভাবে চালানোর অনুমতি দেয়, যাতে আপনার নথির প্রথম লোড সময় প্রভাবিত না হয়।
  • onload আপনার স্ক্রিপ্ট লোড না হওয়া পর্যন্ত এই লাইব্রেরির উপর নির্ভর করে এমন কোডের এক্সিকিউশন পিছিয়ে দিতে সাহায্য করে। এটি সম্পন্ন হওয়ার পরে, আপনি এই বৈশিষ্ট্যে যে ফাংশনটি উল্লেখ করেছেন তা চালানো হবে। এই ক্ষেত্রে, ফাংশনটি onGooglePayLoaded .

এপিআই ক্লায়েন্ট ইনস্ট্যান্টিয়েট করুন

একবার আপনার স্ক্রিপ্ট লোড হয়ে গেলে, এই লাইব্রেরি ব্যবহার শুরু করার জন্য আপনার জন্য সবকিছু সেট করা আছে। ক্লায়েন্ট অবজেক্টটি ইনস্ট্যান্টিয়েট করে শুরু করুন, যা আপনি পরে Google Pay API-তে কল করতে ব্যবহার করবেন।

index.js ফাইলটি সম্পাদনা করুন, যা ইতিমধ্যেই এই প্রকল্পের ফাইল কাঠামোর অংশ। নিম্নলিখিত কোড দিয়ে onGooglePayLoaded ফাংশন প্রতিস্থাপন করুন।

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

পেমেন্ট ক্লায়েন্টকে একটি PaymentOptions অবজেক্ট দিয়ে আরম্ভ করা হয়। environment TEST এ সেট করা আপনাকে সমগ্র ইন্টিগ্রেশন জুড়ে ডামি পেমেন্ট তথ্য নিয়ে পরীক্ষা করার অনুমতি দেয়। আপনি যখন বাস্তব লেনদেন সমর্থন করে এমন ক্রিয়াকলাপগুলি তৈরি করতে প্রস্তুত হন, তখন আপনি environment সম্পত্তি PRODUCTION আপডেট করতে পারেন৷

ওভারভিউ

আমরা এখন Google Pay API Javascript ক্লায়েন্ট লাইব্রেরি লোড করেছি। এখন, আমাদের জন্য API কল করার জন্য এটি কনফিগার করা যাক।

বাকি কোডল্যাবের জন্য নিম্নলিখিত সমস্ত কোড পরিবর্তনগুলি index.js ফাইলে করা হবে।

কঙ্কাল

আপনি যখনই Google Pay API-এর সাথে যোগাযোগ করেন, তখন অনেকগুলি কনফিগারেশন প্যারামিটার থাকে যা আপনাকে আপনার অনুরোধে অন্তর্ভুক্ত করতে হবে, যেমন API-এর সংস্করণ আপনি লক্ষ্য করছেন। এই কোডল্যাবের উদ্দেশ্যে, এই অবজেক্টে আপনার আবেদনে গৃহীত অর্থপ্রদানের পদ্ধতি সম্পর্কে তথ্যও রয়েছে। চূড়ান্ত কাঠামো নিম্নলিখিত মত দেখায়:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

অনুমোদিত সম্পত্তি allowedPaymentMethods অর্থপ্রদান পদ্ধতির একটি তালিকা নেয়। প্রতিটি অর্থপ্রদান পদ্ধতির জন্য, আপনাকে নিম্নলিখিত বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করতে হবে:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

প্রশ্নে থাকা ব্যবহারকারী Google Pay-এর মাধ্যমে অর্থপ্রদান করতে সক্ষম কিনা তা নির্ধারণ করতে শুধুমাত্র প্রপার্টির type এবং parameters প্রয়োজন।

পেমেন্ট পদ্ধতি কনফিগারেশন

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

এইভাবে আপনার কনফিগারেশন index.js এ সেট আপ করা উচিত:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

সবগুলোকে একত্রে রাখ

এর সংক্ষেপ করা যাক.

আপনি আপনার ওয়েবসাইটে গৃহীত হওয়ার জন্য একটি অর্থপ্রদানের পদ্ধতি সংজ্ঞায়িত করেছেন এবং আপনি API এর 2.0 সংস্করণের সাথে কাজ করতে যাচ্ছেন। এইভাবে ফলাফল কনফিগারেশন দেখতে হবে:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

এখন আপনার বেস কনফিগারেশন প্রস্তুত আছে, আসুন মজার অংশে যাই।

Google Pay-এর অন্যতম প্রধান উদ্দেশ্য হল আপনার ব্যবহারকারীদের একটি দ্রুত এবং আরও সুবিধাজনক চেকআউট অভিজ্ঞতা প্রদান করা। এটি শুধুমাত্র এমন পরিস্থিতিতেই প্রযোজ্য যেখানে একজন ব্যক্তি Google Pay ব্যবহার করতে সক্ষম হয়, কিন্তু এমন পরিস্থিতিতেও প্রযোজ্য যেখানে তারা তা করতে সক্ষম হয় না। isReadyToPay অনুরোধ ব্যবহার করলে আপনি Google Pay-এর মাধ্যমে অর্থপ্রদানের প্রস্তুতি নির্ধারণ করতে পারবেন এবং সেই অনুযায়ী আপনার সাইটের অভিজ্ঞতা পরিবর্তন করার সুযোগ পাবেন।

আপনার ব্যবহারকারী কি Google Pay দিয়ে পেমেন্ট করতে পারবেন?

আপনাকে প্রথমে যা করতে হবে তা হল আপনার সাইটে অর্থপ্রদান করতে চলেছে এমন একজন নির্দিষ্ট ব্যবহারকারী তা করতে Google Pay ব্যবহার করতে সক্ষম কিনা তা পরীক্ষা করুন। এই অনুরোধের জন্য আপনাকে Google Pay API-এর সংস্করণ এবং আপনার সাইটের জন্য অনুমোদিত পেমেন্ট পদ্ধতি উল্লেখ করতে হবে। পূর্ববর্তী ধাপে সংজ্ঞায়িত বেস কনফিগারেশন অবজেক্টে ঠিক এটিই রয়েছে।

index.js এ onGooglePayLoaded onGooglePayLoaded() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

যদি কল ব্যর্থ হয় বা অসফল প্রতিক্রিয়া সহ ফিরে আসে, তাহলে Google Pay-এর প্রেক্ষাপটে আর কোনো ব্যবস্থা নেওয়া হবে না। এই পরিস্থিতিতে, সবচেয়ে উপযুক্ত পরবর্তী পদক্ষেপ হবে অতিরিক্ত UI দেখানো যা অন্যান্য অর্থপ্রদানের উপায়গুলিকে সমর্থন করে৷

অন্যদিকে, যদি প্রতিক্রিয়া সফল হয়, আপনি এখন আপনার ব্যবহারকারীদের Google Pay ব্যবহার করে উপকৃত হওয়ার অনুমতি দিতে প্রস্তুত, এবং এইভাবে, আপনি এগিয়ে যেতে পারেন এবং ব্যবহারকারী সক্রিয়করণে অর্থপ্রদানের প্রক্রিয়া শুরু করার জন্য একটি বোতাম যোগ করতে পারেন (উদাহরণস্বরূপ, বোতাম ক্লিক).

Google Pay দিয়ে পেমেন্ট করার জন্য একটি বোতাম যোগ করুন

যদিও আপনি পেমেন্ট প্রক্রিয়া শুরু করতে Google Pay ব্র্যান্ডের নির্দেশিকা অনুসরণ করে এমন যেকোনো বোতাম ব্যবহার করতে পারেন, তবুও আমরা আপনাকে Google Pay API ব্যবহার করে একটি তৈরি করার পরামর্শ দিই। এইভাবে, আপনি শুধুমাত্র ব্র্যান্ড নির্দেশিকাগুলির একটি সঠিক ব্যবহার নিশ্চিত করেন না, তবে আপনি স্থানীয়করণের মতো বোতামে সরাসরি নির্মিত অন্যান্য উন্নতিগুলি থেকেও উপকৃত হন।

একটি বোতাম তৈরি করতে, বোতামটি কনফিগার করতে ButtonOptions সহ PaymentsClient অবজেক্টে createButton পদ্ধতি ব্যবহার করুন।

index.js এ createAndAddButton() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

createButton ব্যবহার করার সময় শুধুমাত্র প্রয়োজনীয় প্রপার্টি হল onClick , যা আপনার ব্যবহারকারীরা যখনই বাটনটি সক্রিয় করে তখন ট্রিগার করার জন্য কলব্যাক অবজেক্ট বা ফাংশন নির্ধারণ করতে প্রয়োজনীয়। buttonColor এবং buttonType আপনাকে আপনার বোতাম দেখতে কেমন তা কাস্টমাইজ করতে দেয়। আপনার অ্যাপ্লিকেশানের থিম এবং UI প্রয়োজনীয়তার উপর ভিত্তি করে সেগুলিকে পরিবর্তন করুন৷

একবার বোতামটি তৈরি হয়ে গেলে, আপনাকে যা করতে হবে তা হল এটি DOM-এর মধ্যে একটি উপযুক্ত নোডে যোগ করুন। এই উদাহরণে, buy-now এর সাথে চিহ্নিত একটি div নোড এই উদ্দেশ্যে ব্যবহার করা হয়।

দেখুন যে আপনি বোতাম ক্লিক ইভেন্টগুলি পরিচালনা করার জন্য একটি ফাংশন সংজ্ঞায়িত করেছেন। পরবর্তী বিভাগে, আপনি একটি অর্থপ্রদান পদ্ধতি অনুরোধ করতে এই ফাংশন ব্যবহার করুন.

অর্থপ্রদানের অনুরোধ প্রস্তুত করুন

এই সময়ে, আপনি Google Pay API লোড করেছেন এবং নির্ধারণ করেছেন যে আপনার সাইটের ব্যবহারকারী পেমেন্ট করতে Google Pay ব্যবহার করতে পারবেন। ফলস্বরূপ, আপনি UI-তে Google Pay পেমেন্ট বোতামটি দেখিয়েছেন এবং এখন আপনার ব্যবহারকারী লেনদেন শুরু করার জন্য প্রস্তুত। বিভিন্ন লগ-ইন ব্যবহারকারীদের জন্য উপলব্ধ অর্থপ্রদানের ফর্মগুলি সহ চূড়ান্ত অর্থপ্রদানের শীট লোড করার এখন সময়।

ঠিক যেমন আপনি আগে করেছিলেন, isReadyToPay অনুরোধের সংজ্ঞার সময়, এই কলটির জন্য কিছু নতুন ছাড়াও পূর্বে সংজ্ঞায়িত বেস কনফিগারেশন অবজেক্টের বৈশিষ্ট্যগুলির প্রয়োজন ( apiVersion , apiVersionMinor এবং allowedPaymentMethods )৷ এইবার, আপনার পেমেন্ট পদ্ধতিতে একটি নতুন সম্পত্তি, tokenizationSpecification এবং অতিরিক্ত parameters রয়েছে যা এই অনুরোধের উদ্দেশ্যে প্রাসঙ্গিক। উপরন্তু, transactionInfo এবং merchantInfo যোগ করতে হবে।

আপনার পেমেন্ট পদ্ধতিতে অতিরিক্ত প্রয়োজনীয় তথ্য অন্তর্ভুক্ত করুন

আগে ব্যবহার করা বেস কার্ড পেমেন্ট পদ্ধতির একটি অনুলিপি তৈরি করে শুরু করুন। এই কার্ডের অর্থপ্রদানের পদ্ধতিতে এখন একটি tokenizationSpecification বৈশিষ্ট্য প্রয়োজন যাতে নির্বাচিত অর্থপ্রদানের পদ্ধতির সাথে সম্পর্কিত ডেটা কীভাবে পরিচালনা করা যায়, সেইসাথে প্রকৃত লেনদেনের জন্য প্রয়োজনীয় আরও ডেটা প্রয়োজনীয়তা নির্ধারণ করতে হয়: এই উদাহরণে, একটি সম্পূর্ণ বিলিং ঠিকানা এবং ফোন নম্বর।

tokenizationSpecification বৈশিষ্ট্য

টোকেনাইজেশন স্পেসিফিকেশন নির্ধারণ করে যে আপনার গ্রাহকদের দ্বারা নির্বাচিত অর্থপ্রদানের পদ্ধতিটি কীভাবে পরিচালনা করা হয় এবং একটি লেনদেন সম্পূর্ণ করতে ব্যবহৃত হয়।

দুটি ভিন্ন ধরনের হ্যান্ডলিং কৌশল সমর্থিত। আপনি যদি আপনার PCI DSS অনুবর্তী সার্ভারের মধ্যে থেকে অর্থপ্রদানের লেনদেন প্রক্রিয়াকরণ করেন, তাহলে DIRECT স্পেসিফিকেশন টাইপ ব্যবহার করুন। এই উদাহরণে, আপনি পেমেন্ট প্রক্রিয়া করার জন্য একটি পেমেন্ট গেটওয়ে ব্যবহার করেন, তাই আপনি PAYMENT_GATEWAY স্পেসিফিকেশন টাইপ সেট করেন।

index.js এ onGooglePaymentsButtonClicked onGooglePaymentsButtonClicked() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

parameters বিভাগে, আপনি প্রতিটি গেটওয়ের জন্য প্রয়োজনীয় অতিরিক্ত কনফিগারেশন সহ Google Pay API দ্বারা সমর্থিত প্রদানকারীদের তালিকা থেকে একটি গেটওয়ে নির্দিষ্ট করতে পারেন। এই ল্যাবের উদ্দেশ্যে, example গেটওয়ে ব্যবহার করা যথেষ্ট, যা সম্পাদিত লেনদেনের জন্য পরীক্ষার ফলাফল দেয়।

অতিরিক্ত পরামিতি

একইভাবে, আপনি এখন সফলভাবে লেনদেন করার জন্য আপনাকে অনুরোধ করতে হবে এমন তথ্য সম্পর্কে আরও বিশদ প্রদান করতে পারেন। দেখুন কিভাবে এই উদাহরণে, আপনাকে বৈশিষ্ট্য যোগ করতে হবে billingAddressRequired এবং billingAddressParameters , এই লেনদেনের জন্য ব্যবহারকারীর বিলিং ঠিকানা একটি ফোন নম্বর সহ সম্পূর্ণ বিন্যাসে প্রয়োজন।

index.js এ onGooglePaymentsButtonClicked onGooglePaymentsButtonClicked() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

লেনদেন সম্পর্কে তথ্য যোগ করা

transactionInfo তথ্য সম্পত্তিতে লেনদেন সম্পর্কে আর্থিক বিবরণ সহ একটি বস্তু রয়েছে, যথা মূল্য এবং মুদ্রা কোড ( ISO 4217 আলফা বিন্যাস) সহ মূল্যের অবস্থা , যা লেনদেনের প্রকৃতির উপর নির্ভর করে চূড়ান্ত বা অনুমান করা যেতে পারে (উদাহরণস্বরূপ , মূল্য নির্দিষ্ট শিপিং ঠিকানার উপর নির্ভর করে পরিবর্তিত হতে পারে)।

index.js এ onGooglePaymentsButtonClicked onGooglePaymentsButtonClicked() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

বণিক সম্পর্কে তথ্য যোগ করা

অর্থপ্রদানের অনুরোধটি merchantInfo সম্পত্তির অধীনে অনুরোধ সম্পাদনকারী ব্যবসায়ী সম্পর্কে তথ্য নেয়। এই কোডল্যাবে, আপনি তাদের দুটিতে ফোকাস করবেন:

  • merchantId আশা করে যে আপনার সাইটটি Google দ্বারা প্রোডাকশনে কাজ করার জন্য অনুমোদিত হলে আপনার অ্যাকাউন্টের সাথে সংশ্লিষ্ট শনাক্তকারীকে। মনে রাখবেন যে TEST পরিবেশ ব্যবহার করার সময় এটি মূল্যায়ন করা হয়নি।
  • merchantName আপনার সাইট বা প্রতিষ্ঠানের একটি ব্যবহারকারী-দৃশ্যমান নাম। কে অপারেশনের জন্য অনুরোধ করছে সে সম্পর্কে ব্যবহারকারীদের আরও তথ্য দেওয়ার জন্য এটি Google Pay পেমেন্ট শীটের ভিতরে দেখানো হতে পারে।

index.js এ onGooglePaymentsButtonClicked onGooglePaymentsButtonClicked() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

অর্থপ্রদানের তথ্যের জন্য অনুরোধ করুন এবং ফলাফল প্রক্রিয়া করুন

এখন, পূর্বে সংজ্ঞায়িত কনফিগারেশনকে চূড়ান্ত paymentDataRequest অবজেক্টে মার্জ করুন।

index.js এ onGooglePaymentsButtonClicked onGooglePaymentsButtonClicked() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

এই মুহুর্তে, আপনার কাছে বৈধ অর্থপ্রদানের পদ্ধতির জন্য Google Pay API-কে জিজ্ঞাসা করার জন্য প্রয়োজনীয় সবকিছুই রয়েছে। এটি করার জন্য, PaymentsClient অবজেক্টে loadPaymentData পদ্ধতি ব্যবহার করুন, আপনার এইমাত্র সংজ্ঞায়িত কনফিগারেশনটি পাস করুন।

index.js এ onGooglePaymentsButtonClicked onGooglePaymentsButtonClicked() ফাংশনের ভিতরে, নিম্নলিখিতগুলি পেস্ট করুন:

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

loadPaymentData পদ্ধতিতে কল করা Google Pay পেমেন্ট শীটের উপস্থাপনাকে ট্রিগার করে। কোন কনফিগারেশন ত্রুটি না থাকলে, আপনি বর্তমানে লগ ইন করা অ্যাকাউন্টের সাথে যুক্ত বৈধ অর্থপ্রদানের পদ্ধতির একটি তালিকা দেখতে পারেন।

নির্বাচনের পরে, শীটটি বন্ধ হয়ে যায় এবং Promise একটি পেমেন্টডেটা অবজেক্টের সাথে পূরণ করা হয় যার মধ্যে নির্বাচিত অর্থপ্রদানের পদ্ধতি সম্পর্কে প্রাসঙ্গিক তথ্য রয়েছে:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

আপনি এখন প্রকৃত লেনদেন করার জন্য এই অর্থপ্রদান পদ্ধতির তথ্য ব্যবহার করতে পারেন।

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

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

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

এরপর, আপনি একটি পেমেন্ট ডাটা কলব্যাক অন্তর্ভুক্ত করার জন্য googlePayClient এর সৃষ্টিকে সংশোধন করেন, যেটিকে বলা হয় যখনই পেমেন্ট অপারেশনে callbackIntents paymentDataCallback অন্তর্ভুক্ত একটি পরিবর্তন করা হয়। এই কলব্যাকের বৈশিষ্ট্যগুলি পরিবর্তিত সহ একটি বস্তু অন্তর্ভুক্ত। আপনি একটি আপডেট পেমেন্ট লেনদেন তৈরি করতে এই পরিবর্তনগুলি ব্যবহার করতে পারেন:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

কলব্যাকে এই নতুন বস্তুটি ফিরে আসার পরে, পেমেন্ট শিটে উপস্থাপিত তথ্য লেনদেনে করা পরিবর্তনগুলি প্রতিফলিত করার জন্য আপডেট করা হয়।

এখন যেহেতু আপনি পরীক্ষা করেছেন যে ইন্টিগ্রেশনটি পর্যাপ্তভাবে কাজ করে, আপনি Google Pay ব্যবহার করা যাবে তা নির্ধারণ করার সাথে সাথে আপনি আরও এক ধাপ এগিয়ে যেতে পারেন এবং আপনার পেমেন্ট কনফিগারেশন প্রিফেচ করতে পারেন। ব্যবহারকারী Google Pay পেমেন্ট বোতামটি সক্রিয় (ক্লিক) করার আগে এটি ঘটে।

আপনি যদি অর্থপ্রদানের ডেটা প্রিফেচ করেন, আপনার ব্যবহারকারী অর্থপ্রদান করার সিদ্ধান্ত নেওয়ার সময়, লোড করার জন্য শীটটির প্রয়োজনীয় তথ্য ইতিমধ্যেই পাওয়া যাবে, লোডের সময় উল্লেখযোগ্যভাবে হ্রাস পাবে এবং তাই সামগ্রিক অভিজ্ঞতার উন্নতি হবে৷

এই পদ্ধতিটি loadPaymentData হিসাবে একই ইনপুট আশা করে। অর্থাৎ, আপনি আগে সংজ্ঞায়িত একই paymentDataRequest অবজেক্ট ব্যবহার করতে পারেন। এখন, আপনাকে যা করতে হবে তা হল প্রিফেচ পদ্ধতিতে একটি কল অন্তর্ভুক্ত করার সাথে সাথে আপনি নির্ধারণ করেছেন যে ব্যবহারকারী Google Pay ব্যবহার করতে পারবেন, isReadyToPay সফলভাবে ফিরে আসার পরে:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

ঠিক তেমনই, ব্যবহারকারী বোতামে ক্লিক করার আগে পেমেন্ট ডেটা প্রিফেচ করে আপনি লোডের সময় কমিয়েছেন। আপনার সাইটের উন্নত প্রতিক্রিয়াশীলতা আপনার রূপান্তর হার উন্নত করা উচিত.

আপনি এই কোডল্যাব বা আপনার নিজের অ্যাপ্লিকেশনে নমুনা সাইটে Google Pay API সফলভাবে একত্রিত করেছেন।

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

আমরা কভার করেছি কি

  • আপনার সাইটে Google API আমদানি এবং কনফিগার করুন।
  • API এর জন্য সমর্থন নির্ধারণ করুন এবং সেই অনুযায়ী প্রতিক্রিয়া জানান।
  • ব্যবহারকারীদের Google Pay ব্যবহার করে পেমেন্ট করার অনুমতি দিতে একটি বোতাম যোগ করুন।
  • পূর্বে সংরক্ষিত ব্যবহারকারীর অর্থপ্রদানের তথ্য লোড এবং প্রক্রিয়া করুন।
  • অর্থপ্রদানের তথ্য প্রিফেচ করে লোড টাইম অপ্টিমাইজ করুন।

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

  • Google Pay সম্পর্কে আরও জানুন।
  • ইন্টিগ্রেশন চেকলিস্ট পর্যালোচনা করুন এবং একটি বণিক শনাক্তকারী পান।
  • দুটি ভিন্ন ধরনের ইন্টিগ্রেশন দেখুন এবং সিদ্ধান্ত নিন কোনটি আপনার জন্য ভাল: সরাসরি একীভূত করা বা পেমেন্ট গেটওয়ে বা প্রসেসর ব্যবহার করে।
  • অর্থপ্রদানের প্রক্রিয়া শুরু করতে এবং একটি অর্থপ্রদানের অনুমোদনের স্থিতি স্বীকার করতে অনুমোদন পেমেন্ট সেট আপ করুন৷ (প্রমাণ বা প্রত্যাখ্যান)

আরও জানুন

আপনি কি এটা উপকারী মনে করছেন??

খুব দরকারী! শুধু প্রত্যাশা পূরণের জন্য যথেষ্ট। আসলে তা না.

আপনি কি অন্যান্য ধরনের ইন্টিগ্রেশন (Android, সরাসরি ইন্টিগ্রেশন, লয়ালটি এপিআই) এর সাথে সাহায্য করার জন্য অন্যান্য কোডল্যাব দেখতে চান?

হ্যাঁ অনুগ্রহ করে, এটা মহান হবে! আমি যা পেয়েছি তাতেই খুশি।