Google Pay से वेब पर तेज़ी से चेकआउट करना

Google Pay API से, उपयोगकर्ताओं को Google खातों में सेव की गई पैसे चुकाने की जानकारी का इस्तेमाल करके, हर जगह पैसे चुकाने की सुविधा मिलती है. इस लैब में, आप वेब के लिए Google Pay की क्लाइंट लाइब्रेरी का इस्तेमाल करते हैं. इससे, आप ज़्यादा आसानी से और सुरक्षित तरीके से ऑनलाइन स्टोर खोज सकते हैं और आसानी से खरीदारी कर सकते हैं. इस तरह, खरीदारी करने वाले ग्राहकों को ज़्यादा कन्वर्ज़न और ज़्यादा खुशी मिलती है.

Auto T-shirt Shop एक नया स्टोर है जो आर्टिफ़िशियल इंटेलिजेंस की नई तकनीकों का इस्तेमाल करता है. साथ ही, खरीदारी के लिए सबसे सही आइटम का सुझाव देने के लिए, स्टाइल की प्राथमिकताएं, मौसम, साल के समय, और फ़ैशन के रुझानों जैसी जानकारी का इस्तेमाल करता है.

इस स्टोर में, ग्राहकों की दिलचस्पी बढ़ाने से जुड़ी मेट्रिक मौजूद हैं. माफ़ करें, मेट्रिक में चेकआउट के दौरान बड़ी संख्या में ऐप्लिकेशन छोड़ने की जानकारी भी होती है. इस समस्या को दूर करने के लिए, प्रोजेक्ट के मालिकों ने वीडियो को याद करते हुए बताया है कि Google Pay से मिलती-जुलती साइटों को खोज के बेहतर नतीजे दिखाने वाले वीडियो. इसलिए, कंपनी ने कोशिश की कि वह Google के साथ काम करें और इंटिग्रेशन की देखभाल के लिए आप पर भरोसा करें.

आप क्या बनाएंगे

कोडलैब से आपको Google Pay को किसी मौजूदा साइट में जोड़ने के बारे में जानकारी मिलती है. इसमें यह भी पता चलता है कि उपयोगकर्ता Google Pay पर पैसे चुकाने के तरीके का इस्तेमाल करके पैसे चुका सकता है या नहीं, पेमेंट बटन को कहां डाला गया है और डिज़ाइन करने की सुविधा का इस्तेमाल करना है या नहीं.

आप इन चीज़ों के बारे में जानेंगे

  • Google Pay को मौजूदा चेकआउट पेज में जोड़ने का तरीका
  • पैसे चुकाने के अपने पसंदीदा तरीकों में से चुनने का तरीका
  • कैसे पता करें कि उपयोगकर्ता Google Pay से पेमेंट कर सकता है या नहीं

आपको यह चाहिए हाेगा

  • इंटरनेट ऐक्सेस वाला कंप्यूटर
  • JavaScript के बारे में बुनियादी जानकारी

ग्लिच.com पर सैंपल साइट चलाएं

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

शुरू करने के लिए, इस बटन की मदद से ग्लिच पर एक नया डेवलपमेंट एनवायरमेंट बनाएं, जो इस कोडलैब की कॉपी के साथ पहले से सेट अप है.

Glitch.com पर डेवलपमेंट एनवायरमेंट शुरू करें

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

सैंपल साइट को हाइलाइट करना

जैसा कि आप देख सकते हैं, रिपॉज़िटरी में एक मुश्किल फ़ाइल स्ट्रक्चर होता है. इस कोडलैब का मुख्य मकसद, इस इंटिग्रेशन को आपके मौजूदा और आने वाले ऐप्लिकेशन के हिसाब से ढलना है. भले ही, आपने फ़्रेमवर्क, लाइब्रेरी या जिन टूल के साथ काम करने का विकल्प चुना हो.

साइट के बारे में ज़्यादा जानें

