AhoraCrypto Web Widget is a developer integration to onboard global users from fiat to crypto and back, using credit cards, debit, and local payment methods.
Accept credit card, debit card or bank transfer
+30 cryptocurrencies and tokens supported
More than 162 countries and territories supported
Continuously adding new currencies, blockchains, digital assets and protocols
Installation
Using the JavaScript Widget
Include the script in your HTML page (at header section):
<script>
let widget = window.AhoraCrypto.renderWebwidget({
containerId: 'crypto-widget-container', // Only required parameter
language: 'en',
cryptoCurrency: 'btc',
fiatCurrency: 'usd'
});
</script>
Interact with the widget (e.g. set a wallet address):
<script>
...
// Wait for the widget to be ready before interacting with it
widget.onReady(() => {
widget.setWalletAddress('0x1234567890123456789012345678901234567890');
}
...
</script>
The renderWebwidget function returns a controller object that provides methods to interact with the widget:
Method
Description
Parameters
setWalletAddress
Sets a wallet address in the widget
walletAddress (string): The crypto wallet address to use
setPaymentIntentId
Updates the payment intent ID in the widget
paymentIntentId (string): The payment intent ID to use
sendSignedMessage
Sends a signed message to the widget
signature (string): The signed message
address (string): The address that signed the message
messageHash (string, optional): Hash of the original message
requestMessageToSign
Requests a message to sign from the widget
None
connectWeb3Wallet
Connects a Web3 wallet to the widget
provider (object): The Web3 provider (e.g., from MetaMask)
accountAddress (string): Current wallet address
chainId (number): Current blockchain network ID
onReady
Registers a callback function to be executed when the widget is fully loaded
callback (function): Function to execute when ready
ready
Returns a Promise that resolves when the widget is fully loaded
None
isReady
Returns whether the widget is fully loaded
None
Ready State Handling
It's important to wait for the widget to be fully loaded before interacting with it. There are three ways to do this:
1. Using the callback approach:
let widget = window.AhoraCrypto.renderWebwidget({
containerId: 'widget-container'
});
widget.onReady(() => {
console.log('Widget is now ready!');
widget.setWalletAddress('0x1234567890123456789012345678901234567890');
});
2. Using the Promise-based approach with async/await:
async function initWidget() {
const widget = window.AhoraCrypto.renderWebwidget({
containerId: 'widget-container'
});
// Wait for the widget to be ready
await widget.ready();
console.log('Widget is ready!');
widget.setWalletAddress('0x1234567890123456789012345678901234567890');
}
initWidget();
3. Checking the ready state:
const widget = window.AhoraCrypto.renderWebwidget({
containerId: 'widget-container'
});
// Poll the ready state (not recommended, use onReady or ready() instead)
const checkReady = setInterval(() => {
if (widget.isReady()) {
console.log('Widget is ready!');
widget.setWalletAddress('0x1234567890123456789012345678901234567890');
clearInterval(checkReady);
}
}, 100);
Examples
Example of using widget methods
// Initialize the widget and get the controller
let widget = window.AhoraCrypto.renderWebwidget({
containerId: 'widget-container',
// other parameters...
});
// Wait for the widget to be ready before interacting with it
widget.onReady(() => {
// Set a wallet address
widget.setWalletAddress('0x1234567890123456789012345678901234567890');
// Set a payment intent ID
widget.setPaymentIntentId('pi_3N5555555555555555555555');
});
Web3 Wallet Integration Example
// Initialize the widget
let widget = window.AhoraCrypto.renderWebwidget({
containerId: 'widget-container',
cryptoCurrency: 'eth'
});
// Connect to MetaMask or other Web3 wallet
async function connectWallet() {
if (window.ethereum) {
try {
// Request account access
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
const chainId = await window.ethereum.request({ method: 'eth_chainId' });
// Wait for the widget to be ready
await widget.ready();
// Connect the wallet to the widget
widget.connectWeb3Wallet(
window.ethereum, // Provider
accounts[0], // Current account address
parseInt(chainId, 16) // Current chain ID
);
console.log('Wallet connected:', accounts[0]);
} catch (error) {
console.error('Error connecting wallet:', error);
}
} else {
console.error('Web3 provider not found. Please install MetaMask or another wallet');
}
}
// Example function to sign a message
async function signMessage(message) {
if (window.ethereum) {
try {
const accounts = await window.ethereum.request({ method: 'eth_accounts' });
if (accounts.length === 0) {
alert('Please connect your wallet first');
return;
}
// Ensure widget is ready
await widget.ready();
// Get the message to sign from the widget
widget.requestMessageToSign();
// Set up listener for the message from the widget
window.addEventListener('message', async (event) => {
if (event.data && event.data.type === 'MESSAGE_TO_SIGN') {
const messageToSign = event.data.message || message;
// Sign the message with the wallet
const signature = await window.ethereum.request({
method: 'personal_sign',
params: [messageToSign, accounts[0]]
});
// Send the signed message back to the widget
widget.sendSignedMessage(signature, accounts[0], Web3.utils.keccak256(messageToSign));
}
}, { once: true }); // Only handle this once
} catch (error) {
console.error('Error signing message:', error);
}
}
}
// Attach the connect function to a button
document.getElementById('connect-wallet-btn').addEventListener('click', connectWallet);
