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.
Fast track your integrations appearance by selecting one of our provided themes.
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.
// Javascript sample code
const payForm = tyro.createPayForm({
theme: 'sharp',
styleProps: {
/* Example custom styles
bodyBackgroundColor: "#F2F2F2",
bodyPadding: "10px 20px",
inputFontSize: "16px",
labelFontWeight: "600",
showErrorSpacing: false,
*/
}
});An optional string to load a set of preset styleProps. Defaults to default.
An optional object containing properties for customizing the appearance of the widget.
Border radius of the Apple Pay button.
Style of the Apple Pay button. Defaults to black.
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.
Style of the Google Pay button. Defaults to default.
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.
Optional text to show in the wallet payments divider. Default is "Or pay with card". Empty is allowed.
Optional flag to enable or disable the wallet payments divider. Defaults to true.
Optional width property for the wallet payments buttons.
Optional height property for the wallet payments buttons.
Optional margin property for spacing around the wallet payment buttons. Defaults to 8px.
Optional gap or space that applies around multiple buttons when present. Defaults to 20px.
Optional property to set the wallet payment buttons alignment. Defaults to CENTER. You must specify a fixed walletPaymentsButtonsWidth for this properties to take effect.
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.
The background color of the widget.
The padding around the widget.
The width of the iframe. Defaults to 100%.
The minimum width of the iframe. Defaults to 500px.
The maximum width of the iframe. Defaults to 780px.
The font family of all text inside the widget. Defaults to system font.
The background color of an input field.
The border color of an input field.
The border thickness of an input field.
The border radius of all corners of an input field.
The font color of text inside an input field.
The font size of text inside an input field.
The font letter spacing size of text inside an input field.
The font weight of text inside an input field.
The font color of text inside an input field when it is in an invalid state.
The border color of an input field when it is in an invalid state.
The border thickness of an input field when it is in an invalid state.
The background color of an input field when it is focused.
The border color of an input field when it is focused.
The border thickness of an input field when it is focused.
The font color of text inside an input field when it is focused.
The padding inside an input field.
The amount of vertical space between inputs, irrespective of error messages.
The label position relative to the input field.
The font color of a label.
The font size of a label.
The font letter spacing size a label.
The font weight of a label.
The padding inside a label.
The background color of an error message.
The font color of an error message.
The font size of an error message.
The font letter spacing size an error message.
The font weight on an error message.
The padding inside an error message.
Will display a visual aid card brand icon, and security code helper icon in the respective inputs. Defaults to true.
Reserves space equal to the size of the error message under each field. Defaults to true.
Will show a list of supported card types. Defaults to true.