Android Element Types

TextElement

The TextElement can be used to collect any text data within your mobile application. This component allows you to fully customize the look and feel to match your brand, and it does not allow direct access the underlying plaintext values entered by a user, keeping your mobile application out of compliance scope.

Basic Usage

To use the TextElement within your Android application, simply include the view within one of your Android application’s layouts.

<com.basistheory.android.view.TextElement
    android:id="@+id/name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Properties can be programmatically initialized within your views within either the onCreate or onCreateView lifecycle methods.

Configuration

The TextElement extends the native FrameLayout view, so all standard properties and attributes supported by FrameLayout are supported by TextElement.

Properties

The following additional properties are supported when programmatically interacting with a TextElement:

Name	Type	Description
hint	`String`	Placeholder text to display within the element when empty.
isComplete	`Boolean`	Whether this element satisfies the mask and validator, i.e. it is ready to be tokenized.
isEditable	`Boolean`	Whether this element is editable or readonly.
isEmpty	`Boolean`	Whether this element is empty.
isMaskSatisfied	`Boolean`	Whether this element satisfies the length and format requirements of the mask, if defined. Defaults to `true` if this element does not have a mask.
isValid	`Boolean`	The result of this element's validator, if defined. Defaults to `true` if this element does not have a validator.
keyboardType	`KeyboardType`	The type of keyboard to display when editing. Supported values are `KeyboardType.TEXT` and `KeyboardType.NUMBER`.
mask	`ElementMask`	Restricts and formats input entered into this Element. See the Mask options for details.
removeDefaultStyles	`Boolean`	Removes the default Android styling on the underlying EditText. Defaults to `true`.
textColor	`Int`	A color value in the form `0xAARRGGBB`. Do not pass a resource ID. To get a color value from a resource ID, call getColor.
textSize	`Float`	The font size, in pixels.
transform	`ElementTransform`	Transforms the value of this Element prior to tokenization. See the Transform options for details.
validator	`ElementValidator`	Validates the value of this Element. See the Validator options for details.

Methods

Signature	Description
`addBlurEventListener(listener: (BlurEvent) -> Unit)`	Adds a listener for any BlurEvents raised by this element.
`addChangeEventListener(listener: (ChangeEvent) -> Unit)`	Adds a listener for any ChangeEvents raised by this element.
`addFocusEventListener(listener: (FocusEvent) -> Unit)`	Adds a listener for any FocusEvents raised by this element.
`setText(value: String?)`	Sets the text value for the element. Note that a getter is not exposed on the TextElement to retrieve the underlying text value.
`setValueRef(element: TextElement)`	Binds the provided `element: TextElement` instance as a value source for this element, keeping the value of this element in sync with any changes made to the other element.

When using setValueRef to keep a TextElement in sync with another element, it is strongly recommended that you make the dependent element readonly by also setting isEditable=false.

XML Attributes

The following additional XML attributes are also supported when defining a TextElement in a layout XML file:

Name	Type	Description
editable	`boolean`	Whether this element is editable or readonly.
hint	`String`	Placeholder text to display within the Element.
keyboardType	`enum`	The type of keyboard to display when editing. Supported values are `text` and `number`.
mask	`string`	A string defining the mask applied to this Element, e.g. (`###-##-####`).
removeDefaultStyles	`boolean`	Removes the default Android styling on the underlying EditText. Defaults to `true`.
text	`string`	Sets the text value for the element. Note that a getter is not exposed on the TextElement to retrieve the underlying text value.
textColor	`reference`\|`color`	The text color. May be a reference to another resource, in the form `"@[+][package:]type/name"` or a theme attribute in the form `"?[package:]type/name"`. May be a color value, in the form of `"#rgb"`, `"#argb"`, `"#rrggbb"`, or `"#aarrggbb"`
textSize	`dimension`	The size of text.

CardNumberElement

The CardNumberElement can be used to securely collect credit card numbers within your application. This element will render a text input within your view to accept a card number entered by your end users.

This element was designed to be used in conjunction with the CardExpirationDateElement and CardVerificationCodeElement to collect and tokenize a card token.

Basic Usage

To use the CardNumberElement within your Android application, simply include the view within one of your Android application’s layouts.

<com.basistheory.android.view.CardNumberElement
    android:id="@+id/card_number"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

This element can be referenced directly when tokenizing through the BasisTheoryElements service class:

val cardNumberElement = findViewById<CardNumberElement>(R.id.card_number)
...

val tokenizeResponse = bt.tokenize(object {
    val type = "card"
    val data = object {
        val number = cardNumberElement
        val expiration_month = cardExpirationDateElement.month()
        val expiration_year = cardExpirationDateElement.year()
        val cvc = cardVerificationCodeElement
    }
})

The element serves as a reference that can only be resolved back to the original value by the BasisTheoryElements service when tokenizing. Your application is not given direct access to the underlying plaintext value.

Configuration

The CardNumberElement extends the TextElement view, so all properties and attributes supported by TextElement are also supported here.

By default, this element is configured with:

The keyboard is configured to only allow numeric input
A mask is applied to format input values according to the card brand
The LuhnValidator is applied to restrict input to Luhn-valid cards

This component fully supports the same style customizations to match your branding that are supported on the base TextElement.

Card Brands

The first several digits of the card number are analyzed as the user is typing to determine the card brand. The brand is used to automatically set a mask to a brand-specific format. If the CardNumberElement is bound to a CardVerificationCodeElement, a mask is also automatically set on the CardVerificationCodeElement based on the brand's CVC length requirements.

