Cómo integrar pagos Fiat en tu plataforma Web3

Aprende los fundamentos para conectar rampas de acceso fiat a tus DApps utilizando nuestra API.

Paso 1: Autenticación con la API

Antes de poder interactuar con Bridflow, necesitas autenticar tus llamadas a la API usando el SDK o incluyendo tu clave de API en las cabeceras. En este ejemplo, instalaremos y configuraremos el SDK de Node.js.

npm install @bridflow/node-sdk

Luego, inicializa el cliente con tu clave secreta. Asegúrate de nunca exponer tu API_SECRET en el frontend.

import { Bridflow } from '@bridflow/node-sdk';

const bridflow = new Bridflow({
    apiKey: process.env.BRIDFLOW_API_KEY,
});

Paso 2: Crear intención de pago

Cuando tu usuario esté listo para pagar en el carrito, haz una solicitud a tu backend para generar una intención de pago (PaymentIntent). Esta intención bloquea la cantidad y proporciona un client_secret al frontend para completar el flujo invulnerable a manipulaciones del lado del cliente.

const paymentIntent = await bridflow.payments.createIntent({
    amount: 15000, // 150.00 EUR expresado en céntimos
    currency: 'EUR',
    accepted_cryptos: ['USDC'],
    settlement_currency: 'EUR',
    metadata: { order_id: 'ORD-8910' }
});

res.json({ clientSecret: paymentIntent.client_secret });

Paso 3: Renderizar Checkout en React

En el lado del cliente (frontend), utiliza el SDK de React para mostrar el componente de pago. El cajero interactivo se encarga de mostrar la dirección, el código QR y detectar la transacción en la blockchain automáticamente.

import { CryptoCheckout, Elements } from '@bridflow/react-crypto';

export default function CheckoutPage({ clientSecret }) {
    return (
        <Elements options={ { clientSecret } }>
            <CryptoCheckout 
                onSuccess={ () => console.log('¡Pago recibido!') }
            />
        </Elements>
    );
}

Paso 4: Webhooks (Recomendado)

Para garantizar que procesas el pedido correctamente de forma asíncrona, te recomendamos encarecidamente configurar un endpoint para recibir webhooks de Bridflow. Escucha el evento payment_intent.succeeded.

app.post('/webhook', express.raw({type: 'application/json'}), (req, res) => {
    const signature = req.headers['bridflow-signature'];
    let event;

    try {
        event = bridflow.webhooks.constructEvent(
            req.body, 
            signature, 
            process.env.WEBHOOK_SECRET
        );
    } catch (err) {
        return res.status(400).send(`Webhook Error: ${err.message}`);
    }

    if (event.type === 'payment_intent.succeeded') {
        // Cumple el pedido, por ejemplo actualiza la BBDD
        fulfillOrder(event.data.object);
    }

    res.json({received: true});
});

¡Y eso es todo! Has habilitado pagos en USDC en tu plataforma que te llegarán inmediatamente convertidos a Euros, sin tener exposición a la volatilidad de las criptomonedas.