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.
In this workshop video, we walk through integrating fiat onramps and cross-chain swaps using JavaScript.
<- Youtube video embedded here ->
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.
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.
<- Gif of onramp screen here (blog-gif-1-out.mp4) ->
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.
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>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.
<- Gif Here going from unstyled widget to styled widget (blog-gif-2-out.mp4) ->
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.