πCheckout Widget
Embed crypto payments in your website or app with a few lines of code
Integrate the Helio Checkout Widget with a few lines of code into any website or app to accept payments in USDC & 100s of digital currencies across Solana, Ethereum, Polygon, Bitcoin, as well as card payments via a simple "on-ramp" flow.
We offer a Vanilla JS & React integration, each with a broad range of config options to customise the checkout for your theme
Customise your widget
Helio Checkout (Vanilla JS)
Our standard way to embed our checkout is with our JS/HTML embed.
This is ideal if you would like to embed the Helio Checkout in your website. Log into Helio and generate the code snippet on step 4 of our Pay Link creation as follows:
Helio Checkout (React)
If you have a React based app, then the easiest way to embed Helio Checkout is with our React component.
Install the dependancy:
Then in your React components import it in (simply grab the example code snippet for our React component on step 4 when creating your Pay Link.)
Note: if you are dynamically generating the config object, we recommend wrapping it in `useMemo()`
Config options
The configuration options object is the same for our Vanilla JS and React version.
Common config options:
paylinkId
(required)This is the ID for the Pay Link you would like to embed
example:
paylinkId: "6571e7cd4a2bee1095ee84da"
network
(optional - default ismain
)values:
main
ortest
example:
network: "test"
This is only required if you generated a Pay Link on our dev/testnet site `https://app.dev.hel.io/`
See note below how our
network
value works.
paymentType
(optional - default ispaylink
)values:
paylink
orpaystream
example:
paymentType: "paystream"
This is only required if you set up a recurring paystream embed.
If your Pay Link is recurring, the code snippet on step 4 will already include
paymentType: "paystream"
platform
only if you are embedding from presale.magiceden.ioIf you are embedding our checkout for a Pay link created from https://app.hel.io you should not set this value.
This will automatically be added to the code snippet on step 4 of Pay Link creation if you are on https://presale.magiceden.io
values:
magic_eden
example:
platform: "magic_eden"
Customising the look of the embed:
display
(optional - default isinline
)values:
button
inline
ornew-tab
example:
display: "button"
Use this to display a button which opens up a modal with our checkout flowexample:
display: "new-tab"
Use this to generate a unique Helio charge page each time that opens up in a new tab. This is great for mobile flows, Discord gating or other payment flows that aren't compatible with embeds. Learn more about Charges
primaryPaymentMethod (optional - default is
crypto
)values:
crypto
orfiat
example:
primaryPaymentMethod: "fiat"
If set to
fiat
, then 'pay with card' will be the default button option.
customTexts
(optional)Use this to override some texts/copy within the embed.
Current options are as follows:
theme
(optional)Use this to override theming options within the embed.
themeMode
(use this to switch between light or dark appearances):values:
light
ordark
Example usage:
primaryColor
(optional, required whenneutralColor
is defined)Use this to customise main colours within the embed
neutralColor
(optional, required whenprimaryColor
is defined)Use this to customise neutral colours such as border and text colours within the embed
Example usage:
showPayWithCard
(optional - default istrue
)Use this to remove the 'Pay with card' button from the embed.
values:
true
orfalse
example:
showPayWithCard: false
Dynamic config options
If you have a dynamic payment (where you programatically set the amount and other data) then you will need to use these options:
amount
(required for dynamic payments)values: a string value
example:
amount: "5.99"
This will be the amount of the payment currency
Use step 2 of the Pay link creation process on https://app.hel.io to set the currencies you will receive in.
Callback config options
Use our callbacks to run Javascript code when certain actions occur.
You can use these to trigger changes in your application.
onSuccess
onError
onPending
onCancel
onStartPayment
Example:
In addition, we recommend using our webhooks to verify transaction on your backend. You can find an end-to-end developer example here including the Checkout Widget and webhooks here:
Advanced config options:
debug
(optional - default isfalse
)true
orfalse
example:
debug: true
if true then it will output some helpful debug information
additionalJSON
(optional)values can be any valid JSON data.
example:
additionalJSON: {customerId: "customer1", product: "T-shirt"}
Anything you pass in here will get stored when a customer makes a transaction.
You can retrieve this on transactions by listening for our webhooks, which include all relevant values
Our network options for testnet
When you generate a paylink on app.dev.hel.io (for test transactions), then you must set network: "test"
in your config.
If you generate on app.hel.io (mainnet) you do not need to set
network
config options!
(You cannot set network: "test"
for a paylink generated on app.hel.io)
The testnets that we use for each blockchain are described below:
Solana:
main
= mainnettest
= devnet
Ethereum
main
= mainnettest
= Sepolia
Polygon
main
= mainnettest
= Mumbai
Bitcoin
main
= mainnettest
= testnet3
Supported Currencies
Use our Swagger API to get a list of currencies currently supported : https://api.hel.io/v1/docs#/Currency/CurrencyController_value
Try it out with currency 'type' of "DIGITAL" to return all supported currencies
Or pull directly from : https://api.hel.io/v1/currency?type=DIGITAL
Last updated