‫Google Pay API ל-Flutter ב-Android

1. מבוא

מה תפַתחו

בסיום ה-codelab הזה, תהיה לכם אפליקציית Flutter עם שילוב פעיל של Google Pay ל-Android. הפרויקט הזה מאחזר אסימון תשלום שאפשר לשלוח לספק שירותי תשלומים לצורך עיבוד.

מה תלמדו

  • איך מתקינים ומגדירים את ספריית Google Pay Flutter
  • איך להציג את לחצן Google Pay ולטפל בקליקים
  • איך מבקשים טוקן תשלום מ-Google Pay

הדרישות

  • עורך טקסט לפי בחירתכם לעריכת קובצי Dart.
  • סביבת פיתוח של Flutter שמוגדרת ל-Android.
  • לסביבת הייצור, תצטרכו merchantId. ההרשמה במסוף של Google Pay ו-Wallet נמשכת רק דקה, אז כדאי לעשות את זה עכשיו.

2. יצירת פרויקט Flutter

יצירת קבצים בפרויקט

  1. יוצרים פרויקט חדש של Flutter בשם googlepay_flutter.
    flutter create googlepay_flutter
  2. מתקינים את ספריית Google Pay Flutter.
    cd googlepay_flutter
flutter pub add pay
  3. פותחים את lib/main.dart בסביבת הפיתוח המשולבת (IDE) הרצויה ומחליפים את התוכן בקוד הבא:
    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 מכיל את ההגדרות המשותפות המינימליות לכל הבקשות. הגדרות נוספות יתווספו בהתאם לבקשה שהוגשה, ונבדוק אותן ב-codelab הזה.

  1. מוסיפים את הקבועים של הגדרות Google Pay אל lib/main.dart:
import 'package:pay/pay.dart';

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '14.95',
    status: PaymentItemStatus.final_price,
  )
];
  1. מוסיפים את קובץ ה-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"
      }
    }
  }

משאבים

  • הפניית API: מאמרי העזרה בנושא אובייקטים של בקשות ב-Google Pay API
  • API Reference: למידע נוסף על שיטות ההרשאה המותרות, רשתות הכרטיסים המותרות ומפרטי הטוקניזציה, כולל ערך השער המתאים, אפשר לעיין במאמר PaymentMethod.

4. הוספת לחצן Google Pay

הספרייה של pay כוללת רכיב מקורי של כפתור Google Pay.

מעדכנים את המחלקה _PaySampleAppState ב-lib/main.dart באמצעות הקוד הבא:

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

הסבר על הקוד

  1. ‫_paymentItems מתאר את העסקה שאמורה לעבור עיבוד בלחיצה על הלחצן הזה.
  2. הווידג'ט paymentConfigurationAsset ב-GooglePayButton טוען את ההגדרה מהקובץ assets/google_pay_config.json.
  3. כשלוחצים על GooglePayButton, הפונקציה onGooglePayResult מופעלת. הפונקציה הזו מקבלת את תוצאת התשלום.
  4. אחרי שמקבלים את אסימון התשלום מהתגובה, שולחים אותו לשער התשלומים כדי לעבד את העסקה.

5. הפעלת תשלום בלחיצה

הקשה על GooglePayButton פותחת את גיליון Google Pay ומחזירה תוצאה – לא נדרשת קריאה נפרדת ל'ביצוע תשלום'. מוסיפים פונקציות לטיפול באירועים כדי לרשום את הטוקן ביומן, להציג שגיאות ולרשום ביומן את הלחיצה על הלחצן (אופציונלי).

  1. מוסיפים או מעדכנים את רכיב הטיפול בתוצאות בתוך _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');
  }
}
  1. מעדכנים את 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. סיכום

כל הכבוד, סיימתם את ה-Codelab הזה! למדתם איך לשלב את Google Pay API באפליקציית Flutter ל-Android.

הרצת הפרויקט

מריצים את הפקודה הבאה כדי להפעיל את האפליקציה:

flutter run

לאן כדאי ללכת מכאן

מקורות מידע נוספים