Overview

The PayMittoAppearance type allows you to fully customize the SDK's visual theme. It uses a JSON structure with two main sections:

foundations: Core design tokens (colors, font family)
components: Component-specific configurations (buttons, inputs, loading, content)

All properties are optional — the SDK uses sensible defaults for any missing values.

Definition

export type PayMittoAppearance = {
  foundations?: PayMittoFoundations;
  components?: PayMittoComponents;
};

Foundations

Core design tokens used throughout the SDK.

export type PayMittoFoundations = {
  colorPrimary?: PayMittoColorValue;
  colorTextPrimary?: PayMittoColorValue;
  colorTextSecondary?: PayMittoColorValue;
  colorTextLink?: PayMittoColorValue;
  colorForeground?: PayMittoColorValue;
  colorBackground?: PayMittoColorValue;
  colorDivider?: PayMittoColorValue;
  colorSuccess?: PayMittoColorValue;
  colorWarning?: PayMittoColorValue;
  colorDanger?: PayMittoColorValue;
  fontFamily?: PayMittoFontFamily;
};

export type PayMittoColorValue = {
  light: string;  // Hex color for light mode (e.g., '#FFFFFF')
  dark: string;   // Hex color for dark mode (e.g., '#000000')
};

export type PayMittoFontFamily = 'inter' | 'roboto' | 'source sans 3' | 'sf pro';

Foundation Properties

Property	Description
colorPrimary	Primary brand accent color
colorTextPrimary	Main text color
colorTextSecondary	Secondary/muted text color
colorTextLink	Link and interactive text color
colorForeground	Surface/card background color
colorBackground	Page background color
colorDivider	Separator/divider line color
colorSuccess	Success state color
colorWarning	Warning state color
colorDanger	Error/danger state color
fontFamily	Font family used throughout the SDK

Default Foundation Colors

Token	Light Mode	Dark Mode
colorPrimary	`#4451F6`	`#7B86FF`
colorTextPrimary	`#120F0D`	`#F5F3F0`
colorTextSecondary	`#63615E`	`#9A968F`
colorTextLink	`#F45858`	`#F87474`
colorForeground	`#FEFDFC`	`#1C1B1A`
colorBackground	`#F8F6F3`	`#121110`
colorDivider	`#E7E5E2`	`#2A2927`
colorSuccess	`#008761`	`#3DBA92`
colorWarning	`#F5B900`	`#FFCB33`
colorDanger	`#AA220F`	`#E5614F`

Default Font

Property	Default Value
fontFamily	`sf pro`

Components

Component-specific configurations for buttons, inputs, loading screens, navigation, and content.

export type PayMittoComponents = {
  button?: PayMittoButtonConfig;
  inputFields?: PayMittoInputFieldsConfig;
  loading?: PayMittoLoadingConfig;
  backLink?: PayMittoBackLinkConfig;
  content?: PayMittoContentConfig;
};

Button Configuration

export type PayMittoButtonConfig = {
  buttonPrimaryBackgroundColor?: PayMittoColorValue;
  buttonPrimaryTextColor?: PayMittoColorValue;
  buttonSecondaryBorderColor?: PayMittoColorValue;
  buttonSecondaryTextColor?: PayMittoColorValue;
  buttonTextCase?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
  buttonPrimaryTextShadow?: boolean;
  buttonRadius?: number;
};

Property	Type	Description
buttonPrimaryBackgroundColor	`ColorValue`	Primary button background
buttonPrimaryTextColor	`ColorValue`	Primary button text
buttonSecondaryBorderColor	`ColorValue`	Secondary button border
buttonSecondaryTextColor	`ColorValue`	Secondary button text
buttonTextCase	`string`	Text transformation for button labels
buttonPrimaryTextShadow	`boolean`	Enable text shadow on primary buttons
buttonRadius	`number`	Corner radius in dp/pt

Default Button Values

Property	Light Mode	Dark Mode
buttonPrimaryBackgroundColor	`#1F1093`	`#5C68FF`
buttonPrimaryTextColor	`#FEFDFC`	`#FEFDFC`
buttonSecondaryBorderColor	`#F45858`	`#F87474`
buttonSecondaryTextColor	`#F45858`	`#F87474`

Property	Default Value
buttonTextCase	`capitalize`
buttonPrimaryTextShadow	`false`
buttonRadius	`8`

Input Fields Configuration

export type PayMittoInputFieldsConfig = {
  inputBorderColor?: PayMittoColorValue;
  inputBackgroundColor?: PayMittoColorValue;
  inputRadius?: number;
};

Property	Type	Description
inputBorderColor	`ColorValue`	Input field border color
inputBackgroundColor	`ColorValue`	Input field background color
inputRadius	`number`	Corner radius in dp/pt

Default Input Values

Property	Light Mode	Dark Mode
inputBorderColor	`#BFBDBA`	`#3A3937`
inputBackgroundColor	`#FEFDFC`	`#1C1B1A`

Property	Default Value
inputRadius	`8`

Loading Configuration

export type PayMittoLoadingConfig = {
  loadingBackgroundColor?: PayMittoColorValue;
  loadingTextColor?: PayMittoColorValue;
  loadingSpinnerColor?: PayMittoColorValue;
};

