Android पर React Native के लिए Google Pay API

1. परिचय

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

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

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

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

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

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

2. React Native प्रोजेक्ट बनाना

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

  1. googlepayrn नाम का नया React Native प्रोजेक्ट बनाएं.
    npx @react-native-community/cli@latest init googlepayrn
  2. Google Pay React Native लाइब्रेरी इंस्टॉल करें.
    cd googlepayrn
npm install @google/react-native-make-payment
  3. अपने पसंदीदा आईडीई में App.tsx खोलें और कॉन्टेंट को इस कोड से बदलें:
    import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#121212' : '#F3F3F3',
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <Text style={styles.title}>Google Pay Codelab</Text>
        <View id="gpay-container" />
        <Text>Transaction info and errors will be logged to the console.</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
});

export default App;

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

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

Google Pay कॉन्फ़िगरेशन के कॉन्सटेंट को App.tsx में जोड़ें:

// 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'
        }
      }
    }
  ]
};

संसाधन

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

4. पेमेंट का अनुरोध करना

Google Pay बटन दबाने पर, पेमेंट का अनुरोध बनाया जाता है और दिखाया जाता है.

App.tsx में पेमेंट के तरीके की जानकारी और पेमेंट के तरीके जोड़ें:

const paymentDetails = {
  total: {
    amount: {
      currency: 'USD',
      value: '14.95',
    },
  },
};

const paymentMethods = [
  {
    supportedMethods: 'google_pay',
    data: baseGooglePayRequest,
  },
];

5. Google Pay बटन जोड़ना

react-native-make-payment लाइब्रेरी में, Google Pay बटन का नेटिव कॉम्पोनेंट शामिल होता है.

  1. App.tsx में सबसे ऊपर इंपोर्ट जोड़ें:
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';
  1. App कॉम्पोनेंट में क्लिक हैंडलर जोड़ें:
const checkCanMakePayment = () => {
  const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails);
  paymentRequest.canMakePayment().then((canMakePayment) => {
    if (canMakePayment) {
      paymentRequest.show().then((response) => {
        console.log(response);
      });
    } else {
      console.log('Google Pay unavailable');
    }
  });
};
  1. JSX और उसकी स्टाइल में बटन और स्टाइल जोड़ें:
<GooglePayButton
  style={styles.googlepaybutton}
  onPress={checkCanMakePayment}
  allowedPaymentMethods={baseGooglePayRequest.allowedPaymentMethods}
  theme={GooglePayButtonConstants.Themes.Dark}
  type={GooglePayButtonConstants.Types.Buy}
  radius={4}
/>

googlepaybutton: {
  width: 200,
  height: 48,
},

App.tsx बटन और हैंडलर जोड़ने के बाद:

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';

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'
        }
      }
    }
  ]
};

const paymentDetails = {
  total: {
    amount: {
      currency: 'USD',
      value: '14.95',
    },
  },
};

const paymentMethods = [
  {
    supportedMethods: 'google_pay',
    data: baseGooglePayRequest,
  },
];

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#121212' : '#F3F3F3',
  };

  const checkCanMakePayment = () => {
    const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails);
    paymentRequest.canMakePayment().then((canMakePayment) => {
      if (canMakePayment) {
        paymentRequest.show().then((response) => {
          // Send 'token' to your payment service provider (PSP)
          console.log(response);
        });
      } else {
        console.log('Google Pay unavailable');
      }
    });
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <Text style={styles.title}>Google Pay Codelab</Text>
        <GooglePayButton
          style={styles.googlepaybutton}
          onPress={checkCanMakePayment}
          allowedPaymentMethods={baseGooglePayRequest.allowedPaymentMethods}
          theme={GooglePayButtonConstants.Themes.Dark}
          type={GooglePayButtonConstants.Types.Buy}
          radius={4}
        />
        <Text>Transaction info and errors will be logged to the console.</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
  googlepaybutton: {
    width: 200,
    height: 48,
  },
});

export default App;

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

  1. paymentDetails उस लेन-देन के बारे में बताता है जिसे प्रोसेस किया जाना चाहिए.
  2. paymentMethods, पेमेंट के लिए इस्तेमाल किए जा सकने वाले तरीकों को कॉन्फ़िगर करता है. Google Pay के लिए, baseGooglePayRequest के साथ paymentMethods का इस्तेमाल करें.google_pay
  3. checkCanMakePayment उपलब्ध होने पर पेमेंट शीट दिखाता है और जवाब को लॉग करता है.

6. नतीजा

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

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

अपना ऐप्लिकेशन शुरू करने के लिए, यह कमांड चलाएं:

npx react-native run-android

यहां से कहां जाएं

अन्य संसाधन

  • Discord पर #payments चैनल में बातचीत में शामिल हों
  • X पर @GooglePayDevs को फ़ॉलो करें
  • YouTube पर Google Pay से जुड़े वीडियो देखना