# MoonPay Commerce — Full Documentation > MoonPay Commerce (formerly Helio) is a crypto payment infrastructure API that lets developers accept payments, deposits, and subscriptions on Solana, EVM chains (Ethereum, Polygon, Base), and Bitcoin. Create Pay Links, embed checkout widgets, run headless payment flows, and manage transactions programmatically. Important notes: - **API base URL:** Production: `https://api.hel.io/v1` | Devnet: `https://api.dev.hel.io/v1` - **Authentication:** Pass your public API key as a `publicKey` query parameter and your secret API key as a `Authorization: Bearer ` header. Partner integrations also require an `x-merchant-id` header. - **Dashboard:** Production: [moonpay.hel.io](https://moonpay.hel.io) | Devnet: [moonpay.dev.hel.io](https://moonpay.dev.hel.io) - **SDK packages** are published under the `@heliofi/*` namespace on npm. - **Supported blockchains:** Solana, Ethereum, Polygon, Base, Bitcoin, and more. - **Webhook verification:** All webhook payloads include an `X-Signature` header containing an HMAC-SHA256 hex digest of the request body, signed with your webhook's `sharedToken`. - **Error responses** return JSON: `{ "message": "...", "code": , "errorCode": "...", "errorType": "..." }`. - **Rate limiting** is enforced per IP. Specific endpoints (e.g. Pay Link creation) enforce stricter limits per API key. --- # Introduction Source: https://docs.hel.io/docs/introduction ## Welcome to MoonPay Commerce Accept crypto payments globally with ease. MoonPay Commerce integrates directly into your product, enabling customers to pay with assets they already hold while you avoid delays, chargebacks, and high fees. MPC Banner Docs 1 ## Start Building Choose how you want to get started: Create payment flows and accept crypto, no code required. Build a custom crypto checkout with our APIs and SDKs. ## Core Products Create shareable links to accept crypto payments anywhere. Embed a customisable crypto checkout on your site. Accept recurring crypto payments automatically. Accept and swap crypto directly in your app. Accept crypto payments on Shopify with a seamless checkout. # For Developers Source: https://docs.hel.io/docs/for-developers Get started on MoonPay Commerce as a developer and build custom crypto payment flows # Getting Started * Log into [moonpay.hel.io](https://moonpay.hel.io/) or [moonpay.dev.hel.io](https://moonpay.dev.hel.io/) with a wallet or email, then use Settings to finish your profile, set up wallets, and invite team members. * The Developer section provides full access to MoonPay Commerce's API and webhooks. * Check out the [API Reference](https://docs.hel.io/reference#/) for detailed endpoints, parameters, and response formats. * [**Webhooks**](https://docs.hel.io/reference/webhook/overview#/): The webhooks panel allows you to create new webhooks, track event deliveries, and replay failed events as needed. MoonPay Commerce also provides an [SDK for developers](https://docs.hel.io/docs/helio-sdk#/). # Payment Integration Options Developers can initiate payments using two primary methods: Pay Links (via `paylinkId`) for structured checkouts, or Deposits (via `depositId`) for flexible, wallet-to-wallet transfers in any crypto. **Pay Links:** [Generate via API](https://docs.hel.io/reference/paylink/overview) to configure product details, pricing, themes, and redirect URLs. * Dynamic Pay Links: For flexible pricing, set `"dynamic": true` in the features object. This allows you to define the specific `amount` at the time of payment / charge creation rather than use the same fixed price at the `paylinkId` level. * Charges: Use a `paylinkId` to create [one-off Charges](https://docs.hel.io/docs/charges) for single-use payments. You can pass custom JSON (e.g., customer IDs or SKU data) with each request. * Subscriptions: Programmatically manage [recurring billing](https://docs.hel.io/docs/subscriptions#/) with full control over intervals, grace periods, and renewal reminders. **Deposits:** [Set up Deposits](https://docs.hel.io/reference/deposits/create) to create unique `depositCustomers`and associated deposit addresses across SVM, EVM, and BTC networks. This method is optimized for letting users fund your app with any crypto, ideal for gaming deposits, embedded wallets & trading apps. # Embed Widgets * Embed a `paylinkId` as a [Checkout Widget](https://docs.hel.io/docs/checkout-widget#/) in your application for a seamless payment experience. The widget supports customisation and integrates with all the same features as Pay Links. * Embed a `depositId` as a [Deposit Widget](https://docs.hel.io/docs/deposits#3-serve-the-deposit-ui-in-your-app) in your app Test and customise your configurations with our easy to use [Widget Builder](https://demo.hel.io/) # Transaction Management Using the API, you can export all transactions from your account and apply filters such as `paylinkId` or `depositId`, sender key, or date range. This makes it easy to build custom reporting or integrate transaction data into your own systems. See txs endpoint for [depositId](https://docs.hel.io/reference/deposits/list-transactions) and [paylinkId](https://docs.hel.io/reference/transactions/list). # Code Integrations MoonPay Commerce also supports more advanced, code-driven integrations, including: * [Create subscription payments via API](https://docs.hel.io/docs/subscriptions#setting-up-a-subscription) * [Headless payments](https://docs.hel.io/docs/headless-payments#/) * [Platform APIs merchant account creation](https://docs.hel.io/reference/platform/overview) # No Code Source: https://docs.hel.io/docs/for-creators Get started on MoonPay Commerce and launch crypto payments in minutes # Getting Started * Log into [moonpay.hel.io](https://moonpay.hel.io/) or [moonpay.dev.hel.io](https://moonpay.dev.hel.io/) with an email or wallet, then use Settings to finish your profile, set up wallets, and invite team members. * If you're an existing MoonPay customer, Log in to the [MoonPay Dashboard](https://dashboard.moonpay.com) and select Pay with Crypto > Go to MoonPay Commerce Dashboard. Your account and existing KYB data will sync automatically. ## Embedded Wallet If you sign up via email, we automatically create an embedded wallet for you. You don’t need a browser extension, seed phrases, or an existing wallet, making onboarding seamless and enabling instant access to Web3 apps. For users who previously used the Helio wallet, the new login flow uses a different wallet setup. To move funds from your existing Helio wallet, visit [https://legacy.hel.io/](https://legacy.hel.io/) and follow the transfer steps. *** # Create Payments MoonPay Commerce supports four payment types: 1. **Pay Links** - MoonPay hosted checkout page 2. [**Checkout Widget**](https://docs.hel.io/docs/checkout-widget#/) - embed payments in your app 3. [**Deposits**](https://docs.hel.io/docs/deposits#) - accept any crypto inside your app 4. [**Subscriptions**](https://docs.hel.io/docs/subscriptions#/) - recurring payments **Pay Link Creation Flow:** * **Set product details:** name, price, payout wallets, networks, card payments, swaps, and dynamic pricing. * **Subscriptions** include billing intervals (weekly, monthly, quarterly, biannual, yearly), renewal reminders, grace periods, and annual discounts. * **Token swaps:** allow customers to pay with any supported token while you receive **USDC** (0.25% conversion fee). Can be configured via the UI or the [API](https://docs.hel.io/reference/paylink/overview#token-swaps). * **USDC on Solana only:** all payments are converted to **USDC on Solana**. * **USDC on Base & Solana:** Solana payments → **USDC on Solana**, EVM payments → **USDC on Base**. You can only receive funds on EVM networks like Arbitrum and BNB Chain when Token Swaps are enabled. If Token Swaps are disabled, you can’t receive directly in these currencies. * **Advanced options:** [affiliate links](https://docs.hel.io/docs/affiliate-links#/), [discounts](https://docs.hel.io/docs/discounts#/), [split payments](https://docs.hel.io/docs/split-payments#/), [Discord](https://docs.hel.io/docs/discord-memberships#/)/[Telegram](https://docs.hel.io/docs/telegram-memberships#/) memberships, and [gated payments](https://docs.hel.io/docs/gated-payments#/). * **Final customisation:** pay link theme (light/dark mode, colors), success redirect URL. *** # Managing Payments * All transactions appear in the dashboard under the Transactions tab. Each record shows the type of payment (single, subscription, or refund), transaction ID, amount, time, and detailed information. * From here, you can also issue refunds when needed. * For reporting, all transaction data can be exported as a CSV file. ### Updating Your Payout Wallet If you need to change the wallet that receives payments: 1. Go to **Settings → Wallets** in your Helio Dashboard. 2. Add a **Linked** or **Payout Wallet**. 3. When creating a payment (Step 1 of the payment creation flow), you can choose which wallet will receive the funds for that specific payment. **Note:** Your **main wallet** is used as the **default recipient** for all payments unless another wallet is explicitly selected during payment setup. *** # No Code Integrations MoonPay Commerce also makes integration simple with out-of-the-box options, including: * [Shopify Solana Pay Plugin](https://docs.hel.io/docs/solana-pay-shopify-plugin#/) * [Telegram Bot Integration](https://docs.hel.io/docs/telegram-memberships#/) * [Discord Bot Integration](https://docs.hel.io/docs/discord-memberships#/) # Deposits Source: https://docs.hel.io/docs/deposits Let users fund your app with any crypto, ideal for gaming deposits, embedded wallets & trading apps. Before going live, you're required to complete [KYB verification](https://docs.hel.io/docs/verification) via the dashboard. Alternatively, get a link from your MP Account Manager. **Note:** KYB is not required to start the integration process. ## 1. Create your Deposit Create a deposit via the [Create Deposit endpoint](https://docs.hel.io/reference/deposits/create) or the [dashboard](https://moonpay.hel.io/). Upon creation, a `depositId` will be returned. Configure the following options: * **Deposit Name:** Assign a unique name to the deposit. Within this section, you can: * **Recipient Currency:** Specify the blockchain/currency in which you wish to receive fund * **Payment Options:** Enable **Transfer Manually, Connect Wallet** and **Add Money**. **The Add Money option (card, Apple Pay, etc.) requires MoonPay Ramps to be enabled.** * Set up MoonPay and obtain your API keys via the [Ramps documentation](https://dev.moonpay.com/v1.0/docs/ramps) * Add your MoonPay keys in the MoonPay Commerce Dashboard **(Settings → Integrations → MoonPay Ramps)**. For questions, contact [support@moonpay.com](mailto:support@moonpay.com) * **Customisation:** Update badges and CTA (Call to Action) copy * **Notifications:** Enable email notifications to receive updates when a deposit is successfully completed. ## 2. Create a Deposit Customer Generate a [Deposit Customer](https://docs.hel.io/reference/deposit-customers/create) via the API and their associated deposit addresses across SVM, EVM, and BTC networks. * **Required Parameters:** To create a customer, you must specify a unique `customerId`, a `recipientWallet`, and any optional metadata via the `additionalJson` payload. * **Save the token:** Store the returned Deposit Customer token. This token allows you to reuse the same deposit address for subsequent transactions from the same customer. * **Related endpoints:** use the [Update Deposit Customer](https://docs.hel.io/reference/deposit-customers/update) and [Get Deposit Customer](https://docs.hel.io/reference/deposit-customers/retrieve) endpoints as needed. * **Test Customer Deposit Session:** In this step you can simulate a deposit widget. You must define a `customerId` and a `recipientWallet` to generate the test environment. ## 3. Build Your Own or Serve our Deposit UI in Your App ### Headless support * Serve deposit addresses in your own UI. Create and store the `depositCustomerToken` -> use the [Get Deposit Customer](https://docs.hel.io/reference/deposit-customers/retrieve) endpoint to get the `depositWallets` array * Use the [Record Wallet Activity endpoint](https://docs.hel.io/reference/deposit-wallet/record-activity) whenever you display a deposit wallet to a customer. This increases balance polling and detect incoming payments more quickly * Use [Get Deposit Currencies](https://docs.hel.io/reference/currency/list-deposit) to check available currencies ### Deposit Widget Setup Embed the deposit widget in your app using the following [NPM package](https://www.npmjs.com/package/@heliofi/deposit-react) . The below configuration options are available for customising your deposit widget via config: Use our [demo environment](https://demo.hel.io/) to test display and other configurations. Simply toggle to the Deposit view and paste the Deposit Customer token. `display` Controls how the deposit flow is rendered on your page. * **Type**: `'inline' | 'button' | 'new-tab'` * **Default**: `'inline'` * **Required**: No **Values**: * `'inline'` - Embeds the deposit flow directly in the container element * `'button'` - Renders a button that opens the deposit flow in a modal * `'new-tab'` - Renders a button that opens the deposit flow in a new browser tab If you enable **Add Money** and use the deposit widget in **inline** or **button** mode, your domain(s) must be whitelisted by MoonPay Ramps. In some cases, this may require additional KYB. You can always use **new-tab** mode without domain whitelisting, or disable the Pay with Cash option. *** `network` Specifies the environment for the deposit flow. * **Type**: `'test' | 'main'` * **Default**: `'main'` * **Required**: No **Values**: * `'test'` - Use the test/sandbox environment for development and testing * `'main'` - Use the production environment for live transactions *** `themeMode` Specifies the default light/dark mode. Alternatively you can also set a fixed Company Theme (Settings -> Merchant settings) that overrides this config. * **Type**: `'dark' | 'light'` * **Default**: `'undefined'` * **Required**: No **Values**: * `'dark'` - The widget uses dark mode * `'light'` -The widget uses light mode If `themeMode` is **undefined** and **no Company Theme is set**, the deposit flow will automatically match the user’s system light/dark mode. *** `variant` Minimal removes padding and background for inline embeds * **Type:** `'default' | 'minimal'` * **Default**: `default` * Required: no **Values:** * `'default'` – Standard embed with padding and background * `'minimal'` – Removes padding and background for inline embeds *** `openWalletConnectInNewTab` Controls whether the WalletConnect flow opens in a new browser tab. * **Type:** boolean * **Default:** false * **Required:** No **Values:** * `true` – WalletConnect opens in a new browser tab * `false` – WalletConnect opens in the current tab or modal **Note:** For better UX, consider setting this conditionally (e.g. `openWalletConnectInNewTab={wallet.isConnected}`) so a new tab is only opened when needed. *** `forcedStep` Forces the deposit flow to begin at a specific step, skipping any preceding steps in the default deposit journey. * **Type:** 'connect-wallet' | 'wallet-display' | 'moonpay-onramp' * **Default:** undefined * **Required:** No **Values:** `'connect-wallet'` — Forces the flow to start at the **Connect Wallet** step. `'wallet-display'` — Forces the flow to start at the **Wallet Display** step. `'moonpay-onramp'` — Forces the flow to start directly at the **MoonPay Onramp** step. *** `currentlyConnectedWallet` Allows the host application to pass an already connected user wallet into the deposit flow, surfacing it as an additional selectable option. * **Type:** ConnectWalletSelection * **Default:** undefined * **Required:** No **Fields:** * `wallet` — The connected wallet provider. * `blockchain` — The chain the wallet address belongs to. * `address` — The connected wallet address. `wallet` values (DepositConnectWallet) * `'METAMASK'`, `'PHANTOM'`, `'TRUST_WALLET'`, `'WALLET_CONNECT'` `blockchain` values * `'SOL'`, `'ETH'`, `'BASE'`, `'POLYGON'`, `'ARBITRUM'`, `'BSC'`, `'ABSTRACT'`, `'HYPERLIQUID'` ```javascript theme={null} // Optional: Pre-provides a wallet that is already connected in the host application. currentlyConnectedWallet?: { wallet: string; blockchain: string; address: string; }; ``` ### Embedding the widget inside a React app Embed the deposit widget in your React application using the [Deposit Widget on npm](https://www.npmjs.com/package/@heliofi/deposit-react). ```typescript theme={null} import { MoonpayCommerceDeposit } from '@heliofi/deposit-react'; interface MoonpayCommerceDepositConfig { // Required: Your unique deposit customer token // Create it from https://commerce.moonpay.com depositCustomerToken: string; // Optional: Network to use // 'main' = Mainnet // 'test' = Testnet network?: 'test' | 'main'; // Optional: Controls how the deposit flow is rendered on your page. // 'inline' = Embeds the deposit flow directly in the container element // 'button' = Renders a button that opens the deposit flow in a modal // 'new-tab' = Renders a button that opens the deposit flow in a new browser tab display?: 'inline' | 'button' | 'new-tab' // Optional: Theme to use // 'dark' = Dark mode // 'light' = Light mode themeMode?: 'dark' | 'light'; // Optional: Opens WalletConnect in a new browser tab when enabled // Tip: Best used conditionally (e.g. openWalletConnectInNewTab={wallet.isConnected}) openWalletConnectInNewTab?: boolean; // Optional: Forces the deposit flow to start at a specific step // 'connect-wallet' = start at wallet connection // 'wallet-display' = start at wallet display/selection // 'moonpay-onramp' = start directly at MoonPay onramp forcedStep?: 'connect-wallet' | 'wallet-display' | 'moonpay-onramp'; // Optional: Called when deposit completes successfully // Note: this might not be working in the current beta version onSuccess?: (data: { transaction?: string; depositCustomer?: unknown; }) => void; // Optional: Called if an error occurs // Note: this might not be working in the current beta version onError?: (error: { errorMessage?: string; transaction?: string }) => void; } function App() { return ( { console.log('Deposit completed:', data); }, onError: (error) => { console.error('Deposit failed:', error); }, }} /> ); } ``` ### Optional: Preload Assets with the Provider To improve load performance, you can optionally wrap your application with the `MoonpayCommerceDepositProvider`. The provider preloads the required JavaScript assets ahead of time, so when `` renders, it does not need to wait for the scripts to load. **Import** ```text theme={null} import { MoonpayCommerceDepositProvider } from "@heliofi/deposit-react"; ``` **Usage (Next.js example)** The provider takes no props and should be placed near the root of your application (e.g. `layout.tsx` or `_app.tsx`): ```text theme={null} // layout.tsx or _app.tsx export default function RootLayout({ children }) { return ( {children} ); } ``` **Notes:** * `children` should include the rest of your application, including any usage of ``. * This setup is optional. If you do not use the provider, assets will still load automatically when `` is rendered. **Vanilla JS** If you are not using React.js, you can alternatively embed using the pure JS approach like below: ```html theme={null}
``` **Iframe** Alternatively you can embed an iframe using the HTML snippet below. It lets users deposit crypto or pay by card directly on your site without leaving your app. ```html theme={null}