{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["json-schema"]},"type":"markdown"},"seo":{"title":"Submit Pay","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":"submit-pay","__idx":0},"children":["Submit Pay"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tyrosubmitpay","__idx":1},"children":["tyro.submitPay()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Submits the payment. Returns a Promise."]},{"$$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":"Heading","attributes":{"level":2,"id":"success-response","__idx":2},"children":["Success Response"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Show the payment result when the promise returns without errors."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Invoke ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyro.fetchPayRequest()"]}," to get the status and display the appropriate messages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The Pay Request ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["status"]}," is used to show the payment result."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"error-response","__idx":3},"children":["Error Response"]},{"$$mdtype":"Tag","name":"JsonSchema","attributes":{"schema":{"$ref":"schemas/tyro-js-error.yaml"},"options":{"schemasExpansionLevel":0},"schemaResolved":{"openapi":"3.1.0","components":{"schemas":{"__root":{"$ref":"#/components/schemas/tyro-js-error"},"tyro-js-error":{"title":"Tyro JS Error","type":"object","properties":{"type":{"type":"string","description":"The error type can be used to determine what is shown to the customer e.g. SERVER_VALIDATION_ERROR","enum":["CLIENT_VALIDATION_ERROR","SERVER_VALIDATION_ERROR","CARD_ERROR","SERVER_ERROR","UNKNOWN_ERROR"],"example":"SERVER_VALIDATION_ERROR"},"errorMessage":{"type":"string","description":"The error message for a submitted transaction if available e.g. Insufficient Funds","example":"Insufficient Funds"},"errorCode":{"type":"string","description":"The error code for a declined transaction if available e.g. Insufficient Funds","example":"INSUFFICIENT_FUNDS"},"gatewayCode":{"type":"string","description":"The code returned by the payment gateway for a submitted transaction e.g. DECLINED","example":"DECLINED"}}}}}},"schemaResolvedErrors":[]},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"error-types","__idx":4},"children":["Error Types"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["type"]}," see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/error-codes"},"children":["Error Types"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"error-codes","__idx":5},"children":["Error Codes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Depending on the stage of the particular error, different error codes can be returned. Please refer to full list of supported ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/error-codes"},"children":["Error Codes"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"implementation","__idx":6},"children":["Implementation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\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\nasync function showPaymentResult() {\n  const payRequest = await tyro.fetchPayRequest();\n\n  switch (payRequest.status) {\n    case \"PROCESSING\":\n      return showProcessing();\n    case \"SUCCESS\":\n      return showSuccess();\n    case \"FAILED\":\n      return showFail();\n    ......\n  }\n}\n\ndocument.getElementById(\"pay-form\").addEventListener(\"submit\", onFormSubmit);\n","lang":"javascript"},"children":[]}]},"headings":[{"value":"Submit Pay","id":"submit-pay","depth":1},{"value":"tyro.submitPay()","id":"tyrosubmitpay","depth":1},{"value":"Success Response","id":"success-response","depth":2},{"value":"Error Response","id":"error-response","depth":2},{"value":"Error Types","id":"error-types","depth":3},{"value":"Error Codes","id":"error-codes","depth":3},{"value":"Implementation","id":"implementation","depth":2}],"frontmatter":{"title":"Submit Pay","seo":{"title":"Submit Pay"}},"lastModified":"2026-09-01T06:34:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/tyro-js/submit-payment","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}