Style Guide

The Tyro React Native component can be customized during the initialization of the <TyroProvider /> to match the look and feel of your site, by using the theme and styleProps configuration properties.

Themes

Fast track your integrations appearance by selecting one of our provided themes.

Styles

To fine-tune individual properties of the visualization, you can use style properties. Style properties will override theme properties.

When using styleProps the following property rules apply, any property that is irregular will be ignored.

Any colors, such as background or text, require a Hex color code e.g. "#FFF" or "#FFFFFFF"
Sizes such as font, border and size, require a numeric representation but can be supplied as a string e.g. "10" or 10
Padding and margins currently only support numeric representation e.g. "10" or 10
Font weights are per hundred similar to HTML markup specifications e.g. "400", "800" or 800

Visual Style Guide

Implementation

Copy

Copied

// example javascript code for using styleProps in the TyroProvider component
import { TyroProvider } from "@tyro/tyro-pay-api-react-native";

const theme = 'default';

const styleProps = {
  bodyBackgroundColor: '#f2f2f2',
  bodyPadding: 10,
  inputFontSize: 16,
  showSupportedCards: false
}

function App() {
  return (
    <TyroProvider
      options={liveMode: false, theme: theme, styleProps: styleProps}
    >
      // Your App Checkout Code wrapped here
    </TyroProvider>
  );
}

Config Parameters

theme

string

An optional string to load a set of preset styleProps. Defaults to default.

Enum: "default" "dark" "sharp" "minimal"

object

An optional object containing properties for customizing the appearance of the widget.

object

buttonBorderRadius	string Border radius of the Apple Pay button.
buttonStyle	string Style of the Apple Pay button. Defaults to black. Enum: "black" "white" "white-outline"
buttonType	string Type of the Apple Pay button. Setting this property will add text to the Apple Pay button based on the type chosen. Defaults to plain. Enum: "plain" "pay" "buy" "order" "book" "check-out" "continue" "add-money" "contribute" "donate" "reload" "rent" "set-up" "subscribe" "support" "tip" "top-up"

object

buttonColor	string Style of the Google Pay button. Defaults to default. Enum: "black" "white" "default"
buttonType	string Type of the Google Pay button. Setting this property will add text to the Google Pay button based on the type chosen. Defaults to buy. Enum: "book" "buy" "checkout" "donate" "order" "pay" "plain" "subscribe"

walletPaymentsDividerText

string

Optional text to show in the wallet payments divider. Default is "Or pay with card". Empty is allowed.

walletPaymentsDividerEnabled

boolean

Optional flag to enable or disable the wallet payments divider. Defaults to true.

walletPaymentsButtonsWidth

string

Optional width property for the wallet payments buttons.

walletPaymentsButtonsMargin

string

Optional margin property for spacing around the wallet payment buttons. Defaults to 8px.

bodyBackgroundColor

string

The background color of the widget.

bodyPadding

string

The padding around the widget.

bodyWidth

string

The width of the iframe. Defaults to 100%.

bodyMinWidth

string

The minimum width of the iframe. Defaults to 500px.

bodyMaxWidth

string

The maximum width of the iframe. Defaults to 780px.

fontFamily

string

The font family of all text inside the widget. Supports custom fonts. Defaults to system font.

inputBackgroundColor

string

The background color of an input field.

inputBorderColor

string

The border color of an input field.

inputBorderSize

string

The border thickness of an input field.

inputBorderRadius

string

The border radius of all corners of an input field.

inputFontColor

string

The font color of text inside an input field.

inputFontSize

string

The font size of text inside an input field.

inputFontWeight

string

The font weight of text inside an input field.

inputErrorFontColor

string

The font color of text inside an input field when it is in an invalid state.

inputErrorBorderColor

string

The border color of an input field when it is in an invalid state.

inputErrorBorderSize

string

The border thickness of an input field when it is in an invalid state.

inputFocusBackgroundColor

string

The background color of an input field when it is focused.

inputFocusBorderColor

string

The border color of an input field when it is focused.

inputFocusBorderSize

string

The border thickness of an input field when it is focused.

inputFocusFontColor

string

The font color of text inside an input field when it is focused.

inputPadding

string

The padding inside an input field.

inputSpacing

string

The amount of vertical space between inputs, irrespective of error messages.

labelPosition

string

The label position relative to the input field.

Enum: "block" "floating"

labelFontColor

string

The font color of a label. labelPosition must = block for this to have effect.

labelFontSize

string

The font size of a label. labelPosition must = block for this to have effect.

labelFontWeight

string

The font weight of a label. labelPosition must = block for this to have effect.

labelPadding

string

The padding inside a label. labelPosition must = block for this to have effect.

errorBackgroundColor

string

The background color of an error message.

errorFontColor

string

The font color of an error message.

errorFontSize

string

The font size of an error message.

errorFontWeight

string

The font weight on an error message.

errorPadding

string

The padding inside an error message.

showCardIcon

boolean

Will display a visual aid card brand icon, and security code helper icon in the respective inputs. Defaults to true.

showErrorSpacing

boolean

Reserves space equal to the size of the error message under each field. Defaults to true.

showSupportedCards

boolean

Will show a list of supported card types. Defaults to true.