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

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

1. ভূমিকা

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

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

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

কিভাবে Google Pay API লোড এবং কনফিগার করবেন
কীভাবে Google Pay বোতাম প্রদর্শন করবেন এবং ক্লিকগুলি পরিচালনা করবেন
কিভাবে Google Pay থেকে একটি পেমেন্ট টোকেন অনুরোধ করবেন

আপনি কি প্রয়োজন হবে

HTML এবং JavaScript ফাইল সম্পাদনা করতে আপনার পছন্দের একটি পাঠ্য সম্পাদক৷
Google Chrome ওয়েব ব্রাউজার, বা স্থানীয় ওয়েবসাইট পরীক্ষা করার অন্য উপায়।
উৎপাদনের জন্য, আপনার একটি Google Pay merchantId প্রয়োজন হবে। Google Pay এবং Wallet Console- এ নিবন্ধন করতে মাত্র এক মিনিট সময় লাগে তাই এখনই এটির যত্ন নিতে পারে।

প্রজেক্ট IDX ব্যবহার করে অনুসরণ করুন

2. HTML পৃষ্ঠা তৈরি করুন

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

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

3. Google Pay কনফিগার করুন

একটি Google Pay পেমেন্টের অনুরোধের জন্য একটি অনুরোধ বস্তু প্রয়োজন। এখানে যে বস্তুটিকে 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);

কোড ব্যাখ্যা

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

সম্পদ

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

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

একটি পেমেন্ট ক্লায়েন্ট অর্থপ্রদানের অনুরোধ করতে এবং কলব্যাক নিবন্ধন করতে ব্যবহৃত হয়। এই কোডল্যাবে আমরা শুধুমাত্র অর্থপ্রদানের অনুরোধ করব। উপরন্তু, পেমেন্ট ডেটা পরিবর্তিত হলে বা অনুমোদন পরিবর্তিত হলে আপনি পরিচালনা করার জন্য 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 ডিফল্ট এবং বাদ দেওয়া হতে পারে।

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

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

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() ফাংশনে নিবন্ধন করা।

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

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

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);
}

কোড ব্যাখ্যা

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

7. উপসংহার

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

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

Google Chrome দিয়ে পরীক্ষা করুন

Google Chrome ওয়েব ব্রাউজার ব্যবহার করে, ক্রোমের প্রধান মেনু থেকে ফাইল > ওপেন ফাইল... ব্যবহার করে index.html খুলুন। এইভাবে প্রজেক্ট খোলা হলে Chrome 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 এ আপনার সাইটে যান।

এখান থেকে কোথায় যেতে হবে

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

Discord-এ #payments চ্যানেলে কথোপকথনে যোগ দিন
X-এ @GooglePayDevs অনুসরণ করুন
YouTube-এ Google Pay সম্পর্কিত ভিডিও দেখুন