Getting Started

Building Blocks

Custom Fields

Subscription Features

Localization

Invoices

Credits

Order Management

Billing Features

Taxes

Payment Methods

Direct Debit Payments

Configuring Gateways

Revenue Recovery

Hosted Pages

Notifications

Reports and Analytics

Data Privacy & Security

Fraud Management

Migration

Open Source Resources

Other Features

API Integration

Third Party Integrations

Hosted Pages v2: Integration 

There are 2 ways of integrating Chargebee's Hosted Pages v2 with your application/website. You can choose the method that suits you the best.

This is the quickest way of integrating with our hosted pages. Use the plan specific URLs to link the hosted payment pages to your website. No coding required.

Get more flexibility when using the API based hosted pages integration method. This is especially for users looking to embed the hosted page into their website.

Click here to learn about what hosted pages are.

Note

If you signed up after March 1st 2014, ensure you've turned ON the hosted pages based on the integration type. Read more.

1. Plan URL Integration 

With Chargebee's plan specific hosted page URL integration, it is extremely quick and easy to allow users to sign up using our hosted checkout pages. All you need to do is copy the plan specific hosted page URL that is automatically generated every time you create a new plan, and link it to your product page or sign up button. When the buyer clicks on the link a unique URL is generated and they are redirected to a hosted checkout page. The buyer then enters their details and completes the signup.

To get the plan specific hosted page URL click on a plan name and open it in the web interface, you will find the URL at the bottom of the page.

Redirect Options

Once they have submitted their details and the checkout is successful, they need to be forwarded to a "Sign up Successful" or "Thank you" page. For this, you can either use Chargebee's default "Thank You" page included in our hosted page themes or configure a custom URL. This can be done during plan creation or by editing an existing plan.

Note

The redirect option has to be configured separately for each plan that you create. By default, Chargebee uses the "Thank You" page unless you specify a custom redirect URL.

Can I specify plan quantity or include addons during sign up through the hosted pages?

By default, quantity is 1 for plans. You can specify a different plan quantity by passing parameters to the hosted page URL. You can also include addons by passing them as parameters as well to the hosted page URL when sending users to hosted checkout page. Click here to learn more.


Returning subscription details in the redirect URL


When a customer is being taken to the configured redirect URL after a successful checkout, you can get the subscription details from the redirect URL and display that to your customer. Click here to learn more.


Customizing your hosted page


Change the way your hosted pages look based on your needs. Click here to learn more.

Can I change the appearance of the hosted page to match my website?

Most definitely! This can be done using our themes feature for hosted pages.


Testing your hosted page


In your test site, you can configure Chargebee's payment gateway and run tests on your hosted pages. You can get your hosted page URL from your plans as shown above. Once you've opened a hosted page using the URL from the plan, you can use the test credit card numbers that appear on the box to your right and simulate a checkout.

2. Hosted Page Integration via API 

Note

Checkout our sample API tutorials here .

Using the API integration method for hosted pages, you can create a new subscription , update an existing subscription  and update a card .


Redirect URLs


This is where the users will be forwarded to after a successful checkout. When integrating with the hosted pages using the API, the redirect URL needs to be configured in the web interface .

Configure the redirect URL for the hosted checkout pages under Settings > Configure Chargebee > Hosted Page Settings > Hosted Checkout Page.

The Update Card Page URL is the page users will be redirected to after they add/update their card details. This is also used when you send your customers the email to update their card details. Click here to learn more about requesting card details.

To configure the redirect URL, go to Settings > Configure Chargebee > Hosted Page Settings > Hosted Update Card Page.

Click here  to learn more about hosted page integration via API.


Can I keep the hosted page inside my website/application?


Yes if you are using the hosted page API integration method. Most often, you wouldn't want your customers to be routed to a different website just for entering their card details. You can keep customers on your page by embedding the hosted page in your website. This is done by setting the embed  value as ‘true' through the API.

You need to make sure that you use SSL on all your payment pages. Also, the payment page would come inside an HTML iFrame element, so you need to be careful when setting the height and width of the frame.

Note

We recently released the Custom Domain feature, which lets you white label your own subdomain and use it in the hosted pages' URLs. If you'd like this feature enabled for your Chargebee site, write to support@chargebee.com 

Was this article helpful?
Loading…