ওয়েব 201 এর জন্য Google Pay API: উন্নত

১. ভূমিকা

এই কোডল্যাবটি ' Google Pay API for Web 101: Basics'- এর একটি ধারাবাহিক অংশ এবং এটি সেই কোডল্যাবে লেখা কোডের উপর নির্ভরশীল। এই কোডল্যাবটি সম্পূর্ণ করার জন্য, প্রথমে সেটি অবশ্যই সম্পন্ন করুন।

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

• গুগল পে বাটনটি কীভাবে কাস্টমাইজ করবেন
• পেমেন্ট প্রক্রিয়া কীভাবে শুরু করবেন
• পেমেন্ট অনুমোদন স্থিতি কীভাবে স্বীকার করবেন
• শিপিং ঠিকানা পরিবর্তন কীভাবে সামলাবেন
• রিডেম্পশন কোডগুলি কীভাবে পরিচালনা করবেন

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

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

ফায়ারবেস স্টুডিও ব্যবহার করে অনুসরণ করুন

২. বোতাম কাস্টমাইজেশন

এটি ButtonOptions এর একটি সংক্ষিপ্ত বিবরণ। আরও বিস্তারিত ব্যাখ্যার জন্য ডকুমেন্টেশন দেখুন।

বিকল্প	প্রয়োজনীয়তা	মূল্যবোধ
ক্লিক করুন	প্রয়োজনীয়	জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলারের নাম
অনুমোদিত অর্থপ্রদানের পদ্ধতি	ঐচ্ছিক	PaymentMethod[]
বোতামের রঙ	ঐচ্ছিক	ডিফল্ট, কালো, সাদা
বোতামের অবস্থান	ঐচ্ছিক	দুই অক্ষরের ISO 639-1 কোড। সমর্থিত লোকেলগুলোর মধ্যে রয়েছে en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk, এবং zh।
বোতামের ব্যাসার্ধ	ঐচ্ছিক	০ থেকে ১০০
বাটনরুটনোড	ঐচ্ছিক	HTMLDocument বা ShadowRoot
বোতামের আকার মোড	ঐচ্ছিক	স্থির, পূরণ
বোতামের ধরন	ঐচ্ছিক	বই, কেনা, চেকআউট, দান, অর্ডার, পরিশোধ, সাধারণ, সাবস্ক্রাইব

আপনার main.js ফাইলে renderGooglePayButton() মেথডটি খুঁজুন এবং এটিকে এখানে তালিকাভুক্ত কোড দিয়ে প্রতিস্থাপন করুন।

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

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

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

1. ` createButton() ` লাইব্রেরি মেথডটি ButtonOptions একটি কনফিগারেশন আর্গুমেন্ট গ্রহণ করে, যা আপনাকে বাটনটির চেহারা ও আচরণ কেমন হবে তা নির্ধারণ করতে দেয়।

৩. পেমেন্ট ডেটা কলব্যাক

পেমেন্ট ক্লায়েন্ট আপনাকে নির্দিষ্ট কিছু ঘটনা ঘটলে তা পরিচালনা করার জন্য ফাংশন নিবন্ধন করার একটি ব্যবস্থা প্রদান করে। প্রথমটি হলো পেমেন্ট অনুমোদন এবং দ্বিতীয়টি হলো পেমেন্টের তথ্য পরিবর্তন।

1. main.js ফাইলে // todo: paymentDataCallbacks কমেন্টটি খুঁজুন এবং এটিকে এই কোড দিয়ে প্রতিস্থাপন করুন।

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. এরপর, main.js ফাইলের Event Handlers সেকশনটি খুঁজুন এবং সেকশনটির শেষে নিম্নলিখিত কোডটি যুক্ত করুন।

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. অবশেষে, main.js মধ্যে // todo: callbackIntents কমেন্টটি খুঁজুন এবং কমেন্টটি এই কোড দিয়ে প্রতিস্থাপন করুন। এই কোডল্যাবে, আমরা ৪টি ইন্টেন্টই ইমপ্লিমেন্ট করতে যাচ্ছি।

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

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

