Google Wallet API का इस्तेमाल करके, वेब पर पास बनाएं

1. परिचय

खास जानकारी

Google Wallet API की मदद से, उपयोगकर्ताओं को कई तरह के पास दिए जा सकते हैं. जैसे, लॉयल्टी कार्ड, ऑफ़र, उपहार कार्ड, इवेंट के टिकट, बस, मेट्रो वगैरह के टिकट, बोर्डिंग पास वगैरह. हर तरह के पास या पास की क्लास के साथ, इस्तेमाल के उदाहरण के हिसाब से फ़ील्ड और सुविधाएं मिलती हैं. इससे उपयोगकर्ता अनुभव बेहतर होता है.

हालांकि, हो सकता है कि ये सुविधाएं हर इस्तेमाल के उदाहरण के लिए सही न हों. अपनी ज़रूरत के हिसाब से बेहतर अनुभव देने के लिए, सामान्य पास के टाइप का इस्तेमाल किया जा सकता है. सामान्य पास के टाइप के इस्तेमाल के कुछ उदाहरण यहां दिए गए हैं:

  • पार्किंग पास
  • लाइब्रेरी की सदस्यता वाले कार्ड
  • जमा रकम वाले वाउचर
  • जिम की सदस्यता वाले कार्ड
  • बुकिंग

सामान्य पास का इस्तेमाल, किसी भी ऐसे इस्तेमाल के उदाहरण के लिए किया जा सकता है जिसमें ये चीज़ें शामिल हों:

  • जानकारी की तीन लाइनें
  • (ज़रूरी नहीं) बारकोड ग्राफ़िक
  • (ज़रूरी नहीं) जानकारी वाला सेक्शन

कॉन्फ़्रेंस इवेंट के लिए, Google Wallet पास का सैंपल

Google Wallet API के बारे में ज़्यादा जानने या किसी वेब पेज में Google Wallet में जोड़ें बटन जोड़ने के लिए, कृपया Google Wallet के डेवल3पर दस्तावेज़ देखें.

पास की क्लास और ऑब्जेक्ट

Google Wallet API, इन्हें बनाने के तरीके उपलब्ध कराता है:

टाइप

ब्यौरा

पास की क्लास

किसी पास ऑब्जेक्ट के लिए टेंप्लेट. इसमें, इस क्लास के सभी पास ऑब्जेक्ट के लिए सामान्य जानकारी होती है.

पास ऑब्जेक्ट

पास की क्लास का एक इंस्टेंस, जो किसी उपयोगकर्ता आईडी के लिए यूनीक होता है.

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

इस कोडलैब में, आपको ये काम करने होंगे.

  1. डेमो मोड में, वाउचर जारी करने वाले व्यापारी/कंपनी का नया खाता बनाना
  2. पास जारी करने के लिए, सेवा खाता बनाना
  3. सामान्य पास की नई क्लास बनाना
  4. नया पास ऑब्जेक्ट बनाना
  5. पास सेव करने के लिए, Google Wallet में जोड़ें बटन बनाना
  6. अपने वेब पेज पर बटन दिखाना
  7. पास सेव करने के नतीजे को मैनेज करना

ज़रूरी शर्तें

मकसद

यह कोडलैब पूरा करने के बाद, आपको ये काम करने में मदद मिलेगी:

  • Google Wallet का इस्तेमाल करके, पास ऑब्जेक्ट बनाना
  • Google Wallet में जोड़ें बटन बनाना

सहायता

अगर आपको कोडलैब में किसी भी चरण पर कोई समस्या आती है, तो रेफ़रंस के लिए google-pay/wallet-web-codelab GitHub रिपॉज़िटरी में पूरा समाधान देखें.

2. सेटअप

