Docs

Hosted Checkout 

Chargebee's hosted checkout collects your customer's account and billing details and helps complete the order by processing the payment.

With Chargebee's hosted checkout, the customers are redirected to a secure payment page hosted by Chargebee to complete payment for the product or service. These pages adhere to security and compliance standards such as PCI  and GDPR . The checkout page is customizable, allowing you to brand the page with your logos and colors. Chargebee's hosted checkout supports various payment options, including bank-based payments, direct debit, and wallets.

Chargebee's hosted checkout also integrates with other tools and features offered by the platform, such as customer management, invoicing, and tax calculation. The integration allows you to easily manage subscriptions and payments and track customer data and analytics. Hosted checkout is your one-stop destination with custom fields, default language translation, smart routing, analytics, and more.

Checkout Process 

Here is what happens in Chargebee when a customer clicks the Checkout/Subscribe button.

UI Layout Options 

Chargebee currently offers the following layouts that you can choose from based on your look and feel preferences:

  1. In-app layout
  2. Full-page layout

In-App Layout 

In-app is a simple, elegant, and intuitive modal-based checkout. On clicking the Subscribe/Checkout button, the Checkout modal opens, where your customers can enter their account and payment details. You can configure your brand elements, fields, display charges, taxes, a thank you message, and multiple workflows to suit your business needs. The in-app layout is optimized for mobile devices and elegantly handles the customer journey for your checkout funnel.

Here is a sample of the In-app Checkout.

Full-Page Layout 

The full-page layout of Chargebee hosted checkout is a standalone checkout experience for your customers which can be customizable similar to your website and can let your customers do checkout in a single step.

Here is a sample of the full-page Checkout.

Switching Layouts 

You can select the preferred layout for your customers via the Chargebee app by following these steps:

  1. Login to your Chargebee site.

  2. Go to Settings > Configure Chargebee > Checkout & Self-Serve Portal.

  3. The two layouts are displayed on the Layout page for you to select one. If you are enabling Full Page Checkout for the first time, click Explore.

  4. A window appears with the top features of Full Page Checkout listed. Click Use Layout to enable Full Page Checkout.

Repeat the same to switch to the in-app checkout (if required).

Workflows 

Hosted Checkout covers various workflows while managing your subscription businesses as part of this solution.

Let us see an example:

Let's say, your SaaS businesses have the below plans:

  • Monthly basic subscription plans.
  • Monthly advanced subscription plans.
  • One-time purchases such as a one-time charge for setting up support.
  • Gifting options for your customers.

Now, Chargebee-hosted checkout can be invoked for the above use cases like below:

  • Creation of a new subscription
    A subscription is created when a new customer subscribes for a basic plan using hosted Checkout.

  • Upgrading a subscription
    An existing customer can upgrade the subscription from a basic plan by choosing an advanced plan using hosted Checkout.

  • One-time purchases
    Chargebee Checkout also supports collecting one-off payments for one-time services such as a one-time charge for setting up support without creating any subscription for them. Learn more.

  • Gifting a subscription
    Gift a plan using Chargebee Checkout can be the easiest way to acquire new revenue for your business by allowing your customers to gift subscriptions to family and friends. Learn more.

The following information will be collected as part of Checkout:

  • Account information
  • Billing Address
  • Shipping Address
  • Payment details

Articles & FAQs 

Error: New checkout is not enabled on your test site.
Retrieve Subscription details on custom thank you page.
Unable to receive events on cbportal while using ChargebeeJS
What are the benefits of Chargebee's checkout page?
How to add a unit-based charge on the URL?
How can I figure out the one-time checkout payment from the webhook/events data?
Where do I add my domain for the allow-list?
“Subscription[Start_Date] should not be passed for cancelled subscription” error while importing subscriptions via Bulk operation.
How to customise the Consent management settings in Chargebee’s hosted page
Error: Session Expired
Chargebee's site name was renamed but why does this still show a different name?
[API Users] How to generate hosted page URL and embed via iFrame
Can I pass Google Analytics parameters along with Chargebee's hosted page URL?
How to edit the fields that appear on the hosted customer portal? Will it appear only in English?
Can I group plans and display them in the customer portal?
How to set a landing page URL for the logo added to the theme?
How can I restrict the countries at billing, shipping, and card addresses as a self-serve action?
I cannot allow my customers to checkout without payment details. Why?
Early closing of checkout popup (using hosted page)
How do I remove autofill of address fields in Checkout or portal?
How can I add or remove ‘Go to App’ from the self-service portal?
Close button does not work with 'Get Payment Link' option
What is the hosted pages/checkout pages of Chargebee?
What happens when my customer's immediate checkout amount is different from the subscription amount?
How to preview a checkout of a plan from Chargebee?
How to edit the Addon quantity from the portal?
How to differentiate between Addon and Charges in Portal?
How can I change the ‘Charge’ text on the V3 checkout page?
How can I add an allowed domain on single page checkout Hpv2?
Why coupon with the full discount is asking for payment information?
How to create Checkout URL if plan/addon ID contains “+” sign?
Can I disable the billing address section based on the payment method chosen at checkout?
Update payment method is not showing Direct-Debit for the customer
How can I pass prefilled Custom Fields through checkout via Drop-in Script?
How to load multiple charges in one-time checkout using a Drop-in script?
“Sorry,the URL or the some of the parameters are not valid” error with Hosted Pages API
Error 'Plan-specific hosted page is disabled while using plan specific URL
How to validate a payment method, during signup for a Trial?
How to customize the V3 (In-app) checkout - hosted pages?
How to setup Google Analytics 4 in Chargebee?
“Blocked autofocusing on a element in a cross-origin subframe” due to CSP headers
Why exit button on mobile checkout is not available?
Error while using Hosted Pages for Checkout API in case of tier-based pricing
Was this article helpful?
Loading…