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 POST /cards/:id/reveal from your server. Reap API returns a short-lived, single-use revealUrl.

Your frontend loads the URL in an iframe

Pass the revealUrl to your client application and load it in an <iframe> (web) or WebView (mobile).

Card details are displayed

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

Security

Property	Detail
Single-use	Each `revealUrl` can only be loaded once. Subsequent requests return an error page.
Short-lived	URLs expire after 5 minutes. Generate a new one each time the user needs to view card details.
No raw card data	Card details are rendered inside the iframe. Your application never handles PAN, CVV, or expiry values.

Integration

1. Request a reveal URL

Call the reveal endpoint from your backend. See the API reference for the full request and response schema.

curl -X POST https://sandbox.api.reap.global/v1/cards/{cardId}/reveal \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Reap-Version: 2025-02-14" \
  -H "Content-Type: application/json" \
  -d '{}'

2. Display in an iframe

Pass the revealUrl from your backend to your client application 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
    />
  );
}

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 itself does not require authentication, 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.

Guides

​How it works

​Security

​Integration

​1. Request a reveal URL

​2. Display in an iframe

​Best practices

How it works

Security

Integration

1. Request a reveal URL

2. Display in an iframe

Best practices