Hosted pages are the easiest and most secure way to integrate chargebee with your website. By using hosted pages, you can avoid the sensitive card information passing through your server and be compliant with most of the PCI DSS requirements.
When you request for a hosted page, a secure and unique URL will be returned which you could either embed or redirect depending upon the embed parameter value that you had passed.
Specifying "embed" parameter as true allows you to embed the "hosted page" in an iframe in your own website. This helps you provide the best experience to your user as they do not have to leave your website to provide card information. There are a few limitations:
- Your site URL must be embedded with HTTPS.
- Set the appropriate height and width for the iframe to avoid scrolling.
To use the hosted pages, you must configure Redirect URL in the Chargebee web interface under Hosted Pages Settings > Configuration. The configured redirect URL will be called with the following parameters after user had submitted the page.
- id - unique identifier of the hosted page resource
- state - succeeded, failed or cancelled
After the Redirect URL is called by Chargebee with the above parameters, the details of the hosted page can be fetched using Retrieve a hosted page API. The content attribute will have the details about the customer, subscription, card and invoice based on the type of the hosted page.
- Customer - The details about the new customer created.
- Subscription - The details about the new subscription created.
- Card - The details about the card provided while subscribing.
- Invoice - The details about the invoice, if one is generated.
Checkout Existing Subscription:
- Customer - The updated details of the customer.
- Subscription - The updated details of the subscription.
- Card - The details about the card provided while subscribing.
- Invoice - The details about the invoice, if one is generated.
- Customer - The details about the customer for whom the card was updated.
- Card - The details about the updated card. It will be present only if the type of payment method is card.
When an embedded hosted page is cancelled by your end user, the content attribute will have the unmodified details of customer, subscription and card resources.
Sample Hosted pageJSON
API Index URL
Hosted pages attributes
Type of the requested hosted page.
Checkout new Subscription
Checkout existing Subscription
Update Card for a Customer
Checkout One time Charge
Checkout One time Addons
Update Payment Method for a Customer
Checkout one time
Unique URL for the hosted page that will be included in your website.
Indicating the current state of the hosted page resource.
Indicates the hosted page is just created.
Indicates the hosted page is requested by the website
Indicates the hosted page is successfully submitted by the user and response is sent to the return url.
Indicates the page is cancelled by the end user after requesting it.
You can pass through any content specific to the hosted page request and get it back after user had submitted the hosted page.
If true then hosted page formatted to be shown in iframe. If false, it is formatted to be shown as a separate page.
Note : For in-app checkout, default is false.
Indicates when this hosted page url will expire. After this, the hosted page cannot be accessed.
This attribute will be returned only during retrieve hosted page API call and also the retrieved hosted page resource state should be either in "succeeded" or "cancelled" state. If hosted page state is "succeeded", then the subscription, customer, card & invoice(optional) resources during checkout can be obtained. If hosted page is state is "cancelled", then it will be empty i.e no information about checkout.