यह डेमो मार्केटप्लेस इस तरह से बनाया गया है कि खरीदारी का कोई भी तरीका जोड़ने से पहले, यह आपके मौजूदा या संभावित ऐप्लिकेशन के दिखने जैसा लगता है. हालांकि, हमारा सुझाव है कि आप इस डेमो ऐप्लिकेशन के ऊपर काम करें, फिर भी आप आगे बढ़ सकते हैं और इस कोडलैब का इस्तेमाल करके Google Pay को अपने मौजूदा ऐप्लिकेशन में जोड़ सकते हैं.

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

डेमो साइट कुछ भी हैरान करने वाली नहीं है, है न? एक प्रॉडक्ट के बारे में जानकारी वाला पेज, जिसमें तस्वीर, कीमत, ब्यौरा, कुछ सिलेक्टर, और एक बटन होता है, जो आपको काल्पनिक और सामान्य पेमेंट फ़ॉर्म पर ले जाता है.

इस लैब का मकसद, इस फ़्लो को Google Pay से जुड़े दो क्लिक करने के अनुभव से बदलना है.

आइए इसे प्लान करें!

इस इंटिग्रेशन को बेहतर ढंग से समझने के लिए, नीचे दी गई बुनियादी जानकारी को प्रोसेस किया जाता है:

  1. लाइब्रेरी लोड करना
  2. Google Pay से पैसे चुकाने की सुविधा तय करना
  3. Google Pay से पैसे चुकाने के लिए बटन दिखाएं
  4. पेमेंट के लिए अनुरोध बनाएं और भेजें
  5. नतीजे इकट्ठा करें

script टैग जोड़ें

Google Pay API का इस्तेमाल शुरू करने के लिए, आपको सबसे पहले JavaScript लाइब्रेरी को लोड करना होगा. ऐसा करने के लिए, एचटीएमएल फ़ाइल में उस script टैग को शामिल करें जहां से आप एपीआई को कॉल करना चाहते हैं. इसमें src JavaScript एट्रिब्यूट भी शामिल है, जो बाहरी JavaScript लाइब्रेरी के बारे में बताता है.

इस कोडलैब के लिए, index.html फ़ाइल खोलें. आपको दिखेगा कि स्क्रिप्ट टैग आपके लिए पहले ही शामिल किया जा चुका है:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

src के अलावा, आपने दो अन्य एट्रिब्यूट भी जोड़ दिए हैं.

  • async को आपकी स्क्रिप्ट लोड होने और पेज के बाकी हिस्से के साथ एसिंक्रोनस तौर पर लागू करने की अनुमति है, ताकि आपके दस्तावेज़ के लोड होने में लगने वाले समय पर कोई असर न पड़े.
  • onload की मदद से, आप इस लाइब्रेरी के कोड को तब तक अलग-अलग कर सकते हैं, जब तक आपकी स्क्रिप्ट लोड नहीं हो जाती. इसके बाद, इस एट्रिब्यूट में जो फ़ंक्शन तय किया जाता है उसे चलाया जाता है. इस मामले में, फ़ंक्शन onGooglePayLoaded है.

एपीआई क्लाइंट को इंस्टैंशिएट करें

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

index.js फ़ाइल में बदलाव करें, जो पहले से इस प्रोजेक्ट की फ़ाइल स्ट्रक्चर का हिस्सा है. onGooglePayLoaded फ़ंक्शन को नीचे दिए गए कोड से बदलें.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

पेमेंट क्लाइंट को PaymentOptions ऑब्जेक्ट से शुरू किया गया है. environment को TEST पर सेट करके, आप पूरे इंटिग्रेशन के दौरान डमी (पैसे चुकाने के तरीके) की जानकारी के साथ प्रयोग कर सकते हैं. जब आप ऐसी कार्रवाइयां बनाने के लिए तैयार हों, जो असली लेन-देन की सुविधा देती हैं, तो आप environment प्रॉपर्टी को PRODUCTION में अपडेट कर सकते हैं.

ख़ास जानकारी

अब हमने Google Pay API JavaScript क्लाइंट लाइब्रेरी लोड कर दी है. अब, इसे हमारे लिए एपीआई कॉल करने के लिए कॉन्फ़िगर करें.

बाकी कोडलैब के लिए, कोड में किए गए ये सभी बदलाव index.js फ़ाइल में किए जाएंगे.

