Embed the Finrock Payment Widget

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

Faster Time to Accept

Start accepting crypto payments in minutes, not weeks. Drop in a single script tag and a container element and you are live.

Simple Integration

No complex backend logic required. The widget communicates directly with Finrock’s infrastructure on your behalf.

Customisable Styling

Pre-fill fields like asset, amount, and payer details to tailor the experience for each customer session.

Built-in Security

The widget handles all sensitive payment data in compliance with Finrock’s security model, reducing your compliance surface area.

Integration Steps

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. 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Checkout — Pay with Crypto</title>
</head>
<body>

  <h1>Complete Your Payment</h1>

  <!-- Widget renders inside this container -->
  <div id="finrock-widget"></div>

  <!-- Load the Finrock widget script -->
  <script src="https://finrock.io/widget/widget.js"></script>

  <script>
    loadWidget({
      widget_id: "XXXXXXXXXXXXX",
      fiat_amount: 99.00,
      crypto_asset: "USDT_TRX",
      payer_email: "customer@example.com",
      desc: "Order #ORD-20241126-001"
    }).then(function(result) {
      // Payment completed — redirect or show confirmation
      console.log("Payment result:", result);
      window.location.href = "/order/confirmed";
    }, function(error) {
      // Payment failed or was cancelled
      console.error("Payment error:", error);
    });
  </script>

</body>
</html>

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.

Get Started

Core Concepts

Guides

Platform Reference

Embed the Finrock Payment Widget

Benefits

Faster Time to Accept

Simple Integration

Customisable Styling

Built-in Security

Integration Steps

Customisation Options

Complete HTML Example

​Benefits

Faster Time to Accept

Simple Integration

Customisable Styling

Built-in Security

​Integration Steps

​Customisation Options

​Complete HTML Example

Benefits

Integration Steps

Customisation Options

Complete HTML Example