Let us consider a user who is in trial and after trying the product wants to upgrade to a paid plan. With Chargebee, you can use our hosted checkout pages through API to allow the users to become a paid user.
The advantage of using hosted checkout pages is that you get a PCI DSS compliant checkout flow because your servers do not handle any of the sensitive card information. Click here to learn more about Chargebee's hosted checkout page option.
Learn more about theme customization here .
Using the complete API integration, you can build your own checkout form. But with this mode of integration, you will need to take care of the PCI compliance requirements.
'Honey Comics', our demo application, is a fictitious online comic book store providing a subscription service for comics. We send comic books every week to subscribers. In order to let customers try the service, we provide them with a free trial period for a month. The user would convert to a paid user by using the upgrade option in the website. As of now we charge the user immediately on upgrade even though there could be some trial period left.
BTW, in our sample implementation, to simplify code,
To try out the tutorial yourself, you'll need the following:
We should already have a trial subscription in Chargebee for that user. We could do this either via api call or via Chargebee's Admin UI. In addition to that, they should be signed-in into our application so that our system is able to identify the user.
Build a page where users can upgrade/checkout. In our demo application, we've assumed that there will only be a single plan and the user is currently in trial. When the user clicks on upgrade, the request will be sent to the server.
Click on </span>"Upgrade" <span class="text-muted">to enter your credit card details and upgrade to a paid subscription.</span><br><br> <form action="checkout" method="post" id="subscribe-form"> <!-- We have hard-coded the subscription id. It should be the subscription id of the user who has logged-in--> <input type="hidden" name="subscription_id" value="email@example.com"/> <input type="submit" class="btn btn-success" value="Upgrade" /> </form>
Now lets switch to the server side implementation
We first have to download and import the client library of our choice. Then we need to configure the client library with our test site and our test api key.
We send a 302 redirect response with location set to the URL.
Once the user is on the checkout page and has completed the checkout process, Chargebee will send the user back to your server based on the redirect URL that had been passed previously to the hosted page api call.
Additionally, the following parameters will be added to the redirect URL:
id - unique identifier of the hosted page resource.
state - succeeded, failed or cancelled.
We can use the 'id' parameter to get the details of the checkout using the retrieve a hosted page API. The response will contain the complete details regarding the subscription. If required we can synchronize our database using this information.
A note of caution. Even though the state is passed as a parameter to the redirect URL, we strictly recommend you to fetch the hosted page resource and check the status as shown in the sample code. This step is needed to avoid malicious users trying to hack your checkout process by changing the status value in parameter to success even in the case of failure.
After we've fetched the hosted page, we redirect the user to a simple thank you page.You could update the subscription in your database (skipped in demo) and redirect to the appropriate page.
Here is the summary of steps you need to follow: