Using Packages like flutter_stripe and in_app_purchase in Flutter

Flutter, Google’s UI toolkit, has revolutionized cross-platform app development with its ability to create natively compiled applications for mobile, web, and desktop from a single codebase. Monetization strategies are crucial for sustainable app development. Two of the most common methods include in-app purchases (IAP) and integrating payment gateways like Stripe. This blog post explores how to use the flutter_stripe and in_app_purchase packages in Flutter to implement these monetization strategies effectively.

Introduction to flutter_stripe

flutter_stripe is an official Flutter package from Stripe that simplifies the integration of Stripe’s payment processing services into Flutter applications. It allows developers to securely handle credit card payments, Apple Pay, Google Pay, and more.

Key Features of flutter_stripe

• Secure Payment Processing: Complies with PCI standards.
• Multiple Payment Methods: Supports various payment options like credit cards, Apple Pay, and Google Pay.
• Customizable UI: Provides flexibility in designing payment forms to match your app’s theme.
• Tokenization: Securely tokenize credit card information for future use.
• 3D Secure: Enhanced security with 3D Secure authentication.

Integrating flutter_stripe in Your Flutter App

Step 1: Add the Dependency

Include the flutter_stripe package in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_stripe: ^latest_version

Run flutter pub get to install the package.

Step 2: Configure Stripe Keys

You’ll need your Stripe publishable key and secret key. Store the publishable key in your Flutter app and the secret key securely on your server. Initialize Stripe in your app’s entry point:

import 'package:flutter_stripe/flutter_stripe.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  Stripe.publishableKey = 'your_stripe_publishable_key';
  await Stripe.instance.applySettings();
  runApp(MyApp());
}

Step 3: Collect Card Details

Use Stripe’s CardField to collect card details securely:

import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State&ltPaymentScreen> {
  final CardController controller = CardController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stripe Payment')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            CardField(
              controller: controller,
              decoration: InputDecoration(
                hintText: 'Card details',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final cardDetails = await controller.getDetails();
                if (cardDetails == null) {
                  print('Invalid card details');
                  return;
                }

                // Implement payment logic using the card details
                // Send cardDetails to your server to process the payment
                print('Card details: ${cardDetails.toJson()}');
              },
              child: Text('Pay Now'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 4: Create Payment Intent on the Server

To process the payment, you must create a Payment Intent on your server using the Stripe secret key. Here’s a sample server-side code snippet using Node.js:

const stripe = require('stripe')('your_stripe_secret_key');
const express = require('express');
const app = express();

app.post('/create-payment-intent', async (req, res) => {
  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: 1000, // Amount in cents
      currency: 'usd',
      automatic_payment_methods: {
        enabled: true,
      },
    });
    res.json({ clientSecret: paymentIntent.client_secret });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: error.message });
  }
});

app.listen(4242, () => console.log('Running on port 4242'));

Step 5: Confirm Payment on the Client

Use the client secret returned from your server to confirm the payment on the client-side:

import 'package:dio/dio.dart'; // You'll need the 'dio' package for HTTP requests

Future confirmPayment(CardDetails cardDetails) async {
  try {
    // 1. Create a Payment Intent on the server
    final response = await Dio().post(
      'http://your-server.com/create-payment-intent',
      data: {
        'amount': 1000, // Amount in cents
        'currency': 'usd',
      },
    );

    final clientSecret = response.data['clientSecret'];

    // 2. Confirm the payment with the client secret
    final paymentResult = await Stripe.instance.confirmPayment(
      clientSecret,
      PaymentMethodParams.card(cardDetails: cardDetails),
    );

    if (paymentResult.status == PaymentIntentsStatus.Succeeded) {
      print('Payment succeeded!');
    } else {
      print('Payment failed: ${paymentResult.toJson()}');
    }
  } catch (e) {
    print('Error: $e');
  }
}

Introduction to in_app_purchase

The in_app_purchase package in Flutter allows developers to integrate in-app purchases into their applications. It supports both consumable and non-consumable products, as well as subscriptions, on both the iOS App Store and Google Play Store.

Key Features of in_app_purchase

