{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"PaySheet component","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"paysheet-component","__idx":0},"children":["PaySheet component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The TyroSDK allows you to display a functional credit card form and Apple and Google"," ","wallet payment options within your app."," ","You can embed this into your payment flow within your mobile application to allow users"," ","to submit payments via Tyro's Pay API."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"using-the-paysheet","__idx":1},"children":["Using the PaySheet"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Tyro PaySheet is a component provided with the Tyro React Native SDK."," ","Depending on how you have configured the TyroSDK and the device it is running on,"," ","it can display as a credit card form with Apple or Google pay wallet options as seen below."]},{"$$mdtype":"Tag","name":"p","attributes":{"style":{"textAlign":"center"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/react-native-pay-sheet-android.f6f6afcd6d9529f687af6a591d09337ec2d21c6352f2169daba7e0db032db4cb.6186c09a.png","alt":"Android Pay Sheet"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{"style":{"textAlign":"center"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/react-native-pay-sheet-ios.b5b6771b69ccc68ee0c2b0ae4540b0d78040d9179d4e4a202473b15149fe659b.6186c09a.png","alt":"IOS Pay Sheet"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"customizing-the-appearance-of-the-paysheet","__idx":2},"children":["Customizing the appearance of the PaySheet"]},{"$$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":"Heading","attributes":{"level":2,"id":"create-a-payrequest-on-your-server-and-fetch-the-paysecret-of-that-payrequest","__idx":3},"children":["Create a payRequest on your server and Fetch the paySecret of that payRequest"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// example code for Creating a payRequest on your server and retrieving the paySecret\n\n// fetch the pay secret from your server\nconst fetchPayRequest = async (): Promise<void> => {\n  const { paySecret } = await createPayRequest();\n  await initPaySheet(paySecret);\n};\n\nconst presentPaySheet = async (): Promise<void> => {\n  await fetchPayRequest();\n};\n\n// Pass the paySecret to your checkout page or where ever you are initialising the PaySheet\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"importing-and-using-the-paysheet-component","__idx":4},"children":["Importing and using the PaySheet component"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"Example Checkout with Tyro PaySheet","header":{"title":"Example Checkout with Tyro PaySheet","controls":{"copy":{}}},"source":"import PaySheet, { useTyro } from \"@tyro/tyro-pay-api-react-native\";\n\n// Your checkout page\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  useEffect(() => {\n    if (initialised === true && paySecret) {\n      initPaySheet(paySecret);\n    }\n  }, [initialised, paySecret]);\n\n  // You might want to check you have passed in a paySecret yourself.\n  if (!paySecret) {\n    return (\n      <YourErrorHandler errorMessage={\"paySecret has not been generated\"} />\n    );\n  }\n\n  if (payRequest?.status === \"SUCCESS\") {\n    return (\n      <>\n        <View style={styles.successContainer}>\n          <Text style={styles.successText}>\n            // Success message you would like to show your users.\n          </Text>\n        </View>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <YourErrorHandler\n        errorCode={tyroError?.errorCode ?? tyroError?.errorType}\n        errorMessage={tyroError?.errorMessage}\n      />\n      {isPayRequestReady && <PaySheet />}\n      {isPayRequestReady && (\n        <YourPayButton\n          onSubmit={submitPayForm}\n          loading={isSubmitting}\n          title=\"Pay\"\n        />\n      )}\n      {isPayRequestLoading && <ActivityIndicator />}\n    </>\n  );\n};\n","lang":"javascript"},"children":[]}]},"headings":[{"value":"PaySheet component","id":"paysheet-component","depth":1},{"value":"Using the PaySheet","id":"using-the-paysheet","depth":1},{"value":"Customizing the appearance of the PaySheet","id":"customizing-the-appearance-of-the-paysheet","depth":1},{"value":"Create a payRequest on your server and Fetch the paySecret of that payRequest","id":"create-a-payrequest-on-your-server-and-fetch-the-paysecret-of-that-payrequest","depth":2},{"value":"Importing and using the PaySheet component","id":"importing-and-using-the-paysheet-component","depth":2}],"frontmatter":{"title":"PaySheet","seo":{"title":"PaySheet component"}},"lastModified":"2026-09-01T06:34:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/react-native/pay-sheet","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}