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

1. परिचय

खास जानकारी

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

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

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

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

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

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

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

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

Google Wallet API, इन तरीकों को बनाने के बारे में जानकारी देता है:

टाइप

ब्यौरा

पास क्लास

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

ऑब्जेक्ट पास करें

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

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

इस कोडलैब में, ये टास्क पूरे किए जा सकते हैं.

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

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

  • Git
  • आपके पास ऐसा Google खाता होना चाहिए जिसके पास Google Cloud Console का ऐक्सेस हो
  • Node.js का 10 या उसके बाद का वर्शन

मकसद

इस कोडलैब को पूरा करने के बाद, ये काम किए जा सकते हैं:

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

सहायता

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

2. सेटअप

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

Google वॉलेट जारी करने वाले खाते के लिए साइन अप करना

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 for Pass API भी कहा जाता है) चालू करें

सेवा खाता और कुंजी बनाना

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

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

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

सेवा खाते की कुंजी बनाना

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

आपको अपने लोकल वर्कस्टेशन में कुंजी सेव करने के लिए कहा जाएगा. उसकी जगह की जानकारी याद रखें.

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

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

  1. GOOGLE_APPLICATION_CREDENTIALS का एनवायरमेंट वैरिएबल सेट करने के लिए, Google Cloud सेवा खाते की कुंजियों से जुड़े दस्तावेज़ में दिए गए निर्देशों का पालन करें
  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 का इस्तेमाल करके ऐसा किया जा सकता है. इस कोडलैब में, एपीआई का इस्तेमाल करके जेनरिक पास क्लास बनाई जा सकती है. इस प्रोसेस को पूरा करने के लिए, एक निजी बैकएंड सर्वर का इस्तेमाल करके पास क्लास बनाई जाएंगी.

  1. web/app.js फ़ाइल खोलें
  2. issuerId की वैल्यू की जगह, Google Pay से मिला जारी करने वाला आईडी डालें वॉलेट कंसोल
    // 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://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/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 के तौर पर वापस भेजा जाता है. यह उन मामलों में सबसे सही है जहां उपयोगकर्ता ज़्यादा से ज़्यादा पेमेंट करते हैं, क्योंकि इससे यह पक्का हो जाता है कि उपयोगकर्ता के वॉलेट में जोड़ने से पहले ही ऑब्जेक्ट मौजूद है.

जब उपयोगकर्ता पास ऑब्जेक्ट को अपने Wallet में जोड़ता है, तब उसे बनाना

इस तरीके में, पास ऑब्जेक्ट को बैकएंड सर्वर पर, साइन किए गए 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://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/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://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/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 में जोड़ें बटन में किया जा सकता है. जब उपयोगकर्ता इस बटन पर क्लिक करेगा, तब उसे 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 से जुड़ी ज़रूरी शर्तें देखें.