Flutter PayPal Integration

💰 What is PayPal in Flutter?

PayPal integration enables Flutter apps to accept payments through PayPal accounts and credit cards. It provides a trusted payment gateway with buyer protection, supporting multiple currencies and payment methods worldwide.


// Add to pubspec.yaml
dependencies:
  flutter_paypal_checkout: ^1.0.0
  
// Basic PayPal button
PaypalCheckout(
  clientId: 'your_client_id',
  secretKey: 'your_secret_key',
)

PayPal Payment Features

🌍

Global Payments

Accept payments from 200+ countries and regions. Support multiple currencies with automatic conversion, making your app accessible to international customers worldwide.

🛡️

Buyer Protection

Built-in fraud protection and dispute resolution. PayPal handles chargebacks and provides seller protection, reducing risk for both buyers and merchants in transactions.

👤

Guest Checkout

Allow payments without PayPal accounts. Users can pay with credit or debit cards directly, removing barriers and increasing conversion rates for your business.

⚡

Quick Integration

Simple SDK with minimal setup required. Pre-built UI components and straightforward API make PayPal integration fast and easy for Flutter developers.

🔹 Setup PayPal Package

Add PayPal package to your Flutter project:

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_paypal_checkout: ^1.0.0
  http: ^1.1.0

Get your PayPal credentials from the developer dashboard:

Required Credentials:

Client ID: Your app's public identifier
Secret Key: Your app's private key
Mode: Sandbox (testing) or Live (production)

🔹 Basic PayPal Checkout

Create a simple PayPal checkout button:

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

class PayPalPaymentScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PayPal Payment')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PaypalCheckout(
                  sandboxMode: true,
                  clientId: 'your_client_id',
                  secretKey: 'your_secret_key',
                  returnURL: 'return.example.com',
                  cancelURL: 'cancel.example.com',
                  transactions: const [
                    {
                      'amount': {
                        'total': '50.00',
                        'currency': 'USD',
                      },
                      'description': 'Product purchase',
                    }
                  ],
                  onSuccess: (Map params) async {
                    print('Payment successful: $params');
                  },
                  onError: (error) {
                    print('Payment error: $error');
                  },
                  onCancel: () {
                    print('Payment cancelled');
                  },
                ),
              ),
            );
          },
          child: Text('Pay with PayPal'),
        ),
      ),
    );
  }
}

🔹 Custom Payment Widget

Build a custom payment screen with product details:

class ProductPaymentScreen extends StatelessWidget {
  final String productName;
  final double price;
  
  ProductPaymentScreen({
    required this.productName,
    required this.price,
  });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Checkout')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Product: $productName',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(
              'Price: \$${price.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 18),
            ),
            Spacer(),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton.icon(
                icon: Icon(Icons.payment),
                label: Text('Pay with PayPal'),
                onPressed: () => processPayPalPayment(context),
              ),
            ),
          ],
        ),
      ),
    );
  }
  
  void processPayPalPayment(BuildContext context) {
    // Payment logic here
  }
}

🔹 Multiple Items Checkout

Handle shopping cart with multiple items:

void checkoutWithMultipleItems(BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => PaypalCheckout(
        sandboxMode: true,
        clientId: 'your_client_id',
        secretKey: 'your_secret_key',
        returnURL: 'return.example.com',
        cancelURL: 'cancel.example.com',
        transactions: [
          {
            'amount': {
              'total': '150.00',
              'currency': 'USD',
              'details': {
                'subtotal': '140.00',
                'shipping': '10.00',
              }
            },
            'description': 'Shopping cart purchase',
            'item_list': {
              'items': [
                {
                  'name': 'Product 1',
                  'quantity': 2,
                  'price': '50.00',
                  'currency': 'USD',
                },
                {
                  'name': 'Product 2',
                  'quantity': 1,
                  'price': '40.00',
                  'currency': 'USD',
                },
              ],
            },
          }
        ],
        onSuccess: (params) {
          print('Order completed: $params');
        },
        onError: (error) {
          print('Order failed: $error');
        },
        onCancel: () {
          print('Order cancelled');
        },
      ),
    ),
  );
}

🔹 Handle Payment Response

Process payment success and update your app:

class PaymentHandler {
  static void handleSuccess(Map params, BuildContext context) {
    // Extract payment details
    final paymentId = params['paymentId'];
    final payerId = params['payerID'];
    
    // Save to database
    saveOrderToDatabase(paymentId, payerId);
    
    // Show success message
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Payment Successful!'),
        content: Text('Your order has been confirmed.'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              Navigator.of(context).pop();
            },
            child: Text('OK'),
          ),
        ],
      ),
    );
  }
  
  static Future saveOrderToDatabase(
    String paymentId, 
    String payerId
  ) async {
    // Save order details to your backend
    print('Saving order: $paymentId');
  }
}

🔹 Subscription Payments

Set up recurring subscription payments:

void createSubscription(BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => PaypalCheckout(
        sandboxMode: true,
        clientId: 'your_client_id',
        secretKey: 'your_secret_key',
        returnURL: 'return.example.com',
        cancelURL: 'cancel.example.com',
        transactions: [
          {
            'amount': {
              'total': '9.99',
              'currency': 'USD',
            },
            'description': 'Monthly Premium Subscription',
            'payment_options': {
              'allowed_payment_method': 'INSTANT_FUNDING_SOURCE'
            },
          }
        ],
        note: 'Recurring monthly payment',
        onSuccess: (params) {
          print('Subscription created: $params');
          // Set up recurring billing on your server
        },
        onError: (error) {
          print('Subscription failed: $error');
        },
        onCancel: () {
          print('Subscription cancelled');
        },
      ),
    ),
  );
}