Implementing Hosted Customer Flows [Beta]

About Hosted Customer Flows

Cleeng’s hosted customer flows provide ready-to-use widgets that allow you to embed subscription and payment functionality into your web application. By adding a short HTML snippet 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 customer flows compare to other integration methods, see our overview of available frontend integration options and their benefits.

📘

Hosted customer flows have been introduced as a Beta feature, meaning they're ready for real-world use while we gather user feedback to enhance their 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.