Google Pay for Web 201: बेहतर सुविधाएं

1. परिचय

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

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

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

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

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

Project IDX का इस्तेमाल करके, इस प्रोसेस को पूरा करना

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

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

विकल्प	ज़रूरी है	वैल्यू
onClick	ज़रूरी है	JavaScript इवेंट हैंडलर का नाम
allowedPaymentMethods	ज़रूरी नहीं	PaymentMethod[]
buttonColor	ज़रूरी नहीं	डिफ़ॉल्ट, काला, सफ़ेद
buttonLocale	ज़रूरी नहीं	दो अक्षर वाला 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.
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 वेब ब्राउज़र का इस्तेमाल करके, index.html खोलें. इसके लिए, Chrome के मुख्य मेन्यू में जाकर, फ़ाइल > फ़ाइल खोलें... का इस्तेमाल करें. इस तरह से प्रोजेक्ट खोलने पर, 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 से जुड़े वीडियो देखना