Stripe Integration in Android (React Native/Kotlin/Java) — Updated

A complete guide for integrating Stripe, mainly cards, with updated payment method in android with React Native, Kotlin and Java.

Photo by Paul Felberbauer on Unsplash

As my previous blog, this one too is the result of finding a better approach for the deprecated method, this time by Stripe.

You can directly jump to the part which you need i.e. React Native, Kotlin or Java.

Story behind -

I was working on a Java project for a client and saw “Add Card” not working. Jumped to the code and saw the Card Method was deprecated and create token was not working. Then, other day had to deal with the React Native code base and had to make the same kind of thing working. Recent one is the Kotlin app I built with add card method integrated in it. So, basically, I had to deal with all three (missed Flutter but really want try once again) and successfully learnt it and now I am here to show how to do it.

React Native example

Stripe card dialog after integrating in React Native code base

In the image beside, MM/YY and CVV shows up after filling the card number, so just to let you know, it’s there.

First and foremost add "tipsi-stripe": "^9.0.0" in the dependencies of package.json like:

"dependencies": {
   ...
   "tipsi-stripe":"^9.0.0"
}

I have faced some serious issues with the previous version of tipsi-stripe, and hence recommend to use the version mentioned above. In future this may cause some issues too, so change accordingly after a beautiful research around the internet.

Now, import and initialize stripe in a HOC or in the component you want to use it.

import stripe from 'tipsi-stripe'

Add below code in the component class/function to initialize stripe:

stripe.setOptions({
   publishableKey: 'pk_test_publishableUniqueKey'
})

Let’s look into the function, provided by stripe, that creates the dialog and takes input from the user.

const stripeCardDialog = () => {
 return stripe.paymentRequestWithCardForm()
   .then((stripeTokenInfo) => {
      console.log("[SUCCESS] Stripe Token ID: ", stripeTokenInfo.id)
   }).catch((error) => {
      console.log("[ERROR] User Cancelled the action")
   })
}

What will trigger the above stripeCardDialog function? Let’s look into the complete code of the component that I created for integration.

Kotlin example

The CVV is hidden beside MM/YY which gets visible once card number is filled and the form shrinks.

Now, to start with the Kotlin one, as always, first add the dependency in app’s gradle.

dependencies {
    ...
    
    def stripeVersion = "16.1.1"
    implementation "com.stripe:stripe-android:$stripeVersion"
}

In the same file (app’s gradle), add the stripe publishable key like below:

android {
  ...
  buildTypes.each {
   ...
   it.resValue 'string', 'stripe_pk', 'pk_test_publishableUniqueKey'
  }
}

Note: change the minSdkVersion to 21 as if kept 16 it will result in conflict while merging with the Stripe SDK added above in the dependency. And remember to sync the gradle.

Now, create a dialog (with constraint layout) in the layout named, anything you want, but here dialog_add_card.xml and add the below snippet for stripe’s Card Input Widget, this will help us to get the data filled by the user we will see later.

<com.stripe.android.view.CardInputWidget
    android:id="@+id/widget_add_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dimen_4"
    android:padding="@dimen/dimen_4"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

After it’s done, we need to go the real magic with stripe. Go to the class where you want to pop-up the dialog, and here we will first initiate stripe after the view is created by calling initStripe() and define the function inside the class as:

private var stripe: Stripe? = null
private fun initStripe() {
    val stripeKey: String = getString(R.string.stripe_pk)
    stripe = Stripe(requireContext(), stripeKey)
}

Let’s call the function that will show us the stripe dialog and then get the data from there to add the cards, or if needed send to own server.

Java example

As you know Java is not much different than Kotlin when it comes to the code. So, we will just see the class file snippets and until the creation of dialog_add_card.xml everything remains same as the Kotlin part above.

Now, coming to the class where you need to initiate stripe and call the dialog to get card details.

Declare the variable private Stripe stripe;

After the view is created, in the same way call initStripe() where initStripe() looks like:

private void initStripe() {
    String stripeKey = getString(R.string.stripepk);
    stripe = new Stripe(context, stripeKey);
}

Now, let’s look at the function(java version) that will be called when button to add card will be clicked.

Phew!! this got a bit long, but thanks for holding up. Before ending, just a few things to keep in mind.

Keep these in mind -

1. If required, you can add the customer session too.
2. Other payment methods, such as bank account can also be added, just look into the changes in Stripe Docs
3. You can provide your own custom dialog for getting the card input.
4. Stripe’s publishable key can be stored in some other file too and can be used from there, anything as you wish.

Thanks a lot for reading! Cheers!