Documentation Index

Fetch the complete documentation index at: https://docs.hel.io/llms.txt

Use this file to discover all available pages before exploring further.

• Embed a paylinkId as a Checkout Widget in your application for a seamless payment experience. Explore the configurations below
• Embed a depositId as a Deposit Widget in your app. Learn more about deposit widget configuration options

​

Get started

• Log into MoonPay Commerce to setup your paylinkId and generate the code snippet on the final step of our payment creation flow. Use https://demo.hel.io/ to customise your theme & config
• Our standard way to embed our checkout is with our JS/HTML embed - simply paste into your code builder as follows
• If you want to set the price in your widget programmatically, set the price to dynamic in the dashboard and pass the amount

​

MoonPay Commerce Checkout (React)

• NPM Package

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

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

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

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

​

Config Options

​

Common config options:

• One of the following must be set (but not both)
• paylinkId
  • This is the ID for the Pay Link you would like to embed
    • **example: **paylinkId: "6571e7cd4a2bee1095ee84da"
• chargeToken
  • A charge token (you can create charges via our API).
    • example: chargeToken: "05adc323-0450-4ef8-b127-18949b9ff485"
• 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 moonpay.hel.io you should not set this value.
  • values: magic_eden
  • example: platform: magic_eden

​

Customising the look of the embed:

• display (optional - default is inline)
  • values: button inline or new-tab
  • example: display: "button" Use this to display a button that opens up a modal with our checkout flow
  • example:display: "new-tab" Use this to display a button that opens up a unique, single use checkout page in a new tab. The "charge pages" are optimal for mobile payment flows, deep-linking, QR codes, embedded pay buttons on simple websites like Wix, or other custom payment flows. Learn more about Charges
• primaryPaymentMethod (optional - default is crypto)
  • values: crypto or fiat
  • example: primaryPaymentMethod: "fiat"
  • If set tofiat, 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: "Purchase via Helio",
    payButtonTitle: "Click to pay",
  }
}

• theme (optional)

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

{
    paylinkId: "6571e7cd4a2bee1095ee84da",
    theme: {
        themeMode: "dark", // or "light"
    }
}

• primaryColor (optional, required when neutralColor is defined)
  • Use this to customise main colours within the embed
• neutralColor (optional, required when primaryColor is defined)
  • Use this to customise neutral colours such as border and text colours within the embed

{
    paylinkId: "6571e7cd4a2bee1095ee84da",
    primaryColor: "#E60000",
    neutralColor: "#5A6578"
}

• backgroundColor (optional, use this to change the background color)
  • values: Provide a hex code (e.g., #FFFFFF for white or #000000 for black)

{
    paylinkId: "6571e7cd4a2bee1095ee84da",
    backgroundColor: "#4bbe7c"
}

• showPayWithCard (optional - default is true)
  • Use this to remove the ‘Pay with card’ button from the embed.
  • values: trueor false

{
    paylinkId: "6571e7cd4a2bee1095ee84da",
    showPayWithCard: false
}

​

Dynamic config options

• Log in to MoonPay Commerce and select CREATE PAYMENT -> Dynamic pricing -> paylinkId
• 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 moonpay.hel.io to set the currencies you will receive in.

​

Autofill config options

• fullName — customer’s full name
• email — customer’s email address
• phoneNumber — phone number
• areaCode — phone area/country code

• deliveryAddress — full delivery address (freeform)
• street — street name
• streetNumber — street/house number
• city — city
• state — state or region
• country — ISO 3166-1 alpha-2 country code (e.g. "US", "GB")
• areaCode — postal/area code

• productValue — pre-fill the product value
• additionalProductValue — additional product value

• discordUsername — Discord username
• telegramUsername — Telegram username
• twitterUsername — Twitter/X username

{
  paylinkId: "6571e7cd4a2bee1095ee84da",
  autofillConfig: {
    fullName: "Jane Doe",
    email: "jane@example.com",
    country: "US",
    city: "New York",
    street: "Broadway",
    streetNumber: "123",
    state: "NY",
  }
}

​

Callback config options

• onSuccess
• onError
• onPending
• onCancel
• onStartPayment

{
  // ... (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"),
}

​

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

• 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 transactions by listening for our webhooks, which include all relevant values

​

Our Network Options for Testnet

• Solana:
  • main = mainnet
  • test = devnet
• Ethereum
  • main = mainnet
  • test= Sepolia
• Polygon
  • main = mainnet
  • test = Mumbai
• Bitcoin
  • main = mainnet
  • test = testnet3
• Base
  • main = Mainnet
  • test = Sepolia

​

React Native

​

Install

npm install @heliofi/checkout-react-native

​

Peer dependencies

npm install react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg lucide-react-native

​

Quick start

import {
  MoonpayCommerceProvider,
  usePayWithCrypto,
} from '@heliofi/checkout-react-native';

export default function App() {
  return (
    <MoonpayCommerceProvider chargeToken="your-charge-token" network="main">
      <Checkout />
    </MoonpayCommerceProvider>
  );
}

function Checkout() {
  const { payWithCrypto } = usePayWithCrypto();

  return (
    <Button
      title="Pay with Crypto"
      onPress={() => payWithCrypto()}
    />
  );
}

​

Notes

• chargeToken is required and should be created on your backend.
• Do not expose your API key in the client.
• Use network="test" for devnet and network="main" for production.
• The SDK handles wallet selection, deeplinking, payment polling, and success/error states.

Full reference
For API reference, props, composable components, and package updates, see the @heliofi/checkout-react-native npm package.