# Submit Pay

# tyro.submitPay()

Submits the payment. Returns a Promise.

* Create the form submit function
* Invoke `tyro.submitPay()`
* Show the payment result when the promise returns without errors. Invoke `tyro.fetchPayRequest()` to get the status and display the appropriate messages.
* Handle any errors. For example, the customer may have provided an invalid card, an error message could be shown in this case.
* Add the form submit function as an event listener for the `#pay-form` submit event.


## Success Response

Show the payment result when the promise returns without errors.

* Invoke `tyro.fetchPayRequest()` to get the status and display the appropriate messages.
* The Pay Request `status` is used to show the payment result.


## Error Response


```json
{
  "$ref": "#/components/schemas/tyro-js-error",
  "components": {
    "schemas": {
      "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"
          }
        }
      }
    }
  }
}
```

### Error Types

For more information on `type` see [Error Types](/app/apis/pay/error-types).

### Error Codes

Depending on the stage of the particular error, different error codes can be returned. Please refer to full list of supported [Error Codes](/app/apis/pay/errors).

## Implementation


```javascript
// Javascript sample code
async function onFormSubmit(e) {
    e.preventDefault();

    try {
        await tyro.submitPay();
        showPaymentResult();
    } catch (error) {
        const { type, errorMessage, errorCode, gatewayCode } = error;
        // handle errors here
          switch (type) {
            case "CLIENT_VALIDATION_ERROR":
              return showClientValidationError(errorMessage);
            case "SERVER_VALIDATION_ERROR":
              return showServerValidationError(errorMessage, errorCode, gatewayCode);
            case "CARD_ERROR":
              return showCardError(errorMessage, errorCode, gatewayCode);
            case "SERVER_ERROR":
              return showGenericError(errorMessage, errorCode, gatewayCode);
            ......
          }
    }
}

async function showPaymentResult() {
  const payRequest = await tyro.fetchPayRequest();

  switch (payRequest.status) {
    case "PROCESSING":
      return showProcessing();
    case "SUCCESS":
      return showSuccess();
    case "FAILED":
      return showFail();
    ......
  }
}

document.getElementById("pay-form").addEventListener("submit", onFormSubmit);
```