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

ওয়েব 101 এর জন্য Google Pay API: বেসিক

১. ভূমিকা

আপনি যা তৈরি করবেন

এই কোডল্যাবটি সম্পন্ন করার পর, আপনার কাছে একটি কার্যকরী গুগল পে ইন্টিগ্রেশন সহ একটি ন্যূনতম কার্যকর ওয়েবসাইট থাকবে। এই প্রজেক্টটি একটি পেমেন্ট টোকেন সংগ্রহ করে, যা প্রক্রিয়াকরণের জন্য কোনো পেমেন্ট পরিষেবা প্রদানকারীর কাছে পাঠানো যেতে পারে।

আপনি যা শিখবেন

কীভাবে গুগল পে এপিআই লোড এবং কনফিগার করবেন
গুগল পে বাটন কীভাবে প্রদর্শন করবেন এবং ক্লিকগুলো কীভাবে সামলাবেন
গুগল পে থেকে কীভাবে পেমেন্ট টোকেনের জন্য অনুরোধ করবেন

আপনার যা যা লাগবে

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

২. এইচটিএমএল পৃষ্ঠাটি তৈরি করুন

প্রজেক্ট ফাইল তৈরি করুন

আপনার কম্পিউটারে gpay-web-101 নামে একটি ফোল্ডার তৈরি করুন এবং সেই ফোল্ডারের ভিতরে index.html এবং main.js নামে দুটি খালি টেক্সট ফাইল তৈরি করুন। আপনার ডিরেক্টরি কাঠামোটি দেখতে এইরকম হবে:
```
gpay-web-101/
  index.html
  main.js
```

আপনার পছন্দের IDE-তে index.html খুলুন এবং নিম্নলিখিত কোডটি যোগ করুন:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

কোডের ব্যাখ্যা

পেজটিতে gpay-container আইডি সহ একটি খালি DIV যোগ করা হয়েছে। এই DOM এলিমেন্টটি হবে প্যারেন্ট এলিমেন্ট, যার মধ্যে গুগল পে বাটনটি যুক্ত করা হবে। আপনি আপনার ওয়েবসাইটের লেআউটে প্রয়োজন অনুযায়ী এই এলিমেন্টটির অবস্থান নির্ধারণ করতে পারেন।
` main.js স্ক্রিপ্ট ট্যাগটি gpay-container এলিমেন্টের পরে DOM-এ রাখা হয়। main.js কোয়েরি করার আগে `container DIV`-টি যেন DOM-এ উপস্থিত থাকে, তা নিশ্চিত করার জন্যই এটি করা হয়। এছাড়াও, স্ক্রিপ্টটি সিনক্রোনাস, যাতে pay.js লোড হওয়ার আগেই এটি লোড হয়ে যায়; কারণ লোড সম্পন্ন হওয়ার আগেই onGooglePayLoaded() ` মেথডটির অস্তিত্ব থাকা আবশ্যক। একই ফল লাভের আরও অন্যান্য উপায় আছে, কিন্তু সেগুলো এখানে আলোচনা করা হবে না।
অবশেষে, pay.js অ্যাসিঙ্ক্রোনাসভাবে লোড হয় এবং এর onload হ্যান্ডলার হিসেবে onGooglePayLoaded() মেথডটি কনফিগার করে। এই মেথডটি main.js এ সংজ্ঞায়িত করা হবে।

৩. গুগল পে কনফিগার করুন

একটি গুগল পে পেমেন্ট অনুরোধের জন্য একটি রিকোয়েস্ট অবজেক্ট প্রয়োজন। এখানে baseGooglePayRequest হিসেবে সংজ্ঞায়িত অবজেক্টটিতে সমস্ত অনুরোধের জন্য ন্যূনতম সাধারণ সেটিংস থাকে। অনুরোধের ধরনের ওপর নির্ভর করে অতিরিক্ত সেটিংস যোগ করা হবে, যা আমরা এই কোডল্যাবে পর্যালোচনা করব।

খালি main.js ফাইলে Google Pay কনফিগারেশন কনস্ট্যান্টগুলো যোগ করুন:

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

কোডের ব্যাখ্যা