कंकाल

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

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

प्रॉपर्टी allowedPaymentMethods में, पैसे चुकाने के तरीकों की सूची होती है. पैसे चुकाने के हर तरीके के लिए, आपको ये प्रॉपर्टी शामिल करनी होंगी:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

सिर्फ़ वे प्रॉपर्टी type और parameters ज़रूरी हैं जिनसे यह पता चल सके कि जिस उपयोगकर्ता की शिकायत की गई है वह Google Pay से पेमेंट कर सकता है या नहीं.

पैसे चुकाने के तरीके का कॉन्फ़िगरेशन

इस उदाहरण में, आप सिर्फ़ एक कॉन्फ़िगरेशन स्वीकार करेंगे. इससे टोकन और प्राइमरी खाता नंबर (पैन), दोनों तरह के कार्ड और Mastercard के लिए कार्ड पेमेंट करने की अनुमति मिलेगी.

index.js में आपका कॉन्फ़िगरेशन इस तरह सेट अप किया जाना चाहिए:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

सब कुछ एक साथ रखना

आइए रीकैप देखते हैं.

आपने पैसे चुकाने का एक तरीका अपनी वेबसाइट पर स्वीकार कर लिया है और आप एपीआई के वर्शन 2.0 के साथ काम करेंगे. इससे मिलने वाला कॉन्फ़िगरेशन ऐसा दिखना चाहिए:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

अब जब आपका बुनियादी कॉन्फ़िगरेशन तैयार है, तो चलिए मज़ा लें.

Google Pay का एक मुख्य मकसद यह है कि आप अपने उपयोगकर्ताओं को तेज़ी से और ज़्यादा आसानी से चेकआउट करने का अनुभव दें. यह सिर्फ़ उन स्थितियों में लागू होता है, जब कोई व्यक्ति Google Pay का इस्तेमाल कर सकता है. साथ ही, यह उन स्थितियों में भी लागू होता है जब वह ऐसा नहीं कर पाता है. isReadyToPay अनुरोध का इस्तेमाल करके, आप यह तय कर सकते हैं कि Google Pay के साथ पैसे चुकाने की ज़रूरत है या नहीं. साथ ही, इससे आपको अपनी साइट पर बेहतर अनुभव देने का मौका भी मिलेगा.

क्या आपका उपयोगकर्ता Google Pay से पैसे चुका सकता है?

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

onGooglePayLoaded() फ़ंक्शन में index.js में, यह चिपकाएं:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

अगर कॉल पूरा नहीं हो पाता या जवाब नहीं मिलता, तो Google Pay के मामले में कोई कार्रवाई नहीं की जाएगी. इस मामले में, सबसे अच्छा तरीका यह है कि पैसे चुकाने के दूसरे तरीकों के साथ काम करने वाला दूसरा यूज़र इंटरफ़ेस (यूआई) दिखाया जाए.

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

Google Pay से पैसे चुकाने के लिए बटन जोड़ें

भले ही आप Google Pay ब्रैंड के दिशा-निर्देशों का पालन करने वाले किसी भी बटन का इस्तेमाल करके, पैसे चुकाने की प्रक्रिया शुरू कर सकते हैं, फिर भी हमारा सुझाव है कि आप Google Pay API का इस्तेमाल करके, एक यूआरएल जनरेट करें. इस तरह, आप न सिर्फ़ ब्रैंड के दिशा-निर्देशों का सही इस्तेमाल करते हैं, बल्कि बटन में पहले से मौजूद दूसरे बदलावों, जैसे कि स्थानीय भाषा के अनुसार होने वाले फ़ायदों का भी फ़ायदा लेते हैं.

बटन जनरेट करने के लिए, PaymentsClient ऑब्जेक्ट में createButton तरीके का इस्तेमाल करें. इसमें बटन को कॉन्फ़िगर करने के लिए, ButtonOptions भी शामिल है.

createAndAddButton() फ़ंक्शन में index.js में, यह चिपकाएं:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

