Display USDT Component

This component enables customers to connect his web3 wallet to pay. Customize the attributes as needed to integrate with your checkout flow.

<!-- Include Component JS -->
<script src="https://blockonomics.co/js/web3-payment.js"></script>

<!-- Use the Component in your HTML -->
<web3-payment
    id="web3_payment"
    order_amount="10"
    receive_address="USDT_RECEIVE_ADDRESS"
    testnet="0"
></web3-payment>

#web3-payment {
    width: 300px;
    margin: auto;
}
#web3-payment button {
    width: 100%;
    height: 32px;
    background-color: blue;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    border: none;
}

Attributes

order_amount: The amount of USDT to pay
receive_address: Your USDT receiving address
testnet: The network to use (0 = mainnet, 1 = sepolia testnet)

Screenshot of web3 USDT component on checkout page

Handle Payments

After a payment is submitted, onTxnSubmitted is triggered.

<!-- Handle the transaction submission -->
<script>
    const web3_payment = document.getElementById('web3_payment');
    web3_payment.onTxnSubmitted = handleTransaction;

    function handleTransaction(result) {
        const crypto = result.crypto;
        const txhash = result.txhash;

        // Send txhash + crypto to your backend
        // Replace with your own API call
        fetch('/api/payments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ txhash, crypto })
         })
         .then(response => response.json())
         .then(data => console.log('Payment processed:', data))
         .catch(error => console.error('Error:', error));
    }
</script>

onTxnSubmitted receives the txhash and crypto from the web3 component. These should be submitted to your backend, where the txhash is stored in your database and submitted to Blockonomics for monitoring. Blockonomics will then notify your backend when the payment is confirmed so you can update the order status.