इस चरण में, आपको डेमो मोड में वाउचर जारी करने वाले व्यापारी/कंपनी का खाता बनाना होगा. इससे, पास की क्लास और ऑब्जेक्ट बनाए जा सकेंगे. इन्हें उपयोगकर्ता के वॉलेट में जोड़ा जा सकता है. इसके बाद, आपको Google Cloud प्रोजेक्ट और सेवा खाता बनाना होगा. इनका इस्तेमाल, प्रोग्राम के ज़रिए पास की क्लास और ऑब्जेक्ट बनाने के लिए किया जाएगा. यह तरीका, बैकएंड सर्वर के तरीके जैसा ही होगा. आखिर में, आपको Google Cloud सेवा खाते को, वाउचर जारी करने वाले व्यापारी/कंपनी के Google Wallet खाते में पास मैनेज करने की अनुमति देनी होगी.

वाउचर जारी करने वाले व्यापारी/कंपनी के Google Wallet खाते के लिए साइन अप करना

Google Wallet के लिए पास बनाने और उन्हें डिस्ट्रिब्यूट करने के लिए, वाउचर जारी करने वाले व्यापारी/कंपनी का खाता होना ज़रूरी है. Google Pay और Wallet Console का इस्तेमाल करके, साइन अप किया जा सकता है. शुरुआत में, आपको डेमो मोड में पास बनाने की अनुमति मिलेगी. इसका मतलब है कि सिर्फ़ टेस्ट के लिए तय किए गए उपयोगकर्ता ही, आपके बनाए पास जोड़ पाएंगे. टेस्ट के लिए तय किए गए उपयोगकर्ताओं को, Google Pay और Wallet Console में मैनेज किया जा सकता है.

डेमो मोड के बारे में ज़्यादा जानने के लिए, सामान्य पास की ज़रूरी शर्तें देखें.

  1. Google Pay और Wallet Console खोलें
  2. वाउचर जारी करने वाले व्यापारी/कंपनी का खाता बनाने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें
  3. Google Wallet API को चुनें
  4. पुष्टि करें कि आपको सेवा की शर्तें और निजता नीति समझ आ गई हैं
  5. वाउचर जारी करने वाले व्यापारी/कंपनी का आईडी वैल्यू को किसी टेक्स्ट एडिटर या दूसरी जगह पर कॉपी करें
  6. मैनेज करें टैब में जाकर, टेस्ट खाते सेट अप करें को चुनें
  7. इस कोडलैब में इस्तेमाल किए जाने वाले सभी ईमेल पते जोड़ें

Google Wallet API चालू करना

  1. Google Cloud Console में साइन इन करें
  2. अगर आपके पास पहले से कोई Google Cloud प्रोजेक्ट नहीं है, तो अभी एक बनाएं. ज़्यादा जानकारी के लिए, प्रोजेक्ट बनाना और मैनेज करना लेख देखें
  3. अपने प्रोजेक्ट के लिए, Google Wallet API (इसे पास के लिए Google Pay API भी कहा जाता है) चालू करें

सेवा खाता और पासकोड बनाना

Google Wallet API को कॉल करने के लिए, सेवा खाता और सेवा खाता पासकोड होना ज़रूरी है. सेवा खाता, Google Wallet API को कॉल करने वाली पहचान होती है. सेवा खाता पासकोड में एक निजी पासकोड होता है. इससे आपके ऐप्लिकेशन की पहचान, सेवा खाते के तौर पर होती है. यह पासकोड संवेदनशील होता है, इसलिए इसे गोपनीय रखें.

सेवा खाता बनाना

  1. Google Cloud Console में, सेवा खाते खोलें
  2. अपने सेवा खाते के लिए कोई नाम, आईडी, और ब्यौरा डालें
  3. बनाएं और जारी रखें को चुनें
  4. हो गया को चुनें

सेवा खाता पासकोड बनाना

  1. अपना सेवा खाता चुनें
  2. पासकोड मेन्यू चुनें
  3. **पासकोड जोड़ें** को चुनें. इसके बाद, **नया पासकोड बनाएं** को चुनें
  4. JSON पासकोड टाइप चुनें
  5. बनाएं को चुनें

