One of the important features needed for a subscription business is to allow your users to add/update their payment method securely. Chargebee's customizable hosted update payment method page will help you implement it quickly. The theme support ensures that you carry over your branded website's design. Since it is 'hosted' at Chargebee, your servers don't handle any sensitive card information. This drastically reduces the security requirements, PCI compliance and more.
'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 could become a paid user by adding his/her payment method (such as card) in the self service page. The user will be charged automatically at the end of the trial period.
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 create the subscription via the API 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.
Design a page where users can view their subscription details and also have the option to add/update payment method. In our demo application, we've assumed that there will only be a single plan and the user is currently in trial.
We show the subscription details fetched from Chargebee based on the logged-in email id which is used as the id in Chargebee.
When the user clicks on the add card link, the request will be sent to the server.
Now lets see the demo app's 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 have implemented a simple profile page displaying the account and subscription information along with the payment method details.
We have fetched the subscription details using the retrieve subscription api. The API response returns the customer, subscription and card details.
We use the subscription details response to display the information.
We either ask the user to add payment method if there is no card associated.
If the payment method is already present, we show the existing payment details and allow the user to update the card.
When the server receives the update request, we invoke Chargebee's Hosted Page > update payment method api . The API will return a hosted page resource response containing the URL to forward the user to.
We send a 302 redirect response with location set to the URL.
Once the user has finished adding(or updating) the payment method ,Chargebee will send the user back to our server using the redirect URL that we had specified in the 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 canceled. Do not use this parameter. Rather fetch it from Chargebee
After we've fetched the hosted page and got the details of the user, we redirect the user back to the profile page.
Integrating an update payment method functionality is very easy. You just need to follow the steps below: