Hosted Checkout

Chargebee Checkout collects your customer's account and billing details and completes the order by processing the payment. Customers complete checkout either in the in-app modal/iframe or in the full-page hosted flow.

Why use Chargebee Checkout instead of building your own

• Fast to set up. A working flow takes about five minutes.
• Secure and compliant. The pages adhere to standards such as PCI and GDPR.
• Multiple payment methods out of the box, including card, wallets, direct debit, and other bank-based payments. You control which methods appear without changing any code.
• Gateway changes without code changes. Configure different gateways per currency with smart routing rules; switching gateways is a configuration change, not a deployment.
• Accurate order estimates, including tax calculations and discounts.
• Mobile browser autofill support, such as card scanning in Safari on iOS.
• Two-click repeat purchases for returning users who have already subscribed to a product.
• The rest of Chargebee is already connected, including customer management, subscription management, invoicing, custom fields, default language translation, and analytics.

Checkout process

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

Both the in-app and full-page layouts run on the same underlying checkout, so the customer moves through the same sequence of steps regardless of the layout you choose:

1. Cart - the customer reviews the products, quantities, coupons, and charges added to the order.
2. Account details - the customer enters or confirms their account information (such as name and email).
3. Billing address - the customer enters or confirms their billing address. Address and postal code details are validated at this step.
4. Order review - the customer reviews the finalized order with the total amount they will be charged. The total is confirmed here, before any payment details are entered.
5. Payment - the customer enters their payment details and authorizes the payment. Once the payment is authorized (including any 3D Secure or wallet authentication), the order completes and the subscription is created immediately, even if the customer does not return to next page.
6. Thank you - the customer is redirected to a thank you page.

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.

Chargebee.js loads the in-app checkout UI in an iframe that Chargebee manages. Do not wrap the in-app checkout in your own iframe element.

Full-page layout

The full-page layout of Chargebee hosted checkout is a standalone checkout experience for your customers. It can be customized to match your website and allows customers to complete checkout in a single step. You can also embed the full-page checkout in your website or application.

Here is a sample of the full-page layout.

Full-page checkout supports embedding. To embed checkout in your website or application, use embedded checkout with Chargebee.js to mount checkout in a container on your page. Do not place hosted page URLs in your own iframe elements—Chargebee.js creates and manages the iframe for you.

Switching layouts

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

1. Log in 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 layout for the first time, click Explore.

   

4. A window appears with the top features of full-page layout listed. Click Use Layout to enable full-page layout.

   

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

Choosing a checkout solution

Chargebee offers more than one way to collect a subscription, and the right one depends on whether you serve customers through a web app, mobile apps, or both. The following illustration maps each case to a solution.

For the mobile options, see Mobile SDKs and wrappers. To wire hosted checkout into your own application, see Checkout integration.

Workflows

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

Let us see an example:

Now, Chargebee Checkout can be invoked for the above use cases as follows:

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

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

• One-time purchases
  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 Checkout 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