Try the Halliday Payments SDK Widget
Following this guide, or the Payments Hello World guide will result in an onramp expeirence like the following. Try out onramping to an external wallet with this button:Installation
Install the Payments SDK, which is available on NPM.- npm
- yarn
copy
Options
TheopenHallidayPayments
function opens the Halliday Payments widget and accepts the following configuration options:
Name | Type | Description |
---|---|---|
apiKey | string | Your API key for authorization. |
sandbox (optional) | boolean | Whether the widget is in sandbox mode. |
ownerAddress (optional) | string | The address of the owner of the widget. |
destinationAddress (optional) | string | The address of the destination of the widget. |
inputs (optional) | Asset[] | The input assets for the widget. |
outputs (optional) | Asset[] | The output assets for the widget. |
onramps (optional) | RampName[] | The onramps for the widget. |
offramps (optional) | RampName[] | The offramps for the widget. |
customStyles (optional) | object (CustomStyles) | A list of custom styles to show in the widget. See customizing styles. |
targetElementId | string | The ID of the DOM element where the widget should be embedded. Required if windowType is “EMBED”. |
windowType (optional) | “POPUP” | “EMBED” | The desired display mode of the widget. Default is “POPUP”. |
statusCallback (optional) | StatusCallback | Callback to receive status events. |
owner (optional) | Owner | Owner wallet configuration with address and signing functions. |
funder (optional) | Funder | Funder wallet configuration with signing functions. |
Type Definitions
Usage Patterns
Using the wallet connector
Halliday can prompt users to choose a wallet to connect to the DApp. The wallet connector provides many options including MetaMask, Coinbase Wallet, Phantom, or Wallet Connect. Clicking the button will trigger the connect-wallet prompt. If the application already prompts the user to connect a wallet, see using a connected wallet.copy
Using a connected wallet
Halliday can accept a wallet connection that the DApp has already established. With this flow, the user connects their wallet using the application’s original flow. You can use theconnectSigner
utility function to prepare your app’s signer (works with Ethers) for use with Halliday, which will return the necessary signing and transaction functions.
This offers an enhanced user experience for Web3 applications, since users do not need to re-connect their wallet using the Halliday external wallet modal. If the application does not already have a connected wallet, see using the wallet connector. It also allows the widget to utilize the proper account if the user switches the address or network in their wallet extension.
copy
Embedding as an iframe
By default, the Payments Widget opens in a separate window or tab. Another option is embed it within a page using an iframe. This can be done by providing two additional options:windowType
and targetElementId
.
copy
Customizing styles
Halliday supports setting custom styles on the Payments Widget in order to match an application’s existing user interface.copy
