Google Pay Integration in Flutter with One Button

This article demonstrates how to incorporate Google Pay into a Flutter application with a single button. Users can tap the button, select a pre-known card, confirm with their fingerprint, and the payment data is transmitted. Google Pay is the preferred payment method due to its ease of integration, as Google has handled the complexities. The article covers the necessary dependencies, configuring Android, and implementing the one-button payment flow.

To begin, add the following dependencies in the pubspec.yaml file: flutter, pay_android: ^1.0.0, and google_pay_button: ^0.1.0. The pay_android plugin wraps the native Android Google Pay API, and google_pay_button renders the branded Google Pay button, adhering to Google's button guidelines.

Configure Android by ensuring the minSdkVersion is 21 or higher and adding the Google Pay meta-data to the AndroidManifest.xml. Create an assets/google_pay.json file containing payment configurations such as provider, environment, merchantName, merchantId, allowedCardNetworks, allowedAuthMethods, and gateway details. Don't forget to register this asset in pubspec.yaml.

Implement the one-button payment flow in Flutter by creating a CheckoutPage and importing the required packages. Inside the _CheckoutPageState, initialize the PaymentConfiguration from the assets/google_pay.json file. In the _onGooglePayPressed method, confirm that the device can pay, present the Google Pay sheet, and handle the result. If the result is successful, send the result.token to your backend for verification.