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

# 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"

# 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"

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

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

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

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

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

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

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_onetime_addons \
     -u {site_api_key}:\
     -d addons[id][0]="non_recurring_addon" \
     -d addons[quantity][0]=1 \
     -d subscription[id]="__test__5SK0bLNFRFuBrmq4M" \
     -d card[gateway]="tco"

curl  https://{site}.chargebee.com/api/v1/hosted_pages/checkout_onetime_addons \
     -u {site_api_key}:\
     -d addons[id][0]="non_recurring_addon" \
     -d addons[quantity][0]=1 \
     -d subscription[id]="__test__5SK0bLNFRFuBrmq4M" \
     -d card[gateway]="tco"

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

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