{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["json-schema"]},"type":"markdown"},"seo":{"title":"Style Guide","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":["openapi"],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"style-guide","__idx":0},"children":["Style Guide"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"themes","__idx":1},"children":["Themes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Fast track your integrations appearance by selecting one of our provided themes."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styles","__idx":2},"children":["Styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To fine-tune individual properties of the visualization, you can use style properties. Style properties will override theme properties."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When using styleProps the following property rules apply, any property that is irregular will be ignored."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Any colors, such as background or text, require a Hex color code e.g. \"#FFF\" or \"#FFFFFFF\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Sizes such as font, border and size, require a pixel representation string e.g. \"10px\" or \"10\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Padding supports a mix of sizes as per HTML markup specifications e.g. \"10px\", \"10px 20px\" or \"10px 20px 5px 10px\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Font weights are per hundred as per HTML markup specifications e.g. \"400\", \"600\" or \"800\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can configure and experiment with styleProps using the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/samples/customisation-tool"},"children":["Try It Out"]}," feature."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"visual-style-guide","__idx":3},"children":["Visual Style Guide"]},{"$$mdtype":"Tag","name":"p","attributes":{"style":{"textAlign":"center"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/style-helper.450bd3f0ca96bab9723e87525349f3f54c39233fcceeda1334946b0c5a739c54.7e520e8c.png","alt":"Visual Style Guide"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"implementation","__idx":4},"children":["Implementation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\nconst payForm = tyro.createPayForm({\n  theme: 'sharp',\n  styleProps: {\n    /* Example custom styles\n    bodyBackgroundColor: \"#F2F2F2\",\n    bodyPadding: \"10px 20px\",\n    inputFontSize: \"16px\",\n    labelFontWeight: \"600\",\n    showErrorSpacing: false,\n    */\n  }\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"config-parameters","__idx":5},"children":["Config Parameters"]},{"$$mdtype":"Tag","name":"JsonSchema","attributes":{"schema":{"$ref":"../../common/schemas/theme.yaml"},"options":{"schemasExpansionLevel":0},"schemaResolved":{"openapi":"3.1.0","components":{"schemas":{"__root":{"$ref":"#/components/schemas/theme"},"theme":{"type":"object","properties":{"theme":{"description":"An optional string to load a set of preset styleProps. Defaults to default.","type":"string","enum":["default","dark","sharp","minimal"]}}}}}},"schemaResolvedErrors":[]},"children":[]},{"$$mdtype":"Tag","name":"JsonSchema","attributes":{"schema":{"$ref":"schemas/style-props.yaml"},"options":{"schemasExpansionLevel":3},"schemaResolved":{"openapi":"3.1.0","components":{"schemas":{"__root":{"$ref":"#/components/schemas/style-props"},"style-props":{"type":"object","properties":{"styleProps":{"description":"An optional object containing properties for customizing the appearance of the widget.","properties":{"applePayButton":{"type":"object","properties":{"buttonBorderRadius":{"type":"string","description":"Border radius of the Apple Pay button."},"buttonStyle":{"type":"string","enum":["black","white","white-outline"],"description":"Style of the Apple Pay button. Defaults to black."},"buttonType":{"type":"string","enum":["plain","pay","buy","order","book","check-out","continue","add-money","contribute","donate","reload","rent","set-up","subscribe","support","tip","top-up"],"description":"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."}}},"googlePayButton":{"type":"object","properties":{"buttonColor":{"type":"string","enum":["black","white","default"],"description":"Style of the Google Pay button. Defaults to default."},"buttonType":{"type":"string","enum":["book","buy","checkout","donate","order","pay","plain","subscribe"],"description":"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."}}},"walletPaymentsDividerText":{"type":"string","description":"Optional text to show in the wallet payments divider. Default is \"Or pay with card\". Empty is allowed."},"walletPaymentsDividerEnabled":{"type":"boolean","description":"Optional flag to enable or disable the wallet payments divider. Defaults to true."},"walletPaymentsButtonsWidth":{"type":"string","description":"Optional width property for the wallet payments buttons."},"walletPaymentsButtonsHeight":{"type":"string","description":"Optional height property for the wallet payments buttons."},"walletPaymentsButtonsMargin":{"type":"string","description":"Optional margin property for spacing around the wallet payment buttons. Defaults to 8px."},"walletPaymentsButtonsGap":{"type":"string","description":"Optional gap or space that applies around multiple buttons when present. Defaults to 20px."},"walletPaymentsButtonsAlign":{"type":"string","enum":["LEFT","RIGHT","CENTER"],"description":"Optional property to set the wallet payment buttons alignment. Defaults to CENTER. You must specify a fixed walletPaymentsButtonsWidth for this properties to take effect."},"walletPaymentsButtonsStacking":{"type":"string","enum":["HORIZONTAL","VERTICAL"],"description":"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."},"bodyBackgroundColor":{"type":"string","description":"The background color of the widget."},"bodyPadding":{"type":"string","description":"The padding around the widget."},"bodyWidth":{"type":"string","description":"The width of the iframe. Defaults to 100%."},"bodyMinWidth":{"type":"string","description":"The minimum width of the iframe. Defaults to 500px."},"bodyMaxWidth":{"type":"string","description":"The maximum width of the iframe. Defaults to 780px."},"fontFamily":{"type":"string","enum":["arial","roboto","serif"],"description":"The font family of all text inside the widget. Defaults to system font."},"inputBackgroundColor":{"type":"string","description":"The background color of an input field."},"inputBorderColor":{"type":"string","description":"The border color of an input field."},"inputBorderSize":{"type":"string","description":"The border thickness of an input field."},"inputBorderRadius":{"type":"string","description":"The border radius of all corners of an input field."},"inputFontColor":{"type":"string","description":"The font color of text inside an input field."},"inputFontSize":{"type":"string","description":"The font size of text inside an input field."},"inputFontLetterSpacing":{"type":"string","description":"The font letter spacing size of text inside an input field."},"inputFontWeight":{"type":"string","description":"The font weight of text inside an input field."},"inputErrorFontColor":{"type":"string","description":"The font color of text inside an input field when it is in an invalid state."},"inputErrorBorderColor":{"type":"string","description":"The border color of an input field when it is in an invalid state."},"inputErrorBorderSize":{"type":"string","description":"The border thickness of an input field when it is in an invalid state."},"inputFocusBackgroundColor":{"type":"string","description":"The background color of an input field when it is focused."},"inputFocusBorderColor":{"type":"string","description":"The border color of an input field when it is focused."},"inputFocusBorderSize":{"type":"string","description":"The border thickness of an input field when it is focused."},"inputFocusFontColor":{"type":"string","description":"The font color of text inside an input field when it is focused."},"inputPadding":{"type":"string","description":"The padding inside an input field."},"inputSpacing":{"type":"string","description":"The amount of vertical space between inputs, irrespective of error messages."},"labelPosition":{"type":"string","enum":["block","floating","inline"],"description":"The label position relative to the input field."},"labelFontColor":{"type":"string","description":"The font color of a label."},"labelFontSize":{"type":"string","description":"The font size of a label."},"labelFontLetterSpacing":{"type":"string","description":"The font letter spacing size a label."},"labelFontWeight":{"type":"string","description":"The font weight of a label."},"labelPadding":{"type":"string","description":"The padding inside a label."},"errorBackgroundColor":{"type":"string","description":"The background color of an error message."},"errorFontColor":{"type":"string","description":"The font color of an error message."},"errorFontSize":{"type":"string","description":"The font size of an error message."},"errorFontLetterSpacing":{"type":"string","description":"The font letter spacing size an error message."},"errorFontWeight":{"type":"string","description":"The font weight on an error message."},"errorPadding":{"type":"string","description":"The padding inside an error message."},"showCardIcon":{"type":"boolean","description":"Will display a visual aid card brand icon, and security code helper icon in the respective inputs. Defaults to true."},"showErrorSpacing":{"type":"boolean","description":"Reserves space equal to the size of the error message under each field. Defaults to true."},"showSupportedCards":{"type":"boolean","description":"Will show a list of supported card types. Defaults to true."}}}}}}}},"schemaResolvedErrors":[]},"children":[]}]},"headings":[{"value":"Style Guide","id":"style-guide","depth":1},{"value":"Themes","id":"themes","depth":2},{"value":"Styles","id":"styles","depth":2},{"value":"Visual Style Guide","id":"visual-style-guide","depth":2},{"value":"Implementation","id":"implementation","depth":2},{"value":"Config Parameters","id":"config-parameters","depth":2}],"frontmatter":{"title":"Style Guide","seo":{"title":"Style Guide"}},"lastModified":"2026-09-01T06:34:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/tyro-js/style-guide","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}