1. PaymentDataCallbacks প্রপার্টিটির দুটি সাব-প্রপার্টি রয়েছে—একটি পেমেন্ট অনুমোদন কলব্যাকের জন্য এবং দ্বিতীয়টি পেমেন্ট ডেটা পরিবর্তন কলব্যাকের জন্য।
2. কলব্যাক প্রয়োগ করার ক্ষেত্রে, onPaymentAuthorized আবশ্যক । PaymentDataRequest এর callbackIntents তালিকায় PAYMENT_AUTHORIZATION থাকলে এই কলব্যাকটি চালু হয়।
3. onPaymentDataChanged ঐচ্ছিক । PaymentDataRequest callbackIntents তালিকায় OFFER , SHIPPING_ADDRESS , বা SHIPPING_OPTION থাকলে এই কলব্যাকটি চালু হয়।
4. এই কোডল্যাবের জন্য উভয় কলব্যাক ট্রিগার করতে PaymentDataRequest এ callbackIntents সেট করুন।

৪. অর্থপ্রদানের অনুমোদন

পেমেন্ট প্রক্রিয়া শুরু করতে এবং পেমেন্ট অনুমোদনের অবস্থা নিশ্চিত করতে ‘পেমেন্ট অনুমোদন’ ব্যবহার করা হয়।

গত ধাপে main.js এ যোগ করা onPaymentAuthorized() ফাংশনটি খুঁজুন এবং এটিকে নিচের কোড দিয়ে প্রতিস্থাপন করুন।

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

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

1. onPaymentAuthorized() কলব্যাক ফাংশনটি PaymentData আর্গুমেন্ট দিয়ে কল করা হয় এবং এটিকে অবশ্যই একটি প্রমিজ রিটার্ন করতে হবে। এই উদাহরণে, ফাংশনটি র‍্যান্ডমভাবে বেছে নিচ্ছে যে এটি সাকসেস (success paymentData.paymentMethodData.tokenizationData.token paymentData থাকা টোকেনটি দিয়ে আপনার গেটওয়ের মাধ্যমে ট্রানজ্যাকশনটি প্রসেস করবেন।

৫. পেমেন্টের তথ্য পরিবর্তন

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

শেষ ধাপে main.js এ যোগ করা onPaymentDataChanged() ফাংশনটি খুঁজুন এবং এটিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

loadPaymentData() এর একটিমাত্র কলের সাথে INITIALIZE কলব্যাকটি একাধিকবার ট্রিগার হতে পারে, তাই আপনাকে নিশ্চিত করতে হবে যে আপনি এর একাধিক কল সামলাতে পারবেন। উদাহরণস্বরূপ, যখন ব্যবহারকারী অ্যাকাউন্ট পরিবর্তন করেন, তখন নতুন অ্যাকাউন্টের ডেটা দিয়ে onPaymentDataChanged() আবার INITIALIZE কলব্যাকসহ কল ​​করা হয়।

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

1. onPaymentDataChanged() ফাংশনটি আর্গুমেন্ট হিসেবে IntermediatePaymentData গ্রহণ করে। পেমেন্ট শিটে শিপিং ঠিকানা বা শিপিং অপশন পরিবর্তন করা হলে এই ফাংশনটি কল করা হয়।
2. onPaymentDataChanged() ফাংশনটিকে অবশ্যই একটি প্রমিজ রিটার্ন করতে হবে যা একটি PaymentDataRequestUpdate অবজেক্ট রিজলভ করে। এই অবজেক্টটিতে পেমেন্ট শীট আপডেট করার জন্য নতুন ট্রানজ্যাকশন তথ্য, শিপিং অপশন এবং এরর উল্লেখ করা থাকে।
3. redemptionCodes হলো পেমেন্ট শীটে প্রবেশ করানো একগুচ্ছ প্রচারমূলক কোড। এর মধ্যে ইতিমধ্যে অনুমোদিত কোডগুলোও অন্তর্ভুক্ত রয়েছে।

৬. উপসংহার

এই কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন! আপনি শিখেছেন কিভাবে...

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

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

গুগল ক্রোম ওয়েব ব্রাউজার ব্যবহার করে, ক্রোমের প্রধান মেনু থেকে 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-কে অনুসরণ করুন
• ইউটিউবে গুগল পে সম্পর্কিত ভিডিও দেখুন