Skip to content
ProAbonoProAbonoProAbono Docs

Customer Workflow - Sign-up then choose a plan and subscribe

Use case: After completing sign-up, the pricing table is displayed for the user can select a plan and subscribe.

This is achieved with a single API call and a few lines of script.

Step 1 - Display the pricing table

Section titled “Step 1 - Display the pricing table”

Install the pricing table the same way you installed the Customer Portal with the customer_ref parameter.

Add the JS library in the <head> tag of your page.

<script type="text/javascript" src="https://portal.proabono.com/Get/portal.js"></script>

Place a <div> in the page where you want to pricing table to show up.

<div id="proabono_portal">loading...</div>

Then load the pricing table.

<script type="text/javascript">
  ProAbonoPortal.open({
    business_id: 42,
    segment_ref: "demo-eur",
    customer_ref: "cust-42",
    customer_name: "John Doe", // optional
    customer_lang: "en", // optional
    hash: "..." // optional in sandbox
  });
</script>

More information and additional parameters in this article.

That’s it. Just 1 step. The pricing table will show up and the customer will be able to select a plan and subscribe.