In-App Payments SDK: Cookbook

Customize the Payment Entry Form

Configure the In-App Payments SDK payment screen to seamlessly match the branding of your app.

In-App Payments SDK
Java (Android)
Android
iOS
Save

The In-App Payments SDK payment form has a default theme that can be overridden and customized by following the steps below.

Before you start

Understand the 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 this image:

Android payment form with customizeable properties

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

Style attribute Styled UI element
colorPrimaryDark The color of the status bar
colorPrimary The color of the action bar
windowBackground The background of the payment form
fontFamily The font family applied to all text in the payment form
textColorHint The color of hint text of the card entry input
colorAccent The color of the elements with input focus, the active button text, loading indicator, and text cursor
Custom: sqipErrorColor The color of invalid text input
Custom: sqipSaveButtonText The text of the button the customer clicks to submit their card information
Custom: sqipActivityTitle The title of the payment form displayed in the action bar.

The In-App Payments SDK has a default SQUIPTheme object, which provides UI styling properties for customizing the card entry view controller. The card entry view controller must be initialized with a SQIPTheme object.

iOS payment form with customizable properties

The SDK honors customization of several UI properties including:

Theme property Styled UI element
backgroundColor The card entry background
errorColor The color of invalid entry text
Font The font family applied to entry text
foregroundColor The color of the card entry view controller foreground
keyboardAppearance The light or dark appearance of the keyboard
messageColor The color of the entry field prompt text
placeholderTextColor The color of text entry field placeholder text
textColor The color of text entry field foreground text
saveButtonTitle The text of the save button
tintColor The color of the cursor, enable save button, and loading indicator

See SQUIPTheme for a complete list of customizable properties.

Step 1: Customize text colors

In your themes.xml:

  1. Create a style with the name="sqip.Theme.CardEntry" and parent="sqip.Theme.BaseCardEntry". Setting the parent attribute of this style to sqip.Theme.BaseCardEntry causes the custom CardEntry themeto inherit the default style of the In-App Payments SDK.
<style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntry">
</style>
  1. 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>
  1. Add the item with the 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>

On iOS, you can customize the keyboard appearance and error text color.

  1. Create an instance of SQIPTheme and set the errorColorandkeyboardAppearance properties.
let theme = SQIPTheme()
theme.tintColor = .gray
theme.saveButtonTitle = "Save"
  1. Initialize the card entry view controller with your theme.
let cardEntry =  SQIPCardEntryViewController(theme: theme)

Step 2: Customize the save button and card info form

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

  1. Add an item with the 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>
  1. Add an item with the 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>

The save button and card info form for In-Payments SDK are not currently customizable on iOS.

Step 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>
  1. Add an item with name="android:windowAnimationStyle". The value should be a reference to the activity animation style created in 1.
<style name="sqip.Theme.CardEntry" parent="sqip.Theme.BaseCardEntryAppTheme">
  ...
  <item name="android:windowAnimationStyle">@style/CardEntryActivityAnimation</item>
</style>

The transition animations for In-Payments SDK are not currently customizable on iOS.

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow