🛒Helio Checkout Widget

Embed crypto payments in your website or app with a few lines of code

Embed the Helio Checkout Widget into any website or app to accept payments in 100s of digital currencies, plus credit/debit cards via Helio Wallet, using one of our code integrations. We offer two flavours each with a broad range of config options to customise the checkout for your website:

• Helio Checkout (Vanilla JS)

• Helio Checkout React (a React component)

• Config options

• Quick Start Code Examples (end to end demo app code)

You can also test various Checkout examples here:

Helio Embed

Demos, code snippets and config options for developers

Quick start guide

• Sign in to Helio on mainnet or devnet (for testing) and select CREATE PAYMENT. You have two options:

  • Select "Pay Link" for a fixed-price set in Helio (e.g. single product, subscription); or

  • Choose "Dynamic pricing" if you want to pass your own price (e.g. shopping basket, deposits, etc.)

• Follow Step 1 -3 . Click 'CREATE', select Checkout Widget, copy the Vanilla JS or React code snippet

• Paste the code snippet into your website and use the "Config options" to customise the look and feel of your checkout

  • For Dynamic pricing add an additional parameter to pass the price, amount

• IMPORTANT: To enable the “Pay with card” option we need to allowlist your domain so please share this with our team. Card payments -> USDC are processed on Solana.

• Want to store additional information about the purchase? Use our additionalJSON parameter.

• Run a test transaction, then use the 'onSuccess' callback or our webhooks to know when transaction goes through in real time

Embed Helio payments in your website in a few clicks

Dynamic pricing option. Pass a price for each unique purcase

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.

You can get the code snippet on step 4 of our Pay Link creation.

Helio Checkout (React)

If you have a React based app, then the easiest way to embed Helio Checkout is with our React component.

• NPM package

Install the dependancy:

yarn add @heliofi/checkout-react
# or npm install @heliofi/checkout-react

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.)

import {HelioCheckout} from '@heliofi/checkout-react'

const helioConfig = {
    paylinkId: "6571e7cd4a2bee8095ee84da",
    amount: "5.99",
};

function YourCheckoutComponent() {
  return <HelioCheckout config={helioConfig} />;
}

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. You can find a rich demo app of various config options:

Helio Embed

Common config options:

• paylinkId (required)

  • This is the ID for the Pay Link you would like to embed

  • example: paylinkId: "6571e7cd4a2bee1095ee84da"

• network (optional - default is main)

  • values: main or test

  • 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 is paylink)

  • values: paylink or paystream

  • 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.io

  • If 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 is inline)

  • values: button or inline

  • example: display: "button"

  • Use this to display a button which opens up a modal with our checkout flow

• primaryPaymentMethod (optional - default is crypto)

  • values: crypto or fiat

  • 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:

{
  customTexts: {
    mainButtonTitle: "Click to pay now"
  }
}

• theme (optional)

  • Use this to override some colours/theming options within the embed.

  • themeMode (use this to switch between light or dark appearances):

    • values: light or dark

  • Example usage:

{
    paylinkId: "6571e7cd4a2bee1095ee84da",
    theme: {
        themeMode: "dark", // or "light"
        colors: {
            primaryButtonBackground: "#F76C1B",
            primaryButtonText: "#FFFFFF",
          };
        }
}

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:

{
  // ... (your other config options) ...
  onSuccess: event => console.log(event),
  onError: event => console.log(event),
  onPending: event => console.log(event),
  onCancel: () => console.log("Cancelled payment"),
  onStartPayment: () => console.log("Starting payment"),
}

In addition, we recommend using our webhooks to verify transaction on your backend.

Advanced config options:

• debug (optional - default is false)

  • true or false

  • 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 Solana 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 = mainnet

  • test = devnet

• Ethereum

  • main = mainnet

  • test = Sepolia

• Polygon

  • main = mainnet

  • test = Mumbai

• Bitcoin

  • main = mainnet

  • test = 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