Integrating Google Pay in Flutter with Provider State Management

Google Pay is a fast and secure payment option for mobile users. Integrating Google Pay into your Flutter app allows your users to quickly make payments without the need for manual input of payment information. This makes the payment process smoother and more convenient for both the user and the business. In this article, we will be showing you how to integrate Google Pay into your Flutter app by using Provider State Management.

Step 1: Create a Flutter Project

Create a new Flutter project by using the following command in your terminal:

flutter create my_google_pay_app

Step 2: Add the Google Pay Dependency

To add Google Pay to your Flutter project, you will need to add the following dependency to your pubspec.yaml file:

google_pay: ^1.0.0

Step 3: Create the Provider

The first step in integrating Google Pay into your Flutter app is to create the Provider. The Provider will be responsible for managing the state of the payment process. To create the Provider, create a new Dart file called payment_provider.dart and add the following code:

import 'package:flutter/widgets.dart';

import 'package:google_pay/google_pay.dart';

class PaymentProvider with ChangeNotifier {

PaymentProvider({

this.googlePay = const GooglePay(),

});

final GooglePay googlePay;

PaymentStatus _paymentStatus = PaymentStatus.notStarted;

PaymentStatus get paymentStatus => _paymentStatus;

void setPaymentStatus(PaymentStatus status) {

_paymentStatus = status;

notifyListeners();

}

Future<void> startPayment() async {

setPaymentStatus(PaymentStatus.inProgress);

try {

await googlePay.startPayment();

setPaymentStatus(PaymentStatus.success);

} catch (e) {

setPaymentStatus(PaymentStatus.failed);

}

}

}

enum PaymentStatus {

notStarted,

inProgress,

success,

failed,

}

The Provider contains a reference to the GooglePay class, which is provided by the google_pay library. It also contains a PaymentStatus enum that will be used to keep track of the state of the payment process. The startPayment method will be used to initiate the payment process.

Step 4: Wrap your App with the Provider

In order to make the Provider accessible to the rest of your app, you will need to wrap your MaterialApp widget with the ChangeNotifierProvider. To do this, open your main.dart file and add the following code:

void main() {

runApp(

ChangeNotifierProvider(

create: (_) => PaymentProvider(),

child: MyApp(),

),

);

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: MyHomePage(),

);

}

}

Step 5: Access the Provider in your Widgets

With the Provider wrapped around your MaterialApp widget, you can now access the Provider in any child widget by using

the Provider.of method. For example, in your MyHomePage widget, you can access the PaymentProvider by using the following code:

final paymentProvider = Provider.of<PaymentProvider>(context, listen: false);

Step 6: Create the Payment Button

Now that we have access to the PaymentProvider, we can create the payment button. The payment button will call the startPayment method of the PaymentProvider when it is pressed. To create the payment button, add the following code to your MyHomePage widget:

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

final paymentProvider = Provider.of<PaymentProvider>(context, listen: false);

return Scaffold(

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text('Payment Status: ${paymentProvider.paymentStatus}'),

RaisedButton(

child: Text('Pay with Google Pay'),

onPressed: () {

paymentProvider.startPayment();

},

),

],

),

),

);

}

}

In this code, we are using the RaisedButton widget to create the payment button. The text displayed on the button is "Pay with Google Pay". When the button is pressed, the startPayment method of the PaymentProvider is called, which will initiate the payment process.

Step 7: Display the Payment Status

Finally, we can display the status of the payment process to the user. To do this, add the following code to your MyHomePage widget:

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

final paymentProvider = Provider.of<PaymentProvider>(context, listen: false);

return Scaffold(

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text('Payment Status: ${paymentProvider.paymentStatus}'),

RaisedButton(

child: Text('Pay with Google Pay'),

onPressed: () {

paymentProvider.startPayment();

},

),

paymentProvider.paymentStatus == PaymentStatus.inProgress

? CircularProgressIndicator()

: Container(),

],

),

),

);

}

}

In this code, we are using a Text widget to display the status of the payment process. If the payment process is in progress, we are displaying a CircularProgressIndicator to show the user that the payment process is ongoing.

Conclusion

In this article, we have shown you how to integrate Google Pay into your Flutter app by using Provider State Management. By using the Provider pattern, we were able to manage the state of the payment process and provide a smooth payment experience for our users. We hope this guide has been helpful and that you are able to integrate Google Pay into your own Flutter app with ease.