New in Chargebee: Explore Reveal and understand your payment performance end-to-end.Try Now

Docschargebeedocs

HomeBillingPaymentsRevRecGrowthReveal
Support

Product Updates

  • Release Notes

Getting Started

  • Overview
  • Chargebee Billing Data Centers
  • Object Relationship Model
  • Understanding Sites
  • Developer Resources
  • Chargebee Tech Glossary
  • Articles and FAQ

Implementing Chargebee

  • Implementation Guide
  • Go-live Checklist
  • Articles and FAQ

AI in Chargebee

  • Chargebee Agents
  • Chargebee Copilot
  • Chargebee MCP Server (Model context protocol)

Product Catalog

  • Product Catalog Overview
  • Coupons
  • Articles and FAQ

Subscriptions

  • Working with Subscriptions
  • Billing
  • Orders
  • Articles and FAQ

Customers

  • Managing Customers
  • Account Hierarchy
  • Email Notifications
  • Branding
  • Configure Multiple Languages
  • Articles and FAQ

Invoices, Credit Notes and Quotes

  • Invoices
  • Credit Notes
  • Quotes [Legacy]
  • Transactions
  • Articles and FAQ

Taxes

  • Overview
  • Configuring Taxes
  • Country-specific Taxes
  • Articles and FAQ

Hosted Capabilities

  • Overview
  • Hosted Checkout
  • Hosted Self-Serve Portal
  • Hosted Pages Features
  • Additional Hosted Pages
  • Payment Components
  • Managing payments with ChargebeeJS
  • Mobile-Optimized Hosted Pages
  • Articles and FAQ

Site Configuration

  • Users & Roles
  • Custom Fields & Metadata
  • Mandatory Fields
  • File Attachments & Comments
  • Advanced Filter Options
  • Multicurrency Pricing
  • Multi-decimal Support
  • Configuring Reason Codes
  • Events and Webhooks
  • API Keys
  • Time Zone
  • Time Machine
  • Transfer Configurations
  • Articles and FAQ

Reports and Analytics

  • RevenueStory
    • Reports Explorer
    • Custom Fields in RevenueStory
    • Report Builder
      • Working with Reports
      • Data Sources
        • Coupons
        • Credit Notes
        • Customers
        • Customer Balance
        • Invoices
        • Orders
        • Payments
        • Products
        • Refunds
        • Subscriptions
        • Multientity
        • Product Family
        • Subscription Contract Terms
        • Dunning Details
        • Invoice Transactions
        • Invoice Line Items
        • Invoice Addresses
        • Invoice Discounts
        • Credit Note Line Items
        • Monthly Subscription History
        • Yearly Subscription History
        • Applied Credits
        • Monthly Component History
        • Yearly Component History
        • Order Line items
        • Payment Sources
        • Subscription Discounts
        • Subscription Addons
        • Subscription Shipping Addresses
      • Sample Reports
    • Monthly Recurring Revenue (MRR)
    • Metric Description
  • Home Dashboard
  • Frequently Asked Questions
  • FAQs for Classic Reports Sunset
  • Articles and FAQ

Integrations

  • Sales
  • Customer Support and Success
  • Finance
  • Tax
  • Marketing
  • Stitch
  • Collaboration
  • Contract Management
  • Order Management
  • Mobile Subscriptions (Legacy)
  • Other Integrations
  • Articles and FAQ

Data Privacy & Security

  • Two Factor Authentication
  • SAML Single Sign-On
  • System for Cross-Domain Identity Management (SCIM)
  • EU-GDPR
  • Consent Management
  • Personal Data Management
  • Compliance Certificates
  • HIPAA Guidelines
  • PCI Recommendations and Integration Types
  • Articles and FAQ

Data Operations

  • Bulk Operations
  • Migration
  • Articles and FAQ
  1. Billing
  3. Customers
  4. Hosted Pages
  1. Billing
  3. Customers
  4. Hosted Pages

Integration

There are two ways to integrate Chargebee's Single Page Checkout with your application or website. You can choose the method that works best for you.

1. Plan URL Integration

With Chargebee's plan-specific hosted page URL integration, it's quick and easy to allow users to sign up using our hosted checkout pages. Simply copy the plan-specific hosted page URL that is automatically generated every time you create a new plan, and link it to your product page or sign-up button. When the buyer clicks the link, a unique URL is generated and they are redirected to a hosted checkout page. The buyer then enters their details and completes the sign-up.

To get the plan-specific hosted page URL, click on a plan name and open it in the web interface. You will find the URL at the bottom of the page.

Redirection

Once they have submitted their details and the checkout is successful, they should be forwarded to a "Sign Up Successful" or "Thank You" page. For this, you can either use Chargebee's default "Thank You" page included in our hosted page themes or configure a custom URL. This can be done during plan creation or by editing an existing plan.

width=800px

Note

The redirect option must be configured separately for each plan you create. By default, Chargebee uses the "Thank You" page unless you specify a custom redirect URL.

FAQ for Plan URL Integration

1) Can I specify plan quantity or include addons during sign up through the hosted pages?

By default, the quantity is 1 for plans. You can specify a different plan quantity by passing parameters to the hosted page URL. You can also include addons by passing them as parameters to the hosted page URL when sending users to the hosted checkout page. Click here to learn more.

2) How do I return subscription details in the redirect URL?

When a customer is taken to the configured redirect URL after a successful checkout, you can get the subscription details from the redirect URL and display them to your customer.

Click here to learn more.

How do I customize my hosted page? You can change the way your hosted pages look based on your needs. Click here to learn more.

3) How do I customize my hosted page?

You can change the way your hosted pages look based on your needs. Click here to learn more.

4) Can I change the appearance of hosted page to match my website?

Absolutely! This can be done using our themes feature for hosted pages.

5) How do I test my hosted page?

In your test site, you can configure Chargebee and run tests on your hosted pages. You can get your hosted page URL from your plans as shown above.. Once you've opened a hosted page using the URL from the plan, you can use the test credit card numbers that appear in the box to your right and simulate a checkout.

2. Hosted Page Integration via API

Note

Check out our sample tutorials here.

Using the API integration method for hosted pages, you can create a new subscription, update an existing subscription, and update a card.

Redirect URLs

This is where users will be forwarded after a successful checkout. When integrating with hosted pages using the API, the redirect URL needs to be configured in the web interface.

Configure the redirect URL for hosted checkout pages under Settings > Configure Chargebee > Hosted Page Settings > Checkout Page.

width=800px

The Update Card Page URL is the page users will be redirected to after they add or update their card details. This is also used when you send your customers the email to update their card details. Click here to learn more about requesting card details.

To configure the redirect URL, go to Settings > Configure Chargebee > Hosted Page Settings > Hosted Update Card Page.

Click here to learn more about hosted page integration via API.

Can I keep the hosted page inside my website/application?

Yes, if you are using the hosted page API integration method. Most often, you wouldn't want your customers to be routed to a different website just to enter their card details. You can keep customers on your page by embedding the hosted page on your website. This is done by setting the embed value as 'true' through the API.

You need to make sure that you use SSL on all your payment pages. Also, the payment page will appear inside an HTML iFrame element, so you need to be careful when setting the height and width of the frame.

Was this article helpful?