Handling Events

Search…
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 Billflow 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​
pre_change_plan
Triggered before when a user clicks on the confirm button, but before the API call is made to change plan.
email
service
tier
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​
pre_resubscribe
Triggered when a customer clicks on the resubscribe button, but before the API call is made to resubscribe.
email
service
subscription_id
​Subscription​
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​
pre_cancel
Triggered when a customer clicks on the cancellation button. Use this to create a custom cancellation flow.
​
cancel_subscription
Triggered when a customer requests a cancellation. Use this event to update subscription status for a user.
​Subscription​
pre_change_card
Triggered when a customer clicks on change card button, but before the API call is made to change card. 
email
service
subscription_id
​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​
request_error
Triggered when any of our API requests failed. User for custom handling of any request failures.
The Request Error 
pre_update_quantity
Triggered before quantity is updated on a subscription from the customer portal
Price
quantity
subscription_id
update_quantity
Triggered after a quantity has been updated from the customer portal
​Subscription​
add_coupon
Triggered after a coupon has been added. Can be used to create custom coupon restriction logic.
​Coupon​
Sample Redirect on Subscribe
Redirect to a URL after subscription
1
<div id="billflow-embed"></div>
2
<script>
3
  window.billflowSettings = {
4
    billing_page_id: "B4bD7TzIKxnsZfcgJoFk",
5
    email: "[email protected]",
6
    handleResponse: async function(payload) {
7
      console.log("Event ", payload.event);
8
      console.log("Response Object ", payload.response);
9
      //Redirect on Signup example
10
      if (payload.event == "create_subscription") {
11
        window.location.href = "https://google.com";
12
      }
13
    }
14
  };
15
  (function() {
16
    var s = document.createElement('script');
17
    s.src = 'https://js.billflow.io/billflow-embed.js';
18
    s.async = true;
19
    s.type = 'text/javascript';
20
    var x = document.getElementsByTagName('script')[0];
21
    x.parentNode.insertBefore(s, x);
22
  })();
23
</script>
Copied!
Sample Redirect based on Tier Subscribed
Sample Pricing Page redirect for specific tier
Redirect to a URL after subscription
1
<div id="billflow-embed"></div>
2
<script>
3
  window.billflowSettings = {
4
    "billing_page_id": "B4bD7TzIKxnsZfcgJoFk",
5
    "loader": "2",
6
    handleResponse: async function(payload) {
7
      let event = payload.event;
8
      let response = payload.response;
9
      //Redirect for free plan (update tiername check to yours)
10
      if (event == "select_plan") {
11
        let tierName = response.tier.tierName;
12
        if (tierName == "Starter") {
13
          window.location.href = "https://google.com"; //CHANGE ME
14
        }
15
      }
16
    }
17
  };
18
  (function() {
19
    var s = document.createElement('script');
20
    s.src = 'https://js.billflow.io/billflow-embed.js';
21
    s.async = true;
22
    s.type = 'text/javascript';
23
    var x = document.getElementsByTagName('script')[0];
24
    x.parentNode.insertBefore(s, x);
25
  })();
26
</script>
Copied!
Sample Existing User check
Skip subscription creation if a user already exists
1
window.billflowSettings = {
2
	handleResponse: async function(payload) {
3
		// Implement pre subscribe hook example
4
    let { event, response } = payload;
5
		if (event === 'pre_subscribe') {
6
			// implement your logic for checking user exist in your system
7
			let { email, service, tier } = response;
8
			let exists = true;
9
			// throw an error for billflow to stop the subscribe action.
10
			if (exists) {
11
				throw {
12
					// displays an error message in servicebot
13
					message: 'User already exist, please login.',
14
					callback: () => {
15
						// call back to redirect or other actions you want to take.
16
						window.location = '/login';
17
					}
18
				};
19
			}
20
		}
21
	}
22
}
Copied!
Sample Track conversions with Google Analytics
Use GA to track signups
1
window.billflowSettings = {
2
  handleResponse: async function (payload) {
3
    let { event, response } = payload;
4
    console.log("Event ", event);
5
    console.log("Response Object ", response); //Send record to google
6
    if (payload.event == "create_subscription") {
7
      let { email, seravice, tier } = response;
8
      var eventData = {
9
        event: "subscriptionPurchased",
10
        email: email
11
      };
12
      window.dataLayer.push(eventData);
13
    }
14
  }
15
};
Copied!
Sample Coupon restriction logic
Use to prevent a specific coupon based on logic
1
  window.billflowSettings = {
2
    "billing_page_id": "MsPV2xxqNmPUjJVOEnu8",
3
    "handleResponse": function handleResponse(response) {
4
      // your code here 
5
      console.log("response", response)
6
      if (response.event === "add_coupon") {
7
        const coupon_id = response.response.coupon.id
8
        const bad_coupon = 'BAD'
9
        if (coupon_id == bad_coupon) {
10
          throw ({
11
            response: {
12
              data: {
13
                custom_error: "Custom Coupon Error~"
14
              }
15
            }
16
          })
17
        }
18
      }
19
    }
20
  };
Copied!
Invoice Portal Configs
Next - Developer Docs
Languages & Frameworks
Last modified 5mo ago
Copy link
Contents
Handling actions
Parameters
Events
Sample Redirect on Subscribe
Sample Redirect based on Tier Subscribed
Sample Pricing Page redirect for specific tier
Sample Existing User check
Sample Track conversions with Google Analytics
Sample Coupon restriction logic