Guest Checkout Hosted Widget

The Guest Checkout Hosted Widget is a Cleeng hosted customer flow that lets customers buy a subscription as a gift without logging in or creating a Cleeng account. Removing the registration step shortens the purchase flow for one-time gift buyers.

To see the step-by-step guest gift purchase journey, go to the User Flow section of this guide.

Key Features

• Gift purchase without login or registration
• Gift purchase form displayed directly, with no purchase mode toggle
• Separate guest session, independent of your site's login state

Overview

Gift subscriptions feature allows you to configure gift offers and let your customers buy them for their friends and family.

Gift subscriptions feature involves:

• Gifter - a person who buys a gift. With the Guest Checkout widget, the gifter doesn't need a Cleeng account.
• Recipient - a person who receives a gift: a current subscriber or a person that doesn't have a subscription yet.
• Gift - a subscription offer that is purchased by a gifter for a recipient.

The Guest Checkout Hosted Widget is used by the gifter to purchase the gift. The recipient redeems it through the Redeem Gift Hosted Widget.

Prerequisites

Before integrating the Guest Checkout hosted widget, make sure you have:

1. A Cleeng account.
2. The cleeng.js embed script integrated on your site.
3. Guest checkout enabled for your account. Please contact the Cleeng Support Team to enable it.
   

   Note

   Guest checkout is activated per environment, so it needs to be enabled on sandbox and production.

4. A subscription offer created in the Cleeng Dashboard with the Purchasable as a gift option enabled and gift parameters set.
5. A dedicated redemption page URL (Checkout URL) and the redemption options (Gift redemption beahvior) configured in the Cleeng Dashboard, with the Redeem Gift Hosted Widget implemented on that page.
6. Google reCAPTCHA configured for your account (Cleeng Dashboard > Integration Hub > Identity Management > Google reCAPTCHA).

Code Integration

To embed a Cleeng widget, follow these steps:

1. Include the Cleeng-hosted script in your HTML file

In the index.html, or any HTML file of your app that will be loaded before using a Cleeng widget, include a Cleeng-hosted script in the <head> section of the document.

Production:

<script type="module" src="https://widgets.prod.cleeng.com/cleeng.js"></script>

Sandbox:

If you test the widget in Sandbox, the URL for the script will be different:

<script type="module" src="https://widgets.sandbox.cleeng.com/cleeng.js"></script>

2. Create a container for the widget

Create an empty HTML container, e.g., <div /> element, with required data as data-* attributes, as in the example below:

<div
  data-cleeng-widget="guest-checkout"
  data-cleeng-publisher-id="123"
  data-cleeng-offer-id="S123_US"
  data-cleeng-language="en-US"
/>

Where:

• data-cleeng-widget: The specific Cleeng widget you would like to render. Value: guest-checkout

• data-cleeng-publisher-id: Your unique Cleeng publisher ID (found in the Cleeng Dashboard under Admin & Tools > API Keys).

• data-cleeng-offer-id: The unique ID of the giftable offer (found in the Cleeng Dashboard under Offers & Coupons > Offers > ID column).

• data-cleeng-language: The language displayed to the end user. Supported values: en-US English, ar-AE Arabic, nl-NL Dutch, fr-FR French, de-DE German, it-IT Italian, pt-BR Portuguese (Brazil), pt-PT Portuguese (Europe), es-ES Spanish. If you omit this attribute, the widget defaults to English en-US.
  

  Note: Only one callback: onWidgetEvent is supported for guest checkout. Other communication methods are ignored.

User Flow

1. The gifter clicks a gift purchase button on your site and arrives at guest checkout.

2. The widget displays the gift purchase form directly. No login or registration screen is shown.

3. The gifter enters their first name, last name and email address (entered twice for confirmation).

4. The gifter enters the recipient's details: name, email address (entered twice for confirmation), delivery date, delivery time, and an optional personal message. The widget blocks payment until all required fields are valid.

5. The gifter enters payment details and completes the payment.

6. A confirmation page is presented with a button that will take the gifter to your home page. The gifter will receive a confirmation email.

7. On the delivery date, the recipient receives an email with a redemption link and redeems the gift through the Redeem Gift Hosted Widget.

   Note: If the offer is not enabled for gifting, the widget shows an error.

Testing

Test purchasing a gift as a guest

Publisher's side:

1. Create a giftable offer in the Cleeng Dashboard.
2. Define a redemption page URL in the dashboard. This URL will be sent to a recipient on a delivery date.
3. Define redemption options in the dashboard.

Gifter's side:

1. Open the page with the Guest Checkout widget in a browser session. Your authentication session in checkout doesn't matter here - the login and registration screen will not be presented.
2. Complete the buyer and recipient details with test data and purchase the gift. For test payment methods, see Testing in the Checkout Hosted Widget guide.
3. Check that the gift purchase appears in the Cleeng Dashboard. The transaction should be logged in the Gift Report. Additionally, the gifter should be visible in the Customer Accounts as a guest.

Test error handling

1. Embed the widget with an offer that doesn't have the Purchasable as a gift option enabled.
2. Check that the widget shows an error.

Test redeeming the gift

Follow the steps in Test redeeming a gift in the Redeem Gift Hosted Widget guide.

FAQs

Can I use hosted customer flows solution on Smart TVs or native mobile apps?

No, it's a solution for the web only.

Can I use the checkout.mode property with this widget?

No. Every purchase in the Guest Checkout widget is a gift, so the checkout.mode property doesn't work here. To offer both standard and gift purchases to logged-in customers, use the Checkout Hosted Widget.

What happens if a customer is already logged in on my site?

The widget doesn't use your site's login state. The customer completes the same guest gift purchase flow as any other visitor. As the integrator, you choose which widget to show based on the customer’s state. Embed the guest checkout widget for visitors who aren’t logged in, and the regular checkout for logged-in customers.

Does the recipient need a Cleeng account to redeem the gift?

Yes. The recipient must create an account or log in on the redemption page before redeeming the gift. See the Redeem Gift Hosted Widget guide.

Learn more

See Guest Checkout UI Overview.