Skip to main content

Braintree

You can accept payments in your app using Braintree (a service provided by PayPal) integration. This will also allow your users to pay directly using a credit card or using a service like PayPal, Google Pay, or Apple Pay

Prerequisites

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

info

FlutterFlow uses Firebase Cloud Functions to process a transaction using the selected service (Braintree/PayPal).

Braintree Integration​

Integrating the Braintree in your app comprises the following steps:

1. Setup payments integration​

Payments can be set up on FlutterFlow using Braintree.

You should always test your payment processing using a Sandboxed environment, before deploying them to a production environment.

Follow the steps below to set up using Braintree:

  1. Go to Braintree Website.
  2. Sign up for getting access to the Sandboxed environment. You might receive an email with the additional steps for completing the sign-up process. If you already have a Braintree account just Log In.
  3. Navigate to the Braintree Settings page of your FlutterFlow project by going to the Settings and Integrations > In App Purchases & Subscriptions > Braintree.
  4. On this page, Enable Braintree/PayPal using the toggle.
  5. Under the Credentials (Sandbox) section, you need to enter the Merchant ID, Tokenization Key, Public Key & Private Key of the Braintree account.
  6. To get the required credentials, navigate to your Braintree account Home page.
  7. Click the gear icon (top-right corner), select Business. From this page, you'll get the Merchant ID.
  8. Now, go to the API page. Here, you'll get the Public Key & Private Key.
  9. To generate a Tokenization Key, go to the API page, and click Generate New Tokenization Key. Copy the Key and enter it in the respective field of FlutterFlow.

Finally, click Deploy to upload the Cloud Functions required for processing a payment using Braintree:

2. Enable Google Pay or Apple Pay (Optional)​

Completing the payment integration by following the above steps will allow you to accept payments using a credit card or a PayPal account. Additionally, you can accept payments using Google Pay or Apple Pay.

To accept payments using Google Pay or Apple Pay, you'll need to enter the respective Merchant ID of the Google/Apple account in the Braintree Settings page > Credentials (Sandbox) section.

  1. To know how to find the Google Pay Merchant ID, navigate to this page.
  2. Steps for configuring Apple Pay and getting access to the Apple Merchant ID are here.

3. Trigger payment action​

In order to initiate a payment, you have to use the Braintree Payment Action. Follow the steps below to add this action to any widget:

  1. Select the widget on which you want to apply the Action.
  2. Select Actions from the Properties panel (right menu).
  3. Click + Add Action button.
  4. Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. Select the Action Type as Braintree Payment.
  6. Enter the Amount either by defining a Specific Value or From Variable.
  7. Under Payment Method, you can select Credit Card, PayPal, or Drop-In. The Drop-In option lets users choose which payment method to use. If you want to use the Credit Card option follow the steps here.
  8. If you have chosen the Drop-In option, select the Allowed Payment Types. Using Google Pay or Apple Pay will require you to have their respective Merchant ID defined during the Payment Setup process.
  9. Enter the Currency Code and you can define the optional parameters like Tax Rate Percentage and Shipping Cost. Enabling Apple Pay requires you to specify the Country Code in the respective field.
warning

Make sure the user is authenticated before triggering the Braintree Payment Action, otherwise, it will result in an error. You can follow the steps on this page to set up Authentication.

Using Credit Card​

If you want to keep only the Credit Card option on your checkout page, you'll need to add the CreditCardFrom widget to the page. Follow the steps below:

  1. Select the Payment Method as Credit Card.
  2. Drag and drop the CreditCardFrom widget onto the canvas.
  3. You can modify the design of the form widget as per your app's needs.
  4. Again select the checkout button to complete defining the Action.
  5. Enter the Currency Code and you can define the optional attributes like Tax Rate Percentage and Shipping Cost.

4. Testing​

Braintree payments work on real Android devices or in emulators, and App Store purchases only work on real iOS devices. This document has instructions on how to run your app on an Android or iOS device.

info

The Braintree Payments cannot be tested in Preview Mode, Test Mode, or Run Mode.

To test your app before deployment:

  1. Download and run your project as described here.
  2. 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. Create the Braintree Account (Not sandbox) and get the production credentials.
  2. Add the production credentials in the FlutterFlow Braintree Settings page > Credentials (Production) section.
  3. Turn on the Is Production toggle present on that page.
  4. Deploy the new Firebase Cloud Functions with the production credentials by clicking on the Deploy button.

Now, you are ready to build and distribute your app with payments to production.