Embeddable Calculator

Embeddable FinchPay Calculator

💻 Interactive Example

Please reach out to our dedicated team to acquire your unique partnerId and secret key.

How to use?

  1. Incorporate the provided CSS and JS bundles into your webpage.
  2. Insert a div element with the id="finch-widget-container" at the desired location to display the widget.
  3. Execute the window.__initFinchCalc(config) function, ensuring that the config object includes partnerId.


ParameterDescriptionRequiredTypeDefault value
partnerIdYour partner ID provided for integration.Truestring
fromAmountFiat amount (ex: 1000)Falsestring / number200
fromAssetFiat currency (ex: EUR / USD)Falsestring
toAssetAsset ticker (ex: BTC / USDT)Falsestring
toAssetChainAsset chain / network (ex: undefined / ERC-20)Falsestring
getWalletAddressAsync function for pre-filling the wallet address. It takes an object with asset and chain parameters, and returns a promise that resolves to an object with wallet and sign properties. The sign property is generated using the HMAC-SHA256 algorithm with the wallet address and secret key. Example: {asset: "USDT", chain: "TRC-20"} or {asset: "BTC"}{wallet: "your_wallet_address", sign: "sign"}.Falsefunction
hideFeesSet to true to hide fees information in the widget.Falsebooleanfalse

Typescript Definition

declare global {
  interface IFinchWidgetOptions {
    partnerId: string;
    fromAmount?: number;
    fromAsset?: string;
    toAsset?: string;
    toAssetChain?: string;
    hideFees?: boolean;
    paymentMethodRoute?: string;
    getWalletAddress?: (props: {
      asset: string;
      chain?: string;
    }) => Promise<{ wallet: string; sign: string }>;
  interface Window {
    __initFinchCalc: (options: IFinchWidgetOptions) => void;


Plain HTML Integration

  1. Include the provided stylesheet within the <head> tag of your HTML page:
<link rel="stylesheet" href="" />
  1. Insert the initialization script before code from next step:
  function initFCalc() {
      partnerId: "your_partner_id",
  1. Incorporate the JS bundle within the <head> or <body> section of your website:
  1. Add an empty div element with id="finch-widget-container" within your webpage where you intend to display the calculator:
<div id="finch-widget-container"></div>


import Head from "next/head";
import Script from "next/script";
export default function PageWithWidget() {
  const handleLoad = () => {
      partnerId: "your_partner_id",
  return (
        <link rel="stylesheet" href="" />
      <div id="finch-widget-container" />

Pre-filled wallet flow

To enable the pre-filled wallet flow, you need to provide the getWalletAddress function in the 2 step. This function retrieves the wallet address and sign from an API endpoint (on your environment) and returns them as an object.

Here's an example implementation of the getWalletAddress function in JavaScript:

  async function getWalletAddress({ asset, chain }) {
    const res = await fetch(`your-endpoint?asset=${asset}&chain=${chain}`);
    const { wallet, sign } = await res.json();
    return { wallet, sign };
  function initFCalc() {
      partnerId: "your_partner_id",

In this example, the getWalletAddress function makes an asynchronous request to an API endpoint (your-api-domain/endpoint) with the provided asset and chain parameters. It expects the response to be in JSON format, containing the wallet and sign values. These values are then returned as an object.

Additionally, here's a minimal example demonstrating how to generate a sign using Node.js on a backend:

const CryptoJS = require("crypto-js");
const getSign = (walletAddress, secret) => {
  return CryptoJS.HmacSHA256(walletAddress, secret);
const walletAddress = "your_wallet_address";
const secret = "your_secret";
getSign(walletAddress, secret);


  1. Mini Widget Version: To display a compact version of the widget, include hideFees: true in the configuration object to hide fee details.

  2. CSS. The widget comes with a default theme. You have the flexibility to override the default CSS variables and achieve a seamless UI integration with your website. Below are the CSS variables you can modify.

css variables
#finch-widget-container {
  --finch-spacing1: 2px;
  --finch-spacing2: 4px;
  --finch-spacing3: 8px;
  --finch-spacing4: 12px;
  --finch-spacing5: 16px;
  --finch-spacing6: 24px;
  --finch-spacing7: 28px;
  --finch-font-size-4: 16px;
  --finch-font-size-3: 14px;
  --finch-font-size-2: 12px;
  --finch-black1: #000;
  --finch-dark1: #111;
  --finch-gray1: #4d5254;
  --finch-gray3: #8c9497;
  --finch-red1: #e45a5a;
  --finch-container-background-white: #fff;
  --finch-container-border-radius: 16px;
  --finch-container-padding: 25px;
  --finch-input-label-color: #60676a;
  --finch-input-label-font-size: 12px;
  --finch-input-background: #f0f6f8;
  --finch-input-input-font-size: 16px;
  --finch-input-input-height: 22px;
  --finch-input-border-radius: 6px;
  --finch-input-border-width: 2px;
  --finch-input-padding-top: 4px;
  --finch-input-padding-left: 16px;
  --finch-input-padding-bottom: 4px;
  --finch-input-padding-right: 16px;
  --finch-input-input-border-radius: 6px;
  --finch-input-error-font-size: 14px;
  --finch-input-error-color: #fff;
  --finch-logo-width: 225px;
  --finch-logo-height: 45.75px;
  --finch-logo-src: url(;
  --finch-dd-option-bg: #fff;
  --finch-dd-option-bg-hovered: #f0f6f8;
  --finch-dd-border-color: #dfedf1;
  --finch-button-color-primary: #fff;
  --finch-button-bg-primary: #000;
  --finch-button-bg-hover-primary: #2b2b2b;
  --finch-button-bg-disabled-primary: #444444;
  --finch-button-font-size: 18px;
  --finch-button-font-weight: 600;
  --finch-button-border-radius: 50px;
  --finch-button-padding: 16px;
  --finch-button-font-size-sm: 14px;
  --finch-button-padding-sm: 8px 24px;
  --finch-button-font-weight-sm: 800;
  --finch-button-border-radius-sm: 16px;