Braintree Integration in Android - Kotlin

-
Let’s learn how to integrate Braintree in Android app with Kotlin. Braintree is a subsidary of PayPal. It focuses in helping businesses of all size and to help maximize business growth. Braintree accepts the following payments:

* Credit Cards
                            * Venmo
                            * Android Pay
                            * Apple Pay
                            * PayPal

Operation Flow:

1. App have to request token from the server. 2. Server have to generate a token using Braintree’s SDK and send that to the requested App. 3. With that Token, app should allow user to pay, which will be validated by Braintree’s server and
then the payment nonce will be received. 4. That received payment nonce and paid amount will be sent to our own server. There the payment will be checked whether its successful or not and the response will be sent to the app.

Create Braintree Sandbox Account:

(a) Go to https://www.braintreepayments.com/sandbox and signup with your details and proceed with login once setup.








(b) After login, you will get Merchant ID, Public Key and Private Key. You can make a note of it to use those credentials.(For Server)


To enable PayPal as payment option:

(a) Navigate to Account → My User

(b) Then click on Enable button below Login with PayPal.

(c) You will be prompted  to enter and login the PayPal account, you would like to be linked. Once done, It will be integrated to use with BrainTree.


Code

Let’s start with gradle. Beware that, BrainTree requires minSdkVersion as 16.

build.gradle
apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
   compileSdkVersion 26
   defaultConfig {
       applicationId "com.developer.braintreepay"
       minSdkVersion 16
       targetSdkVersion 26
       versionCode 1
       versionName "1.0"
       testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
   }
   buildTypes {
       release {
           minifyEnabled false
           proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
       }
   }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
   implementation 'com.android.support:appcompat-v7:26.0.0'
   implementation 'com.android.support.constraint:constraint-layout:1.0.2'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.1'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
   compile 'com.braintreepayments.api:drop-in:3.1.0'
   compile 'com.loopj.android:android-async-http:1.4.9'
}

AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.developer.braintreepay">

   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:supportsRtl="true"
       android:theme="@style/AppTheme">
       <activity android:name=".MainActivity">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
<!-- This is required for PayPal, since the page will be opened in Brower -->
       <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>

   </application>

</manifest>

activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.developer.braintreepay.MainActivity">
   <TextView
       android:id="@+id/price"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Price : $10"
       android:padding="10dp"
       android:textAppearance="@android:style/TextAppearance.Medium"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
   <TextView
       android:id="@+id/pay"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Pay Now"
       android:background="@color/colorPrimary"
       android:padding="15dp"
       android:gravity="center"
       android:textColor="@color/white"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

MainActivity.kt:

First, the api should be called to get the client token from Server. After that, the payment can be done either by using PayPal or credit/debit cards. Paypal payment will be redirected to browser.


Also note that,  
public override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?)


here the parameter,  data: Intent should be declared with '?'. Otherwise, it will throw exception 'Parameter specified as non-null is null for data in onActivityResult'.
class MainActivity : AppCompatActivity() {

   val API_URL = "YOUR_API_URL" // Replace your url here
   val REQUEST_CODE = 101
   var token = ""
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       getTokenFromServer()
       pay.setOnClickListener {
           if (!token.isEmpty())
               payNow()
       }
   }
   private fun getTokenFromServer() {
       val androidClient = AsyncHttpClient()
       androidClient.get(API_URL, object : TextHttpResponseHandler() {
           override fun onFailure(statusCode: Int, headers: Array<Header>, responseString: String, throwable: Throwable) {
               Log.v("Failure!", responseString)
           }
           override fun onSuccess(statusCode: Int, headers: Array<Header>, responseToken: String) {
               Log.d("Success!!", "Client Token== " + responseToken)
               token = responseToken
           }
       })
   }
   private fun payNow() {
       val dropInRequest = DropInRequest().clientToken(token)
               .amount("$10.00") // Here you can pass Amount to be paid.
       startActivityForResult(dropInRequest.getIntent(this), REQUEST_CODE)
   }
   public override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
       super.onActivityResult(requestCode, resultCode, data)
       Log.v("resultCode","resultCode=="+resultCode);
       if (requestCode == REQUEST_CODE) {
           when (resultCode) {
               Activity.RESULT_OK -> {
                   val result = data!!.getParcelableExtra<DropInResult>(DropInResult. EXTRA_DROP_IN_RESULT)
                   val paymentMethodNonce = result.paymentMethodNonce!!.nonce
                   Log.v("PayNonce", "PayNonce==" + paymentMethodNonce)
                   Toast.makeText(this@MainActivity,"Payment Success!", LENGTH_SHORT). show()
                   // Send paymentMethodNonce to your server here..
               }
               Activity.RESULT_CANCELED -> Log.v("Cancelled", "Cancelled!!")
               else -> {
                   Log.v("Error", "Error!! ")

                   val error = data!!.getSerializableExtra(DropInActivity.EXTRA_ERROR) as Exception
               }
           }
       }
   }
}