आपको पासकोड वाली फ़ाइल को अपने लोकल वर्कस्टेशन में सेव करने के लिए कहा जाएगा. पक्का करें कि आपको इसकी जगह याद रहे.

GOOGLE_APPLICATION_CREDENTIALS एनवायरमेंट वैरिएबल सेट करना

Google SDK, GOOGLE_APPLICATION_CREDENTIALS एनवायरमेंट वैरिएबल का इस्तेमाल, सेवा खाते के तौर पर पुष्टि करने और Google Cloud प्रोजेक्ट के लिए अलग-अलग एपीआई को ऐक्सेस करने के लिए करते हैं.

  1. Google Cloud सेवा खाते के पासकोड के दस्तावेज़ में दिए गए निर्देशों का पालन करके, GOOGLE_APPLICATION_CREDENTIALS एनवायरमेंट वैरिएबल सेट करें
  2. पुष्टि करें कि एनवायरमेंट वैरिएबल, नए टर्मिनल (MacOS/Linux) या कमांड-लाइन (Windows) सेशन में सेट है. अगर पहले से कोई सेशन खुला है, तो आपको नया सेशन शुरू करना पड़ सकता है
    echo $GOOGLE_APPLICATION_CREDENTIALS

सेवा खाते को अनुमति देना

आखिर में, आपको सेवा खाते को Google Wallet के पास मैनेज करने की अनुमति देनी होगी.

  1. Google Pay और Wallet Console खोलें
  2. उपयोगकर्ता को चुनें
  3. किसी उपयोगकर्ता को न्योता दें को चुनें
  4. सेवा खाते का ईमेल पता डालें. जैसे, test-svc@myproject.iam.gserviceaccount.com
  5. ऐक्सेस का लेवल ड्रॉप-डाउन मेन्यू से, डेवलपर या एडमिन में से कोई एक विकल्प चुनें
  6. न्योता दें को चुनें

3. Node.js के सैंपल ऐप्लिकेशन को शुरू करना

अवधि 10:00

इस चरण में, आपको Node.js का एक सैंपल ऐप्लिकेशन चलाना होगा. यह ऐप्लिकेशन, शॉपिंग वेबसाइट और बैकएंड सर्वर के तौर पर काम करता है.

सैंपल रिपॉज़िटरी क्लोन करना

google-pay/wallet-web-codelab रिपॉज़िटरी में, Node.js पर आधारित एक सैंपल प्रोजेक्ट और अलग-अलग स्क्रिप्ट फ़ाइलें शामिल हैं. ये फ़ाइलें, पास की क्लास और ऑब्जेक्ट उपलब्ध कराने के लिए इस्तेमाल किए जाने वाले बैकएंड सर्वर की तरह काम करती हैं. आपको इन्हें एडिट करके, प्रॉडक्ट की जानकारी वाली स्क्रीन पर Google Wallet में जोड़ें बटन शामिल करना होगा.

  1. रिपॉज़िटरी को अपने लोकल वर्कस्टेशन पर क्लोन करें
    git clone https://github.com/google-pay/wallet-web-codelab.git

प्रोजेक्ट की डिपेंडेंसी इंस्टॉल करना

  1. क्लोन की गई रिपॉज़िटरी को अपने टर्मिनल या कमांड-लाइन प्रॉम्प्ट में खोलें
  2. web डायरेक्ट्री पर जाएं. इस कोडलैब के बाकी हिस्सों में, आपको इस ऐप्लिकेशन में बदलाव करना होगा
    cd web
  3. Node.js की डिपेंडेंसी इंस्टॉल करें
    npm install .
  4. ऐप्लिकेशन शुरू करें
    node app.js
  5. http://localhost:3000 पर चल रहे ऐप्लिकेशन को खोलें

सैंपल के तौर पर बनाया गया एक वेब ऐप्लिकेशन, जिसमें ईमेल पता डालने के लिए फ़ील्ड और पास बनाने का बटन मौजूद है

