161 lines
7.5 KiB
HTML
161 lines
7.5 KiB
HTML
|
{% extends "base.html" %}
|
|||
|
|
{% block title %} — Step 6: Events{% endblock %}
|
|||
|
|
|
|||
|
|
{% block stepper %}
|
|||
|
|
<div class="bg-slate-900/60 border-b border-slate-800">
|
|||
|
|
<div class="max-w-6xl mx-auto px-4 py-3">
|
|||
|
|
<div class="flex items-center gap-1 overflow-x-auto">
|
|||
|
|
{% set step_names = ["Auth", "Opret Bruger", "Tilslut Bank", "Konti", "Transaktioner", "Events"] %}
|
|||
|
|
{% for i in range(1, 7) %}
|
|||
|
|
<a href="/demo/step/{{ i }}"
|
|||
|
|
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm whitespace-nowrap transition
|
|||
|
|
{% if i == 6 %}bg-violet-600 text-white font-semibold
|
|||
|
|
{% elif i < 6 %}text-slate-300 hover:text-white
|
|||
|
|
{% else %}text-slate-600 hover:text-slate-400{% endif %}">
|
|||
|
|
<span class="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center
|
|||
|
|
{% if i < 6 %}bg-slate-700 text-slate-300
|
|||
|
|
{% elif i == 6 %}bg-violet-500 text-white
|
|||
|
|
{% else %}bg-slate-800 text-slate-600{% endif %}">{{ i }}</span>
|
|||
|
|
{{ step_names[i-1] }}
|
|||
|
|
</a>
|
|||
|
|
{% if i < 6 %}
|
|||
|
|
<span class="text-slate-700">›</span>
|
|||
|
|
{% endif %}
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{% endblock %}
|
|||
|
|
|
|||
|
|
{% block content %}
|
|||
|
|
<div class="mb-6">
|
|||
|
|
<div class="flex items-center gap-2 mb-1">
|
|||
|
|
<span class="w-8 h-8 rounded-full bg-violet-600 text-white text-sm font-bold flex items-center justify-center">6</span>
|
|||
|
|
<div>
|
|||
|
|
<h2 class="text-xl font-bold text-white">Events v2</h2>
|
|||
|
|
<p class="text-slate-400 text-sm">Real-time Event Feed</p>
|
|||
|
|
</div>
|
|||
|
|
<span class="ml-2 text-xs px-2 py-0.5 rounded-full font-mono font-semibold bg-violet-900/50 text-violet-300 border border-violet-700/40">v2 ✦</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="text-slate-400 text-sm mt-2 max-w-2xl">
|
|||
|
|
Tink Events v2 giver real-time notifikationer når transaktioner bogføres.
|
|||
|
|
Kombineret med webhooks kan din applikation reagere på bankbevægelser øjeblikkeligt.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{% if error %}
|
|||
|
|
<div class="bg-red-950/50 border border-red-800/50 rounded-xl p-5 mb-6">
|
|||
|
|
<pre class="text-red-400 text-sm font-mono whitespace-pre-wrap">{{ error }}</pre>
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
|
|||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|||
|
|
|
|||
|
|
<!-- Booked transactions events -->
|
|||
|
|
<div class="space-y-3">
|
|||
|
|
<div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
|
|||
|
|
<div class="px-4 py-3 border-b border-slate-800">
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<span class="text-sm font-semibold text-white">Bogførte transaktioner</span>
|
|||
|
|
<code class="block text-xs text-emerald-400 font-mono mt-0.5">GET /events/v2/account-booked-transactions</code>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-xs px-2 py-0.5 rounded-full bg-violet-900/50 text-violet-300 border border-violet-700/40 font-mono">v2</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- curl -->
|
|||
|
|
<div class="px-4 py-3 border-b border-slate-800 bg-slate-950/40">
|
|||
|
|
<div class="flex items-center justify-between mb-2">
|
|||
|
|
<span class="text-xs text-slate-500 uppercase tracking-wider">cURL</span>
|
|||
|
|
<button onclick="copyToClipboard('curl-booked')"
|
|||
|
|
class="text-xs text-slate-400 hover:text-white transition px-2 py-1 rounded bg-slate-800">Kopier</button>
|
|||
|
|
</div>
|
|||
|
|
<pre id="curl-booked" class="text-xs text-amber-300 font-mono whitespace-pre-wrap">{{ curl_booked }}</pre>
|
|||
|
|
</div>
|
|||
|
|
<!-- response -->
|
|||
|
|
<div class="p-4 max-h-96 overflow-y-auto">
|
|||
|
|
{% if result_booked %}
|
|||
|
|
{% if is_demo %}<p class="text-xs text-amber-400/70 mb-2 font-semibold">⚠ Sample Data</p>{% endif %}
|
|||
|
|
<pre class="raw-json">{{ result_booked | tojson(indent=2) }}</pre>
|
|||
|
|
{% else %}
|
|||
|
|
<p class="text-slate-500 text-sm text-center py-6">Ingen data — tilslut bank i Step 3 først.</p>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- All transaction events -->
|
|||
|
|
<div class="space-y-3">
|
|||
|
|
<div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
|
|||
|
|
<div class="px-4 py-3 border-b border-slate-800">
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<span class="text-sm font-semibold text-white">Alle transaktionshændelser</span>
|
|||
|
|
<code class="block text-xs text-emerald-400 font-mono mt-0.5">GET /events/v2/account-transactions</code>
|
|||
|
|
</div>
|
|||
|
|
<span class="text-xs px-2 py-0.5 rounded-full bg-violet-900/50 text-violet-300 border border-violet-700/40 font-mono">v2</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- curl -->
|
|||
|
|
<div class="px-4 py-3 border-b border-slate-800 bg-slate-950/40">
|
|||
|
|
<div class="flex items-center justify-between mb-2">
|
|||
|
|
<span class="text-xs text-slate-500 uppercase tracking-wider">cURL</span>
|
|||
|
|
<button onclick="copyToClipboard('curl-all')"
|
|||
|
|
class="text-xs text-slate-400 hover:text-white transition px-2 py-1 rounded bg-slate-800">Kopier</button>
|
|||
|
|
</div>
|
|||
|
|
<pre id="curl-all" class="text-xs text-amber-300 font-mono whitespace-pre-wrap">{{ curl_all }}</pre>
|
|||
|
|
</div>
|
|||
|
|
<!-- response -->
|
|||
|
|
<div class="p-4 max-h-96 overflow-y-auto">
|
|||
|
|
{% if result_all %}
|
|||
|
|
{% if is_demo %}<p class="text-xs text-amber-400/70 mb-2 font-semibold">⚠ Sample Data</p>{% endif %}
|
|||
|
|
<pre class="raw-json">{{ result_all | tojson(indent=2) }}</pre>
|
|||
|
|
{% else %}
|
|||
|
|
<p class="text-slate-500 text-sm text-center py-6">Ingen data — tilslut bank i Step 3 først.</p>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Webhook info box -->
|
|||
|
|
<div class="mt-6 bg-slate-900 border border-slate-800 rounded-xl p-5">
|
|||
|
|
<h3 class="text-white font-semibold mb-2 flex items-center gap-2">
|
|||
|
|
<svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
|
|||
|
|
Webhooks
|
|||
|
|
</h3>
|
|||
|
|
<p class="text-slate-400 text-sm mb-3">
|
|||
|
|
Konfigurer en webhook i Tink Console til at poste events til <code class="text-violet-300">/webhooks/tink</code> på dette endpoint.
|
|||
|
|
Events sendes i real-time når transaktioner opdateres.
|
|||
|
|
</p>
|
|||
|
|
<div class="bg-slate-950 rounded-lg p-3">
|
|||
|
|
<code class="text-xs text-emerald-400 font-mono">POST {{ app_base_url }}/webhooks/tink</code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Final CTA -->
|
|||
|
|
<div class="mt-8 bg-gradient-to-br from-violet-900/30 to-indigo-900/20 border border-violet-700/30 rounded-2xl p-8 text-center">
|
|||
|
|
<h3 class="text-2xl font-bold text-white mb-2">Det var hele flowet 🎉</h3>
|
|||
|
|
<p class="text-slate-400 mb-6 max-w-lg mx-auto">
|
|||
|
|
Fra brugeroprettelse til live transaktioner og events — alt via Tink v2 API.
|
|||
|
|
Klar til at integrere i MoneyCapp.
|
|||
|
|
</p>
|
|||
|
|
<div class="flex gap-3 justify-center">
|
|||
|
|
<a href="/" class="px-5 py-2.5 border border-slate-600 text-slate-300 hover:text-white hover:border-slate-400 rounded-xl text-sm transition">Kør demo igen</a>
|
|||
|
|
<a href="https://docs.tink.com" target="_blank"
|
|||
|
|
class="px-5 py-2.5 bg-violet-600 hover:bg-violet-500 text-white rounded-xl text-sm font-semibold transition">
|
|||
|
|
Tink Docs →
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Navigation -->
|
|||
|
|
<div class="mt-4 flex justify-start">
|
|||
|
|
<a href="/demo/step/5"
|
|||
|
|
class="px-4 py-2.5 border border-slate-700 text-slate-300 hover:text-white hover:border-slate-500 rounded-xl text-sm transition">
|
|||
|
|
← Step 5
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
{% endblock %}
|