# Mercuryo Widget — Partner Integration Guide Mercuryo Widget is a ready-made On-Ramp and Off-Ramp solution. Your users can buy and sell 50+ cryptocurrencies across 40+ fiat currencies — paying with Visa, Mastercard, Apple Pay, Google Pay, or local alternative payment methods (APMs) — all within a Mercuryo-hosted interface that can be embedded directly into your product. KYC is handled by Mercuryo via SumSub, with a light-KYC option (no documents required) available for transactions up to €699. Themes and colors can be fully customized via Figma. ## What You Can Build * **On-Ramp (Buy)** — let users purchase crypto with a card, Apple Pay, Google Pay, or local APMs. * **Off-Ramp (Sell)** — let users sell crypto and receive fiat to their card (EUR and USD). * **Spend Card** — let users issue a virtual EUR Mastercard, fund it with crypto, and use it for payments worldwide. > **Note:** Off-Ramp and Spend Card are disabled by default. Contact your integration manager to enable them for your widget. ## Integration Methods | Method | Description | |---|---| | [Redirect](./integration.md#redirect-integration) | A link opens the widget in a new tab or as a full-page redirect. The simplest setup — no embedding required. | | [iFrame](./integration.md#iframe-integration) | The widget is embedded directly on your page inside an iFrame. Users complete the transaction without navigating away. | | [Mobile (iOS / Android)](./integration.md#mobile-integration) | The widget is loaded inside a WebView in your native iOS or Android app. | ## Key URLs | Service | Production | Sandbox | |---|---|---| | Dashboard | `https://dashboard.mercuryo.io` | `https://sandbox-dashboard.mrcr.io` | | Widget (Redirect / Custom Tab) | `https://exchange.mercuryo.io` | `https://sandbox-exchange.mrcr.io` | | Widget (for iFrame embedding) | `https://widget.mercuryo.io` | `https://sandbox-widget.mrcr.io` | | API | `https://api.mercuryo.io` | `https://sandbox-api.mrcr.io` | ## Quick Links * [Quick Start](./quick-start.md) — go live in 4 steps * [Sandbox & Testing](./sandbox.md) — test without real funds * [Widget Parameters](./widget-parameters.md) — full URL parameter reference * [Callbacks & Webhooks](./callbacks.md) — receive transaction status updates ## Support Contact your integration manager or email [sales@mercuryo.io](mailto:sales@mercuryo.io). * [Help Center for Users](https://help.mercuryo.io/hc/en-gb) * [Help Center for Merchants](https://b2bhelp.mercuryo.io/hc/en-gb) # Quick Start Get your first Mercuryo Widget integration live in 4 steps. ## Prerequisites Before starting, make sure you have: * Access to the [Mercuryo Dashboard](https://dashboard.mercuryo.io) — contact your integration manager if you don't have credentials yet. * A domain or app that will host the widget. * A chosen integration method — **Redirect**, **iFrame**, or **Mobile**. See [Integration Methods](./integration.md) for the differences. ## Step 1 — Create a Widget 1. Sign in to the [Mercuryo Dashboard](https://dashboard.mercuryo.io). 2. Go to **Widgets** → **Add Widget**. 3. In the **Domain URL** field, the value depends on your integration method: * **Redirect:** enter `https://exchange.mercuryo.io` * **iFrame / Mobile:** enter your own domain (e.g., `https://yourdomain.com`) Leave no trailing slash or extra characters — a domain mismatch causes the `widget.mercuryo.io refused to connect` error. 4. Note your **Widget ID** — you'll need it in every widget URL. 5. Copy your **Secret** from the bottom of the widget page — needed for [signature generation](./security.md). ## Step 2 — Configure Callback URL 1. In the widget settings, fill in the **Callback URL** field with your server endpoint. 2. Copy the **Sign Key** — you'll use it to [verify incoming callbacks](./callbacks.md#callback-signature-verification). See the [Callback dashboard](https://dashboard.mercuryo.io/widgets/callbacks) to browse, resend, and send test callbacks. ## Step 3 — Build the Widget URL A minimal On-Ramp widget URL looks like this: ``` https://exchange.mercuryo.io/?widget_id=YOUR_WIDGET_ID&address=USER_WALLET_ADDRESS&merchant_transaction_id=YOUR_TX_ID&signature=v2:GENERATED_SIGNATURE ``` * `widget_id` — your Widget ID from the Dashboard. * `address` — the user's cryptocurrency wallet address for receiving purchased crypto. * `merchant_transaction_id` — your internal transaction ID for tracking. * `signature` — security signature. See [Signature Generation](./security.md). You can pre-fill many more parameters (currency, amount, payment method, etc.). See the full [Widget Parameters](./widget-parameters.md) reference. ## Step 4 — Handle Transaction Updates Choose how to track transaction status changes: | Method | Description | |---|---| | **Callbacks** | Mercuryo sends POST requests to your callback URL on every status change | | **API Polling** | Poll `GET /v1.6/sdk-partner/transactions` to check status | | **Dashboard** | View transactions manually in the Mercuryo Dashboard | See [Callbacks & Webhooks](./callbacks.md) for setup and payload details. --- > **Note:** Test with the [Sandbox environment](./sandbox.md) before going to production. You can try all flows without using real funds. # Sandbox & Testing Before going to production, test your integration in the Sandbox environment. All flows work identically to production, but no real funds are involved. ## Accessing Sandbox 1. Contact your integration manager to receive Sandbox credentials. 2. Request whitelisting of your IP addresses for Sandbox usage. 3. Use the Sandbox endpoints below instead of production ones. ## Sandbox URLs | Service | URL | |---|---| | Dashboard | `https://sandbox-dashboard.mrcr.io` | | Widget (Redirect / Custom Tab) | `https://sandbox-exchange.mrcr.io` | | Widget (for iFrame embedding) | `https://sandbox-widget.mrcr.io` | | API Host | `https://sandbox-api.mrcr.io` | ## Testnet Addresses Use these addresses when testing crypto transactions: | Network | Address | Supported Assets | |---|---|---| | [BTC Testnet](https://tbtc.bitaps.com/) | `msBE6aCaAesegu4VzbQW3L5xWBL8vi15Q7` | Bitcoin | | [ETH Sepolia](https://sepolia.etherscan.io/) | `0xbBC8f6B710359dbcdF02f9eb50Ade391890A6021` | Ethereum (ETH), USDT | ## Test Payment Cards ### Card 1 — Basic * **Number:** `4444 4444 4444 3333` * **Expiry:** any future date * **CVV:** `123` * **Cardholder name:** any name + surname ### Card 2 — Success / Fail * **Number:** `5555 4444 3333 1111` * **Expiry:** any future date * **CVV:** `123` for success, `555` for failure * **Cardholder name:** any name + surname ## KYC in Sandbox The Sandbox environment requires manually approving KYC reviews. If you don't want to wait for manual confirmation, use SumSub's test documents that have automatic processing: [SumSub Verification Document Templates](https://docs.sumsub.com/docs/verification-document-templates) --- ## Production URLs Once testing is complete, switch to production endpoints: | Service | URL | |---|---| | Dashboard | `https://dashboard.mercuryo.io` | | Widget | `https://exchange.mercuryo.io` | | Widget (iFrame embed) | `https://widget.mercuryo.io` | | API Host | `https://api.mercuryo.io` | ## Migration Checklist Before going live, make sure you've completed the following: * [ ] Updated all URLs to production endpoints * [ ] Obtained production credentials from the Dashboard * [ ] Updated API keys to production keys * [ ] Configured the callback URL in the production widget settings * [ ] Tested the integration with a small amount in production before full launch # Integration Methods The Mercuryo Widget supports three integration methods. Choose the one that fits your platform best. ## Redirect Integration The simplest method: redirect users to the widget URL. No embedding required. ```javascript const widgetUrl = `https://exchange.mercuryo.io/?widget_id=YOUR_WIDGET_ID`; window.location.href = widgetUrl; ``` **When to use:** Web applications where it's acceptable for users to leave the page. Lowest implementation effort. > In Sandbox, use `https://sandbox-exchange.mrcr.io` instead. --- ## iFrame Integration Embed the widget directly in your page using Mercuryo's JavaScript SDK. Users stay on your site. ### Setup 1. Add the widget container to your page `
`: ```html ``` 2. Add the SDK script before ``: ```html ``` 3. Initialize the widget: ```javascript mercuryoWidget.run({ widgetId: 'YOUR_WIDGET_ID', host: document.getElementById('mercuryo-widget'), address: 'USER_WALLET_ADDRESS', merchantTransactionId: 'YOUR_TX_ID', signature: 'v2:GENERATED_SIGNATURE' }); ``` ### Parameter Names in the JS SDK Multi-word URL parameters use **camelCase** in `mercuryoWidget.run()`. Single-word parameters are identical in both formats. | URL parameter | JS SDK property | |---|---| | `widget_id` | `widgetId` | | `fiat_currency` | `fiatCurrency` | | `merchant_transaction_id` | `merchantTransactionId` | | `fix_payment_method` | `fixPaymentMethod` | See [Widget Parameters](./widget-parameters.md) for the full list with both URL and JS SDK formats. **Example — pre-authenticated user with pre-filled currency:** ```javascript mercuryoWidget.run({ widgetId: 'YOUR_WIDGET_ID', host: document.getElementById('mercuryo-widget'), address: 'USER_WALLET_ADDRESS', merchantTransactionId: 'YOUR_TX_ID', signature: 'v2:GENERATED_SIGNATURE', // Pre-authenticate the user (see User Pre-Authorization) initTokenType: 'sdk_partner_authorization', initToken: '0a25dd714163a9006', // Pre-fill and lock currency fiatCurrency: 'EUR', currency: 'USDT', fixFiatCurrency: true }); ``` ### JS SDK Callbacks The JS SDK exposes callback properties in `mercuryoWidget.run()` that fire on widget events. Use these to react to transaction status changes, user actions, and widget lifecycle. ```javascript mercuryoWidget.run({ widgetId: 'YOUR_WIDGET_ID', host: document.getElementById('mercuryo-widget'), address: 'USER_WALLET_ADDRESS', merchantTransactionId: 'YOUR_TX_ID', signature: 'v2:GENERATED_SIGNATURE', onLoad: () => { console.log('Widget is loading'); }, onReady: () => { console.log('Widget is ready'); }, onStatusChange: (data) => { console.log('Status changed:', data); // { status, merchant_transaction_id, amount, currency, network, // fiat_amount, fiat_currency, payment_method } }, onPaymentFinished: (data) => { console.log('Payment finished:', data); // { payment_method } }, onSellTransferEnabled: (data) => { console.log('Sell address ready:', data); // { id, amount, currency, network, address, flow_id } }, onUserLoggedIn: (data) => { console.log('User logged in:', data); // { token } }, onUserLoggedOut: () => { console.log('User logged out'); } }); ``` | Callback | Fires when | Payload | |---|---|---| | `onLoad` | Widget starts loading | — | | `onReady` | Widget is fully loaded and interactive | — | | `onStatusChange` | Transaction status changes (fires on every change) | `{ status, merchant_transaction_id, amount, currency, network, fiat_amount, fiat_currency, payment_method }` | | `onPaymentFinished` | On-Ramp: fiat payment processed and KYC check (if any) completed — regardless of outcome | `{ payment_method }` | | `onSellTransferEnabled` | Off-Ramp: user has selected a sell method and the crypto deposit address is shown | `{ id, amount, currency, network, address, flow_id }` | | `onUserLoggedIn` | User successfully signed in to the widget | `{ token }` | | `onUserLoggedOut` | User signed out of the widget | — | ### iFrame HTML Alternative If you prefer a plain `