Sample Inputs:

You can use the sample data for testing. 
  • Token : "eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJjMDhiZmQzOGFlYmZkYTcyYjY4MWY0NWFhNTNkZjMyMGQ0Nzg4Zjk0OGUxNTdlNGJlZDY2YjZjNzE4NWJlZWYzfGNyZWF0ZWRfYXQ9MjAxNy0xMi0yMFQxMzowMjozNy4yNjIxODM5MzcrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzLzM0OHBrOWNnZjNiZ3l3MmIvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vY2xpZW50LWFuYWx5dGljcy5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0="

  • Card: 4111 1111 1111 1111

Run Application:


Comments

  1. VishJune 07, 2019 2:43 am

    What is this API _ URL here

    ReplyDelete
    Replies
    1. AnonymousJune 11, 2019 9:31 pm

      That's our server url, where we configured the braintree to generate Access Token.

      Delete
  2. PrincezarOctober 21, 2019 6:23 pm

    Hi, I tried your tutorial their is no error in the project but nothing happened in the logcat I found that the token has pitched but still not working. pls do help

    ReplyDelete
  3. TristateApril 04, 2020 4:32 am

    Hi, Can't Able to add Google Pay option.
    Also enable in braintree. Still getting only two option
    1) Paypal
    2) Credit or Debit Card
    I want Google Pay also in my app,

    val googlePaymentRequest = GooglePaymentRequest()
    .transactionInfo(
    TransactionInfo.newBuilder()
    .setTotalPrice("1.00")
    .setTotalPriceStatus(WalletConstants.TOTAL_PRICE_STATUS_FINAL)
    .setCurrencyCode("USD")
    .build()
    )
    .billingAddressRequired(true)

    val dropInRequest = DropInRequest().clientToken(getString(R.string.paypal_token))
    .googlePaymentRequest(googlePaymentRequest)

    ReplyDelete
  4. UnknownJuly 29, 2021 4:55 am

    working fine in Card payment
    but the paypal option is not working

    ReplyDelete

Post a Comment

Popular posts from this blog

SOAP Client using ksoap2 in Android - Kotlin

-
Image
Introduction: SOAP stands for Simple Object Access Protocol. It is XML-based protocol that allows programs that run on different operating systems (like Windows, Linux, etc) to communicate using HTTP and XML. Pros: Security - SOAP provides its own security known as WS Security . Platform Independent - SOAP web services can be written in any programming language and executed in any platform Cons: Slow - It uses XML format that must be parsed, to be read. It defines many standards to be followed while developing. So its slow and consumes more bandwidth and resource. WSDL dependent - It uses WSDL mechanism and doesn't have any other mechanism to discover the service. Things to know: The following are the things we have to know before we proceed further:                     URL - It is the URL of WSDL file.                     NAMESPACE - It is targetNamespace in WSDL.                                         METHOD_NAME - It is the met
Read more

Using Camera in Android - Kotlin

-
Image
Nowadays, most of our Android app require access to Camera to capture picture or Video. We can do that in two ways.                                 (i) Using built-in Camera,                                 (ii) Using custom Camera. Using Built-in Camera In this post, Let's see how to use the built-in camera to capture images and save it. Its a simple way to capture pics. We can use the mobile's built-in camera app using Intent.  val REQUEST_IMAGE_CAPTURE = 1 private fun takePictureIntent() { val takePictureIntent = Intent(MediaStore . ACTION_IMAGE_CAPTURE) if (takePictureIntent . resolveActivity(packageManager) != null) { startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE) } } After the picture has been captured, the result will received on onActivityResult method. There, we can get the data, in Bitmap form. override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
Read more

Stripe Integration in Android - Kotlin

-
Image
Stripe is one of the simplest payment gateway to be used. It enables us to process payments in minutes. Let's see how to integrate Stripe in Android using Kotlin. Operational Flow:             1. App should provide order details to Stripe server and the order total will be returned to App.             2. Then the user will enter the payment/card details. That will be sent to Stripe server and the result of the request will be sent back to the App. Create Stripe Account: (a) Go to  https://dashboard.stripe.com/register and enter all your details and create account.   (b) Click API in side tab. Make sure that the Account is in Test mode. And make a note of          Publishable Key and Secret Key for use. Code: build.gradle:   compile 'com.stripe:stripe-android:5.1.0' Layout files: main_layout.xml: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:an
Read more

Shimmer Layout like Facebook in Android - Kotlin

-
Image
While loading data from API, we used to show boring loaders. But in Facebook's app, one loading screen will be displayed. That one looks interesting know. We can also do that shimmer effect in our Andorid App using Shimmer library by Facebook. Let's start. Implementation: build.gradle Include the following in app-level gradle file. implementation 'com.facebook.shimmer:shimmer:0.1.0' colors.xml Include the following color in values -> colors.xml <color name= "placeholder_color" > #dddddd </color> Design: 1. First we have to design placeholder layout that is similar to your RecyclerView's adapter layout. placeholder.xml <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com/apk/res-auto" android:layout_width
Read more