HTML পেজে গুগল পে বাটনের প্যারেন্ট কন্টেইনার হিসেবে ব্যবহৃত DOM এলিমেন্টের আইডি-কে GPAY_BUTTON_CONTAINER_ID কনস্ট্যান্ট ভেরিয়েবলটিতে সেট করুন।
আপনার অ্যাপ্লিকেশনের জন্য প্রাসঙ্গিক সেটিংস সহ baseGooglePayRequest কনফিগারেশন অবজেক্টটি তৈরি করুন। প্রতিটি প্রপার্টি এবং ভ্যালু রেফারেন্স ডকুমেন্টেশনে পাওয়া যাবে। এই উদাহরণে দেখানো ভ্যালুগুলো আপনার প্রয়োজনের সাথে পুরোপুরি নাও মিলতে পারে, তাই সাবধানে পর্যালোচনা করুন।
merchantId এবং merchantName প্রপার্টিগুলো আপনার নিজের মান দিয়ে আপডেট করুন। এনভায়রনমেন্ট TEST হলে এই ফিল্ডগুলো ঐচ্ছিক।

সম্পদ

ব্লগ পোস্ট : গুগল পে-এর মাধ্যমে আরও সহজে পেমেন্ট করতে চান? আপনার পেমেন্টের বিকল্পগুলো কনফিগার করুন!
এপিআই রেফারেন্স : গুগল পে এপিআই অনুরোধ অবজেক্টের ডকুমেন্টেশন
এপিআই রেফারেন্স : অনুমোদিত অনুমোদন পদ্ধতি, অনুমোদিত কার্ড নেটওয়ার্ক এবং সঠিক গেটওয়ে মান সহ টোকেনাইজেশন স্পেসিফিকেশন সম্পর্কে আরও তথ্যের জন্য PaymentMethod দেখুন।

৪. পেমেন্ট ক্লায়েন্ট যোগ করুন

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

এই ক্লায়েন্ট কোডটি main.js ফাইলের শেষে যুক্ত করুন:

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

কোডের ব্যাখ্যা

paymentsClient ভেরিয়েবলটি ক্লায়েন্টের ইনস্ট্যান্সটি ধারণ করবে, যা একবার তৈরি হয়ে গেলে ব্যবহৃত হবে। আমাদের কোড সরাসরি এই ভেরিয়েবলটি অ্যাক্সেস করে না, বরং সবসময় getGooglePaymentsClient() মেথডটি এটি অ্যাক্সেস করে।
` getGooglePaymentsClient() ` মেথডটি পরীক্ষা করে দেখে যে আগে থেকেই কোনো ক্লায়েন্ট ইনস্ট্যানশিয়েট করা হয়েছে কিনা এবং সেই ইনস্ট্যান্সটি রিটার্ন করে। যদি আগে থেকে কোনোটি ইনস্ট্যানশিয়েট করা না থাকে, তবে একটি তৈরি করে, সংরক্ষণ করে এবং রিটার্ন করা হয়। এই মেথডটি নিশ্চিত করে যে এই স্ক্রিপ্টটির জীবনকাল জুড়ে শুধুমাত্র একটি ইনস্ট্যান্সই তৈরি এবং ব্যবহৃত হবে।
একটি ক্লায়েন্ট ইনস্ট্যানশিয়েট করতে PaymentsClient() মেথডটি কল করা হয়। এই উদাহরণে, আমরা ক্লায়েন্টকে জানাচ্ছি যে আমরা একটি TEST এনভায়রনমেন্টে আছি। এর বিকল্প হলো PRODUCTION । তবে, TEST হলো ডিফল্ট এবং এটি বাদ দেওয়া যেতে পারে।

৫. সাহায্যকারী যোগ করুন

নিম্নলিখিত সহায়ক ফাংশনগুলি স্ক্রিপ্টের পরবর্তী অংশে ব্যবহৃত হয়েছে এবং এগুলি শুধুমাত্র কোডের পঠনযোগ্যতা ও রক্ষণাবেক্ষণযোগ্যতা উন্নত করার উদ্দেশ্যে যোগ করা হয়েছে।

main.js ফাইলের শেষে হেল্পার ফাংশনগুলো যুক্ত করুন:

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

কোডের ব্যাখ্যা

