Build your own Billing Portal with the Advanced Billing API

Let’s read the subscription, so you can display it in your UI.

1. Read the subscription
   You’ll need the subscription id, and then perform GET /subscriptions/:id.json.
   
    
2. Parse the data you want to display
   For example, the subscription id would be similar to response.subscription.id. Maybe you want the customer organization, which would be response.subscription.customer.organization
   
    

3. Pass the data to your frontend, and display it
   Here is a sample image that shows what an end result might look like:
    

   
   
    

Let’s read the subscription’s invoices, so you can display them.

1. Read the subscription’s invoices
   You’ll need the subscription id, and then perform GET /invoices.json?subscription_id=:id
   
    
2. Parse the data you want to display
   For example, the invoice uid would be similar to response.invoice.uid, or the invoice number response.invoice.number, or the invoice url response.invoice.public_url.
   
    
3. Pass the data to your frontend, and display it
   Here is a sample image that shows what an end result might look like in a basic table/list layout:
   
   

Let’s add component changes, so users can update them directly in your web application. 

1. Display the components to change
   Read the subscription’s components by performing GET /components.json.
   
    
2. Parse the data you want to display
   For example, the component name would be similar to response[0].component.name.
   
    
3. Pass the data to your frontend, and display it
   Here is a sample image that shows what an end result might look:
   
   
    
4. Add a preview changes section
   Make a POST to /allocations/preview.json, parse the result, and display. This will show the user what the cost will be.
   
    
5. Submit the form with a “Change Add Ons” button
   Make the api call with POST /allocations.json
   
    
6. Test your subscription dashboard
   Your subscription dashboard should now reflect the changes of the subscription.
   
    

Let’s add cancellations to your web application.

1. Add a cancel action
   It might look like this:
   
   
   
    
2. Add a page in your UI, with a preview, confirmation, and submit button
   It might look like this. This is a great place to clearly establish the terms of cancellation and informing the user of what will happen.
   
   
   
    

3. Upon submit, cancel the subscription
   Choose which method you prefer:

   Cancel Subscription (Immediate)	The user can cancel their subscription, and the cancellation takes effect immediately.	DELETE /subscription/:id.json
   Cancel Subscription (Delayed)	The user can schedule their subscription to cancel at the end of the current billing period.	POST /delayed_cancel.json

4. Test your subscription dashboard
   On your subscription dashboard, if you show the subscription state, it should now reflect the changes of the subscription. If there are certain actions that need to be shown/removed for a canceled subscription, or a subscription that is scheduled to cancel, do those in your UI.
   
    

Let’s add reactivations to your web application.
 

1. Add a reactivation action, and only show it when a subscription is canceled
   It might look like this:
   
   
   
    
2. Add a page in your UI, with a preview, confirmation, and submit button
   It might look like this. This is a great place to clearly establish the terms of reactivation and informing the user of what will happen, such as how much they will be charged (if any), and anything else you need to communicate.
   
   
   
    
3. Upon submit, reactivate the subscription
   Do this by performing a /subscriptions/:id/reactivate.json
    
4. Test your subscription dashboard
   On your subscription dashboard, if you show the subscription state, it should now reflect the changes of the subscription. If there are certain actions that need to be shown/removed for an active subscription, do those in your UI.
   
    

Let’s add pausing a subscription to your web application.
 

1. Add a pause action
   It might look like this:
   
   
   
    
2. Add a page in your UI, with a preview, confirmation, and submit button
   It might look like this: This is a great place to clearly establish the terms of pausing and informing the user of what will happen.
   
   
   
    
3. Upon submit, cancel the subscription
   Do this with POST /subscription/:id/hold.json
    
4. Test your subscription dashboard
   On your subscription dashboard, if you show the subscription state, it should now reflect the changes of the subscription. If there are certain actions that need to be shown/removed for a paused subscription, do those in your UI.
   
    

Let’s add resuming to your web application.
 

1. Add a resume action, and only show it when a subscription is paused
   It might look like this:
   
   
   
    
2. Add a page in your UI, with a preview, confirmation, and submit button
   It might look like this. This is a great place to clearly establish the terms of resuming and informing the user of what will happen.
   
   
   
    
3. Upon submit, resume the subscription
   Do this by performing /subscriptions/:id/resume.json
    
4. Test your subscription dashboard
   On your subscription dashboard, if you show the subscription state, it should now reflect the changes of the subscription. If there are certain actions that need to be shown/removed for a active subscription, do those in your UI.