Create a Charge via Embedded Widget

Create one-time checkout flows and sessions.

Create a Charge via Embedded 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.

Keep a Charge in a Helio Checkout Widget Without Redirecting

You can configure your checkout widget to keep charges within the widget instead of redirecting, ideal for cases where your backend calculates the total after a user adds items to their cart on your site.

1. Create a Dynamic Pay Link and then create the Charge via API for this pay link.

Example API Response:

{
    "id": "678797b4d9b944d03e51f731",
    "pageUrl": "https://app.hel.io//charge/54cdf9b3-5793-4046-9ee8-bb62574bc4ae"
}

The charge token is the part at the end of the pageUrl. For example, in this case, it is 54cdf9b3-5793-4046-9ee8-bb62574bc4ae.

1. Add the chargeToken to your Checkout widget configuration.

Use the chargeToken: "54cdf9b3-5793-4046-9ee8-bb62574bc4ae" in your widget configuration as shown below.

{
  chargeToken: "54cdf9b3-5793-4046-9ee8-bb62574bc4ae", //HERE
  theme: { themeMode: "light" },
  "primaryColor": "#FF0000",
  "neutralColor": "#2D6FE1",
  display: "inline",
}

Note: Do not include paylinkId in the configuration of your checkout widget if you are using chargeToken.

For more configuration options, refer to the Checkout Widget Documentation.