🧾Create "Charge Pages" via Widget or API

Create single-use checkouts programatically

"Charge pages" or "charges" are an extended feature of Helio Pay Links that allow you to generate unique, single-use checkout pages from the same paylinkID.

Charges are optimal for mobile payment flows, deep-linking, QR codes, embedded pay buttons on simple websites like Wix, plugins to E-commerce baskets, or other custom payment flows.

Create a Charge Page via Widget

You can embed a Helio widget in any website to generate charges. When using the widget, a new tab will open, redirecting the user to the unique checkout page.

The user will only be able to pay once, and refreshing the page will not allow the user to transact again.

When creating your checkout widget, simply include "display": "new-tab" in your configuration code to enable charges. Below is an example configuration.

{
  "paylinkId": "657729a959531071881ed7c5", // Use your own paylink ID!
  "display": "new-tab",
  "theme": {
    "themeMode": "light"
  }
}

When a user selects Pay with Card, scans the QR code or connects from a mobile device, a charge page is automatically generated to offer the optimal user experience.

Refer to our Checkout Widget documentation for more information or use our Checkout Widget Builder to get started quickly.

Create a Charge via API

Pre-requisites

In order to create a Charge using the Helio API, you need to complete the following steps.

1. Create Helio Account & get API keys

• Navigate to https://app.hel.io and login by using any of the login methods.

• Navigate to the settings page and select the API tab.

• Click on Enable checkbox, this will generate Public API Key and Secret API Key for you.

• Save both securely since you won't be able to retrieve the Secret API Key again, however, you can always regenerate both (which will override the old one).

2. Create a Pay Link

• Navigate to the Pay Links section on https://app.hel.io and create a new Pay Link.

• Fill in the required details, set the price and generate the pay link.

• Note: You can also create a Pay Link via API.

• Once you have set up your Pay Link, simply grab the paymentRequestIdfrom the Pay Link URL

paymentRequestId

• API Endpoint: https://api.hel.io/v1/charge/api-key

• HTTP Method: POST

• Required Query Parameters: ?apiKey={{Your public key here}}

• Required Headers: Authorization: Bearer {{Your API Token here}}

Example request body:

{
    "paymentRequestId": "667974dbb38d45b726751902",
    "requestAmount": "0.2"
}

• For Pay Links with preset pricing, only paymentRequestID is required.

• If you select dynamic pricing, you'll specify requestAmount, this is the amount the user pays.

Example response body:

{
    "id": "667c375be240df9843f7f4f9",
    "pageUrl": "https://app.hel.io//charge/87e3482c-669b-4c62-ab01-23239889acb4"
}

• "id" represents the id of the charge.

• "pageUrl" is the url of the charge page.

Example query:

curl --location 'https://api.hel.io/v1/charge/create/api-key?apiKey=<YOUR_PUBLIC_API_KEY>' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer YOUR_SECRET_API_KEY' \
--data '{
    "paymentRequestId": "667974dbb38d45b726751902",
    "requestAmount": "0.2"
}'

From the following example replace: YOUR_PUBLIC_API_KEY, YOUR_SECRET_API_KEY, with the values you collected in the previous step.

Using additionalJSON in Your Request:

You can use the additionalJSON field within the customerDetails object to include any extra information you'd like to pass along with your payment request

Example request body:

{
  "paymentRequestId": "66c49e24701f6930ee9c77dd",
  "requestAmount": "0.01",
  "prepareRequestBody": {
    "customerDetails": {
      "additionalJSON": "[]"
    }
  }
}

Example query:

curl --location 'https://api.hel.io/v1/charge/create/api-key?apiKey=<YOUR_PUBLIC_API_KEY>' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer YOUR_SECRET_API_KEY' \
--data '{
    "paymentRequestId": "667974dbb38d45b726751902",
    "requestAmount": "0.2"
    "prepareRequestBody": {
    "customerDetails": {
      "additionalJSON": "[]" # or whatever json you want here.
    }
  }
}'