Tu cotizador, en cualquier sitio.

<!-- En cualquier sitio HTML -->
<script src="https://cord.flouvia.com/embed.js" async></script>
<div data-cord-cotizador data-token="abc123"></div>

// npm install @flouviahq/elements
import { CordCotizador } from '@flouviahq/elements/react';

export function Cotizacion({ token }) {
  return (
    <CordCotizador
      token={token}
      onApproved={(d) => console.log('Aprobada', d.folio)}
      onPay={() => location.assign('/gracias')}
    />
  );
}

'use client';
// npm install @flouviahq/elements
import { CordCotizador } from '@flouviahq/elements/react';

export default function Cotizacion() {
  return (
    <CordCotizador
      token="abc123"
      onApproved={(d) => console.log('Aprobada', d.folio)}
    />
  );
}

---
// npm install @flouviahq/elements
const { token } = Astro.props;
---
<cord-cotizador token={token}></cord-cotizador>

<script>
  import '@flouviahq/elements'; // registra <cord-cotizador>
</script>

<script setup>
// npm install @flouviahq/elements
import '@flouviahq/elements'; // registra <cord-cotizador>
defineProps({ token: String });
</script>

<template>
  <cord-cotizador :token="token" @approved="onApproved" />
</template>

<!-- Pega esto en un bloque "HTML personalizado" -->
<script src="https://cord.flouvia.com/embed.js" async></script>
<div data-cord-cotizador data-token="abc123"></div>