Supported card brands are defined in the table below:

Brand	Identifier	Card Number Digits	CVC Digits
American Express	`american-express`	15	4
Diners Club	`diners-club`	14, 16, 19	3
Discover	`discover`	16, 19	3
Elo	`elo`	16	3
Hiper	`hiper`	16	3
HiperCard	`hipercard`	16	3
JCB	`jcb`	16-19	3
Maestro	`maestro`	12-19	3
Mastercard	`mastercard`	16	3
MIR	`mir`	16-19	3
UnionPay	`unionpay`	14-19	3
Visa	`visa`	16, 18, 19	3

Some card brands have issued card numbers with multiple lengths. The Card Number Digits column documents all acceptable card number lengths for the brand (in number of digits, excluding formatting characters).

CardMetadata

The brand details and other card metadata are made available to your application within the cardMetadata property on the CardNumberElement:

Name	Type	Description
cardMetadata	`CardMetadata`	Gets metadata about the card, derived from user input.

The CardMetadata object contains the properties:

Name	Type	Description
brand	`String`	The card brand identifier
bin	`String`	The first 6 digits of the card number if complete, otherwise null
last4	`String`	The last 4 digits of the card number if complete, otherwise null

ChangeEvent Details

The CardNumberElement emits ChangeEvents that may contain several types of EventDetail records.

cardBrand: Contains the card brand identifier. Only included once enough digits are entered to determine a card brand.
cardBin: Contains the first 6 digits of the card number. Only included for complete card numbers satisfying the brand-specific mask.
cardLast4: Contains the last 4 digits of the card number. Only included for complete card numbers satisfying the brand-specific mask.

CardExpirationDateElement

The CardExpirationDateElement can be used to securely collect credit card expiration dates within your application. This element will render a text input within your view that accepts input in the form MM/yy.

This element was designed to be used in conjunction with the CardNumberElement and CardVerificationCodeElement to collect and tokenize a card token.

Basic Usage

To use the CardExpirationDateElement within your Android application, simply include the view within one of your Android application’s layouts.

<com.basistheory.android.view.CardExpirationDateElement
    android:id="@+id/expiration_date"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

The month and year values can be referenced separately when tokenizing through the BasisTheoryElements service class:

val tokenizeResponse = bt.tokenize(object {
    val type = "card"
    val data = object {
        val number = cardNumberElement
        val expiration_month = cardExpirationDateElement.month()
        val expiration_year = cardExpirationDateElement.year()
        val cvc = cardVerificationCodeElement
    }
})

The month() and year() functions expose a reference object that can only be resolved back to the original values by the BasisTheoryElements service when tokenizing. These methods do not provide your application with direct access to the underlying plaintext values.

Configuration

The CardExpirationDateElement extends the TextElement view, so all properties and attributes supported by TextElement are also supported here.

By default, this element is configured with:

The keyboard is configured to only allow numeric input
A mask is applied to format input values as MM/yy
The FutureDateValidator is applied to restrict input to future dates

This component fully supports the same style customizations to match your branding that are supported on the base TextElement.

CardVerificationCodeElement

The CardVerificationCodeElement can be used to securely collect credit card CVC values within your application. This element will render a text input within your view that accepts either a 3 or 4 digit CVC (the length is determined by the card brand).

This element was designed to be used in conjunction with the CardNumberElement and CardExpirationDateElement to collect and tokenize a card token.

Basic Usage

To use the CardVerificationCodeElement within your Android application, simply include the view within one of your Android application’s layouts.

<com.basistheory.android.view.CardVerificationCodeElement
    android:id="@+id/cvc"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

You can optionally bind a CardNumberElement to your CardVerificationCodeElement to automatically enforce the CVC length validation corresponding to the entered card brand.

val cardNumberElement = findViewById<CardNumberElement>(R.id.card_number)
val cvcElement = findViewById<CardVerificationCodeElement>(R.id.cvc)
cvcElement.cardNumberElement = cardNumberElement // optional binding between these two elements

This element can be referenced directly when tokenizing through the BasisTheoryElements service class:

val tokenizeResponse = bt.tokenize(object {
    val type = "card"
    val data = object {
        val number = cardNumberElement
        val expiration_month = cardExpirationDateElement.month()
        val expiration_year = cardExpirationDateElement.year()
        val cvc = cardVerificationCodeElement
    }
})

Configuration

The CardVerificationCodeElement extends the TextElement view, so all properties and attributes supported by TextElement are also supported here.

By default, this element is configured with:

The keyboard is configured to only allow numeric input
A 3 digit mask is applied by default, but this may be automatically changed to a 4 digit mask based on the card brand

This component fully supports the same style customizations to match your branding that are supported on the base TextElement.

Android Element Types

TextElement​

Basic Usage​

Configuration​

Properties​

Methods​

XML Attributes​

CardNumberElement​

Basic Usage​

Configuration​

Card Brands​

CardMetadata​

ChangeEvent Details​

CardExpirationDateElement​

Basic Usage​

Configuration​

CardVerificationCodeElement​

Basic Usage​

Configuration​

TextElement

Basic Usage

Configuration

Properties

Methods

XML Attributes

CardNumberElement

Basic Usage

Configuration

Card Brands

CardMetadata

ChangeEvent Details

CardExpirationDateElement

Basic Usage

Configuration

CardVerificationCodeElement

Basic Usage

Configuration