createButton का इस्तेमाल करते समय सिर्फ़ onClick को ही प्रॉपर्टी का इस्तेमाल करना ज़रूरी है. कॉलबैक ऑब्जेक्ट या फ़ंक्शन को तय करने के लिए, इस प्रॉपर्टी का इस्तेमाल करना ज़रूरी है. ऐसा तब होता है, जब आपके उपयोगकर्ता हर बार बटन चालू करते हैं. buttonColor और buttonType से, आप अपने बटन को पसंद के मुताबिक बना सकते हैं. अपने ऐप्लिकेशन की थीम और यूज़र इंटरफ़ेस (यूआई) की ज़रूरतों के हिसाब से उनमें बदलाव करें.

बटन बन जाने के बाद, आपको बस उसे डीओएम में सही नोड में जोड़ना होगा. इस उदाहरण में, buy-now के साथ पहचाने गए div नोड का इस्तेमाल इस मकसद के लिए किया जाता है.

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

पेमेंट का अनुरोध तैयार करना

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

जैसा कि आपने पहले किया था, isReadyToPay अनुरोध की परिभाषा के दौरान, इस कॉल को कुछ नए के साथ, बेस कॉन्फ़िगरेशन ऑब्जेक्ट (apiVersion, apiVersionMinor, और allowedPaymentMethods) में शामिल प्रॉपर्टी की भी ज़रूरत होती है. इस समय, आपके भुगतान के तरीकों में एक नई प्रॉपर्टी, tokenizationSpecification, और parameters दूसरी मौजूद है, जो इस अनुरोध के मकसद के लिए काम की है. इसके अलावा, transactionInfo और merchantInfo को जोड़ना होगा.

पैसे चुकाने के तरीके में ज़्यादा ज़रूरी जानकारी शामिल करना

सबसे पहले, बेस कार्ड से पैसे चुकाने के तरीके का इस्तेमाल करके शुरुआत करें. इस कार्ड से पैसे चुकाने के तरीके के लिए अब tokenizationSpecification प्रॉपर्टी की ज़रूरत होगी. इससे यह तय किया जा सकेगा कि पैसे चुकाने के चुने गए तरीके से जुड़े डेटा के साथ-साथ असल लेन-देन के लिए ज़रूरी डेटा को कैसे मैनेज करना है: उदाहरण के लिए, पूरा बिलिंग पता और फ़ोन नंबर.

tokenizationSpecification की प्रॉपर्टी

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

हैंडलिंग के दो तरीके इस्तेमाल किए जा सकते हैं. अगर आप अपने PCI DSS का पालन करने वाले सर्वर से पैसे चुकाने की प्रक्रिया को प्रोसेस कर रहे हैं, तो DIRECT की खास बातों के टाइप का इस्तेमाल करें. इस उदाहरण में, आप पेमेंट को प्रोसेस करने के लिए पेमेंट गेटवे का इस्तेमाल करते हैं, इसलिए आप PAYMENT_GATEWAY की खास बातों को सेट करते हैं.

onGooglePaymentsButtonClicked() फ़ंक्शन में index.js में, यह चिपकाएं:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

parameters सेक्शन में, आप Google Pay API पर काम करने वाली कंपनियों की सूची से वह गेटवे तय कर सकते हैं जिसमें हर गेटवे के लिए ज़रूरी अतिरिक्त कॉन्फ़िगरेशन शामिल होना चाहिए. इस लैब के लिए, example गेटवे का इस्तेमाल करना ही काफ़ी है, जो लागू किए गए लेन-देन के लिए टेस्ट के नतीजे देता है.

अन्य पैरामीटर

इसी तरह, अब आप लेन-देन करने के लिए ज़रूरी जानकारी के बारे में ज़्यादा जानकारी दे सकते हैं. इस उदाहरण में देखें कि आपको billingAddressRequired और billingAddressParameters प्रॉपर्टी को कैसे जोड़ना है, यह बताने के लिए कि इस लेन-देन के लिए उपयोगकर्ता का बिलिंग पता, पूरे फ़ॉर्मैट में और फ़ोन नंबर के साथ ज़रूरी है.

onGooglePaymentsButtonClicked() फ़ंक्शन में index.js में, यह चिपकाएं:

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

लेन-देन के बारे में जानकारी जोड़ना

