PaymentCardDetailsForm

Convenience multi-field form for collecting card details from a user. Card fields are separated into multiple input fields, and the control has a "card" style background.

Important:

User-entered card details are intentionally restricted to reduce PCI compliance scope

Styling/Branding

This view provides full support for styling and customization, which can be accomplished in the following ways:

• Individual Style Attributes: Style specific aspects of the view individually

• Text Appearance Style Attributes: Style text using Android's TextAppearance styles

• Background Resource Attributes: Style the background using drawable resources

XML attributes can be set directly on the view or they can be defined in a style that gets applied to the view. The following examples each produce the same result:

Customizations applied directly to the view:

// NOTE: This example assumes a namespace definition of `app`. Replace
// this with your own namespace qualifier if you use something different
<com.olo.olopay.controls.PaymentCardDetailsForm
  app:cardBorderColor="@color/android:black"
  app:cardBorderWidth="2dp" />
/>

Customizations applied in a style:

// Style definition
<style name="MyCardStyle">
  <item name="cardBorderColor">@color/android:black</item>
  <item name="cardBorderWidth">2dp</item>
</style>

// Layout file
<com.olo.olopay.controls.PaymentCardDetailsForm
  style="@style/MyCardStyle" />

Individual Style Attributes

These attributes are responsible for controlling a single aspect of the view. In the case of conflicting styles between these attributes and Text Appearance Style Attributes or Background Resource Attributes these attributes take precedence.

This view supports the following attributes for styling/branding purposes:

• cardBackgroundColor     /    (See setCardBackgroundColor)

• cardBorderColor     /    (See setCardBorderColor)

• cardBorderWidth     /    (See setCardBorderWidth)

• cardBorderRadius     /    (See setCardBorderRadius)

• fieldDividerColor     /    (See setFieldDividerColor)

• fieldDividerWidth     /    (See setFieldDividerWidth)

• cardStartPadding     /    (See setCardPadding)

• cardTopPadding     /    (See setCardPadding)

• cardEndPadding     /    (See setCardPadding)

• cardBottomPadding     /    (See setCardPadding)

• verticalSpacing     /    (See setVerticalSpacing)

• errorBackgroundColor     /    (See setErrorBackgroundStyle)

• errorBorderColor     /    (See setErrorBackgroundStyle)

• errorBorderWidth     /    (See setErrorBackgroundStyle)

• errorBorderRadius     /    (See setErrorBackgroundStyle)

• errorStartPadding     /    (See setErrorPadding)

• errorTopPadding     /    (See setErrorPadding)

• errorEndPadding     /    (See setErrorPadding)

• errorBottomPadding     /    (See setErrorPadding)

• textColor     /    (See setTextColor)

• errorTextColor     /    (See setErrorTextColor)

• hintTextColor     /    (See setHintTextColor)

• focusedHintTextColor     /    (See setFocusedHintTextColor)

• cursorColor     /    (See setCursorColor)

• textSize     /    (See setTextSize)

• errorTextSize     /    (See setErrorTextSize)

• errorGravity     /    (See setErrorGravity)

• cardNumberHint     /    (See setHintText)

• expirationHint     /    (See setHintText)

• cvvHint     /    (See setHintText)

• postalCodeHint     /    (See setHintText)

• focusedCardNumberHint     /    (See setFocusedHintText)

• focusedExpirationHint     /    (See setFocusedHintText)

• focusedCvvHint     /    (See setFocusedHintText)

• focusedPostalCodeHint     /    (See setFocusedHintText)

Important:

Some customizations are only possible when using Text Appearance Style Attributes or Background Resource Attributes. Refer to those sections for more information.

Text Appearance Attributes

Unlike the text attributes specified in Individual Style Attributes above, where each attribute specifies one aspect of the text's appearance, these attributes define the entire appearance through one attribute using a text appearance style. These styles can define text color, text size, hint text color, or even have different appearances defined based on the state of the view (e.g. focused or unfocused, enabled or disabled). For a full list of available attributes, see TextAppearance.

This view supports the following text appearance resource attributes for styling/branding purposes:

• textAppearance     /    (See setTextAppearance)

• errorTextAppearance     /    (See setErrorTextAppearance)

Important

Text attributes defined directly on this view (from the Individual Style Attributes section above) will override attributes defined by the textAppearance and errorTextAppearance attributes

Background Attributes

Unlike the background attributes specified in Individual Style Attributes above, where each attribute specifies one aspect of the background, these attributes define the entire background through one resource id. For example, a single drawable resource could be used that specifies padding, border color, border radius, and a gradient background, or even have different backgrounds defined based on the state of the view (e.g. focused or unfocused, enabled or disabled).

This view supports the following background resource attributes for styling/branding purposes:

• cardBackground     /    (See setCardBackgroundResource)

• errorBackground     /    (See setErrorBackgroundResource)

Important

Background attributes from the Individual Style Attributes section above take precedence over these background attributes.