Documentation Index
Fetch the complete documentation index at: https://docs.halliday.xyz/llms.txt
Use this file to discover all available pages before exploring further.
The fastest way to implement Halliday Payments is by utilizing the widget user interface.
Following this guide, or the Widget Documentation guide will result in an onramp expeirence like the following.
Try out onramping to an external wallet with this button:
Integrate Halliday Payments
Follow these steps to integrate Halliday Payments in just a few minutes.
Integrate
First, install the Halliday Payments SDK into a web project.npm install @halliday-sdk/payments
yarn add @halliday-sdk/payments
<script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@latest/dist/paymentsWidget/index.umd.min.js"></script>
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" />;
}
<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>