अगर आपने अपना ईमेल पता डाला और पास बनाएं को चुना, तो कुछ नहीं होगा. अगले चरणों में, आपको पास की नई क्लास और ऑब्जेक्ट बनाने के लिए, ऐप्लिकेशन को कॉन्फ़िगर करना होगा.

4. सामान्य पास की क्लास बनाना

इस चरण में, आपको अपने पास के लिए बेस क्लास बनानी होगी. जब भी किसी उपयोगकर्ता के लिए नया पास बनाया जाता है, तो वह पास की क्लास में तय की गई प्रॉपर्टी को इनहेरिट करता है.

इस कोडलैब के दौरान, पास की जो क्लास बनाई जाएगी उसमें सामान्य पास की सुविधा का इस्तेमाल किया जाएगा. इससे एक ऐसा ऑब्जेक्ट बनाया जा सकेगा जो पहचान बैज और चैलेंज पॉइंट ट्रैकर, दोनों के तौर पर काम करेगा. जब इस क्लास से कोई पास ऑब्जेक्ट बनाया जाता है, तो वह इस ग्राफ़िक की तरह दिखेगा.

पास की क्लास, Google Pay और Wallet Console में सीधे तौर पर या Google Wallet API का इस्तेमाल करके बनाई जा सकती हैं. इस कोडलैब में, आपको API का इस्तेमाल करके, सामान्य पास की क्लास बनानी होगी. यह तरीका, पास की क्लास बनाने के लिए, निजी बैकएंड सर्वर के तरीके जैसा ही होगा.

  1. web/app.js फ़ाइल खोलें
  2. issuerId की वैल्यू को, Google Pay और Wallet Console से मिले वाउचर जारी करने वाले व्यापारी/कंपनी के आईडी से बदलें
    // TODO: Define Issuer ID
const issuerId = 'ISSUER_ID';
  3. createPassClass फ़ंक्शन ढूंढें
  4. फ़ंक्शन में, पुष्टि किया गया एचटीटीपी क्लाइंट बनाएं और पास की नई क्लास बनाने के लिए, Google Wallet API का इस्तेमाल करें
    // TODO: Create a Generic pass class
let genericClass = {
  'id': `${classId}`,
  'classTemplateInfo': {
    'cardTemplateOverride': {
      'cardRowTemplateInfos': [
        {
          'twoItems': {
            'startItem': {
              'firstValue': {
                'fields': [
                  {
                    'fieldPath': "object.textModulesData['points']"
                  }
                ]
              }
            },
            'endItem': {
              'firstValue': {
                'fields': [
                  {
                    'fieldPath': "object.textModulesData['contacts']"
                  }
                ]
              }
            }
          }
        }
      ]
    },
    'detailsTemplateOverride': {
      'detailsItemInfos': [
        {
          'item': {
            'firstValue': {
              'fields': [
                {
                  'fieldPath': "class.imageModulesData['event_banner']"
                }
              ]
            }
          }
        },
        {
          'item': {
            'firstValue': {
              'fields': [
                {
                  'fieldPath': "class.textModulesData['game_overview']"
                }
              ]
            }
          }
        },
        {
          'item': {
            'firstValue': {
              'fields': [
                {
                  'fieldPath': "class.linksModuleData.uris['official_site']"
                }
              ]
            }
          }
        }
      ]
    }
  },
  'imageModulesData': [
    {
      'mainImage': {
        'sourceUri': {
          'uri': 'https://codelabs.developers.google.com/static/add-to-wallet-web/images/google-io-2021-card.png'
        },
        'contentDescription': {
          'defaultValue': {
            'language': 'en-US',
            'value': 'Google I/O 2022 Banner'
          }
        }
      },
      'id': 'event_banner'
    }
  ],
  'textModulesData': [
    {
      'header': 'Gather points meeting new people at Google I/O',
      'body': 'Join the game and accumulate points in this badge by meeting other attendees in the event.',
      'id': 'game_overview'
    }
  ],
  'linksModuleData': {
    'uris': [
      {
        'uri': 'https://io.google/2022/',
        'description': 'Official I/O \'22 Site',
        'id': 'official_site'
      }
    ]
  }
};

