If you are selling any product or providing any service in your android application, then you should have integrated a feature in your android application where you can allow users to make payments through your application. In this article, we will take a look at the implementation of payment gateway integration in Android.
In this article, we will be using the Easy UPI Payment gateway library for adding this feature to our android application using Jetpack Compose.
Steps to Implement UPI Payment Integration
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. While choosing the template, select Empty Compose Activity. If you do not find this template, try upgrading the Android Studio to the latest version.
Step 2: Adding dependency in build.gradle.kts file
Navigate to app > Gradle Scripts > build.gradle.kts file and add the below dependency in the dependencies section.
dependencies {
...
implementation ("dev.shreyaspatil.EasyUpiPayment:EasyUpiPayment:3.0.3")
}
After adding this dependency simply sync your project to install it.
Step 3: Adding Internet Permissions in AndroidManifest.xml file
Navigate to app > AndroidManifest.xml and add the below code to it.
<uses-permission android:name="android.permission.INTERNET" />Step 4: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
package com.geeksforgeeks.demo
import android.app.Activity
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.*
import com.geeksforgeeks.demo.ui.theme.DemoTheme
import dev.shreyaspatil.easyupipayment.EasyUpiPayment
import dev.shreyaspatil.easyupipayment.listener.PaymentStatusListener
import dev.shreyaspatil.easyupipayment.model.*
import java.text.SimpleDateFormat
import java.util.*
class MainActivity : ComponentActivity(), PaymentStatusListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
DemoTheme(dynamicColor = false, darkTheme = false) {
Surface(color = Color.White) {
UpiPayments(this)
}
}
}
}
override fun onTransactionCancelled() {
Toast.makeText(this, "Transaction cancelled by user..", Toast.LENGTH_SHORT).show()
}
override fun onTransactionCompleted(transactionDetails: TransactionDetails) {
Toast.makeText(this, "Transaction completed by user..", Toast.LENGTH_SHORT).show()
}
}
@Composable
fun UpiPayments(mainActivity: MainActivity) {
val context = LocalContext.current
val activity = (context as? Activity)
val amount = remember {
mutableStateOf(TextFieldValue())
}
val upiId = remember {
mutableStateOf(TextFieldValue())
}
val name = remember {
mutableStateOf(TextFieldValue())
}
val description = remember {
mutableStateOf(TextFieldValue())
}
Column(
modifier = Modifier
.fillMaxSize()
.fillMaxHeight()
.fillMaxWidth(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
// Email
TextField(
value = amount.value,
onValueChange = { amount.value = it },
placeholder = { Text(text = "Enter amount to be paid") },
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
singleLine = true,
)
Spacer(modifier = Modifier.height(5.dp))
// Upi id
TextField(
value = upiId.value,
onValueChange = { upiId.value = it },
placeholder = { Text(text = "Enter UPI Id") },
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
singleLine = true,
)
Spacer(modifier = Modifier.height(5.dp))
// Name
TextField(
value = name.value,
onValueChange = { name.value = it },
placeholder = { Text(text = "Enter name") },
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
singleLine = true,
)
Spacer(modifier = Modifier.height(5.dp))
// Description
TextField(
value = description.value,
onValueChange = { description.value = it },
placeholder = { Text(text = "Enter Description") },
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
singleLine = true,
)
Spacer(modifier = Modifier.height(10.dp))
Button(
onClick = {
// fetch current date and set as transaction id
val calendar: Date = Calendar.getInstance().time
val dateFormat = SimpleDateFormat("ddMMyyyyHHmmss", Locale.getDefault())
val transactionId: String = dateFormat.format(calendar)
// initializing payment
makePayment(
amount.value.text,
upiId.value.text,
name.value.text,
description.value.text,
transactionId,
context,
activity!!,
mainActivity
)
}
) {
Text(text = "Make Payment", modifier = Modifier.padding(8.dp))
}
}
}
// function to make payment
private fun makePayment(
amount: String,
upi: String,
name: String,
desc: String,
transactionId: String, ctx: Context, activity: Activity, mainActivity: PaymentStatusListener
) {
try {
// START PAYMENT INITIALIZATION
val easyUpiPayment = EasyUpiPayment(activity) {
this.paymentApp = PaymentApp.ALL
this.payeeVpa = upi
this.payeeName = name
this.transactionId = transactionId
this.transactionRefId = transactionId
this.payeeMerchantCode = transactionId
this.description = desc
this.amount = amount
}
// END INITIALIZATION
// Register Listener for Events
easyUpiPayment.setPaymentStatusListener(mainActivity)
// Start payment / transaction
easyUpiPayment.startPayment()
} catch (e: Exception) {
e.printStackTrace()
Toast.makeText(ctx, e.message, Toast.LENGTH_SHORT).show()
}
}