This guide walks you through the process of enabling the Google Pay digital wallet for an app that uses the Flutter plugin for the Square In-App Payments SDK. See the Flutter In-App Payments Plugin Technical Reference for more detailed information about the Google Pay methods available.
Google Pay can only be used on Android devices. You must add a card or payment account
before using Google Pay.
- If you haven't already created a Flutter project with In-App Payments SDK, use the Getting Started with the Flutter Plugin for In-App Payments SDK to set up a Flutter project .
- Step 1: Update AndroidManifest.xml for Google Pay
- Step 2: Initialize Google Pay
- Step 3: Implement the Google Pay flow
Update your AndroidManifest.xml
file to include the following <meta-data/>
element
<application
...
android:theme="@style/AppTheme">
...
<meta-data
android:name="com.google.android.gms.wallet.api.enabled"
android:value="true" />
...
</application>
- Add code to initialize Google Pay in your application State class. If you followed the Getting Started Guide, then initialize Google Pay in the
_initSquarePayment
method and then save the return value ofInAppPayments.canUseGooglePay
in the appState
object.
import 'dart:io' show Platform;
import 'package:square_in_app_payments/models.dart';
import 'package:square_in_app_payments/in_app_payments.dart';
import 'package:square_in_app_payments/google_pay_constants.dart' as google_pay_constants;
class _MyAppState extends State<MyApp> {
bool _googlePayEnabled = false;
...
Future<void> _initSquarePayment() async {
...
var canUseGooglePay = false;
if(Platform.isAndroid) {
// initialize the google pay with square location id
// use test environment first to quick start
await InAppPayments.initializeGooglePay(
'LOCATION_ID', google_pay_constants.environmentTest);
// always check if google pay supported on that device
// before enable google pay
canUseGooglePay = await InAppPayments.canUseGooglePay;
}
setState(() {
...
_googlePayEnabled = canUseGooglePay;
...
});
}
...
}
- Replace
LOCATION_ID
in this example with a valid location ID for the associated Square account.
Add code to the _MyAppState_
class that starts the payment flow and handles
the response.
Note: You cannot start the Google Pay flow from a modal screen. To start
Google Pay, you must close the modal screen before calling requestGooglePayNonce
.
import 'package:square_in_app_payments/models.dart';
import 'package:square_in_app_payments/in_app_payments.dart';
class _MyAppState extends State<MyApp> {
...
/**
* An event listener to start google pay flow
*/
void _onStartGooglePay() async {
try {
await InAppPayments.requestGooglePayNonce(
price: '1.00',
currencyCode: 'USD',
onGooglePayNonceRequestSuccess: _onGooglePayNonceRequestSuccess,
onGooglePayNonceRequestFailure: _onGooglePayNonceRequestFailure,
onGooglePayCanceled: _onGooglePayCancel);
} on InAppPaymentsException catch(ex) {
// handle the failure of starting apple pay
}
}
/**
* Callback when successfully get the card nonce details for processig
* google pay sheet has been closed when this callback is invoked
*/
void _onGooglePayNonceRequestSuccess(CardDetails result) async {
try {
// take payment with the card nonce details
// you can take a charge
// await chargeCard(result);
} on Exception catch (ex) {
// handle card nonce processing failure
}
}
/**
* Callback when google pay is canceled
* google pay sheet has been closed when this callback is invoked
*/
void _onGooglePayCancel() {
// handle google pay canceled
}
/**
* Callback when failed to get the card nonce
* google pay sheet has been closed when this callback is invoked
*/
void _onGooglePayNonceRequestFailure(ErrorInfo errorInfo) {
// handle google pay failure
}
...
}
Note: the chargeCard
method in this example shows a typical REST request on a backend process that uses the Payments API to take a payment with the supplied nonce. See BackendQuickStart Sample to learn about building an app that processes payment nonces on a server.