let response;
try {
  // Check if the class exists already
  response = await httpClient.request({
    url: `${baseUrl}/genericClass/${classId}`,
    method: 'GET'
  });

  console.log('Class already exists');
  console.log(response);
} catch (err) {
  if (err.response && err.response.status === 404) {
    // Class does not exist
    // Create it now
    response = await httpClient.request({
      url: `${baseUrl}/genericClass`,
      method: 'POST',
      data: genericClass
    });

    console.log('Class insert response');
    console.log(response);
  } else {
    // Something else went wrong
    console.log(err);
    res.send('Something went wrong...check the console logs!');
  }
}

आपका कोड चलने पर, पास की नई क्लास बनेगी और क्लास आईडी आउटपुट होगा. क्लास आईडी, वाउचर जारी करने वाले व्यापारी/कंपनी के आईडी और डेवलपर की ओर से तय किए गए सफ़िक्स से मिलकर बनता है. इस मामले में, सफ़िक्स codelab_class पर सेट है. क्लास आईडी, 1234123412341234123.codelab_class जैसा दिखेगा. आउटपुट लॉग में, Google Wallet API से मिला जवाब भी शामिल होगा.

5. सामान्य पास का ऑब्जेक्ट बनाना

इस चरण में, आपको Node.js ऐप्लिकेशन को कॉन्फ़िगर करना होगा, ताकि पहले बनाई गई क्लास का इस्तेमाल करके, सामान्य पास का ऑब्जेक्ट बनाया जा सके. उपयोगकर्ताओं के लिए पास ऑब्जेक्ट बनाने के दो तरीके हैं.

बैकएंड सर्वर पर पास ऑब्जेक्ट बनाना

इस तरीके में, पास ऑब्जेक्ट को बैकएंड सर्वर पर बनाया जाता है और क्लाइंट ऐप्लिकेशन को साइन किए गए JWT के तौर पर दिखाया जाता है. यह तरीका उन मामलों के लिए सबसे सही है जहां उपयोगकर्ता इसे ज़्यादा अपनाते हैं. इससे यह पक्का होता है कि उपयोगकर्ता के वॉलेट में पास जोड़ने की कोशिश करने से पहले, पास ऑब्जेक्ट मौजूद हो.

उपयोगकर्ता के वॉलेट में पास जोड़ने पर, पास ऑब्जेक्ट बनाना

इस तरीके में, पास ऑब्जेक्ट को बैकएंड सर्वर पर तय किया जाता है और साइन किए गए JWT में एनकोड किया जाता है. इसके बाद, क्लाइंट ऐप्लिकेशन में Google Wallet में जोड़ें बटन रेंडर किया जाता है. यह बटन, JWT को रेफ़र करता है. जब उपयोगकर्ता बटन चुनता है, तो पास ऑब्जेक्ट बनाने के लिए JWT का इस्तेमाल किया जाता है. यह तरीका उन मामलों के लिए सबसे सही है जहां उपयोगकर्ता इसे कभी-कभी अपनाते हैं या इसके बारे में जानकारी नहीं होती. इससे पास ऑब्जेक्ट बनने और उनका इस्तेमाल न होने की समस्या से बचा जा सकता है. कोडलैब में, इस तरीके का इस्तेमाल किया जाएगा.

  1. web/app.js फ़ाइल खोलें
  2. createPassObject फ़ंक्शन ढूंढें
  3. फ़ंक्शन में, अपने उपयोगकर्ता के लिए पास का नया ऑब्जेक्ट तय करें
    // TODO: Create a new Generic pass for the user
let objectSuffix = `${req.body.email.replace(/[^\w.-]/g, '_')}`;
let objectId = `${issuerId}.${objectSuffix}`;

