{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["json-schema"]},"type":"markdown"},"seo":{"title":"Initialise Tyro React Native SDK","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":"initialise-tyro-react-native-sdk","__idx":0},"children":["Initialise Tyro React Native SDK"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tyro-initialisation","__idx":1},"children":["Tyro Initialisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can initialise the TyroSDK using our provider component as seen below."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"method-parameters","__idx":2},"children":["Method Parameters"]},{"$$mdtype":"Tag","name":"JsonSchema","attributes":{"schema":{"$ref":"schemas/provider-options.yaml"},"options":{"schemasExpansionLevel":3},"schemaResolved":{"openapi":"3.1.0","components":{"schemas":{"__root":{"$ref":"#/components/schemas/provider-options"},"provider-options":{"type":"object","properties":{"liveMode":{"type":"boolean","description":"toggles between the live and sandbox environments"},"theme":{"type":"string","enum":["default","dark","sharp","minimal"],"description":"See Style Guide page to learn more"},"styleProps":{"type":"object","description":"See Style Guide page to learn more"},"options":{"type":"object","description":"configuration options for wallet and credit card payments.","properties":{"applePay":{"type":"object","properties":{"enabled":{"type":"boolean","description":"Toggles whether Apple Pay is enabled. Defaults to false."},"merchantIdentifier":{"type":"string","description":"merchant identifier required for Apple Pay."},"totalLabel":{"type":"string","description":"the label required for Apple Pay to be displayed next to the amount."},"supportedNetworks":{"type":"array","description":"Optional array of supported card types for Apple Pay. Defaults to support all.","items":{"type":"string","enum":["visa","mastercard","amex","jcb","maestro"]}}}},"googlePay":{"type":"object","properties":{"enabled":{"type":"boolean","description":"Toggles whether Google Pay is enabled. Defaults to false."},"merchantName":{"type":"string","description":"The name of the merchant required for Google Pay."},"supportedNetworks":{"type":"array","description":"Optional array of supported card types for Google Pay. Defaults to support all.","items":{"type":"string","enum":["visa","mastercard","amex","jcb"]}}}},"creditCardForm":{"type":"object","description":"An optional object containing properties for customizing the Credit Card Form.","properties":{"enabled":{"type":"boolean","description":"Credit Card Form will be shown when true. Default is true."},"supportedNetworks":{"type":"array","description":"Optional array of supported card types for the credit card form. Defaults to support all, and may be limited by your merchant account.","items":{"type":"string","enum":["visa","mastercard","amex","jcb","maestro","diners"]}}}}}}},"required":["liveMode"]}}}},"schemaResolvedErrors":[]},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tyroprovider","__idx":3},"children":["TyroProvider"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The TyroProvider component is a root level component and accepts the previously described method parameters as props."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This component also optionally supports a styleProp object to customize the appearance."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/react-native/style-guide"},"children":["Style Guide"]}," for detailed information about appearance customizations."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// example javascript code for using TyroProvider component\nimport { TyroProvider } from \"@tyro/tyro-pay-api-react-native\";\n\nconst providerOptions = {\n  applePay: {\n    enabled: true,\n    merchantId: '123456789',\n    supportedNetworks: ['visa', 'mastercard'],\n  },\n  googlePay: {\n    enabled: true,\n    merchantName: 'The merchant name',\n    supportedNetworks: ['visa', 'mastercard'],\n  },\n  creditCardForm: {\n    enabled: true,\n    supportedNetworks: ['visa', 'mastercard'],\n  },\n}\n\nfunction App() {\n  return (\n    <TyroProvider\n      options={liveMode: false, options: providerOptions}\n    >\n      // Your App Checkout Code wrapped here\n    </TyroProvider>\n  );\n}\n","lang":"javascript"},"children":[]}]},"headings":[{"value":"Initialise Tyro React Native SDK","id":"initialise-tyro-react-native-sdk","depth":1},{"value":"Tyro Initialisation","id":"tyro-initialisation","depth":1},{"value":"Method Parameters","id":"method-parameters","depth":1},{"value":"TyroProvider","id":"tyroprovider","depth":1}],"frontmatter":{"title":"Initialise Tyro React Native SDK","seo":{"title":"Initialise Tyro React Native SDK"}},"lastModified":"2026-09-01T06:34:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/react-native/initialise","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}