Comment on page
🛒
Helio Checkout Widget
Embed the Helio Checkout Widget in your website or app
It's easy to embed the Helio Checkout Widget in your website or app to accept payments in digital currencies as well as enable. The Widget also includes Helio Wallet functionality to enable onramp with a credit/debit card.
Simply copy paste the "embed" code to deploy the Checkout Widget in your website, either for single products with a defined price, or charge a unique/dynamic price for each purchase, for example for gaming deposits or if you have an existing shopping basket.
Helio also offers a native plugin for WooCommerce and we support the Solana Pay plug-in for Shopify.
- 1.Name your product;
- 2.Set the price (e.g. $0.1 USDC), choose blockchains & enable currencies
- 3.Advanced options -> Require customer information & other options (optional). Click 'CREATE', select Checkout Widget, copy the Vanilla JS code.
- Paste the code snippet into your website. Don't know where to put it? Create a support ticket on Discord.
- IMPORTANT: To enable the “Pay with card” option we need to allowlist your domain so please share this with our team.
- 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
Happy testing! We’re here to help and please ping us in TG or Discord with any questions, or explore further documentation.
This option doesn't require you to define a price in the Helio dashboard and is suitable if you want to charge a unique/different price for each purchase, for example if you have a shopping basket.
- Enter a name and select 'Next'
- Select 'CREATE' (with or without selecting any other advanced options)
- Copy the paymentRequestld (e.g. 650acc607d0e172b1b35261d) and save this somewhere.
- Embed the code as shown earlier, this time adding an additional parameter,
totalAmount - The user will be charged the value of
totalAmountin USDC.
Generate your Pay ID in a few simple clicks
WARNING: We will be phasing out the old React component for new customers from December 2023. It's backwards compatible with the new Helio Checkout Widget.
This is a basic sample NextJS application to show how to embed the Helio Pay code into your front end. Please see the README.MD file for setup and installation.
GitHub - heliofi/heliopay-nextjs-sample
GitHub
A sample project using NextJS
This is the main React package to install the Pay Button
npm: @heliofi/react
npm
React NPM package
Installation:
yarn add @heliofi/react
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>
);
};
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"}
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>
);
};
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
An example application with dynamic pricing can be found here: https://heliopay-nextjs-sample.vercel.app/
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 8h ago