Mobile SDK Customization

The mobile SDK allows you to customize the color scheme of the payment screen that will be used in your mobile application, as well as the names of the components of the payment form that will be displayed on the screen (localization).

For iOS

To customize the payment screen, when using the Mobile SDK on iOS, implement the Mobile SDK on iOS, implement the PaymentContollerConfig parameter and pass it in the setConfig method.

To customize the color scheme and change the names of the components of the payment form (localization), use the following parameters:

var colorConfig = ColorConfig()
colorConfig.pay_button_enable_color = .blue
colorConfig.pay_button_disabled_color = .purple
colorConfig.fixed_amount_color = .blue
colorConfig.background_color = .white
colorConfig.section_backround_color = .cyan
colorConfig.border_color = .lightGray
colorConfig.placeholder_color = .darkGray
colorConfig.title_color = .darkGray
colorConfig.input_color = .black
colorConfig.error_color = .red

var localizationConfig = LocalizationConfig()
localizationConfig.main_title = "main_title"
localizationConfig.enter_amount_title = "enter_amount_title"
localizationConfig.enter_amount_placeholder = "enter_amount_placeholder"
localizationConfig.pay_via_card_title = "pay_via_card_title"
localizationConfig.pay_button_title = "pay_button_title"
localizationConfig.wrong_card_data_title = "wrong_card_data_title"
localizationConfig.card_number_placeholder = "card_number_placeholder"
localizationConfig.card_exp_month_placeholder = "card_exp_month_placeholder"
localizationConfig.card_exp_year_plaecholder = "card_exp_year_plaecholder"
localizationConfig.card_cvv_placeholder = "card_cvv_placeholder"
localizationConfig.cancel_payment_title = "cancel_payment_title"
localizationConfig.cancel_payment_description = "cancel_payment_description"
localizationConfig.cancel_payment_confirm = "cancel_payment_confirm"
localizationConfig.cancel_payment_cancel = "cancel_payment_cancel"

TranzzoPaymentsManager.setConfig(paymentConfig: PaymentsConfig(environment: .sandbox, currency: "your_currency", applePay: ApplePayConfig(merchantId: "yout_merchat_id", countryCode: "your_country_code")), uiConfig: PaymentContollerConfig(colorConfig: colorConfig, localizationConfig: localizationConfig))

info

Note: the default localization is Ukrainian.

For Android

The Android Mobile SDK supports different color schemes when customizing the payment screen color scheme, but the primary color for them is tranzzo_primary_color. This color defines the appearance using Alpha compositing. To change the colors of the payment screen, rewrite the color parameters in the xml.

To customize the color scheme, use the following parameters:

    <color name="tranzzo_primary_color">#001ED4</color>
    <!-- background -->
    <color name="tranzzo_bg_100">#FFFFFF</color>
    <color name="tranzzo_bg_300">#F0F3FA</color>
    <color name="tranzzo_bg_500">#CED4E1</color>
    <color name="tranzzo_bg_700">#919AAB</color>
    <!-- fonts -->
    <color name="tranzzo_text_100">#919AAB</color>
    <color name="tranzzo_text_200">#637181</color>
    <color name="tranzzo_text_300">#454E5B</color>
    <color name="tranzzo_text_400">#212A36</color>
    <!-- errors -->
    <color name="tranzzo_error_color">#FFA6A6</color>

To change the names of payment form components (localization), use the following parameters:

    <string name="tranzzo_ok">ОК</string>
    <string name="tranzzo_cancel">Скасувати</string>
    <string name="tranzzo_payment_3ds_title" translatable="false">Підтвердіть оплату</string>
    <string name="tranzzo_payment_press_back_again" translatable="false">Для виходу з оплати натисніть Назад ще раз</string>
    <string name="tranzzo_wrong_card_data">Невірні дані картки</string>
    <string name="tranzzo_input_manually">Введіть текст вручну</string>
    <string name="tranzzo_wait_for_card_nfc">Прикладіть картку до задньої сторони смартфона</string>
    <string name="tranzzo_card_scan_nfc_error">Помилка сканування.\nСпробуйте повтороно або введіть реквізити вручну.</string>
    <string name="tranzzo_to_settings">Перейти до налашутвань?</string>
    <string name="tranzzo_camera_permission">Налаштування дозволів камери</string>
    <string name="tranzzo_nfc_settings">Налаштування NFC</string>
    <string name="tranzzo_go_to_nfc_settings">NFC вимкнено, перейти в налаштування?</string>
    <string name="tranzzo_order_payment">Оплата замовлення</string>
    <string name="tranzzo_no_internet_connection">Інтернет зʼєднання відсутнє</string>
    <string name="tranzzo_message_google_pay_not_configured">GooglePay не налаштовано</string>
    <string name="tranzzo_message_google_pay_service_not_available">Сервіс GooglePay недоступний</string>
    <string name="tranzzo_message_google_pay_payment_error">Помилка при спробі оплати за допомогою GooglePay</string>
    <string name="tranzzo_pay_button_text">Оплатити</string>
    <string name="tranzzo_pay_gpay_title">Оплатити</string>
    <string name="tranzzo_nfc_ready_for_scanning">Готово до сканування</string>
    <string name="tranzzo_nfc_cancel">Скасувати</string>
    <string name="tranzzo_pay_with_card">Оплата карткою</string>
    <string name="tranzzo_hint_enter_amount">Введіть суму</string>
    <string name="tranzzo_enter_or_scan_card">Введите или отсканируйте</string>
    <string name="tranzzo_month">ММ</string>
    <string name="tranzzo_year">РР</string>
    <string name="tranzzo_cvv">CVV</string>
    <string name="tranzzo_payment_processing">Обробка платежу</string>

For iOS​

For Android​

For iOS

For Android