Our Plans
On this page: a plan grid the site does not code. ProAbono renders it from the catalog set up in its back office: a price changed in ProAbono shows here without a deployment.
Loading…
Show the plan grid
What happens between opening the page and choosing a plan.
- 1Load the script
portal.jsServed by portal.proabono.com. - 2Open the grid
ProAbonoPortal.open()Without a customer reference, the portal shows the segment’s plans, in the site’s language. - 3SettingChoose a plan
<your site URL>?refo=…&lang=…A ProAbono back-office setting sends the visitor to the URL of your choice, with the chosen plan (refo) and the language (lang) as parameters. This site opens sign-up there, then the portal on the subscription to that plan.
The integration code
Browser: opening the grid (simplified)
<div id="proabono_portal"></div>
<script src="https://portal.proabono.com/Get/portal.js"></script>
ProAbonoPortal.open({
business_id: <your business ID>,
segment_ref: "<segment>",
lang: "en",
customer_lang: "en"
})Good to know
- No API call and no server-side signature: the visitor is not a customer yet.
- Plans, prices, options and billing periods come from the ProAbono catalog: the site stores none of them.
- Once the visitor has signed up, the Billing page opens the same portal with their customer reference and the
hashcomputed on the server. - The portal takes the site’s colors: a stylesheet redefines its CSS variables (
--pa-…) in the.pa-portalclass. Customize the portal with CSS ↗