Customize the Payment Entry Form

Link to section

Payment form UI elements

You can customize the payment form UI by overriding the sqip.Theme.CardEntry theme resource. The style attributes that you can set are called out in the following image:

A graphic showing the customizable Android UI elements for the In-App Payments SDK card entry form.

The SDK honors customization of system style attributes and provides three custom style attributes. The following table shows the most useful style attributes:

Style attributeStyled UI element
colorPrimaryDarkThe color of the status bar.
colorPrimaryThe color of the action bar.
windowBackgroundThe background of the payment form.
fontFamilyThe font family applied to all text in the payment form.
textColorHintThe color of the hint text of the card entry input.
colorAccentThe color of the elements with input focus, active button text, loading indicator, and text cursor.
Custom: sqipErrorColorThe color of invalid text input.
Custom: sqipSaveButtonTextThe text of the button that the customer chooses to submit card information.
Custom: sqipActivityTitleThe title of the payment form displayed on the action bar.
Link to section

1. Customize text colors

In your themes.xml file:

  1. Create a style with name="sqip.Theme.CardEntry" and parent="sqip.Theme.BaseCardEntry". Setting the parent attribute of this style to sqip.Theme.BaseCardEntry causes the custom CardEntry theme to inherit the default style of the In-App Payments SDK.

    <style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntry"> </style>
  2. To change the text of the save button, add an item with name="sqipSaveButtonText" and a string resource value.

    <style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntry"> ... <item name="sqipSaveButtonText">@string/pay_button</item> </style>
  3. Add the item with name="colorAccent" and the value set to your desired accent color.

    <style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntry"> ... <item name="sqipSaveButtonText">@string/pay_button</item> <item name="colorAccent">@color/red</item> </style>
Link to section

2. Customize the save button and card information form

Change the appearance of the save button and the card information form to match the styles in the application's theme. This overrides the style for these elements, giving the application full control over their appearance.

  1. Add an item with name="editTextStyle" and the value set to your desired style.

    <style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntryAppTheme"> <item name="editTextStyle">@style/CustomEditText</item> </style> <style name="CustomEditText" parent="@style/Widget.AppCompat.EditText"> <item name="android:textColor">@color/blue</item> </style>
  2. Add an item with name="buttonStyle" and the value set to your desired style.

    <style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntryAppTheme"> <item name="buttonStyle">@style/CustomButton</item> </style> <style name="CustomButton" parent="Widget.AppCompat.Button.Colored"> <item name="android:textAllCaps">false</item> <item name="android:textSize">18sp</item> </style>
Link to section

3. Customize the entrance and exit animations

  1. Create an activity animation style with the parent="android:style/Animation.Activity". Set the desired animations for the payment form opening and closing.

    <style name="CardEntryActivityAnimation" parent="android:style/Animation.Activity"> <item name="android:activityOpenEnterAnimation">@anim/enter_from_bottom</item> <item name="android:activityOpenExitAnimation">@anim/stay_put</item> <item name="android:activityCloseEnterAnimation">@anim/stay_put</item> <item name="android:activityCloseExitAnimation">@anim/exit_to_bottom</item> </style>
  2. Add an item with name="android:windowAnimationStyle". The value should be a reference to the activity animation style created in step 1.

    <style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntryAppTheme"> ... <item name="android:windowAnimationStyle">@style/CardEntryActivityAnimation</item> </style>