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

type	string 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"
errorMessage	string The error message for a submitted transaction if available e.g. Insufficient Funds
errorCode	string The error code for a declined transaction if available e.g. Insufficient Funds
gatewayCode	string The code returned by the payment gateway for a submitted transaction e.g. DECLINED

Error Types

For more information on type see 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.

Implementation

Copy

Copied

// 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);