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

p
img
p
img
# Customizing the appearance of the PaySheet

Please refer to the [Style Guide](/app/apis/pay/tyro-react-native/style-guide) for detailed information about appearance customizations.

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


```javascript
// 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


```javascript Example Checkout with Tyro PaySheet
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 />}
    </>
  );
};
```