deepCopy() একটি ইউটিলিটি যা JSON সিরিয়ালাইজেশন এবং ডিসিরিয়ালাইজেশন ব্যবহার করে প্রদত্ত অবজেক্টের একটি ডিপ কপি তৈরি করে। শেয়ার্ড রেফারেন্স নিয়ে চিন্তা না করে অবজেক্ট ক্লোন করার এটি একটি সুবিধাজনক উপায়।
renderGooglePayButton() একটি ইউটিলিটি যা Google Pay বাটন প্রদর্শন করার জন্য createButton() লাইব্রেরি মেথডকে কল করে। পাস করা আর্গুমেন্টটি হলো কিছু অপশনের সমষ্টি যা নির্ধারণ করে বাটনটি কীভাবে কাজ করবে, যেমন বাটন ক্লিক হ্যান্ডেল করার জন্য onGooglePaymentButtonClicked() ফাংশনটি রেজিস্টার করা।

৬. ইভেন্ট হ্যান্ডলার যোগ করুন

এই স্ক্রিপ্টে আমরা দুটি ইভেন্ট হ্যান্ডলার কনফিগার করছি। প্রথমটি pay.js লাইব্রেরি লোড হওয়া শেষ হলে এবং অন্যটি গুগল পে বাটনে ক্লিক করা হলে কল করা হয়।

main.js ফাইলের শেষে ইভেন্ট হ্যান্ডলারগুলো যুক্ত করুন:

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

কোডের ব্যাখ্যা

HTML ফাইলে সংজ্ঞায়িত pay.js স্ক্রিপ্টটি লোড হওয়া সম্পন্ন হলে onGooglePayLoaded() কল করা হয়। Google Pay বাটনটি দেখানো হবে কি না, তা নির্ধারণ করতে isReadyToPay() মেথডটি কল করা হয়। যদি গ্রাহক অর্থপ্রদানের জন্য প্রস্তুত থাকেন (অর্থাৎ, তিনি তার Google Wallet-এ কোনো অর্থপ্রদানের মাধ্যম যোগ করে থাকেন), তাহলে Google Pay বাটনটি রেন্ডার করা হয়।
Google Pay বাটনটি ক্লিক করা হলে onGooglePaymentButtonClicked() মেথডটি কল করা হয়। এই মেথডটি loadPaymentData() লাইব্রেরি মেথডকে কল করে, যা একটি পেমেন্ট টোকেন সংগ্রহ করতে ব্যবহৃত হয়। পেমেন্ট টোকেনটি পাওয়ার পর, লেনদেনটি সম্পন্ন করার জন্য আপনি সেটি আপনার পেমেন্ট গেটওয়েতে পাঠিয়ে দেবেন। transactionInfo বর্ণনা করে যে এই বাটন ক্লিকের মাধ্যমে কোন লেনদেনটি সম্পন্ন করা হবে।

৭. উপসংহার

এই কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন! আপনি শিখেছেন কিভাবে একটি ওয়েবসাইটে গুগল পে এপিআই (Google Pay API) ইন্টিগ্রেট করতে হয়।

প্রকল্পটি চালান

গুগল ক্রোম দিয়ে পরীক্ষা করুন

গুগল ক্রোম ওয়েব ব্রাউজার ব্যবহার করে, ক্রোমের প্রধান মেনু থেকে File > Open File... এর মাধ্যমে index.html খুলুন। এভাবে প্রজেক্টটি খুললে ক্রোম main.js চালু করবে। অন্যান্য ওয়েব ব্রাউজার জাভাস্ক্রিপ্ট চালু করার অনুমতি নাও দিতে পারে।

– অথবা –

স্থানীয় ওয়েব সার্ভার দিয়ে পরীক্ষা করুন

আপনার যদি পাইথন ইনস্টল করা থাকে, তাহলে রুট pay-web-101 ফোল্ডারের টার্মিনাল প্রম্পট থেকে python3 -m http.server চালান।

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

এরপর, http://localhost:8000 ঠিকানায় আপনার সাইটটি পরিদর্শন করুন।

এখান থেকে কোথায় যাওয়া যায়

অতিরিক্ত সম্পদ

ডিসকর্ডের #payments চ্যানেলে আলোচনায় যোগ দিন।
X-এ @GooglePayDevs-কে অনুসরণ করুন
ইউটিউবে গুগল পে সম্পর্কিত ভিডিও দেখুন