PaymentCardDetailsSingleLineView

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:

1. Override general-purpose resource values

2. Override resource values specific to PaymentCardDetailsSingleLineView

3. Override styles specific to PaymentCardDetailsSingleLineView

4. 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 and PaymentCardCvvView. 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.