Secure Card Display

import { YativoSDK } from '@yativo/crypto-sdk';

const sdk = new YativoSDK({
  baseURL: 'https://crypto-api.yativo.com/api/v1/',
  apiKey: process.env.YATIVO_API_KEY!,
  apiSecret: process.env.YATIVO_API_SECRET!,
});

// In your backend route handler:
const result = await sdk.cards.getViewToken(
  'yc_01HX9KZMB3F7VNQP8R2WDGT4E5',   // yativoCardId
  'card_01HX9KZMB3F7VNQP8R2WDGT4E5',  // cardId
  {
    enabled_views: ['data', 'pin'],
    theme: {
      accent_color: '#813AE3',
      border_radius: 16,
    },
  }
);

// Send result.data.secure_view_url to your frontend
return res.json({ url: result.data.secure_view_url });

<!-- Your frontend fetches the URL from your backend, then sets it on the iframe -->
<div id="card-view-wrapper">
  <iframe id="card-iframe" title="Secure Card View" width="420" height="740"
    style="border:0;border-radius:16px;" allow="clipboard-read; clipboard-write">
  </iframe>
</div>

<script>
  async function showCardDetails() {
    // Fetch from YOUR backend — never call Yativo directly from the browser
    const res = await fetch('/api/card-view-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ enabled_views: ['data', 'pin'] }),
    });

    if (!res.ok) {
      console.error('Failed to get card view token');
      return;
    }

    const { secure_view_url } = await res.json();
    document.getElementById('card-iframe').src = secure_view_url;
  }

  showCardDetails();
</script>

import { useEffect, useRef, useState } from 'react';

interface CardViewProps {
  enabledViews?: ('data' | 'pin')[];
  height?: number;
}

export function SecureCardDisplay({ enabledViews = ['data', 'pin'], height = 740 }: CardViewProps) {
  const [url, setUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(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 <p style={{ color: 'red' }}>{error}</p>;
  if (!url) return <div style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>;

  return (
    <iframe
      src={url}
      title="Secure Card View"
      width={420}
      height={height}
      style={{ border: 0, borderRadius: 16 }}
      allow="clipboard-read; clipboard-write"
    />
  );
}