Deposits

// Optional: Pre-provides a wallet that is already connected in the host application.
  currentlyConnectedWallet?: {
    wallet: string;
    blockchain: string;
    address: string;
  };

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 (
    <MoonpayCommerceDeposit
        config={{
    			depositCustomerToken: 'your-deposit-customer-token',
        	onSuccess: (data) => {
          	console.log('Deposit completed:', data);
        	},
        	onError: (error) => {
          	console.error('Deposit failed:', error);
        	},
      }}
    />
  );
}

import { MoonpayCommerceDepositProvider } from "@heliofi/deposit-react";

// layout.tsx or _app.tsx
export default function RootLayout({ children }) {
  return (
    <YourOtherProviders>
      <MoonpayCommerceDepositProvider>
        {children}
      </MoonpayCommerceDepositProvider>
    </YourOtherProviders>
  );
}

<script type="module" src="https://embed.deposits.hel.io/assets/index-v1.js" id="deposit-script"></script>

<div id="deposit-container"></div>

<script>
  document.getElementById('deposit-script').addEventListener('load', () => {
    window.moonpayCommerceDeposit(
      document.getElementById('deposit-container'),
      {
        depositCustomerToken: 'your-token-here',
        network: 'test',
        display: 'inline',
        onSuccess: () => {
          console.log('Deposit completed!');
        },
        onError: (error) => {
          console.error('Deposit error:', error.message);
        },
      }
    );
  });
</script>

<iframe
  allow="clipboard-write"
  style="width:420px; height:260px;"
  src="https://moonpay.hel.io/embed/deposit/acac3ec9-f8f6-4128-8159-a91e418e2581"
/>

import { useEffect, useState } from "react";

export const Deposit = () => {
  // Dynamic height set by the deposit widget via postMessage
  const [iframeHeight, setIframeHeight] = useState(0);

  useEffect(() => {
    // Handle events sent from the deposit widget iframe
    const handleMessage = (event: MessageEvent) => {
      // Only process messages coming from the Helio/MoonPay widget
      if (event.origin !== "https://moonpay.hel.io") return;

      const data = event.data;

      switch (data.type) {
        // Widget requests the parent to resize the iframe
        case "onHeightChanged":
          setIframeHeight(data.height || 0);
          break;

        // Deposit flow completed successfully
        case "onSuccess":
          alert("Deposit completed");
          break;

        // An error occurred inside the widget
        case "onError":
          alert(`Deposit error: ${data.message}`);
          break;

        default:
          break;
      }
    };

    // Subscribe to postMessage events
    window.addEventListener("message", handleMessage);

    // Clean up on unmount
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  return (
    <iframe
      allow="clipboard-write"
      className="rounded-3xl shadow-2xl"
      // Apply dynamic height returned by the widget
      style={{ width: 420, minHeight: 260, height: iframeHeight }}
      src="https://moonpay.hel.io/embed/deposit/ad1ecf2d-f535-41f8-96df-fd6a45a27cdd"
    />
  );
};