> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reap.global/llms.txt
> Use this file to discover all available pages before exploring further.

# Displaying Card Details

> Securely display card PAN, CVV, and expiry to cardholders using an iframe.

Display sensitive card details (PAN, CVV, expiry date) to your users without handling raw card data. Reap API provides an iframe-based reveal flow that keeps your integration PCI-compliant.

***

## How it works

<Steps>
  <Step title="Your backend requests a reveal URL">
    Call [Create reveal session](/api-reference/cards/reveal-card-details) from your server. Reap returns a short-lived, single-use `revealUrl`.
  </Step>

  <Step title="Your frontend loads the URL in an iframe">
    Pass the `revealUrl` to your client and render it as the `src` of an `<iframe>` (web) or `WebView` (mobile).
  </Step>

  <Step title="Card details are displayed">
    The cardholder sees PAN, CVV, and expiry date inside the iframe. No sensitive data touches your servers or client code.
  </Step>
</Steps>

***

## Security

| Property             | Detail                                                                                                      |
| -------------------- | ----------------------------------------------------------------------------------------------------------- |
| **Single-use**       | Each `revealUrl` can only be loaded once. A second load returns an error page.                              |
| **Short-lived**      | URLs expire after 5 minutes. Generate a fresh URL each time the user wants to view card details.            |
| **No raw card data** | Card details are rendered inside the iframe. Your application never handles the PAN, CVV, or expiry values. |

***

## Integration

### 1. Request a reveal URL

Call [Create reveal session](/api-reference/cards/reveal-card-details) from your backend. The response includes a `revealUrl` and an `expiresAt` timestamp.

### 2. Display in an iframe

Pass `revealUrl` from your backend to your client and load it as the `src` of an iframe or WebView.

<Warning>
  **Client-side only.** The `revealUrl` must be loaded directly in a browser iframe or mobile WebView. Do not fetch, parse, or proxy the URL on your backend. Doing so exposes your servers to raw card data (PAN, CVV, expiry) and shifts PCI DSS compliance responsibilities onto your system.
</Warning>

<Tabs>
  <Tab title="Web (HTML)">
    ```html theme={null}
    <iframe
      src="REVEAL_URL_FROM_BACKEND"
      width="400"
      height="250"
      frameborder="0"
      allow="clipboard-write"
      sandbox="allow-scripts allow-same-origin"
    ></iframe>
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={null}
    function CardReveal({ revealUrl }: { revealUrl: string }) {
      return (
        <iframe
          src={revealUrl}
          width={400}
          height={250}
          frameBorder={0}
          allow="clipboard-write"
          sandbox="allow-scripts allow-same-origin"
        />
      );
    }
    ```
  </Tab>

  <Tab title="React Native">
    ```tsx theme={null}
    import { WebView } from 'react-native-webview';

    function CardReveal({ revealUrl }: { revealUrl: string }) {
      return (
        <WebView
          source={{ uri: revealUrl }}
          style={{ width: 400, height: 250 }}
          javaScriptEnabled
        />
      );
    }
    ```
  </Tab>
</Tabs>

***

## Customization

The reveal endpoint accepts two optional parameters:

| Parameter           | Type         | Default | Description                                                                        |
| ------------------- | ------------ | ------- | ---------------------------------------------------------------------------------- |
| `stylesheetUrl`     | string (URL) | `null`  | URL to a custom stylesheet for the card details iframe. Must be served over HTTPS. |
| `showCopyPanButton` | boolean      | `false` | Display a copy button that lets the cardholder copy the PAN to clipboard.          |

Pass these as optional fields in the [Create reveal session](/api-reference/cards/reveal-card-details) request body.

***

## Best practices

* **Generate on demand.** Request a new `revealUrl` each time the user taps "Show card details". Do not cache or store URLs.
* **Authenticate the cardholder first.** Only request a reveal URL after your application has verified the user's identity. The `revealUrl` does not require authentication to load, so treat it as sensitive.
* **Handle expiration.** If the iframe shows an error page, the URL has expired or was already used. Prompt the user to try again and request a fresh URL.
* **Use HTTPS for stylesheets.** If you provide a custom `stylesheetUrl`, serve it over HTTPS.