🛒
Helio Pay Button
Build your own checkout flow for your website or app, fully white labelled
The Helio Pay button is a REACT component that's simple to embed in your website, app or shopping basket to accept DeFi payments alongside traditional payment methods.
Helio also offers a native plugin for WooCommerce and we support the Solana Pay plug-in for Shopify.
- Enter a name and click 'NEXT'
- Click 'CREATE' (with or without selecting any other advanced options)
- Copy the paymentRequestld (e.g. 650acc607d0e172b1b35261d) and save this somewhere locally
Generate your Pay ID in a few simple clicks
Find our sample project using the Helio Pay button on on Github and the sample App on vercel to help you get started
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
Installation:
yarn add @heliofi/react
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!");
}
You can also embed a Pay Link which
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. |
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
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.
We support react V18+
We suggest you clear the node_modules, uninstall the Helio modules, delete any lock files, and install the new NPM modules and dependencies.
Last modified 10d ago