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>
Configuration Parameters
All parameters are optional except for containerId. The widget will use default values for any parameters not explicitly provided.
Parameter
Type
Required
Description
containerId
string
Yes
ID of the HTML element where the widget will be rendered
language
string
No
Language for the widget (e.g., 'en', 'es'). If not specified or set to 'auto', will use browser default
cryptoCurrency
string
No
The default cryptocurrency to select (e.g., 'BTC')
fiatCurrency
string
No
The default fiat currency to select (e.g., 'USD', 'EUR'). If not specified or set to 'auto', will detect user's region
logoUrl
string
No
URL to a custom logo image to display at the top of the widget
backgroundColor
string
No
Background color for the widget (HEX without #)
buttonColor
string
No
Color for buttons (HEX without #)
borderRadius
number
No
Widget border radius (in pixels)
borderWithShadow
boolean
No
Whether to show a shadow around the widget border
theme
string
No
The theme for the widget ('light', 'dark', or 'auto'). If set to 'auto', it will follow the user's system settings
iframeWidth
number
No
Width of the iframe (default: 416px)
iframeHeight
number
No
Height of the iframe (default: 510px)
paymentIntentId
string
No
Optional payment intent ID to initialize the widget with
referral
string
No
Referral code or ID for tracking and attribution purposes. This allows you to identify transactions originating from your integration
Widget Controller Methods
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);
