वेब के लिए Google Pay API की बुनियादी जानकारी

1. परिचय

आपको क्या बनाना है

इस कोडलैब को पूरा करने के बाद, आपके पास एक ऐसी वेबसाइट होगी जिस पर Google Pay इंटिग्रेशन काम कर रहा होगा. यह प्रोजेक्ट, पेमेंट टोकन को वापस पाता है. इसे पेमेंट की सेवा देने वाली कंपनी को प्रोसेस करने के लिए भेजा जा सकता है.

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

Google Pay API को लोड और कॉन्फ़िगर करने का तरीका
Google Pay बटन को दिखाने और क्लिक को मैनेज करने का तरीका
Google Pay से पेमेंट टोकन का अनुरोध करने का तरीका

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

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

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

2. एचटीएमएल पेज बनाना

प्रोजेक्ट फ़ाइलें बनाना

अपने कंप्यूटर पर gpay-web-101 नाम का एक फ़ोल्डर बनाएं. इसके बाद, इस फ़ोल्डर में index.html और main.js नाम की दो खाली टेक्स्ट फ़ाइलें बनाएं. आपकी डायरेक्ट्री का स्ट्रक्चर ऐसा दिखना चाहिए:
```
gpay-web-101/
  index.html
  main.js
```

अपने पसंदीदा IDE में index.html खोलें और यह कोड जोड़ें:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

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

पेज में gpay-container आईडी वाला एक खाली DIV जोड़ा जाता है. यह DOM एलिमेंट, पैरंट एलिमेंट होगा. इसमें Google Pay बटन जोड़ा जाएगा. इस एलिमेंट को अपनी वेबसाइट के लेआउट में, सही जगह पर रखा जा सकता है.
main.js स्क्रिप्ट टैग को DOM में gpay-container एलिमेंट के बाद रखा जाता है. यह ज़रूरी है कि main.js के लिए क्वेरी करने से पहले, कंटेनर DIV, DOM में मौजूद हो. इसके अलावा, स्क्रिप्ट सिंक्रोनस होती है, ताकि यह pay.js के लोड होने से पहले लोड हो जाए. ऐसा इसलिए, क्योंकि pay.js के लोड होने से पहले pay.js का तरीका मौजूद होना चाहिए.onGooglePayLoaded() इसी तरह के नतीजे पाने के लिए, अन्य तरीके भी उपलब्ध हैं. हालांकि, उनके बारे में यहां नहीं बताया जाएगा.
आखिर में, pay.js को एसिंक्रोनस तरीके से लोड किया जाता है. साथ ही, यह onGooglePayLoaded() को onload हैंडलर के तौर पर कॉन्फ़िगर करता है. इस तरीके के बारे में main.js में बताया जाएगा.

3. Google Pay को कॉन्फ़िगर करना

Google Pay से पेमेंट का अनुरोध करने के लिए, अनुरोध ऑब्जेक्ट की ज़रूरत होती है. यहां baseGooglePayRequest के तौर पर तय किए गए ऑब्जेक्ट में, सभी अनुरोधों के लिए सामान्य सेटिंग शामिल होती हैं. अनुरोध के आधार पर, अन्य सेटिंग जोड़ी जाएंगी. हम इस कोडलैब में इनकी समीक्षा करेंगे.

खाली main.js फ़ाइल में, Google Pay कॉन्फ़िगरेशन के कॉन्स्टेंट जोड़ें:

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

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

कॉन्स्टेंट वैरिएबल GPAY_BUTTON_CONTAINER_ID को उस DOM एलिमेंट के आईडी पर सेट करें जिसका इस्तेमाल एचटीएमएल पेज पर, Google Pay बटन के पैरंट कंटेनर के तौर पर किया जाता है.
अपने ऐप्लिकेशन के लिए, ज़रूरी सेटिंग के साथ कॉन्फ़िगरेशन ऑब्जेक्ट baseGooglePayRequest बनाएं. हर प्रॉपर्टी और वैल्यू को रेफ़रंस दस्तावेज़ में देखा जा सकता है. इस उदाहरण में दिखाई गई वैल्यू, आपकी ज़रूरतों के हिसाब से सही हो भी सकती हैं और नहीं भी. इसलिए, ध्यान से देखें.
merchantId और merchantName प्रॉपर्टी को अपनी वैल्यू के साथ अपडेट करें. अगर एनवायरमेंट TEST है, तो इन फ़ील्ड को भरना ज़रूरी नहीं है.

संसाधन

ब्लॉग पोस्ट: क्या आपको Google Pay की मदद से आसानी से चेकआउट करना है? पेमेंट के विकल्प कॉन्फ़िगर करें!
एपीआई के बारे में जानकारी: Google Pay API के अनुरोध ऑब्जेक्ट के बारे में दस्तावेज़
एपीआई रेफ़रंस: अनुमति देने के तरीकों, कार्ड नेटवर्क, और टोकनाइज़ेशन की खास बातों के बारे में ज़्यादा जानने के लिए, PaymentMethod पर जाएं. इसमें गेटवे की सही वैल्यू भी शामिल है.