transactionInfo प्रॉपर्टी में लेन-देन के वित्तीय विवरण वाला एक ऑब्जेक्ट शामिल होता है, जैसे कि कीमत और मुद्रा कोड (ISO 4217 ऐल्फ़ा फ़ॉर्मैट). साथ ही, यह कीमत की स्थिति के आधार पर फ़ाइनल या अनुमानित हो सकती है. उदाहरण के लिए, तय किए गए शिपिंग पते के हिसाब से कीमत में फ़र्क़ हो सकता है.

onGooglePaymentsButtonClicked() फ़ंक्शन में index.js में, यह चिपकाएं:

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

व्यापारी/कंपनी के बारे में जानकारी जोड़ना

पैसे चुकाने का अनुरोध, merchantInfo प्रॉपर्टी के तहत अनुरोध करने वाले व्यापारी के बारे में जानकारी लेता है. इस कोडलैब में, आप इन दो चीज़ों पर फ़ोकस करेंगे:

  • merchantId को आपकी साइट को Google से प्रोडक्शन में ऑपरेट करने की मंज़ूरी मिलने के बाद, वह आपके खाते से जुड़े आइडेंटिफ़ायर की जानकारी देने की उम्मीद करता है. ध्यान दें कि TEST का इस्तेमाल करते समय, इस मूल्यांकन का मूल्यांकन नहीं किया जाता है.
  • merchantName आपकी साइट या संगठन को उपयोगकर्ता को दिखाई देने वाला नाम है. यह Google Pay की पेमेंट शीट में दिख सकता है. इससे उपयोगकर्ताओं को इस बारे में ज़्यादा जानकारी मिल सकती है कि वे किस कार्रवाई का अनुरोध कर रहे हैं.

onGooglePaymentsButtonClicked() फ़ंक्शन में index.js में, यह चिपकाएं:

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

पेमेंट की जानकारी का अनुरोध करना और नतीजे को प्रोसेस करना

अब पहले बताए गए कॉन्फ़िगरेशन को आखिरी paymentDataRequest ऑब्जेक्ट में मर्ज करें.

onGooglePaymentsButtonClicked() फ़ंक्शन में index.js में, यह चिपकाएं:

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

इस समय, आपके पास Google Pay API से पैसे चुकाने के मान्य तरीके से जुड़ी सारी जानकारी मौजूद है. ऐसा करने के लिए, PaymentsClient ऑब्जेक्ट में loadPaymentData तरीका इस्तेमाल करें. यह कॉन्फ़िगरेशन अभी बताए गए कॉन्फ़िगरेशन में पास करें.

onGooglePaymentsButtonClicked() फ़ंक्शन में index.js में, यह चिपकाएं:

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

loadPaymentData तरीके को कॉल करने से Google Pay पेमेंट शीट का प्रज़ेंटेशन ट्रिगर हो जाता है. अगर कॉन्फ़िगरेशन से जुड़ी कोई गड़बड़ी नहीं होती है, तो आप मौजूदा लॉग इन खाते से जुड़े मान्य पैसे चुकाने के तरीकों की सूची देख सकते हैं.

चुनने के बाद, शीट बंद हो जाती है और Promise को एक PaymentData ऑब्जेक्ट के साथ दिखाया जाता है. इसमें, पैसे चुकाने के चुने गए तरीके के बारे में भी जानकारी होती है:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

अब आप वास्तविक लेन-देन करने के लिए इस भुगतान के तरीके की जानकारी का इस्तेमाल कर सकते हैं.

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

अब तक हमने तय रकम के साथ लेन-देन देखे हैं. हालांकि, मान लें कि आप लेन-देन की कुछ प्रॉपर्टी के आधार पर कीमत अपडेट करना चाहते हैं, जैसे कि शिपिंग की जानकारी. क्लाइंट बनाने के दौरान paymentDataCallback पैरामीटर देकर ऐसा किया जा सकता है. इस कॉलबैक का इस्तेमाल आपके लिए लेन-देन के बदलावों को मैनेज करने और बदलावों को लागू करने के लिए किया जाता है. आप शिपिंग के पते, शिपिंग के विकल्प, और पैसे चुकाने के चुने गए तरीके में हुए बदलावों को सुन सकते हैं. इस उदाहरण में, आप चुने गए शिपिंग विकल्प में होने वाले बदलावों को सुनना चाहते हैं. सबसे पहले, शिपिंग से जुड़ी सभी जानकारी वाले वैरिएबल के बारे में बताएं और उन्हें शामिल करने के लिए, paymentDataRequest में बदलाव करें:

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

