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.
0 Comments