Overview

UniBee supports fully customizable checkout pages, enabling merchants to tailor the visual style, form structure, and display logic of the checkout flow. This is especially useful for scenarios requiring branded user journeys, region-specific compliance (e.g. different tax logic), or embedding within existing websites or apps. This guide covers how to manage checkout templates, assign them to product plans, and configure layout and functional elements via UniBee’s admin console. Custom Checkout Page Overview
  • Navigation path: Product > Checkout Page
  • Access control:
    • Trial users: View-only access to the default template
    • Paid users: Full CRUD access to all custom templates
Navigation to Checkout Page

Template Management

Template List

All templates are listed with the following fields:
  • Template name
  • Creation date / last modified date
  • Status: Draft or Published
Search and filtering are supported by template name. Template List View

Template Operations

OperationDescription
CreateClick Add Template to launch the creation wizard
EditModify any field, preview changes in real time
SaveDraft changes are stored without affecting published template
PublishConfirm to apply latest changes
DeleteOnly allowed when template is not linked to any plan (confirmation required)
Template Operations

Assigning Templates to Plans

Each product plan can be optionally linked to a checkout template.
  • Field: Checkout Page Template
  • Location: Plan creation / edit form
  • Behavior:
    • If selected: the assigned template is rendered at checkout
    • If not selected: the default template is used
Plan Template Assignment

Template Configuration

Templates consist of two main configuration tabs:

Feature Settings

Controls the fields and logic within the checkout form.

Form Elements

FieldTypeNotes
EmailInputRequired, format validation
Payment MethodsMulti-selectAt least one required (e.g. Stripe, PayPal)
Account TypeRadioPersonal / Business — triggers VAT fields
CountryDropdownAffects tax logic

Order Summary

  • Product details: name, price, billing cycle
  • Coupon field: user input + apply button
  • Tax: automatically calculated and displayed (e.g. VAT(HK) 0% €0.00)

Customer Details

  • Phone number (optional)
  • Billing address (optional)
  • Company name (optional, required for business accounts)

Advanced Controls

  • Submit button text (e.g. “Continue”, “Start Now”)
  • Toggle banner / footer display
Feature Settings Configuration

Style Settings

Adjust font, color, spacing, and layout settings to match brand identity. Live preview is provided alongside configuration for immediate feedback. Style Settings Configuration

Business Rules

  • At least one payment method must be selected
  • Email is mandatory and format-validated
  • Country selection dynamically triggers tax recalculation
  • Business account selection forces VAT + company fields
  • Coupon logic triggers real-time price adjustment
Business Rules Implementation

Technical Specifications

Frontend

  • Fully responsive (desktop + mobile)
  • Real-time configuration preview
  • Status management (draft vs. published)

Backend

  • All template data is encrypted at rest
  • Strict separation between edit and publish environments
  • Template load performance: < 1.5s

Security

  • Trial and paid user access clearly separated
  • Deletion of in-use templates is restricted
  • Merchant data is isolated per account
Technical Specifications

UX & Interaction

  • Saving a draft does not affect live templates
  • Publishing requires confirmation modal
  • Deleting prompts warning and is blocked if linked to any plan
  • Required fields are marked with red asterisk (*)
  • Real-time success/failure messages are shown for all actions
User Experience and Interaction

Best Practices

  1. Start with a draft: Always create and test templates in draft mode before publishing
  2. Test thoroughly: Preview templates on different devices and screen sizes
  3. Keep it simple: Avoid overly complex layouts that might confuse users
  4. Brand consistency: Use your brand colors and fonts consistently
  5. Mobile-first: Ensure templates work well on mobile devices
  6. Performance: Keep customizations lightweight to maintain fast load times

Troubleshooting

  • Template not appearing: Check if the template is published and assigned to the plan
  • Changes not reflecting: Ensure you’ve published the latest draft changes
  • Cannot delete template: Verify the template is not linked to any active plans
  • Preview not working: Clear browser cache and refresh the page