Deposits & fiat onramps with the Halliday JS SDK

The deposit modal is the primary screen of the Halliday SDK widget. The deposit widget is used to deposit tokens to a selected destination address defined in client code.

Crypto deposits

End users can send tokens from an EOA, a centralized exchange account, or other account on a supported chain. The input token is automatically converted to the output token and sent to the destination address on the proper chain.

Fiat onramps

The deposit widget is also an interface for onramping from fiat to crypto which is delivered to the destination address. Compatible onramp providers are shown to end users based on their geolocation. End users are navigated to a provider’s website to complete a fiat onramp checkout form. An embedded fiat onramp experience in which the user does not need to leave the Halliday widget is also available. The embedded onramp feature can be implemented by Halliday clients with a premium account. To upgrade your account, click the Book a Sales Call button on the top right of this page or send an email to partnerships@halliday.xyz. Once the SDK is initialized, the deposit modal can be opened at any time using the openDeposit function. The openDeposit function is meant to be called inside of a button click event handler. When the user is ready to make a deposit, they will click or tap a button in the app user interface, which will trigger the deposit modal. For complete example implementations of opening the Halliday SDK deposit widget, see the Payments SDK Example Apps page.

Configuring the Deposit options

Deposit configuration options are part of the Halliday config which is documented on the widget documentation page.

React

With the React SDK, the constant deposit options can be defined in the properties of a HallidayPaymentsProvider.

<HallidayPaymentsProvider
  apiKey={ HALLIDAY_PUBLIC_API_KEY }
  deposit={{
    outputs: [ "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913" ],
    destinationAddress: smartAccountAddress,
  }}>
  <App />
</HallidayPaymentsProvider>

Connected wallet objects can be passed using the updateWallets function after a user connects their wallet to the app.

const owner = {
  getAddress: async () => "0x...",                // required, async
  signMessage: async ({ message }) => "...",      // required
  signTypedData: async ({ typedData }) => "...",  // required
  sendTransaction: async (tx, chain) => TransactionReceipt, // Optional
  walletName: "Bob's Account", // Optional, shown in the wallet selector
}

// Action for use in useEffect block
updateWallets({
  owner,
  deposit: {
    funders: [
      owner,
      { getAddress, sendTransaction, walletName: "MetaMask" }
    ],
    destinationAddress: "0xDest...",
  },
});

JavaScript

Constant deposit options can be passed to the constructor of a HallidayPayments object or passed later using the updateConfig function. Partial configurations are valid for either function.

const halliday = new HallidayPayments({
  apiKey: HALLIDAY_PUBLIC_API_KEY,
  deposit: {
    outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"],
    destinationAddress: smartAccountAddress,
  },
});

const owner = {
  getAddress: async () => "0x...",                // required, async
  signMessage: async ({ message }) => "...",      // required
  signTypedData: async ({ typedData }) => "...",  // required
  sendTransaction: async (tx, chain) => TransactionReceipt, // Optional
  walletName: "Bob's Account", // Optional, shown in the wallet selector
}

halliday.updateConfig({
  owner,
  deposit: {
    funders: [
      owner,
      { getAddress, sendTransaction }
    ],
    destinationAddress: "0xDest...",
  },
});

To display the deposit widget, use the openDeposit function.

React
JavaScript

copy

import { HallidayPaymentsProvider, useHallidayPayments } from "@halliday-sdk/payments/react";

// ...

const { openDeposit, updateWallets, isReady } = useHallidayPayments();

// ...

<button onClick={openDeposit}>
  Deposit
</button>

copy

const halliday = new HallidayPayments({ /* ... */});

// ...

button.addEventListener("click", halliday.openDeposit);

Deposit session parameters

A deposit session can optionally have values passed to it such as a preset input asset and amount, a preset output asset, a funding address, or a destination address. If the developer does not want for the user to be able to modify the asset setting or input amount, they can lock the session to the developer’s chosen settings. An input will take precedent over the inputFiatValue settings.

openDeposit({
  input: {
    asset: "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
    amount: "50",
  },
  output: "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
  inputFiatValue: {
    currency: "USD",
    amount: "50",
  },
  fundingAddress: "0xFunder...",
  destination: "0xDest...",
  locked: true,
});

See the type definitions on the SDK documentation page for more information.

SDK Integrations

API Integrations

Example Apps

Frequently Asked Questions

Concepts & Info

Deposits & fiat onramps with the Halliday JS SDK

Crypto deposits

Fiat onramps

Configuring the Deposit options

React

JavaScript

Opening the Deposit widget

Deposit session parameters

​Crypto deposits

​Fiat onramps

​Configuring the Deposit options

​React

​JavaScript

​Opening the Deposit widget

​Deposit session parameters

Crypto deposits

Fiat onramps

Configuring the Deposit options

React

JavaScript

Opening the Deposit widget

Deposit session parameters