Pricing Page Configuration

Overview

Below are the settings available to the Servicebot Pricing Page. With these you can change the service that's displayed, the fields your user's see, and even handle custom actions that happen when buttons are clicked. You can change these setting from the Servicebot Dashboard or directly in code.

Settings

Property Name

Type

Required?

Description

servicebot_id

string

yes

Servicebot unique ID associated with your account. It can be found on the Dashboard->Subscription Portal. Note: This ID is different for Live & Test mode.

service

string

yes

The service name configured in Stripe (metadata sb_service). This will define the tiers displayed on the pricing page (based on the Stripe Plans).

email

string

no

User's email. You may pass this to the pricing page and when the signup form loads it will not show the email field. The email will be passed through to the Stripe Customer creation.

customer_id

string

no

Stripe customer ID. This ID can be passed to the pricing page to have the subscription created for an existing Stripe Customer.

handleResponse

function

no

Function that is called when actions happen in the embed. Used to update user data, do redirects, or provide notifications. Details below.

coupon

string

no

Stripe coupon ID. Pass in to have a coupon automatically applied to all prices on the page.

options.disableCoupon

boolean

no

Set to true to hide the coupon section from users on signup and on the subscription management portal

options.forceCard

mixed

no

By default, the embed UI does not ask for payment information if they are on a free tier or there is a free trial for the tier.

This setting will enforce credit card form to show up as required input when users signup, change plan resubscribe depending on the value you set here. The available values are as follows:

true = always enforced for any of the events.

'always' = same as true, always enforced.

'signup' = only when user is signing up.

'change_plan' = only when user is changing plan.

options.disableTiers

array

no

Add an array of tiers (corresponds to metadata tag sb_tier) to disable users from being able to change to those specific plans. Eg: ['Tier 1', 'Tier 2']

options.default_tax_rates

array

no

An array of Stripe tax rate IDs to be applied to a subscription on creation. You can learn more about Stripe tax rates here.

options.metadata

object

no

An object of key-value pairs. They will be added to the metadata of the Customer and Subscription in Stripe when they are created using the portal.

Eg: {key1: 'value1', key2:'value2'}

options.quantity

object

no

Use to set the quantity of a subscription during creation. Can get an integer or an object of key-value pairs. The quantity will apply to products with the unti_label defined. If an integer is passed, it will apply the quantity to all products on the tier, if an object is passed with the unit_labels as keys, it will assign that quantity to the respective unit_label.

Eg: 5

Eg: {product_unit_label1 : 10, unit_label2: 20}

options.signupSuccessMessage

string

no

Success message that shows after successful subscription creation

options.card.hideName

boolean

no

Set to true to hide the name field on the Credit Card form.

options.card.hideAddress

boolean

no

Set to true to hide the address field on the Credit Card form.

options.card.hideCountryPostal

boolean

no

Set to true to hide the Country and Postal Code fields on the Credit Card form.

options.behavior.pricing. showPriceAsMonth

boolean

no

Set to true to show any intervals above monthly as their monthly rate. Eg: a $120/yr plan would show as $10/mo billed Yearly

options.behavior.signup.

promptPassword

boolean

no

Set to true to prompt for a password on signup. This field's value is passed through to handleResponse. Servicebot does not store or use it in any way.

Handle 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.

handleResponse is not required. But it is useful for redirects & custom logic.

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.

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 the portal. Use this event to update your user system with the Stripe subscription ID and tier. Learn more on the install guide.

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

Sample Portal Code

<div id="servicebot-billing-embed"></div>
<script>
window.servicebotSettings = {
servicebot_id: "Zsl0kaHKNxQq",
service: "Example Simple",
email: "example@somemail.com",
options: {
disableCoupon: true,
forceCard: true,
disableTiers: [
Simple,
],
},
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>

Example pre_subscribe hook

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';
}
};
}
}
}
}

Continue reading to learn how to change the style & add features to your pricing page!