4. पेमेंट्स क्लाइंट जोड़ना

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

इस क्लाइंट कोड को main.js में सबसे नीचे जोड़ें:

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

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

paymentsClient वैरिएबल, क्लाइंट के लिए इंस्टेंस को तब तक सेव रखेगा, जब तक उसे बनाया नहीं जाता. हमारे कोड से सीधे तौर पर वैरिएबल को ऐक्सेस नहीं किया जाता. इसके बजाय, हमेशा getGooglePaymentsClient() तरीके से ऐक्सेस किया जाता है.
getGooglePaymentsClient() मेथड यह जांच करता है कि क्लाइंट पहले से इंस्टैंटिएट किया गया है या नहीं. अगर ऐसा है, तो यह उस इंस्टेंस को दिखाता है. अगर पहले कोई इंस्टेंस नहीं बनाया गया था, तो एक इंस्टेंस बनाया जाता है, सेव किया जाता है, और वापस भेजा जाता है. इस तरीके से यह पक्का किया जाता है कि इस स्क्रिप्ट के पूरे लाइफ़टाइम में सिर्फ़ एक इंस्टेंस बनाया और इस्तेमाल किया जाए.
क्लाइंट को इंस्टैंशिएट करने के लिए, PaymentsClient() तरीके का इस्तेमाल किया जाता है. इस उदाहरण में, हम क्लाइंट को बता रहे हैं कि हम TEST एनवायरमेंट में हैं. इसका दूसरा विकल्प PRODUCTION है. हालांकि, TEST डिफ़ॉल्ट रूप से मौजूद होता है और इसे हटाया जा सकता है.

5. सहायक जोड़ना

नीचे दिए गए हेल्पर फ़ंक्शन का इस्तेमाल स्क्रिप्ट में बाद में किया जाता है. इन्हें सिर्फ़ इसलिए जोड़ा गया है, ताकि कोड को आसानी से समझा जा सके और उसे बनाए रखा जा सके.

हेल्पर फ़ंक्शन को main.js के सबसे नीचे जोड़ें:

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

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

deepCopy() एक ऐसी सुविधा है जो दिए गए ऑब्जेक्ट की डीप कॉपी बनाने के लिए, JSON सीरियलाइज़ेशन और डीसीरियलाइज़ेशन का इस्तेमाल करती है. यह शेयर किए गए रेफ़रंस की चिंता किए बिना, ऑब्जेक्ट को क्लोन करने का एक आसान तरीका है.
renderGooglePayButton() एक ऐसी सुविधा है जो createButton() लाइब्रेरी के तरीके को लागू करती है, ताकि Google Pay बटन दिखाया जा सके. पास किया गया तर्क, विकल्पों का एक सेट होता है. इससे यह तय होता है कि बटन को कैसे काम करना चाहिए. जैसे, बटन पर हुए क्लिक को मैनेज करने के लिए onGooglePaymentButtonClicked() फ़ंक्शन को रजिस्टर करना.

6. इवेंट हैंडलर जोड़ना

इस स्क्रिप्ट में, हम दो इवेंट हैंडलर कॉन्फ़िगर कर रहे हैं. पहला फ़ंक्शन तब कॉल किया जाता है, जब pay.js लाइब्रेरी लोड हो जाती है. दूसरा फ़ंक्शन तब कॉल किया जाता है, जब Google Pay बटन पर क्लिक किया जाता है.

इवेंट हैंडलर को main.js के सबसे नीचे जोड़ें:

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

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

onGooglePayLoaded() तब शुरू होता है, जब एचटीएमएल फ़ाइल में तय की गई pay.js स्क्रिप्ट लोड हो जाती है. isReadyToPay() तरीके का इस्तेमाल यह तय करने के लिए किया जाता है कि Google Pay बटन दिखाना है या नहीं. अगर खरीदार पेमेंट करने के लिए तैयार है (इसका मतलब है कि उसने Google Wallet में पेमेंट का कोई तरीका जोड़ा है), तो Google Pay बटन रेंडर किया जाता है.
Google Pay बटन पर क्लिक करने पर, onGooglePaymentButtonClicked() को शुरू किया जाता है. यह तरीका, loadPaymentData() लाइब्रेरी के उस तरीके को लागू करता है जिसका इस्तेमाल पेमेंट टोकन वापस पाने के लिए किया जाता है. पेमेंट टोकन मिलने के बाद, आपको इसे पेमेंट गेटवे को भेजना होगा, ताकि वह लेन-देन को प्रोसेस कर सके. transactionInfo से उस लेन-देन के बारे में पता चलता है जिसे इस बटन पर क्लिक करके प्रोसेस किया जाना चाहिए.

7. नतीजा

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

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

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 से जुड़े वीडियो देखना