How to Integrate a Payment Gateway Other Than Stripe in FlutterFlow

For PayPal: install the paypal-rest-sdk or use axios to call the PayPal Orders API directly. Cloud Function createPayPalOrder: (1) get an access token by POSTing to https://api-m.sandbox.paypal.com/v1/oauth2/token with your client_id:client_secret as Basic Auth; (2) create an order by POSTing to https://api-m.sandbox.paypal.com/v2/checkout/orders with body {intent: 'CAPTURE', purchase_units: [{amount: {currency_code: 'USD', value: '49.99'}}]}; (3) find the link in the response where rel == 'approve' — this is the PayPal checkout URL; (4) return it to FlutterFlow. Store client_id and client_secret in Cloud Function environment variables — never hardcode. In FlutterFlow, add an API Group pointing to your Cloud Functions URL and add a createPayPalOrder API Call (POST, JSON body with amount, currency, orderId).

In your FlutterFlow checkout button Action Flow: (1) call the createPayPalOrder API Call and store the returned approvalUrl in Page State variable paymentUrl; (2) add a Launch URL action using paymentUrl. On mobile, Launch URL opens the URL in the device's default browser or the PayPal app if installed. After the user completes payment, PayPal redirects to your return_url (set when creating the order). To detect the return: set the return_url to a deep link back to your app (e.g., yourapp://payment-complete?token={token}) and configure deep links in FlutterFlow Settings → Deep Link. In the deep link handler action, extract the PayPal token from the URL and call a capturePayPalOrder Cloud Function to finalize the payment. Alternatively, rely on the webhook (next step) and just navigate the user to an 'order processing' screen after returning from PayPal.

Razorpay provides a Flutter SDK that shows a native in-app payment sheet without leaving your app — better UX than browser redirect for Indian markets. In FlutterFlow, go to Custom Code → Pubspec Dependencies, add razorpay_flutter ^1.3.6. Create a Custom Action named openRazorpayCheckout. Import: import 'package:razorpay_flutter/razorpay_flutter.dart';. Initialize: final razorpay = Razorpay(); razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, (response) { /* call Cloud Function to verify + update Firestore */ }); razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, (response) { /* show error */ });. Create an order server-side in a Cloud Function (POST to https://api.razorpay.com/v1/orders) and pass the returned orderId to the Custom Action. Open checkout: razorpay.open({'key': 'rzp_test_xxx', 'amount': 4999, 'name': 'YourApp', 'order_id': orderId, 'prefill': {'email': userEmail}}). Amount is in smallest currency unit (paise for INR — 4999 = ₹49.99).

Payment webhooks are the authoritative confirmation — never rely solely on the client-side success callback (it can be spoofed). In your Firebase Cloud Functions, create an HTTP function paymentWebhook. For PayPal: verify the event by calling PayPal's webhook verification API. For Razorpay: verify the signature with crypto.createHmac('sha256', webhookSecret).update(rawBody).digest('hex') and compare to the X-Razorpay-Signature header. For Square: verify the X-Square-Hmacsha256-Signature header. After verification, extract the order ID from the event payload, find the matching Firestore order document, and update its status to 'paid' along with the payment transaction ID. Register your Cloud Function URL as the webhook endpoint in your gateway's developer dashboard: PayPal → Webhooks → Add Webhook, Razorpay → Settings → Webhooks → Add New Webhook.