Links

Stripe

Stripe helps in integrating payment into your FlutterFlow app. Using this payment service you can easily sell products directly inside your application and manage transactions easily.
While using Stripe as the payment provider, users can buy products using Credit Card, Apple Pay, or Google Pay.
Stripe demo

Prerequisites

Before starting to set up payments, make sure you have:
FlutterFlow uses Firebase Cloud Functions to process a transaction using the Stripe payment provider.

Stripe Integration

Integrating the Stripe Payments in your app comprises the following steps:
  1. 1.
  2. 4.
    ​Testing​

1. Setup Stripe payment

Setting up the Stripe payment includes acquiring the keys from your Stripe account and adding them to your Stripe integration inside the FlutterFlow.
You should always try out payments in test mode before releasing them to your production application. Hence the below instruction guides you on getting the test keys.
Follow the steps below to set up payment using Stripe:
  • Create a new Stripe account from here. If you already have an account, login.
  • From the dashboard page, click Developers.
  • Enable Test Mode (top right side of your screen), if you want to try out the payments inside your app.
  • Select API keys from the left menu.
  • Go to the FlutterFlow project, and navigate to Settings and Integrations > In App Purchases & Subscriptions > Stripe. Use the toggle to enable Stripe Payments.
  • Copy the Publishable Key and Secret Key from the Stripe API keys page and paste them into the respective fields inside FlutterFlow. If you are using Stripe in test mode, make sure you paste them inside the Test Credentials section.
  • Under the Additional Settings, you need to specify the following:
    1. 1.
      Merchant Display Name (Required): Enter a name for the merchant (you) that the user will see while performing the payment.
    2. 2.
      Merchant Country Code (Required): Enter your country code.
    3. 3.
      Apple Merchant ID (Optional): You need to enter this if you want to accept payments through Apple Pay as well. The instructions for using Apple Pay are in this section.
  • Click Deploy.
Setup Stripe payment
This would deploy the Stripe payment service as a Firebase Cloud Function. Now, you are ready to trigger payments inside your app.

2. Apple Pay setup (optional)

Setting up Apple Pay comprises the following steps:

2.1 Creating Apple Merchant ID

To create Apple Merchant ID:
  • Go to Apple's Developer Center, and select Certificates, Identifiers & Profiles.
  • Under Identifiers, select Merchant IDs.
  • Click the Add button (+) in the upper-right corner.
  • Enter a Description and specify an Identifier. The identifier is usually defined in the format, merchant followed by the Package Name of your app (you'll find it inside the Settings and Integrations page of FlutterFlow), for example: merchant.com.domainname.appname.
  • Click Continue.
  • Review the settings, and click Register.
  • Click Done.
  • Now, again under Identifiers, select Apps IDs.
  • Select your app's identifier from the list.
  • Under Capabilities, check the Apple Pay Payment Processing option.
  • Click Configure.
  • Select the merchant account that you just created, and click Continue.
  • Click Save and then Confirm in the dialog.
Creating Apple Merchant ID

2.2 Uploading Payment Certificate in Stripe

To upload a payment certificate in Stripe:
  • First, go to the Settings page from your Stripe dashboard and select the Payment methods option.
  • Expand the Apple Pay tab under the Wallets section.
  • Click Configure to navigate to the Apple Pay settings page.
  • Under iOS certificates, click + Add new application.
  • This will download the Certificate Signing Request (CSR) file on your system, click Continue.
  • Select the Merchant ID with which you want to associate this certificate, and click Create Certificate.
  • Follow the instructions to upload the CSR file that you downloaded from Stripe.
  • To enable the certificate, click Activate. Then click Download to save it locally.
  • Go back to the Stripe page where the dialog box is displayed, and click Continue.
  • Upload the new certificate file.
  • Once uploaded, you should see the certificate listed under iOS certificates.

2.3 Adding Apple Merchant ID in FlutterFlow

To add Apple Merchant ID in FlutterFlow:
  • Go to the FlutterFlow project, and navigate to Settings and Integrations > In App Purchases & Subscriptions > Stripe.
  • Under the Additional Settings, enter your Apple Merchant ID.
Adding Apple Merchant ID in FlutterFlow

3. Trigger Stripe payment

In order to initiate a payment using Stripe, you have to use the Stripe Payment Action. Know how to define this action by going to the following page:

4. Testing

You can test Stripe payments on mobile and the Web before deployment. To do that:
  • Go to the FlutterFlow project, and navigate to Settings and Integrations > In App Purchases & Subscriptions > Stripe.
  • Make sure the Is Production is disabled.
  • Make sure you have entered the correct Test Credentials such as Publishable Key and Secret Key.
  • Download and run your project as described here.
  • To test the purchase, you can use any of these basic test card numbers.
Testing payment

5. Releasing to production

Before you release the app to production, complete the following steps:
  • Login to your Stripe account, and navigate to the Developers page.
  • Disable the Test Mode (top right side of your screen).
  • Select API keys from the left menu and copy the Publishable Key and Secret Key.
  • Go to the FlutterFlow project, and navigate to Settings and Integrations > In App Purchases & Subscriptions > Stripe. Use the toggle to enable Stripe Payments.
  • Use the toggle to enable Stripe Payments.
  • Under the Production Credentials section, paste the Publishable Key and Secret Key.
  • To deploy the Android app, follow the Google Play Store Deployment with Codemagic guide.
  • To deploy the iOS app, follow the App Store Deployment with Codemagic guide.