{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["json-schema"]},"type":"markdown"},"seo":{"title":"useTyro hook","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":"usetyro-hook","__idx":0},"children":["useTyro hook"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The useTyro hook provides different context states and methods that you can use to"," ","initialise the Tyro Pay Sheet, retrieve error messages and other methods used to interact with"," ","the TyroSDK or Pay API."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"initialise-pay-sheet","__idx":1},"children":["initialise Pay Sheet"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["initPaySheet"]}," method will ready the PaySheet by checking your paySecret is valid."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// example code for using the useTyro hook to initialise the Pay Sheet\nimport { useTyro } from \"@tyro/tyro-pay-api-react-native\";\n\nconst CheckoutPage = ({ paySecret }: CheckoutProps) => {\n  const {\n    initPaySheet,\n    initialised,\n    payRequest,\n    isPayRequestReady,\n    isPayRequestLoading,\n    tyroError,\n    isSubmitting,\n    submitPayForm,\n  } = useTyro();\n\n  // init the PaySheet\n  const yourInitMethod = async (paySecret) => {\n    await initPaySheet(paySecret);\n  };\n\n  useEffect(() => {\n    if (initialised === true && paySecret) {\n      initPaySheet(paySecret);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialised, paySecret]);\n};\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If initialised successfully, the PaySheet component will be visible."," ","If there was an error with initialising e.g. the paySecret was found to be invalid,"," ","then the PaySheet will not be visible."," ","See ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyroError"]}," below for returned errors."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"tyroerror","__idx":2},"children":["tyroError"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyroError"]}," context is an object that contains errors caught by the TyroSDK"," ","when trying to initialise the PaySheet/TyroProvider or submitting a Pay Request."," ","It will be ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," if there are no errors, otherwise ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyroError.errorType"]},","," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyroError.errorCode"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyroError.errorMessage"]}," will provide more details about the error."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/error-codes"},"children":["Error Types"]}," for the description of each errorType"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/error-codes"},"children":["Error Codes"]}," for the full list of errorCodes and gatewayCodes possible"]},{"$$mdtype":"Tag","name":"JsonSchema","attributes":{"schema":{"$ref":"schemas/tyro-sdk-errors.yaml"},"options":{"schemasExpansionLevel":3},"schemaResolved":{"openapi":"3.1.0","components":{"schemas":{"__root":{"$ref":"#/components/schemas/tyro-sdk-errors"},"tyro-sdk-errors":{"title":"TyroSDK Error","type":"object","properties":{"errorType":{"type":"string","description":"The errorType can be used to determine if an Error occurred","enum":["CLIENT_INITIALISATION_ERROR","PAY_REQUEST_ERROR","SERVER_ERROR","CARD_ERROR"],"example":"PAYSHEET_INIT_FAILED"},"errorCode":{"type":"string","description":"The error code for a pay request or TyroSDK error. See Error Codes for full list.","enum":["ENVIRONMENT_MISMATCH","WALLET_INIT_FAILED","NOT_INITIALISED","MISSING_MERCHANT_CONFIG","NO_PAY_SECRET","PAY_REQUEST_INVALID_STATUS","INVALID_CARD_TYPE","INVALID_CARD_DETAILS","TIMEOUT","UNKNOWN_ERROR","FAILED_TO_SUBMIT"]},"gatewayCode":{"type":"string","description":"The gateway error code for a pay request. See Error Codes for more details."},"errorMessage":{"type":"string","description":"The error message returned from TyroSDK describing the errorType","example":"TyroProvider not initialised"}}}}}},"schemaResolvedErrors":[]},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// example code for how you could use tyroError\n\n/* ...Rest of your Checkout Page above */\n\n// example ErrorHandler component\nconst ErrorHandler = ({ errorCode, errorMessage }: ErrorHandlerProps) => {\n  return (\n    <>\n      {(errorCode || errorMessage) && (\n        <View style={styles.errorContainer}>\n          <Text style={styles.errorText}>\n            {errorCode && (\n              <Text style={styles.errorCodeText}>{errorCode}:&nbsp;</Text>\n            )}\n            {errorMessage}\n          </Text>\n        </View>\n      )}\n    </>\n  );\n};\n\nreturn (\n  <>\n    <ErrorHandler\n      errorCode={tyroError?.errorCode ?? tyroError?.errorType}\n      errorMessage={tyroError?.errorMessage}\n    />\n    {isPayRequestReady && <PaySheet />}\n    {isPayRequestReady && (\n      <PayButton onSubmit={submitPayForm} loading={isSubmitting} title=\"Pay\" />\n    )}\n    {isPayRequestLoading && <ActivityIndicator />}\n  </>\n);\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"submit-pay-form","__idx":3},"children":["submit Pay Form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The filled pay-form inside PaySheet component needs to be submitted when paying with credit cards. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitPayForm"]}," method is available for handling credit card payment, and the boolean value ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isSubmitting"]}," indicates the submission status. It is TRUE when the payment details are being processed and it returns to FALSE when it finishes. You can embed the method and variable into your customised pay button."]}]},"headings":[{"value":"useTyro hook","id":"usetyro-hook","depth":1},{"value":"initialise Pay Sheet","id":"initialise-pay-sheet","depth":2},{"value":"tyroError","id":"tyroerror","depth":2},{"value":"submit Pay Form","id":"submit-pay-form","depth":2}],"frontmatter":{"title":"useTyro","seo":{"title":"useTyro hook"}},"lastModified":"2026-09-01T06:34:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/react-native/use-tyro","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}