Displaying Card Details

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

Your backend requests a reveal URL

Call Create reveal session from your server. Reap returns a short-lived, single-use revealUrl.

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

Card details are displayed

The cardholder sees PAN, CVV, and expiry date inside the iframe. No sensitive data touches your servers or client code.

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

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.

Web (HTML)
React
React Native

<iframe
  src="REVEAL_URL_FROM_BACKEND"
  width="400"
  height="250"
  frameborder="0"
  allow="clipboard-write"
  sandbox="allow-scripts allow-same-origin"
></iframe>

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

import { WebView } from 'react-native-webview';

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

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

​How it works

​Security

​Integration

​1. Request a reveal URL

​2. Display in an iframe

​Customization

​Best practices

How it works

Security

Integration

1. Request a reveal URL

2. Display in an iframe

Customization

Best practices