Android पर Flutter के लिए Google Pay API

1. परिचय

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

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

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

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

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

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

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

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

googlepay_flutter नाम का नया Flutter प्रोजेक्ट बनाएं.
```
flutter create googlepay_flutter
```
Google Pay की Flutter लाइब्रेरी इंस्टॉल करें.
```
cd googlepay_flutter
flutter pub add pay
```

अपने पसंदीदा आईडीई में lib/main.dart खोलें और कॉन्टेंट को इस कोड से बदलें:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PaySampleApp(),
    );
  }
}

class PaySampleApp extends StatefulWidget {
  const PaySampleApp({super.key});

  @override
  State<PaySampleApp> createState() => _PaySampleAppState();
}

class _PaySampleAppState extends State<PaySampleApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Pay Codelab'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Transaction info and errors will be logged to the console.'),
          ],
        ),
      ),
    );
  }
}

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

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

Google Pay कॉन्फ़िगरेशन के कॉन्सटेंट को lib/main.dart में जोड़ें:

import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];

डिफ़ॉल्ट पेमेंट कॉन्फ़िगरेशन json को assets/google_pay_config.json पाथ में जोड़ें:

  {
    "provider": "google_pay",
    "data": {
      "environment": "TEST",
      "apiVersion": 2,
      "apiVersionMinor": 0,
      "allowedPaymentMethods": [
        {
          "type": "CARD",
          "tokenizationSpecification": {
            "type": "PAYMENT_GATEWAY",
            "parameters": {
              "gateway": "example",
              "gatewayMerchantId": "exampleGatewayMerchantId"
            }
          },
          "parameters": {
            "allowedCardNetworks": ["VISA", "MASTERCARD"],
            "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
            "billingAddressRequired": true,
            "billingAddressParameters": {
              "format": "FULL",
              "phoneNumberRequired": true
            }
          }
        }
      ],
      "merchantInfo": {
        "merchantName": "Example Merchant Name"
      },
      "transactionInfo": {
        "countryCode": "US",
        "currencyCode": "USD"
      }
    }
  }

संसाधन

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

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

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

lib/main.dart में मौजूद _PaySampleAppState क्लास को इस कोड से अपडेट करें:

class _PaySampleAppState extends State<PaySampleApp> {
  late final Future<PaymentConfiguration> _gpayConfig;

  void onGooglePayResult(paymentResult) {
    // Send 'token' to your payment service provider (PSP)
    print(paymentResult);
  }

  @override
  void initState() {
    super.initState();
    _gpayConfig = PaymentConfiguration.fromAsset('google_pay_config.json');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Pay Codelab')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FutureBuilder<PaymentConfiguration>(
              future: _gpayConfig,
              builder: (context, snapshot) {
                if (snapshot.connectionState != ConnectionState.done) {
                  return const Center(child: CircularProgressIndicator());
                }
                if (snapshot.hasError || !snapshot.hasData) {
                  return const Text('Error loading Google Pay config');
                }
                return GooglePayButton(
                  paymentConfiguration: snapshot.data!,
                  onPaymentResult: onGooglePayResult,
                  paymentItems: _paymentItems,
                  height: 48,
                  type: GooglePayButtonType.buy,
                  theme: GooglePayButtonTheme.dark,
                  margin: const EdgeInsets.only(top: 15.0),
                  loadingIndicator: const Center(
                    child: CircularProgressIndicator(),
                  ),
                );
              },
            ),
            const Text('Transaction info and errors will be logged to the console.'),
          ],
        ),
      ),
    );
  }
}

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

_paymentItems में उस लेन-देन के बारे में बताया जाता है जिसे इस बटन पर क्लिक करके प्रोसेस किया जाना चाहिए.
GooglePayButton विजेट में मौजूद paymentConfigurationAsset, assets/google_pay_config.json फ़ाइल से कॉन्फ़िगरेशन लोड करता है.
GooglePayButton दबाने पर, onGooglePayResult फ़ंक्शन कॉल किया जाता है. इस फ़ंक्शन को पेमेंट का नतीजा मिलता है.
जवाब से पेमेंट टोकन मिलने के बाद, आपको लेन-देन प्रोसेस करने के लिए इसे पेमेंट गेटवे को भेजना होगा.

5. क्लिक पर पेमेंट ट्रिगर करें

GooglePayButton पर टैप करने से, Google Pay की शीट खुल जाती है और नतीजा मिल जाता है. इसके लिए, "पेमेंट करें" कॉल की ज़रूरत नहीं होती. टोकन को लॉग करने, गड़बड़ियां दिखाने, और बटन दबाने की जानकारी को लॉग करने के लिए हैंडलर जोड़ें. बटन दबाने की जानकारी को लॉग करना ज़रूरी नहीं है.

_PaySampleAppState में नतीजे दिखाने वाले हैंडलर को जोड़ें या अपडेट करें:

void onGooglePayResult(dynamic paymentResult) {
  try {
    final token = paymentResult['paymentMethodData']['tokenizationData']['token'];
    debugPrint('Google Pay payment token: $token');
  } catch (e) {
    debugPrint('Unexpected payment result: $e');
  }
}

प्रेस और गड़बड़ी हैंडलर शामिल करने के लिए, GooglePayButton को अपडेट करें:

GooglePayButton(
  paymentConfiguration: snapshot.data!,
  paymentItems: _paymentItems,
  onPaymentResult: onGooglePayResult,
  onError: (Object err) => debugPrint('Google Pay error: $err'),
  onPressed: () => debugPrint('Google Pay button pressed'),
  height: 48,
  type: GooglePayButtonType.buy,
  theme: GooglePayButtonTheme.dark,
  margin: const EdgeInsets.only(top: 15.0),
  loadingIndicator: const Center(child: CircularProgressIndicator()),
)

नोट

टैप करने पर, पेमेंट शीट खुल जाती है. साथ ही, onPaymentResult को पेलोड मिल जाता है.
प्रोडक्शन में, शुल्क लेने की प्रोसेस पूरी करने के लिए, पेमेंट की सेवा देने वाली कंपनी को टोकन भेजें.

6. नतीजा

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

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

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

flutter run

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

इंटिग्रेशन की चेकलिस्ट देखें

अन्य संसाधन

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