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.

Copy

Copied

// 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 for the description of each errorType

See Error Codes for the full list of errorCodes and gatewayCodes possible

errorType	string The errorType can be used to determine if an Error occurred Enum: "CLIENT_INITIALISATION_ERROR" "PAY_REQUEST_ERROR" "SERVER_ERROR" "CARD_ERROR"
errorCode	string 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	string The gateway error code for a pay request. See Error Codes for more details.
errorMessage	string The error message returned from TyroSDK describing the errorType

Copy

Copied

// 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.