{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Quick Start Guide - Accepting a Payment","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":"quick-start-guide---accepting-a-payment","__idx":0},"children":["Quick Start Guide - Accepting a Payment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Details for how to accept a payment using Tyro's Pay API"," ","and React Native SDK is detailed here with step by step instructions."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please also refer to our example:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/tyro/tyro-pay-api-react-native-example-app"},"children":["Example App Repository"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"1-setup","__idx":1},"children":["1. Setup"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Complete any prerequisites required for using the TyroSDK"," ","and Apple and Google pay, including setting up your"," ","server for integration with Tyro's Pay API and"," ","installing the Tyro React Native SDK in your app"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"apple-pay-enablement","__idx":2},"children":["Apple Pay Enablement"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is required to enable the use of Apple Pay in your app:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Apple Merchant Id"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Payment Processing Certificate"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Apple Pay enabled in Xcode"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/react-native/wallets"},"children":["here"]}," for details"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"server-side","__idx":3},"children":["Server-Side"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a customer loads your checkout page, a request with the order information"," ","should be immediately sent to your sever. Your server should calculate the"," ","total of the order and send this total to Tyro when creating a Pay Request."," ","The Pay Request along with the Pay Secret should be returned to your checkout page."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Node sample code\nconst express = require(\"express\");\nconst app = express();\nconst axios = require(\"axios\");\n\napp.post(\"/create-order\", async (req, res) => {\n  const { items } = req.body;\n  const totalAmountInCents = calculateTotal(items);\n\n  // Create a Pay Request with the calculated total amount\n  const payRequest = await axios.post(\n    \"https://api.tyro.com/connect/pay/requests\",\n    {\n      locationId: \"tc-examplelocation-3000\",\n      provider: {\n        name: \"TYRO\",\n        method: \"CARD\",\n      },\n      origin: {\n        orderId: \"order123\",\n      },\n      total: {\n        amount: totalAmountInCents,\n        currency: \"AUD\",\n      },\n    },\n    {\n      headers: {\n        \"Content-Type\": \"application/json\",\n        Authorization: \"Bearer exampleJwt\",\n      },\n    }\n  );\n\n  res.send({\n    paySecret: payRequest.paySecret,\n  });\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"client-side","__idx":4},"children":["Client-Side"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"installation-of-tyrosdk","__idx":5},"children":["Installation of TyroSDK"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create GitHub PAT (Personal Access Token)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Steps to setup the PAT:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigate to GitHub page, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Profile"]}," -> ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," -> ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Developer Settings"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["On the left panel, select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Personal Access Token"]}," -> ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Token(classic)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Generate a new token with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["repo"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["read:package"]}," permissions"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Next, create a .npmrc file and be sure to use the PAT"," ","where it says ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["YOUR_GITHUB_PACKAGES_TOKEN"]}," in the example below."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"@tyro:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${YOUR_GITHUB_PACKAGES_TOKEN}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["install the Tyro React Native SDK in your project's directory"," ","according to the package manager you use."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"npm","header":{"controls":{"copy":{}}},"source":"npm install @tyro/tyro-pay-api-react-native\n","lang":"npm"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yarn","header":{"controls":{"copy":{}}},"source":"yarn add @tyro/tyro-pay-api-react-native\n","lang":"yarn"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"install-ios-dependencies","__idx":6},"children":["Install iOS dependencies"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"terminal","header":{"controls":{"copy":{}}},"source":"// navigate to your ios directory to install dependencies\npod install\n","lang":"terminal"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"install-ios-dependencies-1","__idx":7},"children":["Install iOS dependencies"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Include the following lines to the Podfile in your iOS folder"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ruby","header":{"controls":{"copy":{}}},"source":"source 'https://github.com/tyro/connect-cocoapods.git'\nsource 'https://cdn.cocoapods.org/'\n","lang":"ruby"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Then install these dependencies"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"terminal","header":{"controls":{"copy":{}}},"source":"// navigate to your ios directory to install dependencies\npod install\n","lang":"terminal"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"google-pay-enablement","__idx":8},"children":["Google Pay Enablement"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is required to enable the use of Google Pay in your app:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"java","header":{"controls":{"copy":{}}},"source":"// Add to the <application> element of your projects AndroidManifest.xml\n<meta-data\n  android:name=\"com.google.android.gms.wallet.api.enabled\"\n  android:value:\"true\"\n/>\n","lang":"java"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Also add this to your android projects app level gradle file to add the required dependency."," ","The GitHub Packages Token is the same one generated above."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"java","header":{"controls":{"copy":{}}},"source":"allprojects {\n  repositories {\n      maven {\n          url = uri(\"https://maven.pkg.github.com/tyro/tyro-pay-api-google-pay-sdk-android\")\n          credentials {\n              username = System.getenv(\"GITHUB_PACKAGES_USER\")\n              password = System.getenv(\"GITHUB_PACKAGES_TOKEN\")\n          }\n      }\n  }\n}\n","lang":"java"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add this to your android/settings.gradle file"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"java","header":{"controls":{"copy":{}}},"source":"include ':tyro_tyro-pay-api-react-native'\nproject(':tyro_tyro-pay-api-react-native').projectDir = file('../node_modules/@tyro/tyro-pay-api-react-native/android/lib')\n","lang":"java"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tyrosdk-initialisation","__idx":9},"children":["TyroSDK Initialisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To initialise the TyroSDK in your React Native app,"," ","wrap your payment screen with the TyroProvider component."," ","liveMode is required and if using Apple Pay then"," ","options.applePay.merchantId is also required."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/react-native/initialise"},"children":["Initialise Tyro React Native"]}]},{"$$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  },\n};\n\nfunction App() {\n  return (\n    <TyroProvider liveMode={true} options={providerOptions}>\n      ... // Your App Code\n    </TyroProvider>\n  );\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"2-initialise-the-pay-sheet","__idx":10},"children":["2. Initialise the Pay Sheet"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set up the Tyro PaySheet component in your checkout page"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"in-your-checkout-page","__idx":11},"children":["In Your Checkout page"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-the-pay-request-on-your-server-and-initialise-the-paysheet","__idx":12},"children":["Create the Pay Request on your server and initialise the PaySheet"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Make a call to your server with the order information."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your server should calculate the total of the order",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Send this total when ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operation/create-pay-request"},"children":["creating a Pay Request"]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Pay Request Pay Secret is then returned to your checkout page"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/react-native/pay-sheet"},"children":["PaySheet"]},"."]},{"$$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\n  // fetch the pay secret from your server and pass it to your Checkout Component\n  const fetchPayRequest = async (): Promise<void> => {\n    const { paySecret } = await createPayRequest();\n    return paySecret;\n  };\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  // Rest of CheckoutPage Below\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"3-import-and-use-the-paysheet-component","__idx":13},"children":["3. Import and use the PaySheet component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Finally, embed the Tyro PaySheet component in your"," ","payment screen for the user to submit their payment details."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"in-your-payment-screen","__idx":14},"children":["In your Payment screen"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"import-the-paysheet-component","__idx":15},"children":["Import The PaySheet component"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"import { PaySheet } from \"@tyro/tyro-pay-api-react-native\";\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"use-the-paysheet-component","__idx":16},"children":["use the PaySheet component"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const CheckoutPage = ({ paySecret }: CheckoutProps) => {\n\n // Rest of CheckoutPage Above\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. Your payment\n            was successfully processed.\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 && <YourPayButton onSubmit={submitPayForm} loading={isSubmitting} title=\"Pay\"/>}\n      {isPayRequestLoading && <ActivityIndicator />}\n    </>\n  );\n};\n","lang":"javascript"},"children":[]}]},"headings":[{"value":"Quick Start Guide - Accepting a Payment","id":"quick-start-guide---accepting-a-payment","depth":1},{"value":"1. Setup","id":"1-setup","depth":1},{"value":"Apple Pay Enablement","id":"apple-pay-enablement","depth":2},{"value":"Server-Side","id":"server-side","depth":2},{"value":"Client-Side","id":"client-side","depth":2},{"value":"Installation of TyroSDK","id":"installation-of-tyrosdk","depth":3},{"value":"Install iOS dependencies","id":"install-ios-dependencies","depth":3},{"value":"Install iOS dependencies","id":"install-ios-dependencies-1","depth":3},{"value":"Google Pay Enablement","id":"google-pay-enablement","depth":3},{"value":"TyroSDK Initialisation","id":"tyrosdk-initialisation","depth":3},{"value":"2. Initialise the Pay Sheet","id":"2-initialise-the-pay-sheet","depth":1},{"value":"In Your Checkout page","id":"in-your-checkout-page","depth":2},{"value":"Create the Pay Request on your server and initialise the PaySheet","id":"create-the-pay-request-on-your-server-and-initialise-the-paysheet","depth":3},{"value":"3. Import and use the PaySheet component","id":"3-import-and-use-the-paysheet-component","depth":1},{"value":"In your Payment screen","id":"in-your-payment-screen","depth":2},{"value":"Import The PaySheet component","id":"import-the-paysheet-component","depth":3},{"value":"use the PaySheet component","id":"use-the-paysheet-component","depth":3}],"frontmatter":{"title":"Quick Start Guide - Accepting a Payment","seo":{"title":"Quick Start Guide - Accepting a Payment"}},"lastModified":"2026-09-01T06:34:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/react-native","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}