Simplified Checkout Flow – Setup & Usage Guide

Overview

Simplified Checkout is a streamlined purchase experience that allows customers to sign up and purchase a package in just a few steps without needing to create a password.

The checkout can be embedded on any webpage as either:

Popup Modal (opens over the existing page)
Inline Page Component (renders directly on the page)

After a successful purchase, customers can optionally be redirected to:

Another Hapana widget (Classes, Dashboard, etc.)
A custom external URL

Quick Start

To add the Simplified Checkout widget to your page, paste the following HTML where you want the checkout to appear.

<hapana-widget
  data-type="packages"
  variant="modalview"
  package-id="YOUR_PACKAGE_ID"
  is-simplified-checkout="true"
  redirect-url="dashboard"
  widget-id="YOUR_WIDGET_ID">
</hapana-widget>

Replace:

YOUR_PACKAGE_ID → Package identifier from Hapana Admin
YOUR_WIDGET_ID → Your widget ID

Configuration Options

Display Modes

Mode	Value	Best For
Modal View	`variant="modalview"`	Embedding on an existing page — opens as a popup
Page View	`variant="pageview"`	Dedicated landing pages — renders inline

Widget Attributes

Attribute	Required	Values	Description
`data-type`	Yes	`packages`	Always set to `packages`
`widget-id`	Yes	Your widget ID	Loads brand settings, styles, and configuration
`is-simplified-checkout`	Yes	`true`	Enables simplified checkout
`variant`	Yes	`modalview` or `pageview`	Defines how the widget displays
`package-id`	Yes	Encoded package ID	The package customers will purchase
`redirect-url`	No	See Redirect Options	Where customers go after purchase

Redirect Options

After a successful purchase, the customer can be redirected to one of the following destinations:

Value	Behavior
`classes`	Opens the Classes schedule
`workshops`	Shows available Workshops
`dashboard`	Opens the customer Dashboard
`packages`	Shows the Packages list
`privates`	Shows Private sessions
`giftCards`	Opens Gift Cards
`https://example.com/thank-you`	Redirects browser to an external page
`false`	No redirect — success message appears and widget closes

If no redirect-url is specified, the widget stays after checkout and displays a success notification.

How the Flow Works

Step 1 – Customer Opens Checkout

Modal View: Appears as a button/trigger that opens the checkout inside a popup modal.

Page View: Checkout form appears directly embedded on the page.

Step 2 – Customer Signup (New Users)

If the user is not logged in, they will see a simple signup form.

Required fields:

First Name
Last Name
Email

Optional fields:

Phone Number (with country code)
Policy acceptance checkboxes (if configured)

No password is required. The system will:

Create the customer account
Generate a password automatically
Log the customer in immediately

Step 3 – Checkout

The checkout screen displays:

Package details (name, description, price)
Available locations
Payment method options
Promo code field
Agreement terms (if required)

Customers complete the purchase by clicking Pay & Book.

Step 4 – After Purchase

The behavior depends on the redirect-url configuration.

Internal Redirect — The target widget loads inside the same popup or page. Example outcomes include showing the class schedule, opening the dashboard, or allowing immediate booking.

Example:

redirect-url="classes"

External Redirect — The browser navigates to the external page.

Example:

redirect-url="https://example.com/thank-you"

No Redirect — A success message appears and the widget closes.

Example:

redirect-url="false"

Free Package Handling

Packages with a total price of $0 are automatically handled.

Behavior:

No payment method required
Promo code field hidden
Button changes from Pay & Book → Activate

Customers simply click Activate to claim the package. No special configuration is required.

Setup Examples

Example 1 – Modal Checkout with Dashboard Redirect

<hapana-widget
  data-type="packages"
  variant="modalview"
  package-id="OXk3QnovSmhWUUM2ckF1dzVzT2UwQT09"
  is-simplified-checkout="true"
  redirect-url="dashboard"
  widget-id="abc123">
</hapana-widget>

Result:

Popup checkout
Customer redirected to Dashboard after purchase

Example 2 – Full Page Checkout with Class Booking

<hapana-widget
  data-type="packages"
  variant="pageview"
  package-id="OXk3QnovSmhWUUM2ckF1dzVzT2UwQT09"
  is-simplified-checkout="true"
  redirect-url="classes"
  widget-id="abc123">
</hapana-widget>

Result:

Checkout rendered inline
Class schedule appears after purchase

Example 3 – External Thank You Page

<hapana-widget
  data-type="packages"
  variant="modalview"
  package-id="OXk3QnovSmhWUUM2ckF1dzVzT2UwQT09"
  is-simplified-checkout="true"
  redirect-url="https://yourbrand.com/thank-you"
  widget-id="abc123">
</hapana-widget>

Result:

Checkout popup
Browser redirects to custom thank-you page

Example 4 – No Redirect

<hapana-widget
  data-type="packages"
  variant="modalview"
  package-id="OXk3QnovSmhWUUM2ckF1dzVzT2UwQT09"
  is-simplified-checkout="true"
  widget-id="abc123">
</hapana-widget>

Result:

Success message shown
Widget closes

Customer Experience Scenarios

New Customer – Paid Package

Opens widget
Sees signup form
Enters personal details
Account created automatically
Checkout page appears
Adds payment method
Optional promo code
Accepts agreement terms (if required)
Clicks Pay & Book
Purchase completes and redirect occurs

New Customer – Free Package

Opens widget
Completes signup form
Account created
Checkout page appears
No payment required
Accepts agreement terms (if required)
Clicks Activate
Package activated

Returning Logged-In Customer

Opens widget
Goes directly to checkout
Existing payment method may appear
Clicks Pay & Book or Activate
Purchase confirmed

Post-Purchase Redirect Behavior

Modal View

With (variant="modalview"):

Redirected widget opens inside the same popup
Customer remains on the same page
Additional actions (class details, retry payment) open as layered popups.
Closing the popup returns to the original page.

Page View

With (variant="pageview"):

The checkout area updates to show the redirected widget (e.g., Classes or Dashboard).

External Redirect

If a full URL is used:

Browser navigates away from the current page.

FAQ

Where do I find the package-id?

The package ID is available in the Hapana Admin panel under package settings. It is a Base64-encoded identifier.

Can I add multiple simplified checkout widgets on the same page?

Yes. Each widget should have a unique id attribute and can reference different packages.

What happens if a customer already owns the package?

Customers can purchase the same package again. There are no re-purchase restrictions.

Does the customer receive a password?

No. Accounts are created using passwordless signup. Customers will receive a reset password link in the Welcome email, or can later set their own password via the Reset Password (Embed) flow.

Can this be used for class purchases?

No. Simplified Checkout only supports package purchases. data-type="packages" must always be used.

What payment methods are supported?

Supported payment methods depend on the Hapana payment configuration, typically:

Credit / Debit Cards
Bank Accounts (ACH)

How do promo codes work?

Customers can enter promo codes during checkout. Discounts are applied immediately and shown in the order summary. Promo codes are hidden for free packages.

What if the redirect value is incorrect?

If the value does not match a valid internal widget, the system attempts to treat it as an external URL, which may lead to a broken page. Use the exact values listed in the Redirect Options section.