Braintree Payment Action

You can use Braintree Payment Action to let users process a payment inside your app using a Credit Card, PayPal, Google Pay, or Apple Pay.
Prerequisites
Before you start defining the Braintree Payment Action, you'll need to complete the Payment Setup on FlutterFlow. Follow the steps present on this page.
Building Payment UI
Let's build a simple checkout page for purchasing a product.
1.Click Add page, present on the Tool Bar. There are a number of e-commerce templates you can use to build your Payment UI.
2.Enter a name for the new page (eg. PaymentPage) and use any checkout template from the E-commerce section (you can modify this template as per your app's requirement or design the entire checkout page by selecting Blank Page).
3.Select the checkout button (you can modify the button as per your requirement).
Now, you are ready to define the Action to process payments.
Define Payment Action
Go to your project page on FlutterFlow and follow the steps below to define a Braintree Payment 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 among 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.
Make sure the user is authenticated before triggering the Braintree Payment Action, otherwise it would 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.
To run and test your app with payments, you have to download the app code (by going to Developer Menu > Download Code) and run it locally. Alternatively, you can generate an APK by clicking on the Build APK button present on the Tool Bar. Install the APK on your Android device to test the app.
Code Overview
You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes. 
The generated code for the Braintree payment processing can be viewed by selecting the checkout button:
Let's understand the code in the following parts:
1. The transaction amount is calculated based upon the Tax Rate and the Shipping Cost:
1
final transacAmount = computeTotal(
2
  40.0,
3
  taxRate: 5,
4
  shippingCost: 5,
5
);
Copied!
2. Initialize the Braintree Drop-In request for different payment methods:
1
final transacDisplayName = 'Checkout Shampoo';
2
​
3
if (kIsWeb) {
4
  showSnackbar(context, 'Payments not yet supported on web.');
5
  return;
6
}
7
​
8
final dropInRequest = BraintreeDropInRequest(
9
  cardEnabled: true,
10
  clientToken: braintreeClientToken(),
11
  collectDeviceData: true,
12
  paypalRequest: BraintreePayPalRequest(
13
    amount: transacAmount.toString(),
14
    currencyCode: 'USD',
15
    displayName: transacDisplayName,
16
  ),
17
  googlePaymentRequest: BraintreeGooglePaymentRequest(
18
    totalPrice: transacAmount.toString(),
19
    currencyCode: 'USD',
20
    billingAddressRequired: false,
21
    googleMerchantID: googleMerchantId(),
22
  ),
23
  applePayRequest: BraintreeApplePayRequest(
24
    amount: transacAmount,
25
    currencyCode: 'USD',
26
    countryCode: 'USA',
27
    displayName: transacDisplayName,
28
    appleMerchantID: appleMerchantId(),
29
  ),
30
);
Copied!
3. Process payment and return the result:
1
if (dropInResult?.paymentMethodNonce?.nonce == null) {
2
  return;
3
}
4
​
5
showSnackbar(
6
  context,
7
  'Processing payment...',
8
  duration: 10,
9
  loading: true,
10
);
11
​
12
final paymentResponse = await processBraintreePayment(
13
  transacAmount,
14
  dropInResult.paymentMethodNonce.nonce,
15
  dropInResult.deviceData,
16
);
17
​
18
if (paymentResponse.errorMessage != null) {
19
  showSnackbar(context, 'Error: ${paymentResponse.errorMessage}');
20
  return;
21
}
22
​
23
showSnackbar(context, 'Success!');
24
transactionId = paymentResponse.transactionId;
Copied!
References
FlutterFlow uses the flutter_braintree package for processing the payments.
Want to know how you can use multiple actions? Check out this page.

Alert Dialog Action

Stripe Payment Action

Last modified 3mo ago

Copy link

Contents

Prerequisites

Building Payment UI

Define Payment Action

Using Credit Card

Code Overview

References