Google Pay Integration in Flutter App | Payments in Flutter App

In this article, we will discuss how to integrate Google Pay into your Flutter app in a few simple steps.

Step 1: Add Dependencies

First, visit pub.dev, search for the pay package, and add it to your project by adding the following dependency in your pubspec.yaml file:

dependencies:
  pay: ^2.0.0

Step 2: Set Up Your Business Account

1. Sign up for the Google Pay Business Console and create an account.
2. Set up your account and wait until your business profile is approved.

Step 3: Modify Gradle Configuration

In your app-level build.gradle file, change the minSdkVersion to 21:

Step 4: Add Payment Configuration File

Create a gpay.json file in your assets folder with the following content:

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

Make necessary changes like merchantId and merchantName as per your business details.

Step 5: Initialize Payment Configuration

In your Flutter project, initialize the payment configuration:

  late final Future<PaymentConfiguration> _googlePayConfigFuture;

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

Step 6: Implement the User Interface

Focus on the UI to incorporate the Google Pay button. Here is the complete code:

import 'package:flutter/material.dart';
import 'package:pay/pay.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final Future<PaymentConfiguration> _googlePayConfigFuture;

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

  void onGooglePayResult(paymentResult) {
    debugPrint(paymentResult.toString());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: // Example pay button configured using an asset
          FutureBuilder<PaymentConfiguration>(
              future: _googlePayConfigFuture,
              builder: (context, snapshot) => snapshot.hasData
                  ? Center(
                    child: GooglePayButton(
                        paymentConfiguration: snapshot.data!,
                        paymentItems: const [
                          PaymentItem(
                            label: 'Total',
                            amount: '10.00',
                            status: PaymentItemStatus.final_price,
                          ),
                        ],
                        type: GooglePayButtonType.buy,
                        margin: const EdgeInsets.only(top: 15.0),
                        onPaymentResult: onGooglePayResult,
                        loadingIndicator: const Center(
                          child: CircularProgressIndicator(),
                        ),
                      ),
                  )
                  : const SizedBox.shrink()),
    );
  }
}

Step 7: Folder Structure

Ensure your folder structure includes the assets folder containing the gpay.json file and that it is referenced in your pubspec.yaml file:

flutter:
  assets:
    - assets/gpay.json

Conclusion:-

By following these steps, you can easily integrate Google Pay into your Flutter app, providing a seamless payment experience for your users. If you encounter any errors, feel free to ask in the comments.

About Me:

I’m Sachin Choudhary, a passionate Flutter developer with nearly two years of experience in creating seamless and efficient user experiences across platforms. I enjoy tackling new challenges and turning innovative ideas into reality. If you are looking for a reliable Flutter developer to bring your project to life, let’s collaborate and make your vision a success!

✨ Follow me on LinkedIn

✨ Follow me on X