Implementing Payment Gateway in flutter Mobile Apps with stripe or Paypal

As more and more businesses are moving online, implementing a payment gateway in mobile apps has become crucial for accepting payments from customers. In this blog, we will explore how to implement a payment gateway in Flutter mobile apps with Stripe or PayPal, two of the most popular payment gateway providers. We will also provide code samples to help you get started.

Stripe Payment Gateway Integration in Flutter

Stripe is a widely used payment gateway that supports a variety of payment methods, including credit cards, debit cards, Apple Pay, Google Pay, and more. Here are the steps to integrate Stripe payment gateway in Flutter:

So how exactly can Mobile Apps make a tangible difference in your E-commerce business?

Step 1: Create a Stripe account
First, you need to create a Stripe account and obtain API keys for testing and production environments.
Step 2: Add Stripe dependency in Flutter project
Add Stripe dependency in your Flutter project by adding the following line in pubspec.yaml file:

				
					 
  dependencies: stripe_payment: ^1.0.8

Step 3: Initialize Stripe
Initialize Stripe with the API keys obtained in Step 1. You can do this in the main.dart file as shown below:

				
					 
  import 'package:stripe_payment/stripe_payment.dart';
  void main() { 
    StripePayment.setOptions( StripeOptions( 
    publishableKey: "your_publishable_key",
    merchantId: "your_merchant_id",
    androidPayMode: 'test', ), ); 
  }

Step 4: Create a payment method
Create a payment method by calling the StripePayment.paymentRequestWithCardForm method as shown below:

				
					 
  void initiatePayment() async { 
    var paymentMethod = await StripePayment.paymentRequestWithCardForm( CardFormPaymentRequest(), );
    // Use the paymentMethod.id to complete the payment 
  }

This will display a form where users can enter their payment information. Once the form is submitted, a payment method object will be returned that can be used to complete the payment.

Step 5: Complete the payment
To complete the payment, use the payment method ID obtained in Step 4 and call the StripePayment.confirmPaymentIntent method as shown below:

				
					 
  void completePayment(String paymentMethodId, String amount) async {
    try { 
      var paymentIntent = await createPaymentIntent(amount);
      var confirmedPayment = await StripePayment.confirmPaymentIntent( PaymentIntent( clientSecret: paymentIntent['client_secret'],
      paymentMethodId: paymentMethodId, ), );
      // Payment successful, update UI 
    } catch (e) 
    { // Payment failed, handle error } 
  }

In the createPaymentIntent method, you can create a payment intent on your server using Stripe API and obtain a client secret.

Stripe Payment Gateway Integration in Flutter

PayPal is another popular payment gateway that supports multiple payment methods, including credit cards, debit cards, and PayPal accounts. Here are the steps to integrate PayPal payment gateway in Flutter:

Step 1: Create a PayPal account
First, you need to create a PayPal account and obtain client ID and secret for testing and production environments..
Step 2: Add PayPal dependency in Flutter project
Add PayPal dependency in your Flutter project by adding the following line in pubspec.yaml file:

				
					 
  dependencies: flutter_paypal: ^0.0.1

Step 3: Initialize PayPal
Initialize PayPal with the client ID obtained in Step 1. You can initialize PayPal in the main.dart file as shown below:

				
					 

 import 'package:flutter_paypal/flutter_paypal.dart';
  void main() { 
    PayPal.initialize( clientId: "your_client_id", environment: Environment.sandbox, ); 
  }

Step 4: Create a payment
Create a payment by calling the PayPal.requestOneTimePayment method as shown below:

				
						 

  void initiatePayment() async {
    var result = await PayPal.requestOneTimePayment( amount: '10.00', currencyCode: 'USD', shortDescription: 'Test payment', );
    // Use the result.paymentId to complete the payment 
  }

This will display a PayPal payment form where users can enter their payment information. Once the form is submitted, a payment ID will be returned that can be used to complete the payment.
Step 5: Complete the payment
To complete the payment, use the payment ID obtained in Step 4 and call the PayPal.capturePayment method as shown below:

				
					 
  void completePayment(String paymentId) async {
    try { 
      var payment = await PayPal.capturePayment( paymentId: paymentId, amount: '10.00', currency: 'USD', );
      // Payment successful, update UI 
    } catch (e) { // Payment failed, handle error } 
  }

This will complete the payment and return a payment object that can be used to update the UI.

Conclusion

Implementing a payment gateway in Flutter mobile apps is essential for accepting payments from customers. Stripe and PayPal are two popular payment gateway providers that offer a variety of payment methods. In this blog, we have explored how to integrate Stripe and PayPal payment gateways in Flutter mobile apps and provided code samples to help you get started. If you are looking for Flutter app development company or Flutter development services to implement payment gateway in your mobile app, it is recommended to hire Flutter developers who have experience in integrating payment gateways.

At my company MetaDesign Solutions, we have a team of 20 High Experienced Flutter Developers, who have developed 30+ Flutter Apps for our customers. Feel free to write to us on “sales@metadesignsolutions.com” for a quote on developing your mobile app.