Servicebot can generate a pricing page for your SaaS. This guide will go over how to configure and integrate the pricing page within your website. 

For technical documentation explaining the available options, go here

Configuring the Checkout page

When a customer picks a plan they are presented with a checkout form identical to what the checkout embed would generate. Any options you pass in the pricing embed will be passed to the checkout embed, read this article if you want to learn about how to configure your checkout page.

Go directly to the Checkout form

Sometimes you want to skip the pricing page and go directly to checkout, you can do this using the pricing embed by specifying a paymentStructureTemplateId  in the options, doing so will bring up the checkout form for that specific payment plan and bypass the pricing page. Here's an example

Servicebot.Tiers({
    templateId : 3,
    paymentStructureTemplateId: 12,
    url : "https://my-servicebot.serviceshop.io",
    selector : document.getElementById('servicebot-pricing-page'),
    handleResponse : (response) => {
        //handle the post-checkout process here
    }
})

Using your own Checkout page

If for some reason the Servicebot checkout form is not enough, you can handle the checkout logic yourself by adding a handleCheckout  option to the pricing page, the response is the paymentStructureTemplateId  that the customer picked. Here's an example.

Servicebot.Tiers({
    templateId : 3,
    url : "https://my-servicebot.serviceshop.io",
    selector : document.getElementById('servicebot-pricing-page'),
    handleCheckout : (response) => {
        /* redirects user to a different checkout page, passes
           paymentStructureTemplateId as a URL variable */
        window.location = `https://my-app.com/checkout?id=${response}`
    }
})
Did this answer your question?