Customer Workflow – Choose a plan, sign-up and subscribe – Assistance & Documentation

Connect with your paying or pay-as-you-go sign-up process
Use case: The user selects a plan before reaching the sign-up page, then after sign-up they subscribe to that plan.

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

Step 1 – Settings

Go to the Settings section in the left side menu and open Pricing Pages.

In Pricing pages for anonymous users, change the action of the ‘Choose Offer’ button to open your sign-up page.

Step 2 – Display the pricing table

In your pricing page, install the pricing table the same way you installed the Customer Portal, but without 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",
  });
</script>

The pricing table is displayed. when a customer selects an offer, they are redirected to your sign-up page with a refo (offer reference) parameter.

Step 3 – Add the customer

Just after the user account creation process is complete, declare a new Customer using the API.

Pass the refo parameter from the previous step as the ReferenceOffer parameter in that API call.

POST https://api-42.proabono.com/v1/Customer
{
  "ReferenceSegment": "sitedemo-newportal",
  "ReferenceCustomer": "cust-42",
  "Name": "John Doe",
  "Language": "fr",
  "ReferenceOffer": "off-premium"
}

More information and additional parameters in the API Reference.

Step 4 – Open the subscription workflow

The previous call returned a Customer object with a nested a Links array.

Get the query of the link with rel=’hosted-subscribe’.

{
  ...
  "Links": [
   {
    "rel": "hosted-subscribe",
    "query": "H9mWCR8lszobdnL95qyASG87CYUk2MY1S2zABWydAWStmkvsFtc"
   },
  ...
 ]
}

More information and additional parameters in the API Reference.

Then open the workflow the same way you installed the Customer Portal, but add the query parameter to the opening call.

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 open the workflow with the query parameter.

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

More information and additional parameters in this article.

That’s it. The subscription workflow for that page is opening, allowing the customer to subscribe.

Developer Area