رابط برنامه‌نویسی کاربردی گوگل پی برای فلاتر در اندروید

۱. مقدمه

آنچه خواهید ساخت

با تکمیل این آزمایشگاه کد، شما یک برنامه Flutter حداقلی و قابل اجرا با ادغام Google Pay برای اندروید خواهید داشت. این پروژه یک توکن پرداخت را بازیابی می‌کند که ممکن است برای پردازش به یک ارائه‌دهنده خدمات پرداخت ارسال شود.

آنچه یاد خواهید گرفت

• نحوه نصب و پیکربندی کتابخانه Google Pay Flutter
• نحوه نمایش دکمه Google Pay و مدیریت کلیک‌ها
• نحوه درخواست توکن پرداخت از گوگل پی

آنچه نیاز دارید

• یک ویرایشگر متن به دلخواه شما برای ویرایش فایل‌های Dart.
• یک محیط توسعه Flutter که برای اندروید تنظیم شده است.
• برای تولید، به یک شناسه تجاری گوگل پی (Google Pay merchantId ) نیاز دارید. ثبت نام در کنسول گوگل پی و کیف پول (Google Pay & Wallet Console) فقط یک دقیقه طول می‌کشد، پس بهتر است همین الان این کار را انجام دهید.

۲. ایجاد پروژه فلاتر

ایجاد فایل‌های پروژه

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

۳. پیکربندی گوگل پی

یک درخواست پرداخت گوگل پی به یک شیء درخواست نیاز دارد. شیء تعریف شده در اینجا به عنوان _paymentItems شامل حداقل تنظیمات مشترک برای همه درخواست‌ها است. تنظیمات اضافی بسته به درخواست انجام شده اضافه می‌شوند که در این آزمایشگاه کد بررسی خواهیم کرد.

1. ثابت‌های پیکربندی Google Pay را به lib/main.dart اضافه کنید:

import 'package:pay/pay.dart';

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

2. فایل پیکربندی پرداخت پیش‌فرض 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 : مستندات اشیاء درخواست API گوگل پی
• مرجع API : برای اطلاعات بیشتر در مورد روش‌های مجوزدهی مجاز، شبکه‌های کارتی مجاز و مشخصات توکن‌سازی از جمله مقدار مناسب درگاه، به PaymentMethod مراجعه کنید.

۴. دکمه گوگل پی را اضافه کنید

کتابخانه 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. وقتی توکن پرداخت را از پاسخ دریافت کردید، آن را برای پردازش تراکنش به درگاه پرداخت خود ارسال می‌کنید.

۵. فعال کردن پرداخت با کلیک

با لمس 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');
  }
}

2. 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 محتوای مخرب را دریافت می‌کند.
• در محیط عملیاتی، توکن را برای تکمیل فرآیند پرداخت به ارائه‌دهنده خدمات پرداخت خود ارسال کنید.

۶. نتیجه‌گیری

تبریک می‌گویم که این Codelab را به پایان رساندید! شما یاد گرفتید که چگونه API گوگل پی را در یک برنامه فلاتر برای اندروید ادغام کنید.

اجرای پروژه

برای شروع برنامه خود، دستور زیر را اجرا کنید:

flutter run

از اینجا به کجا برویم؟

• چک لیست ادغام را مرور کنید

منابع اضافی

• به گفتگو در کانال #payments در دیسکورد بپیوندید
• @GooglePayDevs را در X دنبال کنید
• ویدیوهای مرتبط با گوگل پی را در یوتیوب تماشا کنید