Stripe

Stripe helps integrate payment processing 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 cards, Apple Pay, or Google Pay.

Prerequisites

Before starting to set up payments, make sure you have:

• Completed all the steps of Firebase Setup for your project.

• Upgraded your Firebase project to Blaze Plan because FlutterFlow uses Firebase Cloud Functions to process a transaction using the Stripe payment provider.

• Enabled Firebase Authentication for your project.

Stripe Integration

Integrating the Stripe Payments in your app comprises the following steps:

1. Setup Stripe payment

2. Apple Pay setup (optional)

3. Trigger Stripe payment

4. Testing

5. Releasing to production

1. Setup Stripe payment

Setting up the Stripe payment includes acquiring the keys from your Stripe account and adding them to FlutterFlow.

You should always try out payments in test mode before releasing them to your production app. Hence, the instructions below will guide you on how to get the test keys.

Follow the steps below to set up payment using Stripe:

1. Create a new Stripe account from here. If you already have an account, login.

2. From the dashboard page, click Developers.

3. Enable Test Mode (top right side of your screen).

4. Switch to the API keys tab.

5. Return to the FlutterFlow project and navigate to Settings and Integrations > In App Purchases & Subscriptions > Stripe. Use the toggle to Enable Stripe Payments.

6. 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.

7. Under the Additional Settings, you need to specify the following:

   1. Merchant Display Name (Required): Enter a name for the merchant (you) that the user will see while performing the payment.

   2. Merchant Country Code (Required): Enter your country code. This must be the 3-digit ISO country code, such as USA, IND, and NGA.

   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.

8. Click Deploy.

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:

1. Creating Apple Merchant ID

2. Uploading Payment Certificate in Stripe

3. Adding Apple Merchant ID in FlutterFlow

2.1 Creating Apple Merchant ID

To create Apple Merchant ID:

1. Go to Apple's Developer Center and select Certificates, Identifiers & Profiles.

2. Under Identifiers, select Merchant IDs.

3. Click the Add button (+) in the upper-right corner.

4. 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.

5. Click Continue.

6. Review the settings, and click Register.

7. Click Done.

8. Now, again under Identifiers, select Apps IDs.

9. Select your app's identifier from the list.

10. Under Capabilities, check the Apple Pay Payment Processing option.

11. Click Configure.

12. Select the merchant account that you just created, and click Continue.

13. Click Save and then Confirm in the dialog.

2.2 Uploading Payment Certificate in Stripe

To upload a payment certificate in Stripe:

1. First, go to the Settings page from your Stripe dashboard and select the Payment methods option.

2. Expand the Apple Pay tab under the Wallets section.

3. Click Configure to navigate to the Apple Pay settings page.

4. Under iOS certificates, click + Add new application.

5. This will download the Certificate Signing Request (CSR) file on your system and click Continue.

6. Select the Merchant ID with which you want to associate this certificate, and click Create Certificate.

7. Follow the instructions to upload the CSR file that you downloaded from Stripe.

8. To enable the certificate, click Activate. Then click Download to save it locally.

9. Go back to the Stripe page where the dialog box is displayed, and click Continue.

10. Upload the new certificate file.

11. 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:

1. Navigate to Settings and Integrations > In App Purchases & Subscriptions > Stripe.

2. 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:

pageStripe Payment

4. Testing

You can test Stripe payments on mobile and the Web before deployment. To do that:

1. Go to the FlutterFlow project and navigate to Settings and Integrations > In App Purchases & Subscriptions > Stripe.

2. Make sure the Is Production is disabled.

3. Make sure you have entered the correct Test Credentials, such as Publishable Key and Secret Key.

4. Download and run your project as described here.

5. To test the purchase, you can use any of these basic test card numbers.

5. Releasing to production

Before you release the app to production, complete the following steps:

1. Login to your Stripe account and navigate to the Developers page.

2. Disable the Test Mode (top right side of your screen).

3. Select API keys from the left menu and copy the Publishable Key and Secret Key.

4. Return to FlutterFlow; under the Production Credentials section, paste the Publishable Key and Secret Key.

5. To deploy the Android app, follow the Google Play Store Deployment guide.

6. To deploy the iOS app, follow the App Store Deployment guide.

---

FAQs

I am getting "Error: Unknown error occurred"

When encountering the "Error: Unknown error occurred" message, consider these troubleshooting steps:

1. Stripe Settings Adjustment: In FlutterFlow's Stripe settings, verify the Merchant country code is a 3-digit code, like "USA" instead of "US". If needed, remove previously deployed functions in the Firebase console and redeploy them after updating the country code.

2. User Authentication Requirement: Stripe payments require an authenticated user session. Ensure you're attempting the Stripe action after a user has successfully logged in to the app.

3. Cloud Functions Permissions: Check that your cloud functions have the 'Cloud Functions Invoker' permission set for allUsers in the Google Cloud console. This permission is typically assigned by default, but it's good practice to double-check.

   

---

Last Updated Date: February 1, 2024