Style Guide

The Tyro.js library can be customized during createPayForm(config) 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 pixel representation string e.g. "10px" or "10"
Padding supports a mix of sizes as per HTML markup specifications e.g. "10px", "10px 20px" or "10px 20px 5px 10px"
Font weights are per hundred as per HTML markup specifications e.g. "400", "600" or "800"

You can configure and experiment with styleProps using the Try It Out feature.

Visual Style Guide

Implementation

Copy

Copied

// Javascript sample code
const payForm = tyro.createPayForm({
  theme: 'sharp',
  styleProps: {
    /* Example custom styles
    bodyBackgroundColor: "#F2F2F2",
    bodyPadding: "10px 20px",
    inputFontSize: "16px",
    labelFontWeight: "600",
    showErrorSpacing: false,
    */
  }
});

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.

walletPaymentsButtonsHeight

string

Optional height property for the wallet payments buttons.

walletPaymentsButtonsMargin

string

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

walletPaymentsButtonsGap

string

Optional gap or space that applies around multiple buttons when present. Defaults to 20px.

walletPaymentsButtonsAlign

string

Optional property to set the wallet payment buttons alignment. Defaults to CENTER. You must specify a fixed walletPaymentsButtonsWidth for this properties to take effect.

Enum: "LEFT" "RIGHT" "CENTER"

walletPaymentsButtonsStacking

string

Optional property to set how multiple wallet payment buttons should be positioned on the form. Defaults to HORIZONTAL. Note: Will be forced to VERTICAL under 380px screen resolution.

Enum: "HORIZONTAL" "VERTICAL"

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. Defaults to system font.

Enum: "arial" "roboto" "serif"

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.

inputFontLetterSpacing

string

The font letter spacing 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" "inline"

labelFontColor

string

The font color of a label.

labelFontSize

string

The font size of a label.

labelFontLetterSpacing

string

The font letter spacing size a label.

labelFontWeight

string

The font weight of a label.

labelPadding

string

The padding inside a label.

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.

errorFontLetterSpacing

string

The font letter spacing size 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.