Skip to main content

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, fonts,logo, etc. You will be configuring the SDK's theme that will be passed to the payment screen page.

Override Theme attributes.​

primaryColor

The property named primaryColor defines the primary color used across various UI components within the payment SDK. Specifically, this color is applied as the background for the following sections:

  • The screen title header, if configured.
  • The card input form container.
  • The expanded sections of the billing and shipping forms.
  • The amount display container.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.primaryColor = .lightGray

Please check the preview using light Gray color.

Step 1 example
primaryFontColor

The property named primaryFontColor is used to set the primary font color, this will be used as a font color for:

  • Font colors for labels and input values in the card form.
  • Defines the font color styles applied to form labels and input field values within the Billing and Shipping Details sections.
  • Card Scanner icon color.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.primaryFontColor = .red

Please check the preview using red color.

Step 2 example
secondaryColor

The property named secondaryColor is used to set the secondary color, this will be used as a background color for the header background color.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.secondaryColor = .red

Please check the preview using red color.

Step 3 example
secondaryFontColor

The property named secondaryFontColor is used to set the secondary color, this will be used as a font color for the footer text.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.secondaryFontColor = .red

Please check the preview using red color.

Step 4 example
strokeColor

The property named strokeColor is used to set all text field borders color, this will be used as a border color for:

  • Card form text field borders.
  • Billing and Shipping details text field borders.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.strokeColor = .red

Please check the preview using red color.

Step 5 example
buttonColor

The property named buttonColor, will be used as a background color for the PAY NOW button.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.buttonColor = .red

Please check the preview using red color.

Step 6 example
buttonFontColor

The property named buttonFontColor, will be used as a font color for the PAY NOW button.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.buttonFontColor = .red

Please check the preview using red color.

Step 7 example
titleFontColor

The property named titleFontColor, will be used as a font color for the screen title.

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.titleFontColor = .red

Please check the preview using red color.

Step 8 example
backgroundColor

The property named backgroundColor, will be used as a background color for the screen display..

// 1. Initialize the Theme
let theme = PaymentSDKTheme.default

// // 2. Customize the theme
theme.backgroundColor = .red

Please check the preview using red color.

Step 9 example
Step 1 showcase


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>

We are glad to be always in help. We aim to serve you better each time. As such, please spare a minute to share feedback about your recent experience with PayTabs Developers , on Trustpilot, or Google Reviews.