PaySheet component

The TyroSDK allows you to display a functional credit card form and Apple and Google wallet payment options within your app. You can embed this into your payment flow within your mobile application to allow users to submit payments via Tyro's Pay API.

Using the PaySheet

The Tyro PaySheet is a component provided with the Tyro React Native SDK. Depending on how you have configured the TyroSDK and the device it is running on, it can display as a credit card form with Apple or Google pay wallet options as seen below.

react native pay sheet android react native pay sheet ios

Customizing the appearance of the PaySheet

Please refer to the Style Guide for detailed information about appearance customizations.

Create a payRequest on your server and Fetch the paySecret of that payRequest

Copy

Copied

// example code for Creating a payRequest on your server and retrieving the paySecret

// fetch the pay secret from your server
const fetchPayRequest = async (): Promise<void> => {
  const { paySecret } = await createPayRequest();
  await initPaySheet(paySecret);
};

const presentPaySheet = async (): Promise<void> => {
  await fetchPayRequest();
};

// Pass the paySecret to your checkout page or where ever you are initialising the PaySheet

Importing and using the PaySheet component

Copy

Copied

import PaySheet, { useTyro } from "@tyro/tyro-pay-api-react-native";

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

  useEffect(() => {
    if (initialised === true && paySecret) {
      initPaySheet(paySecret);
    }
  }, [initialised, paySecret]);

  // You might want to check you have passed in a paySecret yourself.
  if (!paySecret) {
    return (
      <YourErrorHandler errorMessage={"paySecret has not been generated"} />
    );
  }

  if (payRequest?.status === "SUCCESS") {
    return (
      <>
        <View style={styles.successContainer}>
          <Text style={styles.successText}>
            // Success message you would like to show your users.
          </Text>
        </View>
      </>
    );
  }

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