Developer Workshop: Onramp to Any Token on Any Chain with Halliday Payments
Learn how to use Halliday Payments to build an onramp with only 7 lines of code.
In this workshop, you'll learn how to utilize Halliday Payments to onramp from fiat to crypto on any chain. A developer workshop video and an open source code repository with a sample app are available below.
At Halliday, we've found that building systems to connect applications to onchain commerce is complex. Collecting payments from users requires more engineering time and effort than one might expect. We've built Halliday Payments on the Workflow Protocol to make onramping, bridging, and swapping as simple as possible for developers. Rather than use three different apps, Halliday Payments combines them into one payment experience.
With Halliday Payments, app developers can accept payments from users globally with fiat or crypto by implementing just one small block of JavaScript code. No need to think through bridges, DEXes, swaps, gas tokens on other chains, availability in specific geolocations, onramp providers, or other complexities.
Halliday Payments SDK Workshop
In this workshop video, we walk through integrating fiat onramps and cross-chain swaps using JavaScript.
The accompanying repository with the source code from this workshop can be found on GitHub: Halliday Payments SDK Examples.
Read on to see how to do each.
Set up your account
To get your Halliday API keys and routes set up for your token on your chain, reach out to partnerships@halliday.xyz. Coming soon, developers will be able to do this using the Halliday dashboard.
Onramp from fiat to any token on any chain
Once you have your API key, you can use the code from the workshop to implement fiat onramps to USDC on Base.
<html>
<body>
<div id="halliday"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@halliday-sdk/payments@0.2.0/dist/paymentsWidget/index.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
await hallidayPayments.openHallidayPayments({
apiKey: HALLIDAY_API_KEY,
outputs: ['base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'], // USDC on Base
sandbox: false,
windowType: 'EMBED',
targetElementId: 'halliday'
});
});
</script>
</html>
The payments SDK widget connects your app to fiat onramp providers like Stripe, Coinbase, MoonPay and more. Users provide their payment info and an onramp to crypto is initialized in just a few clicks or taps.
Once users make their route selection, the Workflow Protocol orchestrates the onramp, including any needed bridging and swapping, to automatically convert the user's fiat into crypto on a specified chain.
Seamless cross-chain swaps
The workshop also covers adding cross-chain swaps to your app in a few lines of code. This React.js implementation of the Halliday Payments SDK widget enables users to swap USDC on Base to IP on Story mainnet.
<div>
<button
onClick={() => {
openHallidayPayments({
apiKey: HALLIDAY_API_KEY,
services: ['SWAP'],
inputs: ['base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'], // USDC on Base
outputs: ['story:0x'], // IP on Story
sandbox: false,
windowType: 'POPUP',
});
}}>
Open Halliday
</button>
</div>
Customize the widget
Implementing the widget as a popup window, embedded iframe, or modal with custom styling to match your brand is also covered in the workshop video.
Recap, Halliday developer resources, and getting in touch
We've covered implementing fiat onramps to crypto and one-click cross-chain swaps using the Halliday Payments SDK. To find more information on Halliday Payments, check out the following developer resources:
To stay up to date with the latest news from Halliday, follow us on X @HallidayHQ.
