Кастомізація в Мобільному SDK

Щоб адаптувати платіжний екран до вашого фірмового стилю та покращити клієнтський досвід, скористайтесь можливостями кастомізації Мобільного SDK.

Що можна кастомізувати:

• кольорову схему платіжного екрану;
• назви компонентів платіжної форми (локалізація).

Для iOS

Для кастомізації платіжного екрану при використанні Мобільного SDK на iOS, імплементуйте параметр PaymentContollerConfig і передайте його у методі setConfig.

Для кастомізації кольорової схеми та зміни назв компонентів платіжної форми (локалізації) використовуйте такі параметри:

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))

інформація

За замовчуванням встановлена локалізація українською мовою.

Для Android

Мобільний SDK на Android підтримує різні кольорові схеми при кастомізації кольорової схеми платіжного екрану, але основним кольором для них є tranzzo_primary_color. Цей колір визначає зовнішній вигляд із застосуванням Альфа-компоузингу. Для зміни кольорів платіжного екрану, перезапишіть параметри кольорів в xml.

Для кастомізації кольорової схеми використовуйте такі параметри:

    <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>

Для зміни назв компонентів платіжної форми (локалізації) використовуйте такі параметри:

    <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>