Chargebee Checkout is version 3 of Chargebee's Hosted Pages (v2). If you are using Hosted Pages v2 in your LIVE site, please contact support@chargebee.com to upgrade to Checkout v3. Users signing up from Feb 06, 2018 will have Checkout v3 enabled by default.
Checkout v3 provides a smooth checkout experience for your customers while purchasing products or services from your site. The checkout pages are PCI compliant making data capture more secure.
Chargebee's Self-Serve Portal allows your customers to manage their subscription, view previous invoices, update billing or payment information and much more.
Why Checkout v3?
Checkout v3 will help you increase checkout conversion & reduce abandoned carts as your customers enter payment information without having to leave your website.
It is user friendly, secure and easy to work-around with. It allows existing/returning users to checkout at ease by auto-filling account information, including account and payment information.
To integrate via Chargebee API and customize options based on your business needs, check out Chargebee Checkout & Self-Serve Portal's technical reference . It will give you further insight into Authentication, Checkout flow etc.
Here's a quick overview of the comparison between the existing version of Hosted Pages (Hosted pages v2) and the upgraded version (Checkout v3)
| Hosted Pages v2 |
Checkout v3 |
| Full page checkout; your customers will be redirected to another page to complete the purchase |
Customers will not be redirected; a pop-up window will appear in the same page to fill in the payment details and complete the purchase |
| You can integrate via the following options:
|
You can integrate via the following options:
|
| Theme based customization |
No themes required; new look and feel that allows you to set up your brand elements without hassle |
| Payment methods supported: |
Payment methods supported: |
| Set Quantity in the Hosted Page URL |
Customer can select the quantity while checking out |
| Does not allow your customers to create multiple subscriptions under the same account |
An existing user can have multiple subscriptions under the same account |
| Custom Fields are supported |
Custom Fields are supported |
| Customizable texts, buttons and error messages |
Customizable texts, buttons and error messages |
| Pixel tracking is supported |
Pixel tracking is supported |
| Redirect URL is supported |
Redirect URL is supported |
| Checkout pages can be embedded in iframe; Customer Portal cannot be embedded in iframe |
Both Checkout pages and Portal are raised as an iframe(modal) in the middle of the screen and as a new window in mobile devices |
| Customers are allowed to switch across plans on their own |
You can configure how to and what plans your customer can switch to and switch from |
| Supports multiple languages |
Supports multiple languages |
| Customers can apply multiple coupons in the Self-Serve Portal |
Customers cannot apply multiple coupons* |
Setup your brand logo and other details which will be displayed in you Checkout & Portal; navigate to Settings > Configure Chargebee > Brand Styles. Read more about Chargebee Branding.
Checkout v3 is flexible and customizable in several ways.
For configuring Checkout v3 based on your need, log in to your Chargebee Account and navigate to Settings > Configure Chargebee > Checkout & Self-Serve Portal.
Use Manage Payment Method API to request your customers to update their payment method details or change their payment method.
You can configure which actions/options should be displayed.
| Action |
Description |
| Show legal information |
Choose to show Privacy links in your Checkout page. You can add links for "Privacy" and "Terms & Conditions". You can choose to show the checkbox to get the user's consent or not. |
| Allow customers to edit quantity for plans and addons |
Customers can edit the quantity of the plans/addons during checkout or not |
| Allow customers to add/remove addons |
Customers can add or remove addons linked to the plan or not |
| Allow customers to add/remove coupons |
Customers can add or remove the coupons applied by default or not |
| Allow customers to access checkout via API only |
If you don't want customers to access Checkout page using Drop-in script |
| Allow customers to have multiple subscriptions |
Customers can checkout another subscription using their existing account information. |
| Allow guest checkout |
Customers can skip login during checkout. Chargebee will create two customer instances with the different Customer IDs. This works only when Checkout v3 is integrated using Drop-in script. |
You can disable Checkout v3 if you want to. In such case, your customers cannot make a purchase via Chargebee's Checkout pages.
You can configure options to be allowed in Chargebee's Self-Serve Portal for your customers:
| Option |
Description |
| Customers can access the Self-Serve portal |
Choose how you want to allow your customer to access the Self-Serve Portal:
|
| Allow customers to download invoices |
Your customers can view and download their invoices or not |
| Allow customers to change subscriptions
|
Your customers can make changes to the subscription.
|
| Allow customers to cancel subscriptions
|
Customers can cancel subscription via the Portal or not
|
| Allow customers to reactivate cancelled subscription |
After canceling, should your customers be allowed to reactivate their subscription or not |
| Allow customers to remove scheduled changes |
Customers can remove the changes to the subscription if scheduled to be made at the end of term |
You can disable the portal if you want to. In such a case, your customers cannot view or access Chargebee's Self-Serve portal.
Other settings pertaining to the Checkout and Portal can be configured -
| Option |
Description |
| Autocomplete addresses |
Display address suggestions for customers when they start typing, powered by Google's Address Autocomplete plugin |
| Allow customers to add multiple payment methods |
Customers can add and manage multiple payment methods (Credit Card, PayPal etc.) |
| Skip order cart during checkout |
Enable if you want to skip the cart screen while completing the checkout |
| Keep coupon box open |
Choose to show the Coupon code text box open or closed during checkout |
| Customize plan/addon quantity based on meta configuration |
Setup plan/addon quantity limits and range to be displayed to your customers. Learn more. |
| Collect PO number from customers |
Enable if you want to capture a Purchase Order Number from your customers |
You can customize which sections/attributes should be displayed while check-out,
You can select and arrange fields to be displayed in the Checkout pages and Self-Serve Portal. You can configure properties of each field selected:
You can customize the field labels and messages displayed in the Checkout Pages and Self-Serve Portal.
Once you have configured the options, you can preview how the changes reflect in the following -
Once the configuration changes are made and reviewed, you can Publish the changes. In case you want to revert the changes, you can Discard the set of changes and configure again.
Using Chargebee.js is the quickest way to start accepting payments.
You can copy the code for plans/addons, paste it in your site and start accepting payments.
You can copy the code from the following screens:
You can follow the steps mentioned in the integration doc to setup API based integration.
Chargebee Checkout v3 supports conversion pixel tracking using Facebook and Google Analytics .
As an existing subscriber, your customers can purchase additional products or services.
Your customers don't need to remember the password, they can login via a one-time password (OTP) sent to their email or SMS.
OTP will be sent via SMS to the phone number entered
Twilio integration should be enabled to send OTP SMS to your customers. Learn more about setting up Chargebee-Twilio Integration.
Customers can skip the sign-in process during checkout.
When the customers enter an email address to begin checkout, Chargebee will check whether the email address is present in Chargebee.
If the email address is present in Chargebee, your customer can skip the account signin process. Chargebee will create two customer instances with different customer IDs.
This works only when Checkout v3 is integrated using Drop-in script.
Chargebee enables you to allow your customers to complete their checkout without adding any payment method to their subscription. This functionality is built in order to offer a smooth checkout experience for your customers who are skeptical about adding a payment method to their subscription before trying the product/service.
The checkout without payment details feature enables you to:
The Checkout without Payment Details feature is protected using Google Invisible reCAPTCHA to stop spam checkouts by bots. This is to ensure that every subscription created using this feature is authentic and not created by a bot.
Enabling/Disabling Checkout without Payment Details
To enable this option:
Select Settings > Checkout & Self-Serve portal
In the Checkout & Self-Serve portal page that opens, enable Allow customers to check out without payment details option.
Upon enabling this option, you can select when you'd like to apply this functionality. Select the necessary setting(s) from Skip payment details collection during checkout with checkbox. Available options are Full credit/discount coupons, Plans with free trials and Zero-dollar plans.
This feature is applicable only for new subscriptions created through checkout.
In case you are using the checkout only to collect payment information from your customers, this option will not have any effect (i.e payment information will be collected from all your customers).
You can disable this setting any time you wish in the future. Once you disable this, all the new subscriptions (free/trial/coupons) created post disabling this option will require a payment information during the checkout process itself.
If you are a white label/custom domain user, refer to FAQ No. 6
The following features are not supported in the current version:
1. How can I setup Plan/Addon quantity restrictions in Chargebee's Self-Serve Portal?
Plan-Addon quantity restrictions can be setup in Chargebee's Self-Serve Portal via json metadata. Here are a few samples:
Setup quantity based increments, in this case, the interval is set as 10, and the min qty is 10 and max qty is 100
{ "quantity_meta": {
"type": "range",
"min": 10,
"max": 100,
"step": 10
} }
Show specific quantity to be displayed
{"quantity_meta": {
"type": "fixed",
"values": [5, 6, 7, 8, 9, 10]
} }
2. What is Google's Address Autocomplete?
While entering the address details, Google's Address Autocomplete plugin will fetch the details and fill them automatically in the address fields.
Hense, your customers need not fill the complete address details.
3. What can be customized as part of the legal terms shown in the portal?
4. I'm using Hosted Pages v2 via plan specific hosted page URL integration, how should I switch to Checkout v3?
Plan specific URL based integration (full page checkout) is not directly supported with Checkout v3 (iframe based modal checkout), however you can use the URL if you want, it will open the modal in a different tab.
But for an elegant experience, you should use the Drop-in script.
4. How do I setup ACH payment method for my Checkout v3 and portal?
Plaid is required to display ACH as a payment method option in Chargebee's Checkout v3 and portal.
To setup ACH payment method for your Checkout v3 and portal, you need to:
5. How can I restrict my customers from switching between plans while editing subscription in customer portal?
By default, there are no options avaiable in your Chargebee site to restrict your customers from swithcing between plans while editing the subscription. However, you can contact support@chargebee.com and Chargebee will set it up for you. Say, plan upgrades and downgrades can be restricted. Editing a subscription is a lot flexible in portal v3 hence restricting your customers from switching between plans can be done however you want to.
6. I am a white label (custom domain) user, how do I enable Checkout Without Payment Details?
If you are a white label/custom domain user, enabling the Checkout Without Payment Details feature in the Checkout & Self Serve Portal will not have any effect.
To activate this feature,
Our support team will enable this feature and get back to you.
7. If I enable Checkout Without Payment Details, how can I collect the payment information in case I want to charge my customer in the future?
You can use our Update Payment Method or Pay now feature to collect payments in the future.
8. If I enable Checkout Without Payment Details for plans with free trials, will an automatic email be triggered asking for payment information at the end of the trial?
No, automatic emails will not be sent by Chargebee asking for payment information at the end of the trial. That said, you can add the update payment method button in your trial expiry emails to get the payment information from your customers.