The first step of the integration is to add the pricing page to your website. The pricing page will automatically load the Checkout forms you have configured so you do not need to embed the Checkout embeds. If you wish to use your own Custom Pricing pages, then you can copy the embed code from the Checkout embed instead of the Pricing embed, all the following data applies the same to both.

  1. Go to 'Embeds'->'Pricing Page' or 'Checkout Page'
  2. Select the Service you will be offering
  3. Click 'Copy Embed Code'
  4. Create a file in your frontend to hold your pricing page. (From code example: views/pricing.pug)
  5. Set up a route to serve your file. GET /pricing  displays the pricing & signup page. (app.js & controllers/home.js)
  6. Paste in the code to the file and configure for your needs

The options of the Pricing page embed code are:

  • templateId: The ID of the Service template used for the pricing page. This should be automatically assigned from the embed code. But you can set the value to the ID of any ‘Live’ Service templates. (To see a services ID, you can navigate to it from the Services tab and it is the last digits in the URL. You can also make the following API call as an admin to get all the Services: GET /service-templates)
  • url: The Servicebot instance URL. This should be automatically assigned from the embed code. It is the URL of the Servicebot instance. We will assign it to a global variable so we can use it in other places.
  • forceCard: Forces users to enter Credit Card. This should be set to true if you want credit card to be required during checkout. This is useful if your service has a free trial, but you still want credit card up-front.
  • setPassword: Forces users to set a password. Email is a default required field on checkout. Password is not required by default. Setting this to true will add password and password validation fields to the checkout process. If users set password up front, their account will be completed on signup, if users do not set password on checkout, they will be unable to log-in. They will need to complete registration using this process [[LINK TO REGISTRATION SECTION]]
  • handleResponse: Function called after a user completes signup. This is the most important part of the embed configuration and where you decide what happens after a user signs up. You can perform any steps needed after signup and redirect the user to the desired page. Here are two common situations:
  1. Servicebot as the single source for users: For this configuration, the common practice is to make an API call to login the newly created user (whether that be using Servicebot Auth, or another system), and redirect to your applications homepage.
  2. Users created in your application database as well: To keep a 1-1 mapping of Servicebot users and users in your application, you have two options. You can create a user in your system in the handleResponse function, or you can use webhooks to create the user. We recommend using webhooks for any business critical actions to avoid client-side javascript being tampered with.

The handleResponse response object contains data regarding the Service template, user data, fields from the request and more. The following is an example of the data you have available:

{
   "permissions":[
      "get_users_own",
      "..."
   ],
   "uid":196,
   "token":"asdhbGciOiJIU...",
   "id":117,
   "service_id":33,
   "user_id":196,
   "requested_by":196,
   "payment_plan":{
      "id":"SaaS-with-Auth-ID117-7ds3",
      "object":"plan",
      "active":true,
      "aggregate_usage":null,
      "amount":6000,
      "billing_scheme":"per_unit",
      "created":1548208627,
      "currency":"usd",
      "interval":"year",
      "interval_count":1,
      "livemode":false,
      "metadata":{

      },
      "name":"SaaS with Auth",
      "nickname":null,
      "product":"prod_EONk72bbq23vt4",
      "statement_descriptor":"Subscription",
      "tiers":null,
      "tiers_mode":null,
      "transform_usage":null,
      "trial_period_days":14,
      "usage_type":"licensed"
   },
   "name":"SaaS with Auth",
   "description":null,
   "subscription_id":"sub_EONkA33xiqcKPg",
   "subscribed_at":1548208627,
   "trial_end":1549418227,
   "status":"running",
   "type":"subscription",
   "split_configuration":null,
   "created_at":"2019-01-23T01:57:06.991Z",
   "updated_at":"2019-01-23T01:57:07.645Z",
   "payment_structure_template_id":123,
   "references":{
      "service_templates":[
         {
            "id":33,
            "category_id":null,
            "created_by":1,
            "name":"SaaS with Auth",
            "published":true,
            "created_at":"2018-10-26T02:08:56.897Z",
            "updated_at":"2018-11-18T20:21:13.902Z"
         }
      ],
      "service_instance_properties":[
         {
            "id":142,
            "name":"__usage",
            "type":"metric",
            "data":{
               "value":0
            },
            "config":{
               "unit":"User",
               "value":{
                  "name":"User"
               },
               "isSeat":true,
               "pricing":{
                  "tiers":[
                     "Basic",
                     "Plus"
                  ],
                  "operation":"multiply"
               }
            },
            "prop_class":null,
            "prop_label":"__usage",
            "prop_description":null,
            "created_at":"2018-10-26T02:08:56.917Z",
            "updated_at":"2018-10-26T02:08:56.917Z",
            "parent_id":117,
            "private":false,
            "prompt_user":true,
            "required":false
         }
      ],
      "users":[
         {
            "id":196,
            "role_id":3,
            "name":null,
            "email":"exampleuser@example.com",
            "provider":"local",
            "status":"active",
            "customer_id":"cus_EONkEEIeiJn44q",
            "phone":null,
            "last_login":null,
            "created_at":"2019-01-23T01:57:06.970Z",
            "updated_at":"2019-01-23T01:57:06.970Z",
            "google_user_id":null,
            "google_refresh_token":null
         }
      ],
      "payment_structure_templates":[
         {
            "id":123,
            "tier_id":81,
            "trial_period_days":14,
            "amount":6000,
            "type":"subscription",
            "currency":"usd",
            "interval":"year",
            "interval_count":1,
            "subscription_prorate":true,
            "statement_descriptor":null,
            "split_configuration":null,
            "created_at":"2018-11-06T19:16:16.471Z",
            "updated_at":"2018-11-06T19:16:16.471Z"
         }
      ]
   },
   "webhook_responses":{

   },
   "request":{
      "id":33,
      "category_id":null,
      "created_by":1,
      "name":"SaaS with Auth",
      "published":true,
      "created_at":"2018-10-26T02:08:56.897Z",
      "updated_at":"2018-11-18T20:21:13.902Z",
      "references":{
         "tiers":[],
         "service_template_properties":[]
      },
      "payment_structure_template_id":123,
      "email":"ExampleUser@example.com",
      "password":"12341234",
      "password_confirmation":"12341234",
      "amount":6000
   },
   "oauthResponse":{

   }
}
  • propertyOverrides: An Object with keys being property names and values being the value the property will submit with. If these properties are being overriden the customer will not get a chance to fill them out. This is usually used to have an embed for a specific pricing tier. You can find the key name for a property on the service template edit page.
  • redirect: After the subscription has been requested (and after handleResponse if present,) redirect the customer to this location.
  • handleCheckout: A method that passes a paymentPlanId. Allows for custom actions when a customer selects a tier, good for redirecting to a different checkout page.
  • email: Use to prefill the email field in the Checkout form.
  • token: JSON Web Token for the user you want to make the request with, set this if you want to request subscriptions with existing users
  • paymentStructureTemplateId: If set, sends customer directly to checkout for this payment plan. NOTE: For using only the checkout form.

Example Embed Code:

Servicebot.Tiers({        
  url : "https://example.serviceshop.io",        
  templateId: 5,        
  selector : document.getElementById('servicebot-management-form'),
  handleResponse : (response) => {
    console.log(response);        
  },        
  forceCard : false,        
  setPassword: true,        
  propertyOverrides : {            
    tier: "Basic"        
  }    
})


Tips:

  • Any options that can be passed to the checkout embed can be passed to the pricing embed, and will be applied to the checkout form that is used when a customer picks a pricing plan.
  • use the handleCheckout function if you want to use your own checkout flow instead of the Servicebot generated one


Did this answer your question?