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 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.
optional, string, max chars=70 Unique identifier generated for each hosted page requested.
type
optional, enumerated string Type of the requested hosted page.
Possible values are
checkout_newCheckout new Subscription.checkout_existingCheckout existing Subscription.update_cardUpdate Card for a Customer.checkout_onetime_chargeCheckout One time Charge.checkout_onetime_addonsCheckout One time Addons.update_payment_methodUpdate Payment Method for a Customer.checkout_one_timeCheckout one time.
url
optional, string, max chars=250 Unique URL for the hosted page that will be included in your website.
state
optional, enumerated string, default=created Indicating the current state of the hosted page resource.
Possible values are
createdIndicates the hosted page is just created.requestedIndicates the hosted page is requested by the website.succeededIndicates the hosted page is successfully submitted by the user and response is sent to the return url.cancelledIndicates the page is cancelled by the end user after requesting it.
pass_thru_content
optional, string, max chars=2048 You can pass through any content specific to the hosted page request and get it back after user had submitted the hosted page.
embed
boolean, default=true If true then hosted page formatted to be shown in iframe. If false, it is formatted to be shown as a separate page.
optional, timestamp(UTC) in seconds Indicates when this hosted page url is generated.
expires_at
optional, timestamp(UTC) in seconds Indicates when this hosted page url will expire. After this, the hosted page cannot be accessed.
content
jsonobject 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.
Hosted page to accept card details from the subscriber and create a new subscription. This is similar to our server to server API Create a Subscription.
When the redirect URL is notified of the result, we would advise you to retrieve the subscription and verify the details.
As mentioned before this behavior is very similar to the create subscription API call. All the web hook events will be fired only after the submission of payment details by the customer and successful creation of subscription.
Any errors related to the payment form that is submitted is handled as a response within the form so that the user is kept informed about the reason for failure to take corrective action.
Sample Request
# checkout a new subscription with customer details.
curl https://{site}.chargebee.com/api/v1/hosted_pages/checkout_new \
-u {site_api_key}:\
-d customer[email]="john@user.com" \
-d customer[first_name]="John" \
-d customer[last_name]="Doe" \
-d customer[phone]="+1-949-999-9999" \
-d subscription[plan_id]="no_trial"
copy
# checkout a new subscription with customer details.
curl https://{site}.chargebee.com/api/v1/hosted_pages/checkout_new \
-u {site_api_key}:\
-d customer[email]="john@user.com" \
-d customer[first_name]="John" \
-d customer[last_name]="Doe" \
-d customer[phone]="+1-949-999-9999" \
-d subscription[plan_id]="no_trial"
optional, integer, min=0 Number of cycles(plan interval) this subscription should be charged. After the billing cycles exhausted, the subscription will be cancelled.
redirect_url
optional, string, max chars=250 The customers will be redirected to this URL upon successful checkout. The hosted page id and state will be passed as parameters to this URL.
Although the customer will be redirected to the redirect_url after successful checkout,
we do not recommend relying on it for completing critical post-checkout actions.
This is because redirection may not happen due to unforeseen reasons.
Chargebee recommends listening to appropriate webhooks such as subscription_created
or invoice_generated to verify a successful checkout.
Note :
Redirect URL configured in Settings > Hosted Pages Settings would be overriden by this redirect URL. Eg : http://yoursite.com?id=<hosted_page_id>&state=succeeded
This parameter is not applicable for iframe messaging.
cancel_url
optional, string, max chars=250 The customers will be redirected to this URL upon canceling checkout. The hosted page id and state will be passed as parameters to this URL.
Note :
Cancel URL configured in Settings > Hosted Pages Settings would be overriden by this cancel URL. Eg : http://yoursite.com?id=<hosted_page_id>&state=cancelled
This parameter is not applicable for iframe messaging and in-app checkout.
pass_thru_content
optional, string, max chars=2048 You can pass through any content specific to the hosted page request and get it back after user had submitted the hosted page.
embed
optional, boolean, default=true If true then hosted page formatted to be shown in iframe. If false, it is formatted to be shown as a separate page.
optional, boolean, default=false If true then iframe will communicate with the parent window. Applicable only for embedded(iframe) hosted pages. If you're using iframe_messaging you need to implement onSuccess & onCancel callbacks.
Note : This parameter is not applicable for in-app checkout.
+
subscription
Parameters for subscription
pass parameters as subscription[<param name>]
subscription[id]
optional, string, max chars=50 A unique and immutable identifier for the subscription. If not provided, it is autogenerated.
subscription[plan_id]
required, string, max chars=100 Identifier of the plan for this subscription
subscription[plan_quantity]
optional, integer, default=1, min=1 Plan quantity for this subscription
subscription[trial_end]
optional, timestamp(UTC) in seconds The time at which the trial ends for this subscription. Can be specified to override the default trial period.If '0' is passed, the subscription will be activated immediately.
subscription[start_date]
optional, timestamp(UTC) in seconds The date/time at which the subscription is to start. If not provided, the subscription starts immediately. You can provide a value in the past as well. This is called backdating the subscription creation and is done when the subscription has already been provisioned but its billing has been delayed. Backdating is allowed only when the following prerequisites are met:
Backdating is enabled for subscription creation operations.
The current day of the month does not exceed the limit set in Chargebee for backdating such operations. This day is typically the day of the month by which the accounting for the previous month must be closed.
The date is not more than duration X into the past, where X is the billing period of the plan. For example, if the period of the plan in the subscription is 2 months and today is 14th April, start_date cannot be earlier than 14th February.
subscription[coupon]
optional, string, max chars=100
The id of the coupon. For validating the coupon code provided by the user , use the following codes in combination with the param attribute in the error response.
resource_not_found : Returned if the coupon is not present.
resource_limit_exhausted : Returned if the coupon has expired or the maximum redemption for the coupon has already been reached.
invalid_request : Returned if the coupon is not applicable for the particular plan/addon.
+
customer
Parameters for customer
pass parameters as customer[<param name>]
customer[id]
optional, string, max chars=50 The unique ID of the customer for which this hosted_page should be created. When not provided, a new customer is created with the ID set to the value provided for subscription[id]. If subscription[id] is unavailable, then the customer ID is autogenerated.
customer[email]
optional, string, max chars=70 Email of the customer. Configured email notifications will be sent to this email.
customer[first_name]
optional, string, max chars=150 First name of the customer. If not provided it will be got from contact information entered in the hosted page
customer[last_name]
optional, string, max chars=150 Last name of the customer. If not provided it will be got from contact information entered in the hosted page
customer[company]
optional, string, max chars=250 Company name of the customer.
customer[taxability]
optional, enumerated string, default=taxable Specifies if the customer is liable for tax
Possible values are
taxableComputes tax for the customer based on the site configuration. In some cases, depending on the region, shipping_address is needed. If not provided, then billing_address is used to compute tax. If that’s not available either, the tax is taken as zero.exempt
Customer is exempted from tax. When using Chargebee’s native Taxes feature or when using the TaxJar integration, no other action is needed.
However, when using our Avalara integration, optionally, specify entity_code or exempt_number attributes if you use Chargebee’s AvaTax for Sales or specify exemption_details attribute if you use Chargebee’s AvaTax for Communications integration. Tax may still be applied by Avalara for certain values of entity_code/exempt_number/exemption_details based on the state/region/province of the taxable address.
customer[phone]
optional, string, max chars=50 Phone number of the customer
+
card
Parameters for card
pass parameters as card[<param name>]
card[gateway]
optional, enumerated string Name of the gateway this payment source is stored with.
Possible values are
chargebeeChargebee test gateway.stripeStripe is a payment gateway.
braintreeBraintree is a payment gateway.authorize_netAuthorize.net is a payment gatewaypaypal_proPayPal Pro Account is a payment gateway.pinPin is a payment gatewayewayeWAY Account is a payment gateway.eway_rapideWAY Rapid is a payment gateway.worldpayWorldPay is a payment gatewaybalanced_paymentsBalanced is a payment gatewaybeanstreamBambora(formerly known as Beanstream) is a payment gateway.bluepayBluePay is a payment gateway.elavonElavon Virtual Merchant is a payment solution.first_data_globalFirst Data Global Gateway Virtual Terminal AccounthdfcHDFC Account is a payment gateway.migsMasterCard Internet Gateway Service payment gateway.nmiNMI is a payment gateway.ogoneIngenico ePayments (formerly known as Ogone) is a payment gateway.paymillPAYMILL is a payment gateway.paypal_payflow_proPayPal Payflow Pro is a payment gateway.sage_paySage Pay is a payment gateway.tco2Checkout is a payment gateway.wirecardWireCard Account is a payment service provider.
As mentioned before this behavior is very similar to the update subscription API call. All the web hook events will be fired only after the submission of payment details by the customer and successful checkout of subscription.
Any errors related to the payment form that is submitted is handled as a response within the form so that the user is kept informed about the reason for failure to take corrective action.
optional, boolean Should be true if the existing addons should be replaced with the ones that are being passed.
billing_cycles
optional, integer, min=0 The number of billing cycles the subscription runs before canceling. If not provided, then the billing cycles set for the plan is used.
redirect_url
optional, string, max chars=250 The customers will be redirected to this URL upon successful checkout. The hosted page id and state will be passed as parameters to this URL.
Although the customer will be redirected to the redirect_url after successful checkout,
we do not recommend relying on it for completing critical post-checkout actions.
This is because redirection may not happen due to unforeseen reasons.
Chargebee recommends listening to appropriate webhooks such as subscription_created
or invoice_generated to verify a successful checkout.
Note :
Redirect URL configured in Settings > Hosted Pages Settings would be overriden by this redirect URL. Eg : http://yoursite.com?id=<hosted_page_id>&state=succeeded
This parameter is not applicable for iframe messaging.
cancel_url
optional, string, max chars=250 The customers will be redirected to this URL upon canceling checkout. The hosted page id and state will be passed as parameters to this URL.
Note :
Cancel URL configured in Settings > Hosted Pages Settings would be overriden by this cancel URL. Eg : http://yoursite.com?id=<hosted_page_id>&state=cancelled
This parameter is not applicable for iframe messaging and in-app checkout.
pass_thru_content
optional, string, max chars=2048 You can pass through any content specific to the hosted page request and get it back after user had submitted the hosted page.
embed
optional, boolean, default=true If true then hosted page formatted to be shown in iframe. If false, it is formatted to be shown as a separate page.
optional, boolean, default=false If true then iframe will communicate with the parent window. Applicable only for embedded(iframe) hosted pages. If you're using iframe_messaging you need to implement onSuccess & onCancel callbacks.
Note : This parameter is not applicable for in-app checkout.
+
subscription
Parameters for subscription
pass parameters as subscription[<param name>]
subscription[id]
required, string, max chars=50 A unique and immutable identifier for the subscription. If not provided, it is autogenerated.
subscription[plan_id]
optional, string, max chars=100 Identifier of the plan for this subscription
subscription[plan_quantity]
optional, integer, min=1 Represents the plan quantity for this subscription.
subscription[start_date]
optional, timestamp(UTC) in seconds The new start date of a future subscription. Applicable only for future subscriptions.
subscription[trial_end]
optional, timestamp(UTC) in seconds The time at which the trial has ended or will end for the subscription. This is only allowed when the subscription status is future, in_trial, or cancelled. Also, the value must not be earlier than changes_scheduled_at or start_date. Note: This parameter can be backdated (set to a value in the past) only when the subscription is in cancelled or in_trialstatus. Do this to keep a record of when the trial ended in case it ended at some point in the past. When trial_end is backdated, the subscription immediately goes into active or non_renewing status.
subscription[coupon]
optional, string, max chars=100
Used to uniquely identify the coupon in your website/application and to integrate with Chargebee.
Note:
When the coupon ID contains a special character; for example: #, the API returns an error.
Make sure that you encode the coupon ID in the path parameter before making an API call.
+
card
Parameters for card
pass parameters as card[<param name>]
card[gateway]
optional, enumerated string Name of the gateway this payment source is stored with.
Possible values are
chargebeeChargebee test gateway.stripeStripe is a payment gateway.
braintreeBraintree is a payment gateway.authorize_netAuthorize.net is a payment gatewaypaypal_proPayPal Pro Account is a payment gateway.pinPin is a payment gatewayewayeWAY Account is a payment gateway.eway_rapideWAY Rapid is a payment gateway.worldpayWorldPay is a payment gatewaybalanced_paymentsBalanced is a payment gatewaybeanstreamBambora(formerly known as Beanstream) is a payment gateway.bluepayBluePay is a payment gateway.elavonElavon Virtual Merchant is a payment solution.first_data_globalFirst Data Global Gateway Virtual Terminal AccounthdfcHDFC Account is a payment gateway.migsMasterCard Internet Gateway Service payment gateway.nmiNMI is a payment gateway.ogoneIngenico ePayments (formerly known as Ogone) is a payment gateway.paymillPAYMILL is a payment gateway.paypal_payflow_proPayPal Payflow Pro is a payment gateway.sage_paySage Pay is a payment gateway.tco2Checkout is a payment gateway.wirecardWireCard Account is a payment service provider.
Using this API, you can request your customers to update their payment method details or change their payment method. This is used in scenarios like customers updating their payment methods before the end of trial or customers switching among payment methods.
When this API is invoked, it returns a hosted page URL. When the customers are directed to this URL, they will be able to change/update their payment methods.
Depending on the payment methods (Card, PayPal Express Checkout, Amazon Payments) that you offer your customers, they will find options to switch among the various methods of payment.
Note:
If the card[gateway] parameter is passed, and the customer chooses Card as a payment method, then the card details are stored in the gateway which is passed. However, if the card[gateway] parameter is passed and the customer chooses PayPal Express Checkout/Amazon Payments as a payment method, the gateway passed will be ignored.
The option of embedding into an iframe is not supported for PayPal Express Checkout and Amazon Payments as customers are redirected to the respective website pages. Hence if you have PayPal Express Checkout/Amazon Payments configured and pass the parameter embed=true, this will result in an unsuccessful API request. Also, if you have all the three payment methods (Card, Paypal Express Checkout and Amazon Payments) configured and pass the parameter embed=true, the returned hosted page URL will show only Card Payment as a payment method.
optional, string, max chars=250 The customers will be redirected to this URL upon successful checkout. The hosted page id and state will be passed as parameters to this URL.
Although the customer will be redirected to the redirect_url after successful checkout,
we do not recommend relying on it for completing critical post-checkout actions.
This is because redirection may not happen due to unforeseen reasons.
Chargebee recommends listening to appropriate webhooks such as subscription_created
or invoice_generated to verify a successful checkout.
Note :
Redirect URL configured in Settings > Hosted Pages Settings would be overriden by this redirect URL. Eg : http://yoursite.com?id=<hosted_page_id>&state=succeeded
This parameter is not applicable for iframe messaging.
cancel_url
optional, string, max chars=250 The customers will be redirected to this URL upon canceling checkout. The hosted page id and state will be passed as parameters to this URL.
Note :
Cancel URL configured in Settings > Hosted Pages Settings would be overriden by this cancel URL. Eg : http://yoursite.com?id=<hosted_page_id>&state=cancelled
This parameter is not applicable for iframe messaging and in-app checkout.
pass_thru_content
optional, string, max chars=2048 You can pass through any content specific to the hosted page request and get it back after user had submitted the hosted page.
embed
optional, boolean, default=true If true then hosted page formatted to be shown in iframe. If false, it is formatted to be shown as a separate page.
optional, boolean, default=false If true then iframe will communicate with the parent window. Applicable only for embedded(iframe) hosted pages. If you're using iframe_messaging you need to implement onSuccess & onCancel callbacks.
Note : This parameter is not applicable for in-app checkout.
+
customer
Parameters for customer
pass parameters as customer[<param name>]
customer[id]
required, string, max chars=50 Identifier of the customer.
+
card
Parameters for card
pass parameters as card[<param name>]
card[gateway]
optional, enumerated string Name of the gateway this payment source is stored with.
Possible values are
chargebeeChargebee test gateway.stripeStripe is a payment gateway.
braintreeBraintree is a payment gateway.authorize_netAuthorize.net is a payment gatewaypaypal_proPayPal Pro Account is a payment gateway.pinPin is a payment gatewayewayeWAY Account is a payment gateway.eway_rapideWAY Rapid is a payment gateway.worldpayWorldPay is a payment gatewaybalanced_paymentsBalanced is a payment gatewaybeanstreamBambora(formerly known as Beanstream) is a payment gateway.bluepayBluePay is a payment gateway.elavonElavon Virtual Merchant is a payment solution.first_data_globalFirst Data Global Gateway Virtual Terminal AccounthdfcHDFC Account is a payment gateway.migsMasterCard Internet Gateway Service payment gateway.nmiNMI is a payment gateway.ogoneIngenico ePayments (formerly known as Ogone) is a payment gateway.paymillPAYMILL is a payment gateway.paypal_payflow_proPayPal Payflow Pro is a payment gateway.sage_paySage Pay is a payment gateway.tco2Checkout is a payment gateway.wirecardWireCard Account is a payment service provider.
required, in cents, min=1 The amount to be charged. The unit depends on the type of currency.
description
required, string, max chars=250 Description for this charge.
pass_thru_content
optional, string, max chars=2048 You can pass through any content specific to the hosted page request and get it back after user had submitted the hosted page.
+
subscription
Parameters for subscription
pass parameters as subscription[<param name>]
subscription[id]
required, string, max chars=50 A unique and immutable identifier for the subscription. If not provided, it is autogenerated.
+
card
Parameters for card
pass parameters as card[<param name>]
card[gateway]
optional, enumerated string Name of the gateway this payment source is stored with.
Possible values are
chargebeeChargebee test gateway.stripeStripe is a payment gateway.
braintreeBraintree is a payment gateway.authorize_netAuthorize.net is a payment gatewaypaypal_proPayPal Pro Account is a payment gateway.pinPin is a payment gatewayewayeWAY Account is a payment gateway.eway_rapideWAY Rapid is a payment gateway.worldpayWorldPay is a payment gatewaybalanced_paymentsBalanced is a payment gatewaybeanstreamBambora(formerly known as Beanstream) is a payment gateway.bluepayBluePay is a payment gateway.elavonElavon Virtual Merchant is a payment solution.first_data_globalFirst Data Global Gateway Virtual Terminal AccounthdfcHDFC Account is a payment gateway.migsMasterCard Internet Gateway Service payment gateway.nmiNMI is a payment gateway.ogoneIngenico ePayments (formerly known as Ogone) is a payment gateway.paymillPAYMILL is a payment gateway.paypal_payflow_proPayPal Payflow Pro is a payment gateway.sage_paySage Pay is a payment gateway.tco2Checkout is a payment gateway.wirecardWireCard Account is a payment service provider.
optional, string, max chars=100 The coupon code to be applied.
pass_thru_content
optional, string, max chars=2048 You can pass through any content specific to the hosted page request and get it back after user had submitted the hosted page.
+
subscription
Parameters for subscription
pass parameters as subscription[<param name>]
subscription[id]
required, string, max chars=50 A unique and immutable identifier for the subscription. If not provided, it is autogenerated.
+
card
Parameters for card
pass parameters as card[<param name>]
card[gateway]
optional, enumerated string Name of the gateway this payment source is stored with.
Possible values are
chargebeeChargebee test gateway.stripeStripe is a payment gateway.
braintreeBraintree is a payment gateway.authorize_netAuthorize.net is a payment gatewaypaypal_proPayPal Pro Account is a payment gateway.pinPin is a payment gatewayewayeWAY Account is a payment gateway.eway_rapideWAY Rapid is a payment gateway.worldpayWorldPay is a payment gatewaybalanced_paymentsBalanced is a payment gatewaybeanstreamBambora(formerly known as Beanstream) is a payment gateway.bluepayBluePay is a payment gateway.elavonElavon Virtual Merchant is a payment solution.first_data_globalFirst Data Global Gateway Virtual Terminal AccounthdfcHDFC Account is a payment gateway.migsMasterCard Internet Gateway Service payment gateway.nmiNMI is a payment gateway.ogoneIngenico ePayments (formerly known as Ogone) is a payment gateway.paymillPAYMILL is a payment gateway.paypal_payflow_proPayPal Payflow Pro is a payment gateway.sage_paySage Pay is a payment gateway.tco2Checkout is a payment gateway.wirecardWireCard Account is a payment service provider.