वेब के लिए Google Pay API 201: बेहतर

1. परिचय

यह कोडलैब, वेब के लिए Google Pay API 101: बुनियादी बातें का हिस्सा है. इसमें उस कोडलैब में लिखे गए कोड का इस्तेमाल किया गया है. इस कोडलैब को पूरा करने के लिए, पहले उस कोडलैब को पूरा करें.

आपको क्या सीखने को मिलेगा

• Google Pay बटन को पसंद के मुताबिक बनाने का तरीका
• पेमेंट की प्रोसेस शुरू करने का तरीका
• पेमेंट के लिए अनुमति की स्थिति की पुष्टि करने का तरीका
• शिपिंग पते में हुए बदलावों को मैनेज करने का तरीका
• रिडेंप्शन कोड मैनेज करने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

• एचटीएमएल और JavaScript फ़ाइलों में बदलाव करने के लिए, अपनी पसंद का टेक्स्ट एडिटर.
• Google Chrome वेब ब्राउज़र या स्थानीय वेबसाइट की जांच करने का कोई दूसरा तरीका.
• प्रोडक्शन के लिए, आपको Google Pay merchantId की ज़रूरत होगी. Google Pay और Wallet Console पर रजिस्टर करने में सिर्फ़ एक मिनट लगता है. इसलिए, इसे अभी पूरा कर लें.

Firebase Studio का इस्तेमाल करके साथ-साथ काम करना

2. बटन को पसंद के मुताबिक बनाना

ButtonOptions के बारे में खास जानकारी यहां दी गई है. ज़्यादा जानकारी के लिए, दस्तावेज़ देखें

विकल्प	ज़रूरी है	वैल्यू
onClick	ज़रूरी है	JavaScript इवेंट हैंडलर का नाम
allowedPaymentMethods	ज़रूरी नहीं	PaymentMethod[]
buttonColor	ज़रूरी नहीं	डिफ़ॉल्ट, काला, सफ़ेद
buttonLocale	ज़रूरी नहीं	दो अक्षरों वाला ISO 639-1 कोड. इन भाषाओं के लिए सुविधा उपलब्ध है: अंग्रेज़ी, अरबी, बल्गेरियन, कैटलन, चेक, डैनिश, जर्मन, ग्रीक, स्पैनिश, एस्टोनियन, फ़िनिश, फ़्रेंच, क्रोएशियन, इंडोनेशियाई, इटैलियन, जापानी, कोरियन, मलय, डच, नॉर्वेजियन, पोलिश, पुर्तगाली, रूसी, स्लोवाक, स्लोवेनियन, सर्बियन, स्वीडिश, थाई, तुर्किश, यूक्रेनियन, और चीनी.
buttonRadius	ज़रूरी नहीं	0 से 100
buttonRootNode	ज़रूरी नहीं	HTMLDocument या ShadowRoot
buttonSizeMode	ज़रूरी नहीं	स्टैटिक, फ़िल
buttonType	ज़रूरी नहीं	बुक करें, खरीदें, चेकआउट करें, दान करें, ऑर्डर करें, पेमेंट करें, सादा, सदस्यता लें

अपनी 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 टिप्पणी को ढूंढें और टिप्पणी को इस कोड से बदलें. इस कोडलैब में, हम चारों इंटेंट लागू करेंगे.

   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 सूची में PaymentDataRequest में मौजूद PAYMENT_AUTHORIZATION शामिल हो.
3. onPaymentDataChanged ज़रूरी नहीं है. इस कॉलबैक को तब शुरू किया जाता है, जब callbackIntents सूची में PaymentDataRequest में OFFER, SHIPPING_ADDRESS या SHIPPING_OPTION शामिल हों.
4. इस कोडलैब के लिए, दोनों कॉलबैक को ट्रिगर करने के लिए, PaymentDataRequest में callbackIntents सेट करें.

4. पेमेंट की अनुमति देना

Authorize Payments कुकी का इस्तेमाल, पेमेंट की प्रोसेस शुरू करने और पेमेंट की अनुमति की स्थिति की पुष्टि करने के लिए किया जाता है.

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

loadPaymentData() को किए गए एक ही कॉल के दौरान, INITIALIZE कॉलबैक को कई बार ट्रिगर किया जा सकता है. इसलिए, आपको यह पक्का करना होगा कि आप इसके लिए कई कॉल हैंडल कर सकें. उदाहरण के लिए, जब उपयोगकर्ता खाता बदलता है, तो onPaymentDataChanged() को INITIALIZE के साथ फिर से कॉल किया जाता है. इसमें नए खाते का डेटा होता है.

कोड के बारे में जानकारी

1. onPaymentDataChanged() फ़ंक्शन, IntermediatePaymentData को आर्ग्युमेंट के तौर पर लेता है. इस फ़ंक्शन को तब शुरू किया जाता है, जब पेमेंट शीट में शिपिंग का पता या शिपिंग के विकल्प बदले जाते हैं.
2. onPaymentDataChanged() फ़ंक्शन को एक ऐसा प्रॉमिस देना होगा जो PaymentDataRequestUpdate ऑब्जेक्ट को हल करता है. यह ऑब्जेक्ट, पेमेंट शीट को अपडेट करने के लिए नए लेन-देन की जानकारी, शिपिंग के विकल्प, और गड़बड़ी की जानकारी देता है.
3. redemptionCodes, पेमेंट शीट में डाले गए प्रोमो कोड का सेट होता है. इसमें वे कोड शामिल हैं जिन्हें पहले ही मंज़ूरी मिल चुकी है.

6. नतीजा

इस कोडलैब को पूरा करने के लिए बधाई! आपने ... के बारे में सीखा है

प्रोजेक्ट चलाना

Google Chrome की मदद से टेस्ट करना

Google Chrome वेब ब्राउज़र का इस्तेमाल करके, Chrome के मुख्य मेन्यू में जाकर फ़ाइल > फ़ाइल खोलें... का इस्तेमाल करके index.html खोलें. इस तरह से प्रोजेक्ट खोलने पर, Chrome main.js को लागू करेगा. ऐसा हो सकता है कि दूसरे वेब ब्राउज़र, JavaScript को चालू करने की अनुमति न दें.

– या –

लोकल वेब सर्वर का इस्तेमाल करके जांच करना

अगर आपने Python इंस्टॉल किया है, तो रूट 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 से जुड़े वीडियो देखना