इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

1. परिचय

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

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

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

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

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

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

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

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

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

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

अपने पसंदीदा आईडीई में 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 जोड़ा गया है. यह डीओएम एलिमेंट, पैरंट एलिमेंट होगा, जिसमें Google Pay बटन जोड़ा जाएगा. इस एलिमेंट को अपनी वेबसाइट के लेआउट में, सही जगह पर रखा जा सकता है.
main.js स्क्रिप्ट टैग, gpay-container एलिमेंट के बाद DOM में डाला जाता है. यह ज़रूरी है, ताकि main.js के इसके लिए क्वेरी करने से पहले, यह पक्का किया जा सके कि कंटेनर DIV, DOM में मौजूद है. इसके अलावा, स्क्रिप्ट सिंक्रोनस होती है, ताकि यह पक्का किया जा सके कि 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);

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

Google Pay बटन के पैरंट कंटेनर के तौर पर, एचटीएमएल पेज पर इस्तेमाल किए गए DOM एलिमेंट के आईडी पर, कॉन्स्टेंट वैरिएबल GPAY_BUTTON_CONTAINER_ID सेट करें.
अपने ऐप्लिकेशन के लिए ज़रूरी सेटिंग के साथ कॉन्फ़िगरेशन ऑब्जेक्ट 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() एक ऐसी सुविधा है जो Google Pay बटन दिखाने के लिए, createButton() लाइब्रेरी का तरीका इस्तेमाल करती है. इस्तेमाल किया गया आर्ग्युमेंट, विकल्पों का एक सेट होता है. इससे यह तय होता है कि बटन कैसे काम करे. जैसे, बटन पर होने वाले क्लिक को मैनेज करने के लिए 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 वेब ब्राउज़र का इस्तेमाल करके, 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 से जुड़े वीडियो देखना