Links
🛒

Helio Pay Components

Build your own checkout flow for your website or app, fully white labelled

Quick start guide

  • Create your payment in the Helio dashboard and copy the code snippet/PaymentID
You have two options to embed Helio payments into your website/app:
  1. 1.
    Embed a Dynamic payment: embed Helio into a website or store to process "dynamic" amounts in any currency passed via API
  2. 2.
    Embed a Pay Link or Pay Stream: this allows developers to embed a 1-time or recurring payment for a single product item with a fixed price
Create Pay Link -> Pricing options -> Select Dynamic payment
Copy paste the PaymentRequestID and link to the Helio Pay Component (react button)
  • Generate your API key in the Helio dashboard
  • Embed the Helio Components as required per your use case (see resources below)

Resources

Find our sample project using Helio Pay Components on Github and the sample App on vercel to help you get started
Installation:
yarn add @heliofi/react
Embed Helio Pay Components for one of the following 2 use cases:

1. Embed a Dynamic payment with the Helio Pay button

import { HelioPay } from "@heliofi/react";
const App = () => {
return (
<div>
<HelioPay
cluster="mainnet-beta"
paymentRequestId={"your_paylink_id"}
supportedCurrencies={["SOL"]}
totalAmount={0.01}
onSuccess={(event: SuccessPaymentEvent): void => {
console.log("onSuccess", event);
/**
* The success event signature looks as follows:
* {
* content: string;
* transaction: string;
* }
* The transaction can be used to verify the payment with helio api
* */
}}
/>
</div>
);
};
Verify the payment using the Helio API (we support devnet and mainnet). See here for full details of our API schema.
Once you have access to the API you can call the endpoint per the following example:
try {
const transactionSignature = "solana blockchain transaction signature";
const token = "token from helio team";
const publicKey =
"you public key registered with helio team that recives transacitons";
t
const baseUrl = "https://api.hel.io";
const endpoint = `/v1/transactions/signature/${transactionSignature}?publicKey=${publickey}`;
const response = await fetch(`${baseUrl}${endpoint}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
});
return response.json();
} catch (e) {
throw new Error("Unable to get transactions data from backend!");
}
import { HelioPay } from "@heliofi/react";
const App = () => {
return (
<div>
<HelioPay
cluster="mainnet-beta"
paymentRequestId={"your_paylink_id"}
onSuccess={function (event: SuccessPaymentEvent): void {
console.log("onSuccess", event);
}}
onError={function (event: ErrorPaymentEvent): void {
console.log("onError", event);
}}
onPending={function (event: PendingPaymentEvent): void {
console.log("onPending", event);
}}
onStartPayment={function (): void {
console.log("onStartPayment");
}}
/>
</div>
);
};
Properties table for the Helio components
Property
Type
Required
Default value
Description
cluster
string
yes
available values; devnet, mainnet-beta, testnet
paymentRequestId
string
yes
Your paylink ID
onSuccess
function
no
triggered event when success
onError
function
no
triggered event when error
onPending
function
no
triggered event when pending
onStartPayment
function
no
triggered event on start payment
theme
object
no
customize the primary color(more will come soon) theme={{ colors: { primary: #f76c1b }}}
totalAmount
number
no
you can pass dynamic amount. dynamic pricing should be checked for this.
supportedCurrencies
string array
no
currencies you want to support.

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

Sample Embedded Site

An example application with dynamic pricing can be found here: https://embed.hel.io
Select a test on mainnet-beta or devnet, enter a paylink ID setup in the hel.io dashboard. Connect your wallet and pay to test the application.

Sample application

This is a basic sample next.js application code to show how to embed the Helio Pay NPM and code into your front end. Please see the README.MD file for setup and installation.
GitHub - heliofi/heliopay-nextjs-sample
GitHub
A sample repo for our test next.js
This is the main REACT module to install containing the required adapters and design assets
npm: @heliofi/react
npm
REACT NPM Module
We support react V18+
Please make sure you use the correct version of our NPM module which is typically the latest released version. Click on the 'version' tab to check the release history and look for the last major point release.

Updates

When updating from an earlier version of the Helio NPM modules, please ensure that you update all of the dependencies associated as well.
We suggest you clear the node_modules, uninstall the Helio modules, delete any lock files, and install the new NPM modules and dependencies.