SDK Widget Hello World

Integrate

First, install the Halliday JS SDK into a web project.

npm
yarn
HTML

copy

npm install @halliday-sdk/payments

copy

yarn add @halliday-sdk/payments

copy

<script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@latest/dist/paymentsWidget/index.umd.min.js"></script>

Next, integrate Halliday into an existing application with a few lines of code. This example is in a React.js project with Wagmi.

React
HTML

copy

import { useEffect } from "react";
import { openHallidayPayments } from "@halliday-sdk/payments";
import { connectWalletClient } from "@halliday-sdk/payments/viem";
import { useAccount, useWalletClient } from "wagmi";

export default function App() {
  const { address, isConnected } = useAccount();
  const { data: walletClient, isSuccess } = useWalletClient();

  useEffect(() => {
    if (!isConnected || !isSuccess || !walletClient || !address) return;

    const userWallet = connectWalletClient(() => walletClient);

    openHallidayPayments({
      apiKey: HALLIDAY_API_KEY,
      outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"],
      targetElementId: "halliday",
      destinationAddress: address,
      userWallet,
    });
  }, [isConnected, isSuccess, walletClient, address]);

  return <div id="halliday" />;
}

copy

<html>
<body>
  <button id="connect-wallet">Connect Wallet</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@latest/dist/paymentsWidget/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@latest/dist/paymentsWidget/ethers/index.umd.min.js"></script>
<script>
  window.connectSigner = window.ethers.connectSigner;
</script>
<script src="https://cdn.jsdelivr.net/npm/ethers@6/dist/ethers.umd.min.js"></script>
<script>
  document.getElementById('connect-wallet').addEventListener('click', async () => {
    window.ethereum = window.ethereum || window.phantom.ethereum;
    const [address] = await window.ethereum.request({ method: 'eth_requestAccounts' });

    const userWallet = connectSigner(() =>
      new ethers.BrowserProvider(window.ethereum).getSigner(),
    );

    hallidayPayments.openHallidayPayments({
      apiKey: HALLIDAY_PUBLIC_API_KEY,
      // USDC on Base
      outputs: ['base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'],
      userWallet,
      destinationAddress: address,
    });
  });
</script>
</html>

Run the app page and try onramping or swapping tokens with the newly implemented Halliday Payments Widget. Try it now using the button above.

Try the Halliday JS SDK Widget

Integrate Halliday

​Try the Halliday JS SDK Widget

​Integrate Halliday

Try the Halliday JS SDK Widget

Integrate Halliday