Embed Subscription Portal

Simply embed the Servicebot Subscription Management Portal inside your application

This is the simplest step of the process. You must simply copy and paste the Javascript snippet of code into the billing page (or any desired page) of your application. You can view your Servicebot Subscription Management Portal Javascript snippet in the "Subscription Portal" page under "Subscription Management Portal Setup":

Steps to get your Subscription Portal Code Snippet

The Subscription Management Portal has an extra step needed for Security. It verifies a user's identity so they are able to safely view and change their subscriptions. This secure step is not needed in 'Test Mode' but is required to go to 'Live Mode'

Example Embed Code

An example embed code will look similar to the following:

<div id="servicebot-subscription-portal"></div>
<script>
window.servicebotSettings = {
servicebot_id: "sampleid", // LIVE & TEST MODE IDs ARE DIFFERENT
service: "Servicebot",
email: "EXAMPLE@EMAIL.COM" // REPLACE WITH USER'S EMAIL, or use property customer_id and pass the Stripe Customer ID as primary identifier
};
(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>

Front-end Library Examples

React

Vue

Add Security To Your Portal

Identity verification helps to make sure that your customers' data is kept private and that one customer can't impersonate another. We require identity verification for Servicebot Live Mode Subscription Portal setup, but you can run Test Mode without this verification.

Steps to get your Secure Setup Code Snippet

Generate HMAC

To set up identity verification, you'll need to generate an HMAC on your server for each logged-in user and send it to the Servicebot Subscription Management Portal.

Don't see your server-side language listed? Let us know and we'll get a code snippet for you!

Your code to generate an HMAC for your app must be placed in the back-end of your application. Use the codes below to generate your HMAC (Or you can get this from your Servicebot dashboard with your Secret Key attached):

You may generate the HMAC with their the user's email OR the user's Stripe Customer ID (customer_id)

Node.js
Rails (Ruby)
Django (Python)
PHP
Other
Node.js
const crypto = require("crypto");
const email_hash = crypto.createHmac(
"sha256",
"YOUR_SECRET_KEY" // SECRET KEY (KEEP SAFE!)
).update(req.user.email).digest("hex") // PASS THIS TO FRONT-END
Rails (Ruby)
email_hash = OpenSSL::HMAC.hexdigest(
'sha256', # HASH FUNCTION
'YOUR_SECRET_KEY', # SECRET KEY (KEEP SAFE!)
current_user.email # REPLACE WITH USER'S EMAIL ADDRESS
) # PASS THIS TO FRONT-END
Django (Python)
import hmac
import hashlib
email_hash = hmac.new(
'YOUR_SECRET_KEY', # SECRET KEY (KEEP SAFE!)
request.user.email, # REPLACE WITH USER'S EMAIL ADDRESS
digestmod=hashlib.sha256 # HASH FUNCTION
).hexdigest() # PASS THIS TO FRONT-END
PHP
$email_hash = hash_hmac(
'sha256', // HASH FUNCTION
$user->email, // REPLACE WITH USER'S EMAIL ADDRESS
'YOUR_SECRET_KEY' // SECRET KEY (KEEP SAFE!)
); // PASS THIS TO FRONT-END
Other

Generate an HMAC with SHA256 whenever a user logs into your app. Most web frameworks will have a method or library to help you do this. You'll need your app’s secret key and the email or user_id of the currently logged-in user.

Secret Key Get Your Secret Key

Seeing 403s? You can verify your HMAC is being generated properly by creating one here. Use "SHA256", pass in the customer's email or customer ID, and use your Servicebot secret key as the secret. Compare that with what you're generating server-side and what's being passed to the client-side.

Keep your secret key safe! Never commit it directly a public repository, client-side code, or anywhere a third party can find it.

Pass HMAC to Portal

Once you generate your HMAC token in your application back-end, you must pass it to the front-end Subscription Portal that you embedded in your app in the previous step. The HMAC is just an additional line in the Portal embed code, like the following example:

<div id="servicebot-subscription-portal"></div>
<script>
window.servicebotSettings = {
servicebot_id: "sample_id", // LIVE & TEST MODE IDs ARE DIFFERENT
service: "Servicebot",
email: "EXAMPLE@EMAIL.COM", // REPLACE WITH USER'S EMAIL, OR USE PROPERTY customer_id AND PASS THE STRIPE CUSTOMER ID AS PRIMARY IDENTIFIER
hash: "INSERT_HMAC_VALUE_HERE", // REPLACE WITH EMAIL HASH FROM SECURE SET UP ABOVE
};
(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>

All Done!

Congratulations, your Servicebot Subscription Management Portal setup is now completed! You can continue reading our guides for more advanced configurations.