• Cross-Platform Support: Works seamlessly on both iOS and Android.
• Product Queries: Allows you to fetch available products from the app stores.
• Purchase Handling: Manages the purchase flow, including payment processing and verification.
• Subscription Support: Handles subscription purchases and renewals.
• Error Handling: Provides mechanisms for handling purchase failures and refunds.

Integrating in_app_purchase in Your Flutter App

Step 1: Add the Dependency

Include the in_app_purchase package in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  in_app_purchase: ^latest_version

Run flutter pub get to install the package.

Step 2: Initialize InAppPurchase

Initialize the InAppPurchase instance in your app:

import 'package:in_app_purchase/in_app_purchase.dart';

class InAppPurchaseService {
  final InAppPurchase _inAppPurchase = InAppPurchase.instance;

  Future init() async {
    final available = await _inAppPurchase.isAvailable();
    if (available) {
      // Listen to purchase updates
      _inAppPurchase.purchaseStream.listen((List purchaseDetailsList) {
        listenToPurchaseUpdated(purchaseDetailsList);
      }, onDone: () {
        print('Purchase stream closed');
      }, onError: (error) {
        print('Error in purchase stream: $error');
      });
    } else {
      print('In-app purchases are not available on this device.');
    }
  }
}

Step 3: Fetch Products

Retrieve the available products from the app stores using their product IDs:

Future<List> getProducts(Set productIds) async {
  final ProductDetailsResponse response = await _inAppPurchase.queryProductDetails(productIds);
  return response.productDetails;
}

Step 4: Initiate a Purchase

Start a purchase flow for a specific product:

Future purchaseProduct(ProductDetails productDetails) async {
  final PurchaseParam purchaseParam = PurchaseParam(productDetails: productDetails);
  _inAppPurchase.buyNonConsumable(purchaseParam: purchaseParam);
}

Step 5: Handle Purchase Updates

Listen to purchase updates and handle successful purchases, pending purchases, and errors:

Future listenToPurchaseUpdated(List purchaseDetailsList) async {
  for (final PurchaseDetails purchaseDetails in purchaseDetailsList) {
    if (purchaseDetails.status == PurchaseStatus.pending) {
      print('Purchase is pending: ${purchaseDetails.productID}');
    } else {
      if (purchaseDetails.status == PurchaseStatus.purchased) {
        // Verify the purchase on your server (optional)
        bool validPurchase = await verifyPurchase(purchaseDetails);
        if (validPurchase) {
          print('Purchase successful: ${purchaseDetails.productID}');
          // Grant user entitlement
        } else {
          print('Invalid purchase: ${purchaseDetails.productID}');
          // Handle invalid purchase
        }
      } else if (purchaseDetails.status == PurchaseStatus.error) {
        print('Purchase failed: ${purchaseDetails.error!.message}');
      }

      if (purchaseDetails.pendingCompletePurchase) {
        await _inAppPurchase.completePurchase(purchaseDetails);
      }
    }
  }
}

Step 6: Verify Purchases (Optional but Recommended)

Verifying purchases on your server helps prevent fraud and ensures that only legitimate purchases are granted entitlements. Implement a server-side verification process using the transaction details provided in the purchase details.

Best Practices for Integrating Payment Solutions

• Secure Your Keys: Never hardcode your Stripe secret key or any sensitive information in your client-side code. Store them securely on your server.
• Handle Errors Gracefully: Implement robust error handling to manage payment failures, network issues, and other exceptions.
• Follow Security Standards: Ensure your implementation complies with PCI DSS and other relevant security standards.
• Test Thoroughly: Test your payment flows in a sandbox environment before deploying to production.
• Provide Clear Instructions: Guide users through the payment process with clear and concise instructions.

Conclusion

Integrating payment solutions such as Stripe and in-app purchases is essential for monetizing Flutter applications effectively. The flutter_stripe and in_app_purchase packages provide powerful tools to handle payment processing, in-app purchases, and subscriptions across multiple platforms. By following best practices and implementing secure payment flows, you can ensure a seamless and reliable payment experience for your users, driving revenue and supporting the continued development of your apps.