Users Pricing

blog

Home Blogs Integrating Braintree for Flutter – MindStick
Integrating Braintree for Flutter

Integrating Braintree for Flutter

Apeksha Khanna 7275 06 Dec 2019 Updated 06 Dec 2019

With an increase in online transactions, App and Web users are more prone to cyber-attacks. Several big companies are investing in building a secure data transmitting system. Studies showed that Companies with weak data storage protocols are at high risk of losing a large portion of your audience. This is where Braintree comes in limelight. Braintree coupled with Paypal is one such secure gateway provider that offers fraud control tools, processes debit/ credit cards, and is available in multiple languages. Plus, Braintree supports Flutter which makes it even easier for developers to build an exquisite app for both iOS and Android with a single code base.

A mobile application build with Flutter looks native on both Android and iOS, saves App development time and money. 

Follow the below-given steps to enable payment gateway support.

Steps to Enable Braintree for Flutter-build App

Step 1: Signup for a free Sandbox account to test the Braintree code. 

 You'll need your:

  • Sandbox merchant ID
  • Public key
  • Private key

to test the values of a secure protocol. We will come to that later. 

Step 2: Create your Flutter Project and do the followings for:

Android

Add support for Paypal Payment by adding below lines inside the AndroidManifest.xml file.

    <activity android:name="com.braintreepayments.api.BraintreeBrowserSwitchActivity"

        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>

IOS:

To add support for Paypal Payment on IOS.

Basic insturctions from braintree:

1. Register URL Type

2. Update application delegate to setReturnUrlScheme

3. Update application delegate to pass the payment authorization URL to Braintree for finalization

For Detailed instuction follow steps here :- https://developers.braintreepayments.com/guides/paypal/client-side/ios/v4

Google Pay

To add support for Google Pay add below lines inside AndroidManifest.xml.

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

Step3: Open Pubspec.yaml file and add the dependencies.  

Step 4: Import the plugin: 

import 'package:braintree_payment/braintree_payment.dart';

Step 5: Create an object of Braintree Payment and pass the client nonce.

 String clientNonce = " GET YOUR CLIENT NONCE FROM YOUR SERVER";

BraintreePayment braintreePayment = new BraintreePayment();

var data = await braintreePayment.showDropIn(

        nonce: clientNonce, amount: "2.0", enableGooglePay: true);

Step6: Variable data will have the payment nonce. Send the payment nonce to the server for further processing of the payment:

var data = await braintreePayment.showDropIn(

        nonce: clientNonce, amount: "2.0", enableGooglePay: true);

print("Response of the payment $data");

// In case of success

//{"status":"success","message":"Payment successful. Send the payment nonce to the server for the further processing.":"paymentNonce":"jdsfhedbyq772_34dfsf"}

// In case of Failure

//{"status":"fail","message":"User canceled the payment"} 

Step 7: Test the values on Sandbox and you are ready to launch the secure payments app. 

Check the GitHub project to run the examples. 

Disclosure: Braintree Flutter integration is an open-source code available at Github developed by Deligence Technologies. Developers can use it by following the license.


Web and App development


Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md