Customization

Halliday's Commerce Module SDK offers built-in support for our Anychain Onramp, tailored for your application on any blockchain. Our Anychain Onramp makes it easy for users to access your game by bypassing complex Web3 processes. It enables users to easily acquire any token on your appchain, greatly reducing the barrier of entry for them to your application.

Customizing the UI

Our onramp widget is fully customizable, allowing you to craft the experience you'd like for your users. As an example of how we power two very different experiences, you can see how we onramp via MoonPay with DeFi Kingdoms (link) and how we onramp via Stripe with Shrapnel (link).

For DeFi Kingdoms, we use the Halliday color scheme, offer a maximum onramp of $10,000 at once, permit users to select between MoonPay and Stripe as onramp providers, and display the user's wallet address.

For Shrapnel, we use the Shrapnel color scheme, offer a maximum onramp of $100, automatically direct users to an onramp, and do not display the user's wallet address, to provide a more "Web2" experience:

Please contact a Halliday representative with any UX preferences or questions! We are happy to accommodate the unique needs of your application to best tailor the experience to your users.


Select the best use case

Halliday offers two primary ways to initiate the Anychain Onramp:

  • No-Login: Use this flow if you expect users to already be authenticated in your application before onramping funds. Opens a popup that will deposit any purchased funds to a logged-in embedded wallet. Users will not need to log in to Halliday again if they are logged onto your site.
  • Onramp to EOA: Opens a popup that will prompt a user to connect an EOA like Metamask. Funds will then be deposited into the connected wallet.

You can integrate the Halliday Anychain Onramp as shown below:

import { openHallidayOnramp } from "halliday-sdk";

const walletAddress = "0x...";  // The user's EOA address
const loggedInEmail = "[email protected]"; // The email associated with the user
    
// Function we can call to pass in a Halliday session key for the user to sign. 
// This session key expires at the end of the onramp session.
const sessionKeySignerCallback = async (sessionKey: Uint8Array) => {
  // remove "Signed Ethereum message" prefix to sign since ethers adds it
  return ownerSigner.signMessage(sessionKey.slice(28));
};
    
openHallidayOnramp({
  apiKey: SANDBOX_API_KEY,
  verifierClientId: "",
  destinationBlockchainType: "AVALANCHE_CCHAIN",
  destinationCryptoType: "YOUR_TOKEN_HERE",
  destinationAddress: walletAddress,
  sessionKeySignerCallback: sessionKeySignerCallback,
  loggedInEmail: ownerEmail,
  inGamePlayerId: walletAddress,
  useSandbox: false,
});
import { openHallidayOnrampToEOA } from "halliday-sdk";

// openHallidayOnrampToEOA will open a popup that begins the onramp flow.
openHallidayOnrampToEOA({
  apiKey: "HALLIDAY_PUBLIC_API_KEY",
  destinationBlockchainType: "OPTIMISM",
  destinationCryptoType: "YOUR_TOKEN_HERE",
  
  // Optional, defaults to false. If set to true, will mint HallidayTestToken to the 
  // user's smart account on the destinationBlockchainType. 
  // If you set this to true, be sure to provide a sandbox API key above.
  useSandbox: false,
});

Halliday as an iframe

By default, the Commerce Module opens a popup for the end user. If you would like to instead use Halliday as an iframe directly within your page, you can add two additional lines of code at the end:

      windowType: "EMBED",
      targetElementId: "element-id", // The HTML element id to render the iframe inside of

As an example, here's what it looks like for the No-Login option above:

openHallidayOnramp({
  apiKey: SANDBOX_API_KEY,
  verifierClientId: "",
  destinationBlockchainType: "AVALANCHE_CCHAIN",
  destinationCryptoType: "YOUR_TOKEN_HERE",
  destinationAddress: walletAddress,
  sessionKeySignerCallback: sessionKeySignerCallback,
  loggedInEmail: ownerEmail,
  inGamePlayerId: walletAddress,
  useSandbox: false,

  // ADD these lines to support iFrame
  windowType: "EMBED",
  targetElementId: "element-id", // The HTML element id to render the iframe inside of
});

Additional points to note:

  • Stripe is unsupported as an onramp option in iframe mode
  • The iframe has a height of 638 pixels and a width of 480 pixels

🚧

Testing Considerations

Please refer to the Testing the Anychain Onramp guide when testing to see the mock KYC values and considerations to follow when testing out Anychain Onramp.