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