Prerequisites
Get your Merchant ID
Log in to your Fivo Dashboard and navigate to Integration. Copy your Merchant ID.
Your Merchant ID looks like this:
969c4442-5741-4624-8305-427391683190Add the widget to your site
Add the following script tag to your HTML. Replace YOUR_MERCHANT_ID with your actual Merchant ID.
<!-- Fivo Payment Widget -->
<div id="fivo-widget-root"></div>
<script
src="https://widget.fivo.finance/widget.js"
data-merchant-id="YOUR_MERCHANT_ID"
data-amount="29.99"
data-currency="USDC">
</script>Fixed vs Variable Amount
data-amount attribute. See Widget Integration for more details.Test a payment
Fivo processes real payments on mainnet. Make sure you have USDC in your wallet.
Get USDC
Purchase USDC from any exchange or use a fiat on-ramp. For testing, you can use Circle's Testnet Faucet.
Click "Pay with Fivo"
On your site, click the Fivo payment button to open the widget.
Connect your wallet
Connect MetaMask or any WalletConnect-compatible wallet.
Complete the payment
Select a chain with available balance and confirm the transaction.
View in dashboard
After the payment completes, you'll see it in your Transactions page. You'll also receive an email confirmation.
You've successfully integrated Fivo. Your customers can now pay you in USDC from any supported blockchain.
Full Example
Here's a complete HTML page with Fivo integrated:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Checkout - My Store</title>
7 <style>
8 body {
9 font-family: system-ui, sans-serif;
10 max-width: 600px;
11 margin: 50px auto;
12 padding: 20px;
13 }
14 .product {
15 border: 1px solid #ddd;
16 padding: 20px;
17 border-radius: 8px;
18 margin-bottom: 20px;
19 }
20 .price {
21 font-size: 24px;
22 font-weight: bold;
23 color: #2563eb;
24 }
25 </style>
26</head>
27<body>
28 <div class="product">
29 <h1>Premium Subscription</h1>
30 <p>Access to all features for 1 month</p>
31 <p class="price">$29.99 USDC</p>
32 </div>
33
34 <!-- Fivo Payment Widget -->
35 <div id="fivo-widget-root"></div>
36 <script
37 src="https://widget.fivo.finance/widget.js"
38 data-merchant-id="969c4442-5741-4624-8305-427391683190"
39 data-amount="29.99"
40 data-currency="USDC">
41 </script>
42</body>
43</html>