CreditCardHelper
🖊️
A Jetpack-Compose library providing useful credit card utilities such as card type recognition and TextField ViewTransformations!
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)
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:
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 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:
24 Dec 1, 2022
193 Dec 19, 2022
283 Nov 11, 2022
134 Nov 25, 2022
6 Sep 8, 2022
12 Aug 26, 2022
348 Oct 10, 2022
57 Dec 8, 2022
700 Dec 29, 2022
112 Nov 14, 2022
98 Nov 16, 2022
4 Nov 29, 2022
1.4k Dec 29, 2022
1.1k Nov 30, 2022
2 Nov 11, 2022
603 Jan 1, 2023
386 Nov 21, 2022
1 Jun 8, 2022