{"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 React Native component can be customized during the initialization of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<TyroProvider />"]}," 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 numeric representation but can be supplied as a string e.g. \"10\" or 10"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Padding and margins currently only support numeric representation e.g. \"10\" or 10"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Font weights are per hundred similar to HTML markup specifications e.g. \"400\", \"800\" or 800"]}]},{"$$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":"// example javascript code for using styleProps in the TyroProvider component\nimport { TyroProvider } from \"@tyro/tyro-pay-api-react-native\";\n\nconst theme = 'default';\n\nconst styleProps = {\n  bodyBackgroundColor: '#f2f2f2',\n  bodyPadding: 10,\n  inputFontSize: 16,\n  showSupportedCards: false\n}\n\nfunction App() {\n  return (\n    <TyroProvider\n      options={liveMode: false, theme: theme, styleProps: styleProps}\n    >\n      // Your App Checkout Code wrapped here\n    </TyroProvider>\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":2},"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."},"walletPaymentsButtonsMargin":{"type":"string","description":"Optional margin property for spacing around the wallet payment buttons. Defaults to 8px."},"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","description":"The font family of all text inside the widget. Supports custom fonts. 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."},"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"],"description":"The label position relative to the input field."},"labelFontColor":{"type":"string","description":"The font color of a label. labelPosition must = block for this to have effect."},"labelFontSize":{"type":"string","description":"The font size of a label. labelPosition must = block for this to have effect."},"labelFontWeight":{"type":"string","description":"The font weight of a label. labelPosition must = block for this to have effect."},"labelPadding":{"type":"string","description":"The padding inside a label. labelPosition must = block for this to have effect."},"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."},"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/react-native/style-guide","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}