The checkout page is the first step in on-boarding your customers, they fill out a form,  press submit and are taken to your app. Servicebot provides an embeddable checkout form that does just this. This guide is meant to explain some of the more advanced features of the checkout form so you can perfect your customer on-boarding flow. 

For technical documentation explaining the available options, go here

How to integrate with your app 

When a customer submits the checkout form using, a couple things happen

  1. A webhook is called, pre_provision , you can read about webhooks here
  2. A new customer is created in Servicebot if no token was passed in the options, a if a token is specified, a subscription under the existing user will be created
  3. A new subscription is created in Servicebot
  4. The customer's card is charged if no free trial is present on the subscription
  5. A webhook is called, post_provision 
  6. The handleResponse function is called containing information about the purchased subscription

We recommend using the handleResponse  function to integrate the checkout form with your app. In this function the goal is to get the user authenticated with your app and logged in. In the example below, the function is authorizing with the app by calling a registration API and redirect to the app dashboard.

Example embed code for integrating with an app

Servicebot.Checkout({
    templateId: 1,
    paymentStructureTemplateId: 1,
    url: "https://my-servicebot.serviceshop.io",
    selector: document.getElementById('servicebot-checkout-form'),
    handleResponse: async function(response){

        //this an API that will register and create a session cookie
        const registerAPI = "https://my-app.com/api/auth/register"
        let appResponse = await fetch(registerAPI, {
            method: "POST",
            headers: {
                Content-Type: "application/json"
            },
            body: JSON.stringify(response)
        });

        //redirect to dashboard after a session is created
        window.location = "/dashboard";
    },
    setPassword: true
});

How to use the checkout form with existing users

Sometimes you want to be able to have your customers request multiple subscriptions. This can be accomplished by generating a JSON Web Token for a specific user, and passing that token into the checkout embed as follows.

Example embed code for existing user checkout form 

Servicebot.Checkout({
    templateId: 912,
    paymentStructureTemplateId: 1,
    url: "https://my-servicebot.serviceshop.io",
    selector: document.getElementById('servicebot-checkout-form'),
    handleResponse: function(response){
        //handle existing user checkout process here!
    },
    token: "eyJhbGci1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjMpYXQiOjE1MzczNz"
});

How to enable Google signup

Your customers can purchase subscriptions using their google account, to do this you must configure your Google Client ID on the Login Embed configuration. Go to  Embeds -> Login Page and configure your google client id. Once this is set, the sign up with Google button should appear on the checkout form and login form.

NOTE:   you must configure your credentials to whitelist the URL you are putting the checkout form on here

How to pre-fill fields

Sometimes you may want specific fields you have defined to be filled out when the customer gets to the checkout form. For email you just need to pass an email  option, for custom fields you have defined you can pass a propertyOverrides  option containing key value pairs of slugged field name, field value

Servicebot.Checkout({
    templateId: 1,
    paymentStructureTemplateId: 1,
    url: "https://my-servicebot.serviceshop.io",
    selector: document.getElementById('servicebot-checkout-form'),
    handleResponse: function(response){
        //handle checkout process here!
    },
    email: "newuser@goodcompany.com"
    propertyOverrides: {
        "company-name": "Good Company"
    }
});
Did this answer your question?