flutter_braintree 4.0.0 copy "flutter_braintree: ^4.0.0" to clipboard
flutter_braintree: ^4.0.0 copied to clipboard

Flutter plugin that wraps the native Braintree SDKs. Enables payments with credit cards, PayPal, Google Pay and more.

Braintree for Flutter #

A Flutter plugin that wraps the native Braintree SDKs. Unlike other plugins, this plugin not only lets you start Braintree's native Drop-in UI, but also allows you to create your own custom Flutter UI with Braintree functionality.

Installation #

Add flutter_braintree to your pubspec.yaml file:

dependencies:
  ...
  flutter_braintree: <version>
copied to clipboard

Android #

You must migrate to AndroidX.
In /app/build.gradle, set your minSdkVersion to at least 21.

Card.io

Card.io enables credit card scanning so as to remove the need to type in credit card details manually. This feature became optional in flutter_braintree version 0.6.0 to potentially reduce app sizes. To enable it for the Braintree Drop-in UI, add the following line to your app level build.gradle file:

dependencies {
    ...
    implementation 'io.card:android-sdk:5.+'
}
copied to clipboard

PayPal / Venmo / 3D Secure

In order for this plugin to support PayPal, Venmo or 3D Secure payments, you must allow for the browser switch by adding an intent filter to your AndroidManifest.xml (inside the <application> body):

<activity android:name="com.braintreepayments.api.DropInActivity"
    android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="${applicationId}.braintree" />
    </intent-filter>
</activity>
<activity android:name="com.braintreepayments.api.ThreeDSecureActivity" android:theme="@style/Theme.AppCompat.Light" android:exported="true">
</activity>
copied to clipboard

Important: Your app's URL scheme must begin with your app's package ID and end with .braintree. For example, if the Package ID is com.your-company.your-app, then your URL scheme should be com.your-company.your-app.braintree. ${applicationId} is automatically applied with your app's package when using Gradle. Note: The scheme you define must use all lowercase letters. If your package contains underscores, the underscores should be removed when specifying the scheme in your Android Manifest.

Google Pay

Add the wallet enabled meta-data tag to your AndroidManifest.xml (inside the <application> body):

<meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true"/>
copied to clipboard

iOS #

You may need to add or uncomment the following line at the top of your ios/Podfile:

platform :ios, '12.0'
copied to clipboard

Warning: Device data collection is not yet supported for iOS.

PayPal / Venmo / 3D Secure

In your App Delegate or your Runner project, you need to specify the URL scheme for redirecting payments as following:

BTAppContextSwitcher.setReturnURLScheme("com.your-company.your-app.payments")
copied to clipboard

Moreover, you need to specify the same URL scheme in your Info.plist:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.your-company.your-app.payments</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.your-company.your-app.payments</string>
        </array>
    </dict>
</array>
copied to clipboard

See the official Braintree documentation for a more detailed explanation.

Usage #

You must first create a Braintree account. In your control panel you can create a tokenization key. You likely also want to set up a backend server. Make sure to read the Braintree developer documentation so you understand all key concepts.

In your code, import the plugin:

import 'package:flutter_braintree/flutter_braintree.dart';
copied to clipboard

You can then create your own user interface using Flutter or use Braintree's drop-in UI.

Flutter UI #

Credit cards

Create a credit card request object:

final request = BraintreeCreditCardRequest(
  cardNumber: '4111111111111111',
  expirationMonth: '12',
  expirationYear: '2021',
  cvv: '367'
);
copied to clipboard

Then ask Braintree to tokenize it:

BraintreePaymentMethodNonce result = await Braintree.tokenizeCreditCard(
   '<Insert your tokenization key or client token here>',
   request,
);
print(result.nonce);
copied to clipboard

PayPal

Create a PayPal request object:

final request = BraintreePayPalRequest(amount: '13.37');
copied to clipboard

Or, for the Vault flow:

final request = BraintreePayPalRequest(
  billingAgreementDescription: 'I hereby agree that flutter_braintree is great.',
);
copied to clipboard

Then launch the PayPal request:

BraintreePaymentMethodNonce result = await Braintree.requestPaypalNonce(
   '<Insert your tokenization key or client token here>',
   request,
);
if (result != null) {
  print('Nonce: ${result.nonce}');
} else {
  print('PayPal flow was canceled.');
}
copied to clipboard

Braintree's native drop-in #

Create a drop-in request object:

final request = BraintreeDropInRequest(
  clientToken: '<Insert your client token here>',
  collectDeviceData: true,
  googlePaymentRequest: BraintreeGooglePaymentRequest(
    totalPrice: '4.20',
    currencyCode: 'USD',
    billingAddressRequired: false,
  ),
  paypalRequest: BraintreePayPalRequest(
    amount: '4.20',
    displayName: 'Example company',
  ),
);
copied to clipboard

Then launch the drop-in:

BraintreeDropInResult result = await BraintreeDropIn.start(request);
copied to clipboard

Access the payment nonce:

if (result != null) {
  print('Nonce: ${result.paymentMethodNonce.nonce}');
} else {
  print('Selection was canceled.');
}
copied to clipboard

To increase the chances of success with 3DS2 challenge is possible to add additional information about the user as mentioned in the guide to Migrate to 3D Secure 2.

var request = BraintreeDropInRequest(
  clientToken: '<Insert your client token here>',
  collectDeviceData: true,
  requestThreeDSecureVerification: true,
  email: "test@email.com",
  amount: "0,01",
  billingAddress: BraintreeBillingAddress(
    givenName: "Jill",
    surname: "Doe",
    phoneNumber: "5551234567",
    streetAddress: "555 Smith St",
    extendedAddress: "#2",
    locality: "Chicago",
    region: "IL",
    postalCode: "12345",
    countryCodeAlpha2: "US",
  ),
  cardEnabled: true,
);
copied to clipboard

See BraintreeDropInRequest and BraintreeDropInResult for more documentation.

200
likes
160
points
7.69k
downloads

Publisher

verified publisherjulien-scholz.dev

Weekly Downloads

2024.09.16 - 2025.03.31

Flutter plugin that wraps the native Braintree SDKs. Enables payments with credit cards, PayPal, Google Pay and more.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter, meta

More

Packages that depend on flutter_braintree