Skip to content

🎉A Jetpack-Compose library providing useful credit card utilities

Notifications You must be signed in to change notification settings

SteliosPapamichail/CreditCardHelper

Folders and files

NameName
Last commit message
Last commit date
May 31, 2022
Jun 5, 2023
Jun 7, 2023
Jun 5, 2022
Jun 5, 2023
May 14, 2022
Jun 5, 2023
Jun 5, 2023
May 31, 2022
May 31, 2022
May 14, 2022
May 14, 2022

Repository files navigation

CreditCardHelper🖊️

A Jetpack-Compose library providing useful credit card utilities such as card type recognition and TextField ViewTransformations!

Lines of Code Code Smells Maintainability Rating Security Rating

What's included?📜

  • 🗂️Automatic card type recognition that supports the following cards:

    • Visa
    • Mastercard
    • Maestro
    • American Express
    • Dinners Club
    • JCB
    • Discover
  • 🤩Simple VisualTransformation subclasses for the following use-cases:

    • Card expiration date
    • Card number (with custom separators, digit masking for the first twelve digits & more)

Adding the library to your project✨

Add the following to your root build.gradle file:

allprojects {
	repositories {
		maven { url 'https://jitpack.io' }
	}
}

Next, add the dependency below to your module's build.gradle file:

dependencies {
  implementation 'com.github.SteliosPapamichail:CreditCardHelper:v1.0.0'
}

Usage📓

Masks🎭

You can use the ExpirationDateMask or CardNumberMask VisualTransformations, by simply passing the respective composable to the visualTransfomration field of your TextField. For example:

@Composable
fun Expiration() {
    var expiration by remember { mutableStateOf("") }
    OutlinedTextField(
        value = expiration,
        visualTransformation = ExpirationDateMask(),
        onValueChange = {
            if (it.length <= 4) expiration = it
        }, label = { Text("Expiration") }
    )
}

The above code will produce something like the following:

Expiration date example image

The CardNumberMask transform will use the " " blank separator by default. If you would like to use a custom one, you can simply pass it as a parameter to the composable like so:

@Composable
fun CardNumber() {
    var number by remember { mutableStateOf("") }
    OutlinedTextField(
        value = number,
        visualTransformation = CardNumberMask("-"),
        onValueChange = {
            if (it.length <= 16) number = it
        }, label = { Text("Card number") }
    )
}

This will produce the following:

Card number example image

Card Types🤖

You can use the provided getCardTypeFromNumber(number: String) function which accepts a string containing the input card number, and returning one of the recognized types or UKNOWN if no match was found. You can use it for building out Topup/Payment forms, card-selection or card-creation forms, and much more. Here's an example from the sample project:

Card recognition example image