let genericObject = {
  'id': `${objectId}`,
  'classId': classId,
  'genericType': 'GENERIC_TYPE_UNSPECIFIED',
  'hexBackgroundColor': '#4285f4',
  'logo': {
    'sourceUri': {
      'uri': 'https://developers.google.com/static/wallet/site-assets/images/pass-builder/pass_google_logo.jpg'
    }
  },
  'cardTitle': {
    'defaultValue': {
      'language': 'en',
      'value': 'Google I/O \'22'
    }
  },
  'subheader': {
    'defaultValue': {
      'language': 'en',
      'value': 'Attendee'
    }
  },
  'header': {
    'defaultValue': {
      'language': 'en',
      'value': 'Alex McJacobs'
    }
  },
  'barcode': {
    'type': 'QR_CODE',
    'value': `${objectId}`
  },
  'heroImage': {
    'sourceUri': {
      'uri': 'https://developers.google.com/static/wallet/site-assets/images/pass-builder/google-io-hero-demo-only.jpg'
    }
  },
  'textModulesData': [
    {
      'header': 'POINTS',
      'body': '1234',
      'id': 'points'
    },
    {
      'header': 'CONTACTS',
      'body': '20',
      'id': 'contacts'
    }
  ]
};

// TODO: Create the signed JWT and link
res.send("Form submitted!");

अगर आपने ऐप्लिकेशन को फिर से लोड किया, अपना ईमेल पता डाला, और फ़ॉर्म सबमिट किया, तो आपको कोई आउटपुट नहीं दिखेगा. पास ऑब्जेक्ट को बैकएंड ऐप्लिकेशन तय कर रहा है, लेकिन कोई आउटपुट नहीं दिखाया जा रहा है. इसके बाद, आपको पास को Google Wallet में जोड़ें लिंक में बदलना होगा.

6. एक Google Wallet में जोड़ें बटन बनाना

आखिरी चरण में, आपको साइन किया गया JWT बनाना होगा. साथ ही, एक ऐसा लिंक दिखाना होगा जिसका इस्तेमाल Google Wallet में जोड़ें बटन में किया जा सकता है. जब उपयोगकर्ता बटन चुनता है, तो उसे अपने वॉलेट में पास सेव करने के लिए कहा जाएगा.

  1. JWT के दावे बनाएं, उन्हें सेवा खाते के निजी पासकोड का इस्तेमाल करके एनकोड करें, और एम्बेड किए गए लिंक के साथ Google Wallet में जोड़ें बटन दिखाएं
    // TODO: Create the signed JWT and link
const claims = {
  iss: credentials.client_email,
  aud: 'google',
  origins: [],
  typ: 'savetowallet',
  payload: {
    genericObjects: [
      genericObject
    ]
  }
};

const token = jwt.sign(claims, credentials.private_key, { algorithm: 'RS256' });
const saveUrl = `https://pay.google.com/gp/v/save/${token}`;

res.send(`<a href='${saveUrl}'><img src='wallet-button.png'></a>`);
  2. अपने ब्राउज़र में चल रहे ऐप्लिकेशन को फिर से लोड करें
  3. फ़ॉर्म में अपना ईमेल पता डालें और पास बनाएं को चुनें
  4. दिखने पर, Google Wallet में जोड़ें बटन को चुनें

ऐप्लिकेशन के फ़्रंटएंड पर, &#39;Google Wallet में जोड़ें&#39; बटन सही तरीके से रेंडर हो रहा हो

7. बधाई हो

सामान्य पास ऑब्जेक्ट का उदाहरण

बधाई हो, आपने वेब पर Google Wallet API को इंटिग्रेट कर लिया है!

ज़्यादा जानें

google-pay/wallet-web-codelab GitHub रिपॉज़िटरी में, पूरा इंटिग्रेशन देखें.

पास बनाना और प्रोडक्शन के ऐक्सेस का अनुरोध करना

जब प्रोडक्शन में अपने पास जारी करने के लिए तैयार हों, तो Google Pay और Wallet Console पर जाएं और प्रोडक्शन के ऐक्सेस का अनुरोध करें.

ज़्यादा जानने के लिए, Web API की ज़रूरी शर्तें देखें.