# How to Accept Payments from Different Payment Methods in FlutterFlow

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 45-60 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

The easiest way to accept multiple payment methods in FlutterFlow is Stripe Checkout. Create a Stripe Checkout Session via a Cloud Function with payment_method_types: ['card', 'apple_pay', 'google_pay'] and redirect to the Stripe-hosted page using Launch URL. Stripe automatically shows Apple Pay, Google Pay, BNPL (Klarna, Afterpay), and bank transfers based on the customer's country and device. For digital goods on mobile, add native In-App Purchase (iOS App Store/Google Play) separately. For crypto, use Coinbase Commerce via a separate Cloud Function.

## Support every major payment method without building each one individually

Modern customers expect to pay with their preferred method — some use credit cards, others prefer Apple Pay or Google Pay, younger buyers expect BNPL (buy now, pay later) options, and some users in certain markets use bank transfers. Building each of these separately would take weeks. Stripe Checkout handles this automatically: when you enable payment methods in your Stripe Dashboard, the hosted checkout page shows the relevant options based on the customer's country, device, and cart total. This tutorial covers Stripe Checkout for web and mobile payments, native In-App Purchase for digital goods, and Coinbase Commerce for crypto — the three patterns that cover virtually every payment scenario in FlutterFlow apps.

## Before you start

- A Stripe account with your business details verified (required for live payments)
- A Firebase project with Cloud Functions enabled on the Blaze billing plan
- A FlutterFlow project with the API Manager configured

## Step-by-step guide

### 1. Enable payment methods in the Stripe Dashboard

