Handling Events

Handling actions & events in a billing page

Handling actions

The handleResponse function can be used to update user information in your database regarding the customers subscription information, to do redirects on signup, or present notifications.

Parameters

handleResponse will pass a variable which contains the following properties

Variable Name

Description

event

The name of the event that occurred

response

The response object returned from Stripe

Events

Event Name

Description

Response Object

pre_load

First thing run after the embed javascript loads, before any API calls have been made. Use to inject React components or tell when the embed has loaded.

Embed Configuration

post_load

billingData: null — means the subscription portal is not loaded yet

billingData: {no_user: true} — means the current email is not a customer

productData: null — means pricing (products) are not loaded yet

productData: [ … ] — means the pricing (products) are loaded

billingData

currentConfig

productData

pre_subscribe

This event allows you to do some actions before creating a subscription. For example, you can use it for checking if a user exists in your system.

Throwing an error here will prevent Servicebot from creating a subscription.

email

service

tier

create_subscription

Triggered when a subscription is created from a billing page. Use this event to update your user system with the Stripe subscription ID and tier. Learn more on the install guide.

Subscription

change_plan

Triggered when a user upgrades or downgrades using the Plan Picker. You can use this to update their tier information or create notifications.

Subscription

select_plan

Triggered when a user selects a plan from the pricing page or plan picker. Use this to redirect to other pages or forms to create custom on-boarding flows.

Tier name & Plan

resubscribe

Triggered when a customer resubscribes from the portal. This occurs when a customer was cancelled, they come back to the portal and choose to resubscribe to a plan. Use this event to update your user system with the Stripe subscription ID and tier.

Subscription

cancel_subscription

Triggered when a customer requests a cancellation. Use this event to update subscription status for a user.

Subscription

update_card

Triggered when a customer updates their Credit Card information or enters it for the first time. Use for presenting notifications to the user.

Customer

Sample Redirect on Subscribe

Redirect to a URL after subscription

<div id="servicebot-subscription-portal"></div>
<script>
window.servicebotSettings = {
billing_page_id: "B4bD7TzIKxnsZfcgJoFk",
email: "example@somemail.com",
handleResponse: async function(payload) {
console.log("Event ", payload.event);
console.log("Response Object ", payload.response);
//Redirect on Signup example
if (payload.event == "create_subscription") {
window.location.href = "https://google.com";
}
}
};
(function() {
var s = document.createElement('script');
s.src = 'https://js.servicebot.io/embeds/servicebot-billing-settings-embed.js';
s.async = true;
s.type = 'text/javascript';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>

Sample Existing User check

Skip subscription creation if a user already exists

window.servicebotSettings = {
handleResponse: async function(payload) {
// Implement pre subscribe hook example
let { event, response } = payload;
if (event === 'pre_subscribe') {
// implement your logic for checking user exist in your system
let { email, service, tier } = response;
let exists = true;
// throw an error for servicebot to stop the subscribe action.
if (exists) {
throw {
// displays an error message in servicebot
message: 'User already exist, please login.',
callback: () => {
// call back to redirect or other actions you want to take.
window.location = '/login';
}
};
}
}
}
}