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

1. ভূমিকা

এই কোডল্যাব হল ওয়েব 101-এর জন্য Google Pay API-এর ধারাবাহিকতা: বেসিক এবং সেই কোডল্যাবে লেখা কোডের উপর নির্ভর করে। এই কোডল্যাবটি সম্পূর্ণ করার জন্য, প্রথমে এটি সম্পূর্ণ করতে ভুলবেন না।

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

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

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

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

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

IDX-এ এই কোডল্যাবটি খুলুন

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

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

অপশন

প্রয়োজনীয়তা

মূল্যবোধ

onClick

প্রয়োজন

জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলারের নাম

অনুমোদিত পেমেন্ট পদ্ধতি

ঐচ্ছিক

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.

বোতাম রেডিয়াস

ঐচ্ছিক

0 থেকে 100

বাটন রুটনোড

ঐচ্ছিক

HTML ডকুমেন্ট বা ShadowRoot

বোতাম সাইজমোড

ঐচ্ছিক

static, fill

বোতামের প্রকার

ঐচ্ছিক

বই, কেনা, চেকআউট, দান, অর্ডার, পে, প্লেইন, সাবস্ক্রাইব

আপনার 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 কনফিগারেশন আর্গুমেন্ট নেয় যা আপনাকে নির্ধারণ করতে দেয় কিভাবে আপনি বোতামটি দেখতে এবং আচরণ করতে চান।

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

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

  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 মন্তব্য খুঁজুন এবং এই কোড দিয়ে মন্তব্য প্রতিস্থাপন করুন। এই কোডল্যাবে, আমরা 4টি উদ্দেশ্য বাস্তবায়ন করতে যাচ্ছি। 
    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 আবশ্যক । এই কলব্যাকটি চালু করা হয় যখন callbackIntents তালিকায় PAYMENT_AUTHORIZATION থাকে PaymentDataRequest .
  3. onPaymentDataChanged ঐচ্ছিক । এই কলব্যাকটি চালু করা হয় যখন callbackIntents তালিকায় OFFER , SHIPPING_ADDRESS , বা SHIPPING_OPTION থাকে PaymentDataRequest ।
  4. এই কোডল্যাবের জন্য উভয় কলব্যাক ট্রিগার করতে PaymentDataRequest এ callbackIntents সেট করুন।

4. পেমেন্ট অনুমোদন

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

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 আর্গুমেন্টের সাথে আহ্বান করা হয়েছে এবং একটি প্রতিশ্রুতি ফেরত দিতে হবে। এই উদাহরণে, ফাংশনটি এলোমেলোভাবে নির্বাচন করছে যে সফলতা বা একটি ত্রুটি ফিরিয়ে দিতে হবে। আপনার প্রকল্পে, আপনি paymentData.paymentMethodData.tokenizationData.token এ paymentData পাওয়া টোকেন ব্যবহার করে আপনার গেটওয়ের সাথে লেনদেন প্রক্রিয়া করার এই সুযোগটি ব্যবহার করবেন।

5. পেমেন্ট ডেটা পরিবর্তন

ডায়নামিক মূল্য আপডেটগুলি একজন বণিককে একটি নির্বাচিত শিপিং ঠিকানার ভিত্তিতে শিপিং বিকল্প এবং লেনদেনের তথ্য গতিশীলভাবে আপডেট করতে দেয়৷ উপরন্তু, আপনি একটি নির্বাচিত শিপিং বিকল্পের উপর ভিত্তি করে গতিশীলভাবে লেনদেনের তথ্য আপডেট করতে পারেন।

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

কোড ব্যাখ্যা

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

6. উপসংহার

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

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

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 এ আপনার সাইটে যান।

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

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