Helio
Search…
⌃K
Links
🛒

Embed Helio Pay Components

Embed Web3 payments into your website using our API, libraries & plug-ins

Quick start guide

  • Create your payment and copy the code snippet/PaymentID
You have two options to embed Helio payments into your website/app:
  1. 1.
    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
  2. 2.
    Embed a Dynamic payment: this allows developers to embed Helio into a website or shopping basket to process "dynamic" amounts in any currency
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

Installation:
yarn add @heliofi/react
Embed Helio Pay Components for one of the following 3 use cases:
import { HelioPay } from "@heliofi/react";
const App = () => {
return (
<div>
<HelioPay
cluster="devnet"
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>
);
};

2. Embed a Dynamic payment with the Helio Pay button

import { HelioPay } from "@heliofi/react";
const App = () => {
return (
<div>
<HelioPay
cluster="devnet"
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 - generate here. 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";
const baseUrl = "https://dev.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!");
}

3. Process Dynamic payments WITHOUT the Helio Pay button

Please refer to the full repository for this option as well as various other developer options on our GitHub:
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.
Finally, this is a basic sample next.js application to showcase 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