Integrating Braintree for Flutter

Integrating Braintree for Flutter

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.

Last updated:12/6/2019 3:31:16 AM
Apeksha Khanna

Apeksha Khanna

Web and App development

0 Comments

Leave Comment