Implementing Hosted Customer Flows

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.

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.
• 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

• Redeem Gift: used for gift subscriptions feature. It allows gift recipients to redeem gift subscriptions purchased by others. For integration details, see the Redeem Gift Hosted Widget Guide.

Review this self-guided demo to see how to implement Hosted Customer Flows in practice. It walks through the integration flow from a developer perspective, showing how to embed the widgets and handle interactions between your page and the widgets.

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.