Property	Type	Description
loadingBackgroundColor	`ColorValue`	Loading screen background
loadingTextColor	`ColorValue`	Loading screen text
loadingSpinnerColor	`ColorValue`	Loading spinner color

Default Loading Values

Property	Light Mode	Dark Mode
loadingBackgroundColor	`#1F1093`	`#5C68FF`
loadingTextColor	`#FFFFFF`	`#FEFDFC`
loadingSpinnerColor	`#4451F6`	`#7B86FF`

Back Link Configuration

export type PayMittoBackLinkConfig = {
  backIconType?: 'arrow' | 'chevron';
  backTextCase?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
};

Property	Type	Description
backIconType	`string`	Back button icon style
backTextCase	`string`	Text transformation for back button label

Default Back Link Values

Property	Default Value
backIconType	`chevron`
backTextCase	`capitalize`

Content Configuration

Customize the home screen headline and description.

export type PayMittoContentConfig = {
  contentHomepageHeadline?: PayMittoHomepageHeadline;
  contentHomepageDescription?: PayMittoHomepageDescription;
};

export type PayMittoHomepageHeadline =
  | 'Global transfer'
  | 'International & domestic transfers'
  | 'International transfers'
  | 'Send money internationally';

export type PayMittoHomepageDescription =
  | 'Send funds to your recipients with convenience and flexibility.'
  | 'Send money to friends and family in other countries';

Available Headlines

Value	English	Spanish
`Global transfer`	Global transfer	Transferencia global
`International & domestic transfers`	International & domestic transfers	Transferencias internacionales y domésticas
`International transfers`	International transfers	Transferencias internacionales
`Send money internationally`	Send money internationally	Enviar dinero al extranjero

Available Descriptions

Value	English	Spanish
`Send funds to your recipients with convenience and flexibility.`	Send funds to your recipients with convenience and flexibility.	Envíe fondos a sus destinatarios de forma práctica y flexible.
`Send money to friends and family in other countries`	Send money to friends and family in other countries	Enviar dinero a amigos y familiares en otros países

Complete Example

import {
  startSDK,
  PayMittoEnvironment,
  PayMittoSupportedAppearance,
  type PayMittoAppearance,
} from 'react-native-paymitto-sdk';

const appearance: PayMittoAppearance = {
  foundations: {
    colorPrimary: { light: '#4451F6', dark: '#7B86FF' },
    colorTextPrimary: { light: '#120F0D', dark: '#F5F3F0' },
    colorTextSecondary: { light: '#63615E', dark: '#9A968F' },
    colorTextLink: { light: '#F45858', dark: '#F87474' },
    colorForeground: { light: '#FEFDFC', dark: '#1C1B1A' },
    colorBackground: { light: '#F8F6F3', dark: '#121110' },
    colorDivider: { light: '#E7E5E2', dark: '#2A2927' },
    colorSuccess: { light: '#008761', dark: '#3DBA92' },
    colorWarning: { light: '#F5B900', dark: '#FFCB33' },
    colorDanger: { light: '#AA220F', dark: '#E5614F' },
    fontFamily: 'sf pro',
  },
  components: {
    button: {
      buttonPrimaryBackgroundColor: { light: '#1F1093', dark: '#5C68FF' },
      buttonPrimaryTextColor: { light: '#FEFDFC', dark: '#FEFDFC' },
      buttonSecondaryBorderColor: { light: '#F45858', dark: '#F87474' },
      buttonSecondaryTextColor: { light: '#F45858', dark: '#F87474' },
      buttonTextCase: 'capitalize',
      buttonPrimaryTextShadow: false,
      buttonRadius: 8,
    },
    inputFields: {
      inputBorderColor: { light: '#BFBDBA', dark: '#3A3937' },
      inputBackgroundColor: { light: '#FEFDFC', dark: '#1C1B1A' },
      inputRadius: 8,
    },
    loading: {
      loadingBackgroundColor: { light: '#1F1093', dark: '#5C68FF' },
      loadingTextColor: { light: '#FFFFFF', dark: '#FEFDFC' },
      loadingSpinnerColor: { light: '#4451F6', dark: '#7B86FF' },
    },
    backLink: {
      backIconType: 'chevron',
      backTextCase: 'capitalize',
    },
    content: {
      contentHomepageHeadline: 'Global transfer',
      contentHomepageDescription: 'Send funds to your recipients with convenience and flexibility.',
    },
  },
};

startSDK({
  configuration: {
    environment: PayMittoEnvironment.Sandbox,
    appearance: appearance,
    supportedAppearance: PayMittoSupportedAppearance.Device,
  },
  fetchAccessTokenDetails: async () => ({ /* ... */ }),
  verifyFundsAndCreateTransfer: async (request) => ({ transferId: 'TXN123' }),
});

Partial Customization

You don't need to provide all values. Only override what you need:

const appearance: PayMittoAppearance = {
  foundations: {
    colorPrimary: { light: '#FF5722', dark: '#FF7043' },
    fontFamily: 'roboto',
  },
  components: {
    button: {
      buttonRadius: 24,
    },
  },
};