Hosted Checkout
Chargebee Checkout collects your customer's account and billing details and completes the order by processing the payment. Customers are redirected to a secure payment page that Chargebee hosts and that you can brand with your own logos and colors.
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.
UI Layout Options
Chargebee currently offers the following layouts that you can choose from based on your look and feel preferences:
- In-app layout
- Full-page layout (available only with Product Catalog v2.0)
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.
Warning
The in-app layout displays as a modal popup. Chargebee.js loads the checkout UI in an iframe that Chargebee manages. Do not wrap the in-app checkout in your own iframe element.
Full-Page Layout
Upgrade required The full-page layout for Checkout is available only on Chargebee Billing with the latest Product Catalog version.
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
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 business 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
Was this article helpful?