Your checkout page

{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Accept an Online Payment on Web","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":"accept-an-online-payment-on-web","__idx":0},"children":["Accept an Online Payment on Web"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Build your checkout page and integrate with Pay API and Tyro.js to accept payments"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example-sequence-of-payment-flow","__idx":1},"children":["Example Sequence of Payment Flow"]},{"$$mdtype":"Tag","name":"p","attributes":{"style":{"textAlign":"center"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/online-pay-example.967ed87828a09499485e8dea950deac1965d6e877716f0514e65d2b67f42ba11.7e520e8c.png","alt":"Online Pay Sequence"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"integration-steps","__idx":2},"children":["Integration Steps"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"your-server","__idx":3},"children":["Your Server"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"1-expose-an-endpoint-on-your-server","__idx":4},"children":["1. Expose an endpoint on your server"]},{"$$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 ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operations/create-pay-request"},"children":["creating a Pay Request"]},". The Pay Request 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('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 res.send({\n paySecret: payRequest.paySecret,\n });\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"in-your-checkout-page-html","__idx":5},"children":["In your Checkout Page HTML"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"2-add-tyrojs-and-set-up-the-pay-form","__idx":6},"children":["2. Add Tyro.js and set up the pay form"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add Tyro.js as a script tag in the header."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add the pay form and submit button. This is where the Pay Input fields will be injected."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n\n\n \n \n Your checkout page\n \n \n \n \n \n \n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"in-your-checkout-page-javascript","__idx":7},"children":["In your Checkout Page Javascript"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"3-instantiate-tyrojs","__idx":8},"children":["3. Instantiate Tyro.js"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create an instance of Tyro.js."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\nconst tyro = Tyro();\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"4-create-a-pay-request-and-inject-the-pay-form","__idx":9},"children":["4. Create a Pay Request and inject the Pay Form"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Send your checkout items to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/create-order"]}," endpoint on page load."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your server ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operations/create-pay-request"},"children":["creates the Pay Request"]}," and returns the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paySecret"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initialise Tyro.js with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paySecret"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Inject the Tyro Pay Form into your HTML."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"let paySecret;\n// Javascript sample code\nasync function init() {\n const response = await fetch(\"/create-order\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ items }),\n });\n paySecret = await response.json().paySecret;\n await tyro.init(paySecret);\n\n const payForm = tyro.createPayForm();\n payForm.inject(\"#tyro-pay-form\");\n}\n\ninit();\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"5-handle-form-submit-and-display-result","__idx":10},"children":["5. Handle form submit and display result"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create the form submit function"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Invoke ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyro.submitPay()"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Show the payment result when the promise returns without errors. Invoke ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyro.fetchPayRequest()"]}," to get the status and display the appropriate messages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Handle any errors. For example, the customer may have provided an invalid card, an error message could be shown in this case."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add the form submit function as an event listener for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#pay-form"]}," submit event."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\nasync function showPaymentResult() {\n const payRequest = await tyro.fetchPayRequest();\n\n switch (payRequest.status) {\n case \"SUCCESS\":\n return showSuccess();\n case \"FAILED\":\n return showFail();\n ......\n }\n}\n\n\nasync function onFormSubmit(e) {\n e.preventDefault();\n\n try {\n await tyro.submitPay();\n showPaymentResult();\n } catch (error) {\n const { type, errorMessage, errorCode, gatewayCode } = error;\n // handle errors here\n switch (type) {\n case \"CLIENT_VALIDATION_ERROR\":\n return showClientValidationError(errorMessage);\n case \"SERVER_VALIDATION_ERROR\":\n return showServerValidationError(errorMessage, errorCode, gatewayCode);\n case \"CARD_ERROR\":\n return showCardError(errorMessage, errorCode, gatewayCode);\n case \"SERVER_ERROR\":\n return showGenericError(errorMessage, errorCode, gatewayCode);\n ......\n }\n }\n}\n\ndocument.getElementById(\"pay-form\").addEventListener(\"submit\", onFormSubmit);\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"your-server-1","__idx":11},"children":["Your Server"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"7-handle-webhook-events","__idx":12},"children":["7. Handle webhook events"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9/notification-events"},"children":["Webhook events"]}," are sent during the lifecycle of a Pay Request."," ","Your server should listen to these events and handle them as required, such as sending an order confirmation email."]}]},"headings":[{"value":"Accept an Online Payment on Web","id":"accept-an-online-payment-on-web","depth":1},{"value":"Example Sequence of Payment Flow","id":"example-sequence-of-payment-flow","depth":2},{"value":"Integration Steps","id":"integration-steps","depth":2},{"value":"Your Server","id":"your-server","depth":3},{"value":"1. Expose an endpoint on your server","id":"1-expose-an-endpoint-on-your-server","depth":4},{"value":"In your Checkout Page HTML","id":"in-your-checkout-page-html","depth":3},{"value":"2. Add Tyro.js and set up the pay form","id":"2-add-tyrojs-and-set-up-the-pay-form","depth":4},{"value":"In your Checkout Page Javascript","id":"in-your-checkout-page-javascript","depth":3},{"value":"3. Instantiate Tyro.js","id":"3-instantiate-tyrojs","depth":4},{"value":"4. Create a Pay Request and inject the Pay Form","id":"4-create-a-pay-request-and-inject-the-pay-form","depth":4},{"value":"5. Handle form submit and display result","id":"5-handle-form-submit-and-display-result","depth":4},{"value":"Your Server","id":"your-server-1","depth":3},{"value":"7. Handle webhook events","id":"7-handle-webhook-events","depth":4}],"frontmatter":{"title":"Accept an Online Payment on Web","seo":{"title":"Accept an Online Payment on Web"}},"lastModified":"2026-09-02T06:39:28.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/tyro-js","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}