Implementing Web Checkout (Hosted Widgets) [Beta]

About Hosted Widgets

Cleeng’s hosted widgets offer a fast, flexible, and developer-friendly way to embed subscription and payment functionalities into your web application. With just a few lines of HTML and one script, you can launch a fully functional checkout experience, manage user authentication, and handle payments — without building everything from scratch.

To review the currently supported features and see how Hosted Widgets compare to other integration methods, see our overview of available frontend integration options and their benefits.

📘

Widgets have been introduced as a Beta feature, meaning it’s ready for real-world use while we gather user feedback to enhance its functionality and address any minor issues.

Widgets

Below are the widgets currently available, with links to integration guides covering setup and customization of each widget:

• Checkout: complete purchase flow with payment processing.
  For integration details, see the Checkout Hosted Widget Guide.
• Auth: handles user login, registration, and password reset.
  For integration details, see the Auth Hosted Widget Guide.

  📘

  A refreshed design of the widget will be launched soon.

• Account: allows users to manage account details and subscriptions.
  For integration details, see the Account Hosted Widget Guide.

  📘

  A refreshed design of the widget will be launched soon

Global widgets methods for communication

The Cleeng script exposes a global window.cleeng object to provide communication with your website. Available methods include:

• onAuthTokensUpdate(callback): Subscribes to authentication token updates. The callback receives { jwt, refreshToken } when tokens change, or { jwt: null, refreshToken: null } on logout.
• setAuthTokens({ jwt, refreshToken }): Programmatically provides authentication tokens to all widgets. Use if you are using an external identity provider
• logout(): Programmatically logs out the user from all widgets
• onWidgetEvent(callback) - Sent in various parts of the application to give your application miscellaneous information.

You can integrate with the available global methods by following the steps in the Global Communication Methods Developer Guide.