Skip to content
General

How to Integrate FlutterFlow with Stripe

August 21, 2024

How to Integrate FlutterFlow with Stripe

Integrating Stripe with FlutterFlow allows you to process payments seamlessly in your app. Follow these steps to set up the integration.

Prerequisites

Before you begin, ensure you have the following:

  • A Stripe account
  • A project in FlutterFlow. If you haven’t created one yet, visit FlutterFlow’s site to get started.
  • A basic understanding of how to navigate FlutterFlow. If you’re new to FlutterFlow, check out the FlutterFlow Documentation first.

Step 1: Navigate to the Integration Section in FlutterFlow

Open your FlutterFlow project. In the left sidebar menu, you’ll find the Integrations section. Click on “Add Integration.”

Step 2: Choose the Stripe Integration

From the various options, select “Stripe” as your integration. Click the “+” button in the lower right corner of the ‘Stripe’ card.

Step 3: Enter Stripe Credentials

Next, you’ll need to enter your Stripe public and secret keys. To obtain these keys, go to your Stripe Dashboard. Select Developers in the left sidebar, then API keys.

Ensure you’re in the correct environment. If you only need to test payments, use the test environment keys for your project. For live implementations, use the live environment keys.

Copy your public key (starts with pk_test_ for test environment or pk_live_ for live environment) and secret key (starts with sk_test_ for test environment or sk_live_ for live environment) from your Stripe dashboard and paste them into the respective fields in FlutterFlow. Click “Add Integration” once you’ve entered the necessary keys.

Step 4: Create a Payment User Interface

In your FlutterFlow project, design a user interface that includes fields for the card number, expiration date, CVV, and any information Stripe requires for payment processing. Navigate to “Widgets” in the left sidebar, then drag and drop the Stripe Card widget into your user interface. Customize this widget according to your app’s UI design.

Step 5: Create a Function to Process Payments

Now, create a function to process payments. To do this, select “Functions” from the left sidebar menu. Click on “Add Function,” and choose “Custom Function.” In the function editor, write the logic to process the payment. This logic will use Stripe’s built-in function in FlutterFlow.

Stripe.instance.createPaymentIntent(
  PaymentIntentParams()
    ..setupFutureUsage = PaymentIntentsFutureUsage.OffSession
    ..currency = 'usd'
    ..items = [PaymentIntentItem(amount: 500),]
);

Note: This is a basic example, and your function may be more complex, but the key part is calling Stripe’s integrated function to process the payment.

Step 6: Associate the Payment Function with a Button

Link this payment processing function to a button. You can simply drag and drop a “FlatButton” or “RaisedButton” from the Widgets section into your UI, then link it to your payment function.

After completing these steps, your FlutterFlow + Stripe integration will be up and running. Happy integrating!