Widget Integration

<script async src="https://checkout.fivo.finance/v1/fivo.js"></script>

<!-- Product: $49.99 USDC -->
<fivo-button
  merchant-id="YOUR_MERCHANT_ID"
  amount="49.99"
  currency="USDC">
</fivo-button>

<script async src="https://checkout.fivo.finance/v1/fivo.js"></script>

<!-- Donation: customer chooses amount -->
<fivo-button
  merchant-id="YOUR_MERCHANT_ID"
  currency="USDC">
</fivo-button>

<fivo-button
  id="pay-btn"
  merchant-id="YOUR_MERCHANT_ID"
  amount="25.00"
  currency="USDC">
</fivo-button>

<script>
  const btn = document.getElementById('pay-btn');

  btn.addEventListener('fivo:payment-success', (e) => {
    console.log('TX hash:', e.detail.txHash);
    console.log('Amount:', e.detail.amount, e.detail.token);
    console.log('Chain ID:', e.detail.chainId);
    window.location.href = '/thank-you?tx=' + e.detail.txHash;
  });

  btn.addEventListener('fivo:payment-error', (e) => {
    console.error('Payment failed:', e.detail.error);
  });

  btn.addEventListener('fivo:payment-tracking', (e) => {
    // Only fires for cross-chain (CCTP) payments
    console.log('Step:', e.detail.step, 'Status:', e.detail.status);
  });
</script>

const response = await fetch(`https://api.fivo.finance/checkout/sessions`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': process.env.FIVO_API_KEY,
  },
  body: JSON.stringify({
    amount: '49.99',
    currency: 'USDC',
    return_url: 'https://yoursite.com/success',
    cancel_url: 'https://yoursite.com/cancel',
    metadata: { order_id: 'order_123' },
    expires_in: 1800,   // 30 minutes (default)
  }),
});

const { data } = await response.json();
// data.id  → "cs_live_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
// data.url → "https://checkout.fivo.finance?session=cs_live_..."
// data.expires_at → "2026-02-18T11:00:00.000Z"
// After payment, the customer is redirected to:
// https://yoursite.com/success?session_id=cs_live_...

// Express.js example
app.post('/create-checkout', async (req, res) => {
  const session = await createCheckoutSession(req.body);
  res.redirect(303, session.url);
});

// When the customer lands on your return_url
app.get('/success', async (req, res) => {
  const sessionId = req.query.session_id;

  const response = await fetch(
    `https://api.fivo.finance/checkout/sessions/${sessionId}`,
    { headers: { 'X-API-Key': process.env.FIVO_API_KEY } }
  );
  const { data } = await response.json();

  if (data.status === 'complete' && data.payment) {
    // Payment confirmed: fulfill the order
    console.log('Payment ID:', data.payment.id);
    console.log('TX Hash:', data.payment.tx_hash);
    console.log('Amount:', data.payment.amount, data.currency);
  } else {
    // Payment not yet confirmed: show a waiting state
    console.log('Session status:', data.status);
  }
});