Getting Started

Building Blocks

Custom Fields

Subscription Features

Localization

Invoices

Credits

Billing Features

Taxes

Payment Methods

Direct Debit Payments

Configuring Gateways

Fraud Management

Hosted Pages

Notifications

Reports and Analytics

Migration

Open Source Resources

Other Features

API Integration

Third Party Integrations

Checkout & Portal v3 

Introduction 

Note

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.

Hosted Pages v2 vs. Checkout v3 

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:

  • Plan specific URL based integration
  • API based Hosted Page integration

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:
Card,
PayPal via Braintree,
PayPal Express Checkout,
Apple Pay,
Stripe ACH via Plaid,
GoCardless,
Amazon Payments

Payment methods supported:
Card,
PayPal via Braintree,
PayPal Express Checkout,
Stripe ACH via Plaid,
GoCardless,

Other Payment methods will be supported in future releases

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*

Configure Brand Elements 

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.

Configure Checkout Pages & Portal 

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.

Checkout Page Settings

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.

Self-Serve Portal Settings

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:

  • Via Chargebee login (Customer will have to enter their email along with password/OTP)
  • Via API

Allow customers to download invoices

Your customers can view and download their invoices or not

Allow customers to change subscriptions

  • Apply subscription changes
  • Allow customers to change plan quantity
  • Allow customers to remove addons
  • Allow customers to add/remove coupons

Your customers can make changes to the subscription.

  • If allowed, when should the subscription changes be implemented:
    • Immediately
    • At end of term
  • Customers should be allowed to remove addons from the subscription. To add addons, you should contact support@chargebee.com  to make the change. If you want to allow your customers to switch between plans in the Self-serve portal the configuration can be done offline, you can contact support@chargebee.com  and set this up.
  • Customers should be allowed to add or remove coupons from the subscription

Allow customers to cancel subscriptions

  • Subscription will be cancelled
  • Allow customers to provide feedback during cancellation

Customers can cancel subscription via the Portal or not

  • If allowed to cancel, when should the subscription be cancelled:
    • Immediately
    • At the end of term
    • End user can choose (from the options above)
  • If allowed to cancel, can your customers provide feedback about why they are cancelling

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.

Advanced Settings

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

Field Configuration

You can customize which sections/attributes should be displayed while check-out,

  • Account Info
  • Custom fields (of the Subscription)
  • Billing Info
  • Shipping Info
  • Payment Info

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:

  • Show/ Hide
  • Mandatory
  • Optional
  • Hidden Parameter
  • To be copied from Billing/Shipping

Copy/Text Configuration

You can customize the field labels and messages displayed in the Checkout Pages and Self-Serve Portal.

Preview 

Once you have configured the options, you can preview how the changes reflect in the following -

  • Checkout pages
  • Self-Serve Portal
  • Action pages
    • Pay Now: You can send an email to customers with pending invoices requesting them to make a payment

Publish Changes 

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.

Drop-in Script Based Checkout 

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:

  1. Navigate to Product Catalog > Select a Plan > Grab code OR
  2. Navigate to Settings > Configure Chargebee > Checkout & Portal > Integrate with Chargebee and copy the code

API Based Integration 

You can follow the steps mentioned in the integration doc  to setup API based integration.

Conversion Pixel Tracking 

Chargebee Checkout v3 supports conversion pixel tracking using Facebook  and Google Analytics .

Existing/Returning Users 

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 sent via email

  • Email address will be used to identify the user (whether they are an existing or new user)
  • If email is found in Chargebee, OTP will be sent to the given email ID
  • User can enter the OTP to authorize and proceed
  • Subsequent purchases will be added to the existing user's account

OTP via SMS (Twilio Integration)

OTP will be sent via SMS to the phone number entered

Note

Twilio integration should be enabled to send OTP SMS to your customers. Learn more about setting up Chargebee-Twilio Integration.

Guest Checkout 

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.

Notes/Limitations 

The following features are not supported in the current version:

  • Customize themes/fonts for the checkout pages
  • Payment methods
    • Apple Pay
    • Amazon Payments
    • Union Pay via Adyen
  • Consolidated Invoicing
  • Advance Invoice
  • Multiple coupons cannot be applied in the Self-Serve portal
  • Referral Integration
    • ReferralCandy
    • Friendbuy
  • Affiliate Integrations
    • Refersion
    • LeadDyno
  • Typekit

FAQ 

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:

  1. 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
    } }
    
  2. 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?

  • Add URLs for Privacy Policy and T&C
  • Configure the text to be displayed in your portal
  • Configure to show the "I agree to.." checkbox or not

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:

  • Enable Stripe payment gateway in your Chargebee site
  • Enable ACH payments via Stripe in your Chargebee Account
  • Navigate to Settings > Configure Chargebee > Payment Gateways > Stripe > Edit in your Chargebee site, enable Use Plaid for instant authentication and fill in your Plaid credentials.

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.

Was this article helpful?
Loading…