इसके बाद, paymentDataCallback बनाने के लिए googlePayClient के बनाने में बदलाव किया जाता है. जब भी पेमेंट में कोई बदलाव किया जाता है, तो उसे callbackIntents में शामिल किया जाता है. इस कॉलबैक में, ऐसी प्रॉपर्टी का ऑब्जेक्ट शामिल है जिसमें प्रॉपर्टी बदली गई हैं. पैसे चुकाने का अपडेट किया गया लेन-देन बनाने के लिए, इन बदलावों का इस्तेमाल किया जा सकता है:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

कॉलबैक में इस नए ऑब्जेक्ट के वापस आने पर, लेन-देन में किए गए बदलावों को दिखाने के लिए पेमेंट शीट में दी गई जानकारी अपडेट होती है.

अब आपने जांच कर ली है कि इंटिग्रेशन ज़रूरत के मुताबिक काम करता है, तो Google Play के इस्तेमाल की जानकारी मिलते ही आप एक कदम आगे जाकर अपने पेमेंट कॉन्फ़िगरेशन को प्रीफ़ेच कर सकते हैं. यह तब होता है, जब उपयोगकर्ता Google Pay के पेमेंट बटन को चालू (क्लिक) करता है.

अगर आप पेमेंट डेटा को प्रीफ़ेच करते हैं, तो उपयोगकर्ता के पेमेंट का समय आने तक, शीट के लोड होने के लिए ज़रूरी जानकारी उपलब्ध हो जाती है. इससे, कॉन्टेंट लोड होने में लगने वाला समय कम होता है और उपयोगकर्ता को बेहतर अनुभव मिलता है.

इस तरीके की नीति, loadPaymentData के जैसी ही होनी चाहिए. इसका मतलब है कि आप पहले से तय paymentDataRequest ऑब्जेक्ट का इस्तेमाल कर सकते हैं. अब जैसे ही आपको यह पता चल जाएगा कि उपयोगकर्ता Google Pay का इस्तेमाल कर सकता है, आपको बस बाद में प्रीफ़ेच करने के तरीके में एक कॉल शामिल करना होगा. ऐसा isReadyToPay के लौटाए जाने के बाद किया जाता है:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

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

आपने Google Pay API को इस कोडलैब या अपने ऐप्लिकेशन में, सैंपल साइट में जोड़ दिया है.

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

हमने क्या-क्या शामिल किया है

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

अगले चरण

  • Google Pay के बारे में ज़्यादा जानें.
  • इंटिग्रेशन चेकलिस्ट की समीक्षा करें और व्यापारी/कंपनी का पहचानकर्ता पाएं.
  • दो तरह के इंटिग्रेशन पर नज़र डालें और तय करें कि आपके लिए क्या सही है: सीधे तौर पर इंटिग्रेट करना या पेमेंट गेटवे या प्रोसेसर का इस्तेमाल करना.
  • पेमेंट की प्रोसेस शुरू करने के लिए, पेमेंट की अनुमति दें सेट अप करें. साथ ही, पेमेंट की अनुमति की स्थिति स्वीकार करें. (पुष्टि करना या अस्वीकार करना)

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

क्या यह आपके काम का था?

बहुत उपयोगी! उम्मीद के मुताबिक होना चाहिए. बिल्कुल नहीं.

अन्य तरह के इंटिग्रेशन (Android, डायरेक्ट इंटिग्रेशन, लॉयल्टी एपीआई) को लेकर आपकी मदद के लिए, क्या आपको दूसरे कोडलैब (कोड बनाना सीखना) देखने हैं?

हां, यह &33; शानदार हो! मैं जो हुआ उससे खुश हूं.