You can set the referral token by passing the ref query parameter. To see your referral token, login to your Bitrefill account and return to this page.
You can set the payment methods that are available to the user by passing the paymentMethods query parameter. The value should be a comma separated list. The available payment methods are: bitcoin, dash, dogecoin, eth_base, ethereum, lifi, lightning, litecoin, solana, ton, usdc_arbitrum, usdc_base, usdc_erc20, usdc_polygon, usdc_solana, usdt_arbitrum, usdt_bsc, usdt_erc20, usdt_polygon, usdt_ton, usdt_trc20
You can set the theme by passing the theme query parameter. The available themes are: auto, light, dark, crimson, aquamarine, retro. The default theme is auto. For more customization options see the Custom Styles query parameter.
You can set the language by passing the hl query parameter. The available languages are: en, ru, fr, es, de, it, nl, pt, vi, ko, ja, zh-Hans, pl, uk, tr. The default language is determined by the user's browser.
const languages = [
'en', // English
'ru', // Russian
'fr', // French
'es', // Spanish
'de', // German
'it', // Italian
'nl', // Dutch
'pt', // Portuguese
'vi', // Vietnamese
'ko', // Korean
'ja', // Japanese
'zh-Hans', // Chinese Simplified
'pl', // Polish
'uk', // Ukrainian
'tr', // Turkish
];
const language = languages[0];
const embedUrl = `https://embed.bitrefill.com/?hl=${language}`;
console.log(embedUrl);
// -> https://embed.bitrefill.com/?hl=en
You can set the company name by passing the utm_source query parameter. The purpose of this parameter is for analytics.
const utmSource = 'bitrefill'; // your company or wallet name
const embedUrl = `https://embed.bitrefill.com/?utm_source=${utmSource}`;
console.log(embedUrl);
// -> https://embed.bitrefill.com/?utm_source=bitrefill
You can set the user's email address by passing the email query parameter. This allows us to skip the email step in the checkout.
const email = getUserEmail(); // your code to get the user's email
const embedUrl = `https://embed.bitrefill.com/?email=${email}`;
console.log(embedUrl);
// -> https://embed.bitrefill.com/?email=example%40example.com
You can set whether or not to show the payment info by passing the showPaymentInfo query parameter. The default value is true. When you set this to false the user will not see the payment info step in the checkout, make sure you check out and implement the payment_intent event. See the section for more information.
If you are using the paymentIntent event and redirect the user to their wallet to pay we have a ?paymentPending=true param which is sometimes necessary if the browser session closes when the user leaves to pay the transaction in their wallet.
The Bitrefill Widget provides a flexible way to customize the appearance of your embeds through a feature called customStyles. This feature allows you to pass CSS variables and their corresponding values to the embed as a URL parameter.
We recommend editing the semantic variables below. For deeper control, you can also override the base color primitives (e.g. --gray-100, --deep-green-300) that these reference.
To employ customStyles, you are required to pass an object where the key corresponds to the CSS variable and the value represents the CSS value. This object needs to be converted into a string using JSON.stringify(), and subsequently, the resulting string should be processed through encodeURIComponent() to guarantee its safe inclusion within the URL.
The customStyles parameter should be appended to the embed URL as follows:
const customStyles = {
"--white": "#fff",
// See below for a full list of valid and editable css variables
};
const embedUrl =
`https://embed.bitrefill.com?customStyles=${
encodeURIComponent(
JSON.stringify(customStyles)
)
}`;
