OloPaySDK/com.olo.olopay.controls/PaymentCardDetailsSingleLineView

PaymentCardDetailsSingleLineView

class PaymentCardDetailsSingleLineView @JvmOverloads constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : ConstraintLayout, CardValidCallback, CardInputListener

Convenience view for collecting card details from a user. All card fields are combined into a single-line view

Important:

_User-entered card details are intentionally restricted for PCI compliance

Styling/Branding

This class can be styled in the following ways:

Override general-purpose resource values
Override resource values specific to PaymentCardDetailsSingleLineView
Override styles specific to PaymentCardDetailsSingleLineView
Set styles programmatically

Override general-purpose resource values

Overriding general-purpose resource values is the easiest way to control the look/feel of the views in the Olo Pay SDK. Changing these values (listed below) will apply to not just PaymentCardDetailsSingleLineView, but also PaymentCardDetailsMultiLineView, and in a limited way, PaymentCardDetailsForm. To override the resources, simply define resources in your app with the same names listed below

Dimen Resources

olopay_textsize
olopay_errortext_textsize

Color Resources

olopay_hintcolor
olopay_edittext_textcolor
olopay_errortext_textcolor

Override resource values specific to PaymentCardDetailsSingleLineView

Overriding the resource values listed below provides for more flexibility, but they apply ONLY to PaymentCardDetailsSingleLineView. The default values for these resources are defined in terms of the general-purpose resources listed in the previous section. Overriding these values take precedence over values defined by the general-purpose resources.

Dimen Resources

olopay_paymentcarddetailssinglelineview_edittext_textsize
olopay_paymentcarddetailssinglelineview_errortext_textsize

Color Resources

olopay_paymentcarddetailssinglelineview_edittext_textcolor
olopay_paymentcarddetailssinglelineview_edittext_errorcolor
olopay_paymentcarddetailssinglelineview_edittext_hintcolor
olopay_paymentcarddetailssinglelineview_cardicon_tint
olopay_paymentcarddetailssinglelineview_errortext_textcolor

Override styles specific to PaymentCardDetailsSingleLineView

This is the most difficult option for customization but also allows for the most flexibility. One potential use case for overriding styles would be to change the font (though there are other means of doing that via application-wide themes, etc)

When overriding styles, note the following:

The style names MUST match what is listed below. You can choose a different parent but it should be a similar type of parent
Some resource values are not defined by the styles that can be overridden so when taking this approach you may need to override resource values as well
The styles listed below use some of the properties from above (see code below for which ones)
Overridden styles take precedence... if you override a style that is using one of the resource values from above, you will need to define it in your style
Because these are custom controls with custom behavior, not all standard Android style attributes will have an effect on the control

The styles that can be defined that will be applied to this view are listed here:

<style name="OloPay.PaymentCardDetailsSingleLineView.TextAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/olopay_paymentcarddetailssinglelineview_edittext_textcolor</item>
    <item name="android:textSize">@dimen/olopay_paymentcarddetailssinglelineview_edittext_textsize</item>
    <!-- Provide other customizations here -->
</style>

<style name="OloPay.PaymentCardDetailsSingleLineView.ErrorText">
    <item name="android:textAppearance">@style/OloPay.PaymentCardDetailsSingleLineView.ErrorText.TextAppearance</item>
    <!-- Provide other customizations here -->
</style>

<style name="OloPay.PaymentCardDetailsSingleLineView.ErrorText.TextAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/olopay_paymentcarddetailssinglelineview_errortext_textcolor</item>
    <item name="android:textSize">@dimen/olopay_paymentcarddetailssinglelineview_errortext_textsize</item>
    <!-- Provide other customizations here -->
</style>

Set styles programmatically

A number of methods exist that allow you to style PaymentCardDetailsSingleLineView. Methods exist for changing the background style (color, border, radius, etc), the text colors, error text colors, hint text colors, font, and font size.

Constructors

PaymentCardDetailsSingleLineView

@JvmOverloads

fun PaymentCardDetailsSingleLineView(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)

Creates a new instance of PaymentCardDetailsSingleLineView

Types

Companion

object Companion

Properties

cardBrand

val cardBrand: CardBrand

The detected card brand based on the currently entered card number

cardInputListener

var cardInputListener: CardInputListener? = null

Set this to receive callbacks about card input events for this control

displayErrors

var displayErrors: Boolean

Whether or not to display built-in error messages

fieldStates

val fieldStates: Map<CardField, ICardFieldState>

Provides a snapshot of the current state of each card field

isValid

val isValid: Boolean

true if all fields are complete and valid, otherwise false

paymentMethodParams

val paymentMethodParams: IPaymentMethodParams?

Get an IPaymentMethodParams instance that can be used to create an IPaymentMethod instance. If the form is not valid this will return null.

postalCodeEnabled

var postalCodeEnabled: Boolean

Whether or not the postal code is enabled. It is enabled by default. Disabling the postal code field is discouraged because it could impact authorization success rates.

Functions

clearFields

fun clearFields()

Clears all text fields in the control

dismissKeyboard

fun dismissKeyboard()

Dismisses the keyboard, if visible, and removes focus from input fields in this control

getErrorMessage

fun getErrorMessage(ignoreUneditedFieldErrors: Boolean): String

Get the error message that would be displayed if displayErrors is true and isValid is false. Note that isValid having a value of false does not necessarily mean there will be an error message (see ignoreUneditedFieldErrors param)

hasErrorMessage

fun hasErrorMessage(ignoreUneditedFieldErrors: Boolean = true): Boolean

Check if there is an error message to be displayed.

isEnabled

open override fun isEnabled(): Boolean

True if the form is enabled and can accept user input, false otherwise

requestFocus

fun requestFocus(field: CardField, showKeyboard: Boolean)

Moves focus to the specified input field

setCardBackgroundStyle

fun setCardBackgroundStyle(backgroundColor: Int? = null, borderColor: Int? = null, borderWidthPx: Float? = null, borderRadiusPx: Float? = null)

Sets background styles for this view. If all parameters are null, this method has no effect.

@RequiresApi(value = 27)

fun setCardBackgroundStyle(backgroundColorHex: String? = null, borderColorHex: String? = null, borderWidthPx: Float? = null, borderRadiusPx: Float? = null)

Sets background styles for this view. If all parameters are null, this method has no effect. IMPORTANT: This method requires API level 27 or higher

setCardNumber

fun setCardNumber(number: String?)

Sets the card number. Does not change field focus

setCardPadding