Theme (Overriding)

This article is dedicated to walking you through how to manage the theme in this SDK to be more fit and customized to suit your business needs.

By using the following guide to customize the colors, dimension values (like padding, margins, text sizes), fonts, and logo, you will be configuring the SDK's theme that will be passed to the payment configuration.

Override Colors

Override Dimension

Override Strings (Localization)

you can override any of SDK string text, via override the string file, the default string file should be inside the values folder <project-root>/app/src/main/res/values/strings.xml, and each supported local language should be within values-{language code}.

For example for Arabic language the file directory will be:
<project-root>/app/src/main/res/values-ar/strings.xml

Override Styles

Fonts

Add your custom font files with the following fonts names:

payment_sdk_primary_font.ttf
payment_sdk_secondary_font.ttf

Drawables

To override the back button icon, add your drawable file with the name:

payment_sdk_back_arrow.xml

Change the back button arrow

Replace the default back button arrow with your own drawable one.

app/src/main/res/drawable/payment_sdk_back_arrow.xml.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="60dp"
  android:height="60dp"
  android:viewportWidth="60"
  android:viewportHeight="60">
<path
    android:fillColor="#FFFFFFFF"
    android:pathData="M12,9.059V6.5c0,-0.256 -0.098,-0.512 -0.293,-0.708C11.512,5.597 11.256,5.5 11,5.5s-0.512,0.097 -0.707,0.292L4,12l6.293,6.207C10.488,18.402 10.744,18.5 11,18.5s0.512,-0.098 0.707,-0.293S12,17.755 12,17.5v-2.489c2.75,0.068 5.755,0.566 8,3.989v-1C20,13.367 16.5,9.557 12,9.059z"/>

  </vector>

Dark theme

To apply your custom dark theme, you can change the resource color file colors.xml within the folder values-night:

Night mode

set all the colors for the dark/night theme, and the default colors will be overridden by the new ones.

app/src/main/res/values-night/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
      <color name="payment_sdk_primary_color">#121212</color>
      <color name="payment_sdk_secondary_color">#2196F3</color>
      <color name="payment_sdk_status_bar_color">#000000</color>
      <color name="payment_sdk_primary_font_color">#FFFFFF</color>
      <color name="payment_sdk_secondary_font_color">#90CAF9</color>
      <color name="payment_sdk_hint_font_color">#B0BEC5</color>
      <color name="payment_sdk_stroke_color">#37474F</color>
      <color name="payment_sdk_button_text_color">#FFFFFF</color>
      <color name="payment_sdk_title_text_color">#ECEFF1</color>
      <color name="payment_sdk_button_background_color">#2196F3</color>
      <color name="payment_sdk_background_color">#1E1E1E</color>
      <color name="payment_sdk_blue_F2FAFD">#1A2A3A</color>
      <color name="payment_sdk_error_text_color">#EF5350</color>
      <color name="payment_sdk_back_black_dim">#80000000</color>
      <color name="payment_sdk_input_field_background_color">#1E1E1E</color>
      <color name="payment_sdk_enabled_switch_track_color">#33691E</color>
      <color name="payment_sdk_enabled_switch_handle_color">#66BB6A</color>
      <color name="payment_sdk_disabled_switch_track_color">#263238</color>
      <color name="payment_sdk_disabled_switch_handle_color">#757575</color>
      <color name="payment_sdk_switch_stroke_color">#B0BEC5</color>
      <color name="payment_sdk_amount_font_color">#FFFFFF</color>
      <color name="payment_sdk_original_amount_font_color">#B0BEC5</color>
      <color name="payment_sdk_billing_header_background_color">#1565C0</color>
      <color name="payment_sdk_billing_text_color">#FFFFFF</color>
</resources>

Override Colors​

Override Dimension​

Override Strings (Localization)​

Override Styles​

Fonts​

Drawables​