Before writing any code, configure which payment methods Stripe Checkout should offer. Log in to Stripe Dashboard → Settings → Payment Methods. You will see a list of all available methods. Enable the ones relevant to your customers: Cards is enabled by default. Apple Pay and Google Pay: toggle ON — these appear automatically on eligible devices when customers use Stripe Checkout (no extra code needed). Klarna (buy now, pay later): toggle ON — appears for orders above the minimum amount in supported countries. Afterpay/Clearpay: toggle ON for AU, NZ, US, UK. ACH Direct Debit (US bank transfers): toggle ON for US customers. SEPA Direct Debit: toggle ON for EU customers. Link (Stripe's fast checkout): toggle ON to let returning Stripe customers pay with one click. Each method has eligibility requirements displayed in the Dashboard — review them before enabling.

**Expected result:** Selected payment methods are enabled in your Stripe Dashboard and will appear automatically on your Stripe Checkout page for eligible customers.

### 2. Create the Stripe Checkout Session Cloud Function

Deploy a Cloud Function named createCheckoutSession. It receives the cart data and returns a Stripe Checkout URL. Install the Stripe Node SDK: npm install stripe in your functions directory. The function calls stripe.checkout.sessions.create with mode: 'payment' for one-time purchases or mode: 'subscription' for recurring. Set automatic_payment_methods: {enabled: true} to let Stripe automatically show all enabled methods. Add your success_url and cancel_url (these are the pages users return to after checkout — use your FlutterFlow app URL with a query parameter indicating success or cancellation). Store your Stripe secret key as a Cloud Function environment variable STRIPE_SECRET_KEY — never in FlutterFlow.

```
const functions = require('firebase-functions');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

exports.createCheckoutSession = functions.https.onCall(async (data, context) => {
  if (!context.auth) {
    throw new functions.https.HttpsError('unauthenticated', 'Login required');
  }

  const { items, currency = 'usd' } = data;

  const lineItems = items.map(item => ({
    price_data: {
      currency,
      product_data: { name: item.name, images: [item.imageUrl] },
      unit_amount: Math.round(item.price * 100) // Stripe uses cents
    },
    quantity: item.quantity
  }));

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    line_items: lineItems,
    automatic_payment_methods: { enabled: true }, // shows all enabled methods
    success_url: 'https://your-app.com/payment-success?session_id={CHECKOUT_SESSION_ID}',
    cancel_url: 'https://your-app.com/cart',
    customer_email: context.auth.token.email,
    metadata: { userId: context.auth.uid }
  });

  return { checkoutUrl: session.url, sessionId: session.id };
});
```

**Expected result:** The Cloud Function returns a Stripe Checkout URL that opens a hosted payment page with all enabled payment methods shown automatically.

### 3. Call the Cloud Function and launch Stripe Checkout from FlutterFlow

In FlutterFlow's API Manager, add an API Group named StripeFunctions with base URL https://us-central1-{your-project}.cloudfunctions.net. Add an API Call named createCheckout: method POST, path /createCheckoutSession, body: {"data": {"items": [cartItems], "currency": "usd"}}. In your Cart page's Checkout Button Action Flow: (1) Call the createCheckout API Call, passing the cart items from App State. (2) Save the returned checkoutUrl to a Page State variable. (3) Add a Launch URL action using the checkoutUrl. This opens the Stripe Checkout page in the device's browser. Stripe handles all payment method collection, PCI compliance, and order confirmation. Add a success query parameter handler on your FlutterFlow home or success page to detect when the user returns from Stripe.

**Expected result:** Tapping Checkout on the cart page opens Stripe's hosted checkout in a browser, showing cards, Apple Pay, Google Pay, and any other enabled methods for the customer's device and location.

### 4. Add In-App Purchase for digital goods sold through the App Store or Google Play

If your app sells digital content (subscriptions, premium features, virtual items), Apple and Google require using their native In-App Purchase (IAP) system — Stripe Checkout is not allowed for this category. Add the in_app_purchase Flutter package as a Custom Action in FlutterFlow (Custom Code → pubspec: in_app_purchase: ^3.1.0). Create a Custom Action named initIAP that calls InAppPurchase.instance.isAvailable() to check availability and InAppPurchase.instance.queryProductDetails to load your configured product IDs. On purchase button tap: call InAppPurchase.instance.buyNonConsumable (one-time) or buyConsumable (consumable). Listen to InAppPurchase.instance.purchaseStream for completion. Verify the purchase receipt on a Cloud Function using the Apple/Google verification APIs before granting access. IAP is separate from Stripe — it goes through the App Store (30% fee) or Google Play (15-30% fee).

**Expected result:** Digital goods in your app trigger the native iOS or Android IAP payment sheet, which appears on top of your FlutterFlow app.

## Complete code example

File: `payment_methods_overview.txt`

```text
PAYMENT METHOD DECISION GUIDE FOR FLUTTERFLOW

STRIPE CHECKOUT (recommended for most apps):
├── Cards: always enabled
├── Apple Pay: enable in Stripe Dashboard → auto-shows on iOS Safari/WebView
├── Google Pay: enable in Dashboard → auto-shows on Android Chrome/WebView
├── Klarna (BNPL): enable for EU/US/AU/CA → shows for orders $35+
├── Afterpay: enable for US/AU/UK/NZ
├── ACH Debit: enable for US bank transfers (lower fees, slower)
└── SEPA: enable for EU bank transfers

All above appear AUTOMATICALLY with:
  automatic_payment_methods: { enabled: true }
No additional code per method needed.

FLUTTERFLOW FLOW:
├── Cart page → Checkout button
├── Action: API Call → createCheckoutSession CF
├── Action: Launch URL → session.url
├── Stripe handles: payment, address, tax, confirmation
└── User returns to: success_url with session_id param

IN-APP PURCHASE (for digital goods only):
├── Required by Apple/Google for: subscriptions,
│   premium features, virtual items, credits
├── NOT for: physical goods, services, SaaS
├── Implementation: in_app_purchase package Custom Action
├── Fee: 30% App Store, 15-30% Google Play
└── Verification: Cloud Function checks receipt with Apple/Google

CRYPTO (Coinbase Commerce):
├── Cloud Function: POST /charges → returns hosted_url
├── Launch URL: hosted Coinbase checkout page
├── Supports: BTC, ETH, USDC, LTC, BCH
└── Webhook: charge:confirmed → CF → Firestore order update

CURRENCY BY METHOD:
├── Stripe: 135+ currencies, auto-converts
├── Apple Pay / Google Pay: matches Stripe session currency
├── ACH / SEPA: USD / EUR only
└── Coinbase: USD equivalent in crypto
```

## Common mistakes

- **Manually implementing Apple Pay and Google Pay as separate integrations instead of using Stripe Checkout** — Apple Pay requires a domain verification file, Apple Merchant ID configuration, and Apple Pay JS SDK integration. Google Pay requires a separate Google Pay API setup. Each is a multi-day implementation with significant complexity. Fix: Enable Apple Pay and Google Pay in your Stripe Dashboard. With automatic_payment_methods: {enabled: true} in your Checkout Session, Stripe displays both options automatically for eligible customers. No additional code needed.
- **Trying to use Stripe Checkout for in-app digital goods purchases on iOS** — Apple's App Store guidelines (section 3.1.1) require that digital goods and in-app features sold inside iOS apps must use Apple's In-App Purchase system. Using Stripe or redirecting to an external checkout for digital goods results in app rejection or removal from the App Store. Fix: Use Stripe for physical goods, services, and B2B SaaS payments (allowed to use external payment methods). Use the in_app_purchase package for any digital content or features sold inside the iOS or Android app.
- **Not configuring a webhook to confirm payment before fulfilling orders** — Checking for payment completion only on the success_url redirect is unreliable — users can navigate directly to the success URL without paying, or network issues can prevent the redirect from happening after a successful payment. Fix: Deploy a Cloud Function as a Stripe webhook endpoint registered in Stripe Dashboard → Developers → Webhooks. Listen for checkout.session.completed events, verify the event signature with stripe.webhooks.constructEvent(), and only fulfill the order (send confirmation email, grant access, update Firestore) when the webhook confirms payment.

## Best practices

- Use Stripe Checkout with automatic_payment_methods: {enabled: true} for the simplest path to supporting all major payment methods
- Enable payment methods in the Stripe Dashboard first before testing — methods not enabled in the Dashboard will not appear even if requested in the session
- Always verify payment server-side via Stripe webhooks before fulfilling orders — never rely solely on the success URL redirect
- Store your Stripe secret key only in Cloud Function environment variables — never in FlutterFlow, app code, or client-side locations
- Test every payment method with Stripe's test mode before going live — use test card 4242 4242 4242 4242 for cards, and specific test tokens for Apple Pay and Google Pay simulation
- Check local regulations before enabling certain payment methods — BNPL services like Klarna have age and credit requirements, bank transfers may have additional compliance requirements in your jurisdiction
- Show customers a clear receipt page after successful payment — store order details in Firestore from the webhook handler and display them on the success page

## Frequently asked questions

### How do I accept different payment methods in FlutterFlow?

The simplest approach: create a Stripe Checkout Session via a Cloud Function with automatic_payment_methods: {enabled: true}, then use Launch URL to open the Stripe-hosted checkout page. Enable specific payment methods (Apple Pay, Google Pay, Klarna, ACH) in your Stripe Dashboard settings. Stripe automatically shows the relevant options based on the customer's country, device, and order total. No separate integration per payment method is needed.

### Does Stripe Checkout support Apple Pay and Google Pay?

Yes. Enable Apple Pay and Google Pay in your Stripe Dashboard → Settings → Payment Methods. They will automatically appear in Stripe Checkout sessions for eligible customers — Apple Pay on iOS Safari and in-app browsers on iOS, Google Pay on Android Chrome and eligible Android browsers. No additional code or SDK integration is required when using Stripe's hosted Checkout page.

### Can I add buy now pay later (BNPL) options like Klarna to my FlutterFlow app?

Yes, via Stripe Checkout. Enable Klarna, Afterpay/Clearpay, or Affirm in your Stripe Dashboard. They appear automatically in Stripe Checkout for orders above the minimum amount (typically $35-50 USD equivalent) in supported countries. Klarna is available in the US, EU, UK, Australia, and Canada. No custom integration is needed — Stripe handles the BNPL approval flow on their hosted checkout page.

### Do I need to use Apple's In-App Purchase to sell subscriptions on iOS?

Yes, with some exceptions. Apple requires In-App Purchase for digital goods and in-app features — subscriptions to content or features inside the app, virtual currency, and unlocked game levels. Exceptions include: physical goods (Shopify, Amazon), services delivered outside the app (Uber rides, food delivery), B2B SaaS with websites outside the app, and reader apps (Netflix, Spotify on iOS cannot use IAP for existing subscribers). If your app sells digital features inside the app to iOS users, use the in_app_purchase package — not Stripe.

### How do I accept payments in different currencies?

Stripe supports 135+ currencies. Set the currency field in your createCheckoutSession call to match your pricing (e.g., eur for euros, gbp for pounds). Stripe handles currency display and conversion. For multi-currency pricing, create separate Stripe Products with prices in each currency and select the appropriate price based on the user's location. Stripe's automatic currency conversion feature can also automatically present the correct currency based on IP geolocation.

### What is the cheapest way to accept payments in FlutterFlow?

Stripe's standard rate is 2.9% + 30 cents per card transaction with no monthly fee — this is the lowest cost option for most small businesses. ACH direct debit (US bank transfers) is cheaper at 0.8% capped at $5 for large transactions. SEPA direct debit in Europe is 0.8% capped at €5. For subscriptions, Stripe Billing adds 0.5-0.8% on recurring revenue. In-App Purchase (Apple/Google) takes 15-30% — significantly more than Stripe for digital goods. Avoid IAP when Stripe is legally permitted.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-can-i-accept-payments-from-different-payment-methods
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-can-i-accept-payments-from-different-payment-methods