# useTyro hook

The useTyro hook provides different context states and methods that you can use to
initialise the Tyro Pay Sheet, retrieve error messages and other methods used to interact with
the TyroSDK or Pay API.

## initialise Pay Sheet

The `initPaySheet` method will ready the PaySheet by checking your paySecret is valid.


```javascript
// example code for using the useTyro hook to initialise the Pay Sheet
import { useTyro } from "@tyro/tyro-pay-api-react-native";

const CheckoutPage = ({ paySecret }: CheckoutProps) => {
  const {
    initPaySheet,
    initialised,
    payRequest,
    isPayRequestReady,
    isPayRequestLoading,
    tyroError,
    isSubmitting,
    submitPayForm,
  } = useTyro();

  // init the PaySheet
  const yourInitMethod = async (paySecret) => {
    await initPaySheet(paySecret);
  };

  useEffect(() => {
    if (initialised === true && paySecret) {
      initPaySheet(paySecret);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialised, paySecret]);
};
```

If initialised successfully, the PaySheet component will be visible.
If there was an error with initialising e.g. the paySecret was found to be invalid,
then the PaySheet will not be visible.
See `tyroError` below for returned errors.

## tyroError

The `tyroError` context is an object that contains errors caught by the TyroSDK
when trying to initialise the PaySheet/TyroProvider or submitting a Pay Request.
It will be `null` if there are no errors, otherwise `tyroError.errorType`,
`tyroError.errorCode` and `tyroError.errorMessage` will provide more details about the error.

See [Error Types](/app/apis/pay/error-types) for the description of each errorType

See [Error Codes](/app/apis/pay/errors) for the full list of errorCodes and gatewayCodes possible


```json
{
  "$ref": "#/components/schemas/tyro-sdk-errors",
  "components": {
    "schemas": {
      "tyro-sdk-errors": {
        "title": "TyroSDK Error",
        "type": "object",
        "properties": {
          "errorType": {
            "type": "string",
            "description": "The errorType can be used to determine if an Error occurred",
            "enum": [
              "CLIENT_INITIALISATION_ERROR",
              "PAY_REQUEST_ERROR",
              "SERVER_ERROR",
              "CARD_ERROR"
            ],
            "example": "PAYSHEET_INIT_FAILED"
          },
          "errorCode": {
            "type": "string",
            "description": "The error code for a pay request or TyroSDK error. See Error Codes for full list.",
            "enum": [
              "ENVIRONMENT_MISMATCH",
              "WALLET_INIT_FAILED",
              "NOT_INITIALISED",
              "MISSING_MERCHANT_CONFIG",
              "NO_PAY_SECRET",
              "PAY_REQUEST_INVALID_STATUS",
              "INVALID_CARD_TYPE",
              "INVALID_CARD_DETAILS",
              "TIMEOUT",
              "UNKNOWN_ERROR",
              "FAILED_TO_SUBMIT"
            ]
          },
          "gatewayCode": {
            "type": "string",
            "description": "The gateway error code for a pay request. See Error Codes for more details."
          },
          "errorMessage": {
            "type": "string",
            "description": "The error message returned from TyroSDK describing the errorType",
            "example": "TyroProvider not initialised"
          }
        }
      }
    }
  }
}
```


```javascript
// example code for how you could use tyroError

/* ...Rest of your Checkout Page above */

// example ErrorHandler component
const ErrorHandler = ({ errorCode, errorMessage }: ErrorHandlerProps) => {
  return (
    <>
      {(errorCode || errorMessage) && (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>
            {errorCode && (
              <Text style={styles.errorCodeText}>{errorCode}:&nbsp;</Text>
            )}
            {errorMessage}
          </Text>
        </View>
      )}
    </>
  );
};

return (
  <>
    <ErrorHandler
      errorCode={tyroError?.errorCode ?? tyroError?.errorType}
      errorMessage={tyroError?.errorMessage}
    />
    {isPayRequestReady && <PaySheet />}
    {isPayRequestReady && (
      <PayButton onSubmit={submitPayForm} loading={isSubmitting} title="Pay" />
    )}
    {isPayRequestLoading && <ActivityIndicator />}
  </>
);
```

## submit Pay Form

The filled pay-form inside PaySheet component needs to be submitted when paying with credit cards. The `submitPayForm` method is available for handling credit card payment, and the boolean value `isSubmitting` indicates the submission status. It is TRUE when the payment details are being processed and it returns to FALSE when it finishes. You can embed the method and variable into your customised pay button.