> ## Documentation Index > Fetch the complete documentation index at: https://docs.yativo.com/llms.txt > Use this file to discover all available pages before exploring further. # Secure Card Display > Display sensitive card details and PIN in a secure hosted iframe — card data and PIN each require a separate view token **Cardholders must set their PIN before card details or PIN reveal can be viewed.** If `pin_set` is `false` and you request `["data"]` or `["pin-view"]`, the API returns a `422 PIN_NOT_SET` error with a ready-to-use `pin_setup_url`. Open that URL so the cardholder can set their PIN, then retry the view-token request. To **set** the PIN, call with `enabled_views: ["pin-set"]` — this always returns **200 OK** and `secure_view_url`, regardless of `pin_set` status. See [Setting a Card PIN](/yativo-crypto/cards/set-pin). Card details (PAN, CVV, expiry) and the card PIN each use **separate view tokens**. You must request the correct `enabled_views` for each use case. Never reuse a token between sessions. ## How it works Sensitive card data is never returned in plain API responses. Instead, Yativo hosts a secure card view page and provides you with a short-lived URL to embed in your application: 1. Your backend calls `POST /yativo-card/{yativoCardId}/cards/{cardId}/view-token` 2. If you request `["data"]` or `["pin-view"]` and `pin_set` is `false`, the API returns `PIN_NOT_SET` and a `pin_setup_url` — direct the cardholder there to set their PIN first. If you request `["pin-set"]`, you always receive a `secure_view_url` regardless of `pin_set` status. 3. Yativo returns a `secure_view_url` — a hosted, tokenized page 4. Your frontend embeds that URL in an ` ``` The hosted page is fully responsive. Recommended dimensions: `420 × 740px` for card details, `420 × 520px` for PIN-only views. The page can be embedded on any website or web app. Access is controlled by the short-lived signed token in the URL, not by the embedding site. *** ## Step 3 — Backend proxy (required) Your frontend must **never** call the Yativo API directly with your credentials. Always proxy the token request through your backend: ```typescript theme={null} import express from 'express'; const app = express(); app.use(express.json()); app.post('/api/card-view-token', async (req, res) => { // 1. Authenticate your own user first const user = await authenticateRequest(req); if (!user) return res.status(401).json({ error: 'Unauthorized' }); const { enabled_views, access_code, theme } = req.body; // 2. Validate enabled_views — only accept known values const VALID_VIEWS = ['data', 'pin-view', 'pin-set']; if (enabled_views && !enabled_views.every(v => VALID_VIEWS.includes(v))) { return res.status(400).json({ error: 'Invalid enabled_views' }); } // 3. Look up this user's card IDs from your own database const { yativoCardId, cardId } = await getUserCardIds(user.id); // 4. Call Yativo from your backend — credentials never leave the server const response = await fetch( `https://crypto-api.yativo.com/api/v1/yativo-card/${yativoCardId}/cards/${cardId}/view-token`, { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.YATIVO_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ ...(enabled_views ? { enabled_views } : {}), ...(access_code ? { access_code } : {}), ...(theme ? { theme } : {}), }), } ); const payload = await response.json(); // PIN not yet set — return the setup URL so your frontend can redirect the cardholder if (!response.ok && payload.error_code === 'PIN_NOT_SET') { return res.status(422).json({ error_code: 'PIN_NOT_SET', message: payload.message, pin_setup_url: payload.data?.pin_setup_url, }); } if (!response.ok) { return res.status(502).json({ error: 'Failed to get view token' }); } // Return only the URL — do not cache it res.json(payload.data); }); ``` ```html theme={null}
``` ```tsx theme={null} import { useEffect, useRef, useState } from 'react'; interface CardViewProps { enabledViews?: ('data' | 'pin-view' | 'pin-set')[]; height?: number; } export function SecureCardDisplay({ enabledViews = ['data', 'pin'], height = 740 }: CardViewProps) { const [url, setUrl] = useState(null); const [error, setError] = useState(null); useEffect(() => { let cancelled = false; async function fetchToken() { try { const res = await fetch('/api/card-view-token', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ enabled_views: enabledViews }), }); if (!res.ok) throw new Error('Failed to fetch token'); const data = await res.json(); if (!cancelled) setUrl(data.secure_view_url); } catch (err) { if (!cancelled) setError('Could not load card view. Please try again.'); } } fetchToken(); return () => { cancelled = true; }; }, [enabledViews.join(',')]); if (error) return

{error}

; if (!url) return
Loading...
; return (