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 – Add the customer
Just after the user account creation process is complete, declare a new Customer using the API.
POST https://api-42.proabono.com/v1/Customer
{
"ReferenceSegment": "demo-eur",
"ReferenceCustomer": "cust-42",
"Name": "John Doe",
"Language": "en"
}
More information and additional parameters in the API Reference.
Step 2 – 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-collection-offers’.
{
...
"Links": [
{
"rel": "hosted-collection-offers",
"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.