Setting Up Simplified Checkout on Your Website

Simplified Checkout lets your customers sign up and buy a package in just a few steps — no password required. You can add it to your website in one of two ways: as a popup button or as an inline checkout embedded directly on a page.

This guide walks you through both setup options, plus how to customize where customers go after they complete a purchase.

Both setup methods require one script to be added to your page, once:

<script src="https://widget.hapana.com/hapana_widget.js"></script> 

You'll also need two values from your Hapana Admin account:

• Package ID – identifies the package being sold
• Widget ID – loads your brand's settings and styling

Option 1: Popup Checkout (Modal View)

Use this option if you want a button on your page that opens the checkout in a popup when clicked — for example, a "Buy Now" button on your homepage.

How to set it up

Add a button to your page with a hapana-standalone-data attribute, along with the widget script:

<button   hapana-standalone-data='{"dataType":"packages",     "packageId":"YOUR_PACKAGE_ID",     "variant":"modalview",     "isSimplifiedCheckout":true,     "widgetId":"YOUR_WIDGET_ID",     "redirectUrl":"dashboard"}'   href="javascript:void(0)">   Buy Now </button>  <script src="https://widget.hapana.com/hapana_widget.js"></script> 

Replace YOUR_PACKAGE_ID and YOUR_WIDGET_ID with your actual values.

Good to know:

• You can style the button however you like to match your site.
• The button stays on the page after the popup is closed, so customers can reopen it if needed.
• The popup only opens when clicked — it will not open automatically on page load.

Important: Don't use the inline widget tag (see Option 2) for a popup. The inline tag opens automatically as soon as the page loads, which means the checkout would appear before the customer clicks anything. For a popup, always use the button method above.

Option 2: Inline Checkout (Page View)

Use this option if you want the checkout to appear directly on a page — for example, a dedicated checkout landing page.

How to set it up

Add the widget tag where you want the checkout to appear, along with the widget script:

<hapana-widget   data-type="packages"   variant="pageview"   package-id="YOUR_PACKAGE_ID"   is-simplified-checkout="true"   widget-id="YOUR_WIDGET_ID"   redirect-url="dashboard"> </hapana-widget>  <script src="https://widget.hapana.com/hapana_widget.js"></script> 

Replace YOUR_PACKAGE_ID and YOUR_WIDGET_ID with your actual values.

With this method, the checkout loads directly on the page — there's no button or click needed.

Settings Reference

Both setup methods use the same settings — the only difference is the format: the popup button uses a JSON object, while the inline tag uses standard HTML attributes.

Redirect Options: Where Customers Go After Purchase

After a successful purchase, you can send customers to a specific page or another part of your Hapana setup:

Troubleshooting

The popup opens automatically when the page loads. This happens if the inline widget tag was used instead of the popup button. Switch to the hapana-standalone-data button method described in Option 1.

The "Buy Now" button disappears after the popup is closed. This usually happens when a custom script is used to recreate the widget on each click. Use the standard button and script setup shown in Option 1 — no additional scripting is needed.

The popup is slow to reopen. This can happen if the widget script is being reloaded every time the button is clicked (for example, due to a cache-busting parameter like ?v=). Load the widget script once per page — reopening the popup will then use the version already loaded, without needing to download it again.