> ## Documentation Index > Fetch the complete documentation index at: https://apidocs.finrock.io/llms.txt > Use this file to discover all available pages before exploring further. # Embed the Finrock Payment Widget > Add a crypto payment checkout to your website in minutes using the Finrock payment widget — a pre-built JavaScript UI that handles the full payment flow. The Finrock Payment Widget is a pre-built JavaScript component that you embed directly in your website to accept cryptocurrency payments without building a custom payment UI from scratch. It handles the complete payment collection flow — including address display, amount calculation, and security of sensitive data — so you can focus on your core business rather than payment infrastructure. ## Benefits Start accepting crypto payments in minutes, not weeks. Drop in a single script tag and a container element and you are live. No complex backend logic required. The widget communicates directly with Finrock's infrastructure on your behalf. Pre-fill fields like asset, amount, and payer details to tailor the experience for each customer session. The widget handles all sensitive payment data in compliance with Finrock's security model, reducing your compliance surface area. ## Integration Steps ### Add the Widget Script Include the Finrock widget script on your payment page. Place it in the `` or at the end of `` — either location works: ```html theme={null} ``` ### Add the Container Element Add a `
` with the ID `finrock-widget` at the point in your page where you want the payment form to appear: ```html theme={null}
``` ### Initialise the Widget Call `loadWidget()` with your `widget_id`. The function returns a Promise that resolves with the payment result or rejects on error: ```javascript theme={null} let res = loadWidget({ widget_id: "XXXXXXXXXXXXX" }).then(res => { console.log(res); }, err => { console.error(err); }); ``` Replace `XXXXXXXXXXXXX` with the widget ID from your Finrock dashboard. Contact your account manager if you do not yet have a widget ID configured for your workspace. ### (Optional) Pre-fill Customisation Variables Pass additional configuration properties to `loadWidget()` to pre-fill fields and tailor the experience. This is especially useful when your frontend application already knows the payer's details or the transaction amount: ```javascript theme={null} loadWidget({ widget_id: "XXXXXXXXXXXXX", fiat_amount: 50.00, crypto_asset: "BTC", payer_name: "Jane Smith", payer_email: "jane@example.com", desc: "Invoice #INV-2024-0042" }).then(res => { console.log("Payment completed:", res); }, err => { console.error("Payment failed:", err); }); ``` ## Customisation Options All configuration properties are optional. If you omit them, the widget displays its default blank form and the customer fills in the details manually. | Variable | Type | Description | Example | | --------------- | ------- | ------------------------------------------------------------------------------ | -------------------- | | `fiat_amount` | decimal | Pre-fills the local currency value (e.g. USD 50.00) | `50.00` | | `crypto_amount` | decimal | Pre-fills the cryptocurrency amount (e.g. BTC 0.001) | `0.001` | | `crypto_asset` | string | Pre-selects the cryptocurrency asset | `BTC` | | `payer_name` | string | Pre-fills the sender's full name | `"Jane Smith"` | | `payer_email` | string | Pre-fills the sender's email address | `"jane@example.com"` | | `payer_mobile` | integer | Pre-fills the sender's mobile number | `447700900000` | | `desc` | string | Note to the merchant — use for invoice numbers, plan names, or item references | `"Invoice #42"` | Find the full list of accepted `crypto_asset` values at [finrock.io/assets](https://finrock.io/assets). Use the exact ticker string shown there (e.g. `BTC`, `ETH`, `USDT_TRX`) when pre-filling the `crypto_asset` field. ## Complete HTML Example The following snippet shows a minimal but fully functional integration you can drop into any HTML page: ```html theme={null} Checkout — Pay with Crypto

Complete Your Payment

``` The `widget_id` ties the widget to your Finrock workspace and routes payments to the correct sub-account. Never expose your API keys in the frontend — the widget only requires the public `widget_id`.