Step 1 - Install the Customer Portal

This installation will generate the Customer Portal directly in your web application.

Step 1

In the pages you want to display the Customer Portal, copy-paste this code in the <head> tag.

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

Step 2

Place a <div> in the page where you want the Customer Portal to be generated.

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

Its content will be overwritten after loading.

Step 3

Load the Customer Portal with this code and watch the result.
The customer_ref must be inferred from your users’s identifier. The one below is just an example.
This article will tell you more about the opening parameters.

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

Parameters	Descriptions
business_id	This is the identifier of your ProAbono environment.
segment_ref	The Segment is where your Customer is stored. When your business grows larger, you may need an extra segment. For now, just use the one in the sample above.
customer_ref	Unique reference of the customer. This reference is the value of the ReferenceCustomer field of the customer in the ProAbono API. Recommended: the user’s internal identifier in the merchant’s application, with a prefix (for example cust-42). The reference is then deduced from existing data, with no extra field to store in the database. If no customer with this reference exists in ProAbono, the customer is created automatically in the segment given by segment_ref, then the customer portal is loaded. No request to create the customer is therefore needed beforehand.
customer_name	Your internal customer name Never displayed to the customer.
customer_lang	(optional) the Customer language

Step 4 (optional for testing)

Before switching to production, you have to secure the hosted pages to prevent identity theft.
To do that, you have to generate a security hash for the logged user, then add it to the ProAbonoPortal.open(...) call.

<script>
  ProAbonoPortal.open({
    // … the parameters from step 3
    hash: "{SecurityHash}",
  });
</script>

How to generate the security hash
The security hash for a customer is generated using HMAC-256 with a secret key and the customer’s reference.
Get the code to generate the hash by selecting the server-side language you are using.