Room with LiveData, ViewModel - Android Architecture Components - Kotlin

-
Image
Introduction: We have already learnt about Room in last post,  Room-Kotlin . In this post, lets learn about how to use ViewModel and LiveData with Room to improve usablity. Using LiveData with Room, allows views to be notified about data changes automatically. LiveData: LiveData is nothing but observable data holder class. It allows us to observer changes in data across multiple components of app. It is also aware of and respects lifecycle of Activities/Fragments. It also ensures that LiveData only updates app component observers that are in an active lifecycle state. The following image depicts the Lifecycle and States: Here, CREATED, STARTED, RESUMED - Active States           INTIALIZED, DESTROYED - InActive States So, LiveData will remove the updates automatically while in InActive States, i.e., INTIALIZED and DESTROYED. ViewModel: ViewModel is an entity that is free of Activity/Fragment's lifecycle. So it allows us to store and manage UI-r
Read more

Exploring Databinding Library in Android - Kotlin

-
Image
Introduction: Data binding library is a support library, which allows us to bind data sources directly to UI components of layout file. Binding components this way, reduces boilerplate code in our business logic where we usually update UI when new data is available. It also improves app's performance and helps to prevent memory leak and NullPointerException. textView.text = user.name can be written simply in layout as follows, and no need to write in Activity class.                                                             <TextView                                                                   ...                                                                   android:text="@{user.name}" /> You can find the project in Github . Prerequisite: build.gradle First, we have enable dataBinding in app-level build.gradle                            android {                                     dataBinding {             
Read more

Exploring Android Slices - JetPack

-
Image
Introduction: Slices are a new way of embedding our app's content in other surfaces, like Google Search and later in other places like Google Assistant. Slices are UI templates, which gives look and feel at home in whatever surface, they get hosts in. Also they are rich, interactive and dynamically updatable. Before jumping into that, first migrate your project to AndroidX, (Android Studio 3.2 & above), by navigating as,                                         Refactor --> Migrate  to AndroidX  Setup: build.gradle implementation 'androidx.slice:slice-core:1.0.0' implementation 'androidx.slice:slice-builders-ktx:1.0.0-alpha6' implementation 'androidx.slice:slice-builders:1.0.0' Creating Slice Provider: Slice Provider is a component that let us display the slices we are creating, on outside our application. We can create the Slice Provider by navigating,                                       File -> New ->
Read more

AppIntro (OnBoard) Screen - Kotlin

-
Image
Introduction: App Intro/Onboard screen is mainly to display the key features of our app to users while launching it, in a sweet way. Let's do that simply with TabLayout, ViewPager and its PageTransformer.  Design: slide_page.xml  Desgin this layout with ViewPager and TabLayout to begin with. <?xml version= "1.0" encoding= "utf-8"? > <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com/apk/res-auto" android: id = "@+id/introLayout" android:layout_width= "match_parent" android:layout_height= "match_parent" > <android.support.v4.view.ViewPager android: id = "@+id/viewPager" android:layout_width= "match_parent" android:layout_height= "match_parent" android:layout_above= "@+id/tabLayout" /> <android.support.
Read more

Exploring Android Navigation Architecture Component - MVVM - Kotlin

-
Image
Navigation Architecture Component is released as a part of JetPack and androidx package. Its aim is to simplify the implementation of Navigation in our Android App. It defines a set of principles to build an in-app navigation with consistent and predictable user experience. Its main concept is to use single-activity architecture. It also has support for both Activity and Fragment. Principle of Navigation: The following are the principles of Navigation. App should have fixed starting destination A stack is used to represent the navigation state of app The 'Up' button never exits the app Up and Back are equivalent within your app's task Deep linking to a destination or navigating to the same destination should yield the same stack You can find the detailed explanation, here . Components of Navigation: (i) Navigation Graph - It's nothing but a map/blueprint of our in-app navigation. It has a list of all fragments and activities. We can also
Read more

RecyclerView with different number of columns using SpanSizeLookup

-
Image
We already know how to design RecyclerView. But how to create RecyclerView with different columns depending on its row? Like below image? Yeah, we can do that, by using two different layouts with different viewType on Adapter. Another way is do some logic to do so. But, it's cumbersome. Luckily, we have another simple way to do that using SpanSizeLookUp . Let's see how to implement that in this post. Implementation: build.gradle Include the following in app-level gradle file. implementation 'com.android.support:recyclerview-v7:27.0.2' implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5' recycler.xml <?xml version= "1.0" encoding= "utf-8" ?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "match_parent" xmlns:ap
Read more