Hosted pages

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 & 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. Drawbacks are

• Your site should also be in https
• You have to be careful with height and width of the iframe otherwise users might get scroll.

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 & invoice based on the type of the hosted page.

For Checkout New Subscription:

• 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.

For 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.

For Update Payment Method:

• 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 & card resources.

Sample hosted page [ JSON ]

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.

Related Tutorials

• Create a subscription using Chargebee's hosted page

Notes

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]="basic"

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]="basic"

Sample Response [ JSON ]

URL Format POST

You can checkout an existing subscription(typically in the trial state) by passing in the plan, quantity and addon details(like Update a Subscription)

When the redirect URL is notified of the result, we would advise you to retrieve the subscription and verify the details.

Related Tutorial

• Upgrade existing subscription using Chargebee's hosted page

Notes

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_existing \
     -u {site_api_key}: \
     -d subscription[id]="8avVGOkx8U1MX" \
     -d subscription[plan_id]="basic"

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_existing \
     -u {site_api_key}: \
     -d subscription[id]="8avVGOkx8U1MX" \
     -d subscription[plan_id]="basic"

Sample Response [ JSON ]

URL Format POST

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.

• 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.

curl  https://{site}.chargebee.com/api/v1/hosted_pages/update_payment_method \
     -u {site_api_key}: \
     -d customer[id]="4gkYnd21ouvW"

curl  https://{site}.chargebee.com/api/v1/hosted_pages/update_payment_method \
     -u {site_api_key}: \
     -d customer[id]="4gkYnd21ouvW"

Sample Response [ JSON ]

URL Format POST

This operation is only supported by the 2Checkout payment gateway.

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_onetime_charge \
     -u {site_api_key}: \
     -d subscription[id]="8avVGOkx8U1MX" \
     -d amount="1000" \
     -d description="Support charge"

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_onetime_charge \
     -u {site_api_key}: \
     -d subscription[id]="8avVGOkx8U1MX" \
     -d amount="1000" \
     -d description="Support charge"

Sample Response [ JSON ]

URL Format POST

This operation is only supported by the 2Checkout payment gateway.

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_onetime_addons \
     -u {site_api_key}: \
     -d subscription[id]="8avVGOkx8U1MX" \
     -d addons[id][1]="ssl"

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_onetime_addons \
     -u {site_api_key}: \
     -d subscription[id]="8avVGOkx8U1MX" \
     -d addons[id][1]="ssl"

Sample Response [ JSON ]

URL Format POST

curl  https://{site}.chargebee.com/api/v1/hosted_pages/DeQIGayOTtB9bs5y7VcdGWdBzhpqRecdR1 \
     -u {site_api_key}:

curl  https://{site}.chargebee.com/api/v1/hosted_pages/DeQIGayOTtB9bs5y7VcdGWdBzhpqRecdR1 \
     -u {site_api_key}:

Sample Response [ JSON ]

URL Format GET