View Source

1. Installing requirements.

jquery-3.3.1
jdate
angular-1.2.13
angular-resource-1.2.13
font-awesome

Put .js and .css files into public/js and public/css dirs respectively.

2. Installing widget.

Import requirements in your HTML page:

<head>
...
<script type="text/javascript" src="public/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="public/js/jdate.js"></script>
<script type="text/javascript" src="public/js/angular-1.2.13.js"></script>
<script type="text/javascript" src="public/js/angular-resource-1.2.13.js"></script>
<script type="text/javascript" src="public/js/hydra-service-widget.js"></script>
<link href="public/css/hydra-service-widget.css" rel="stylesheet" type="text/css">
<link href="public/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>

Include .ng template and settings fields into container with id="hsw-container":

<div id="hsw-container">
  <input type="hidden" name="data_url"  value="fill_up_later" />
  <input type="hidden" name="hoper_url" value="fill_up_later" />
  <!--Widget's .ng template here-->
</div>

Bootstrap all stuff with Angular after page load:

<script type="text/javascript">
        $(function() {
            angular.element(document).ready(function() {
                angular.bootstrap($('[data-app=\"hydra-service-widget\"]'), ['hydra-service-widget']);
            });
        });
</script>

3. Building proxy controller.

You need to have an endpoint in your application for proxy widget's requests to Hydra Billing. For example, you can create special controller for these needs and proxy requests from widget to Billing using basic auth.

Requests:

GET https://your.service.provider.console.url/rest/v1/subjects/customers/:hydra_customer_id?accounts=on&subscriptions=on&last_payment=on
Params: hydra_customer_id — customer ID in Hydra Billing.
Response: JSON with customer data.

Example:

<?php
if(isset($_GET['hydra_customer_id'])){
	$hydra_customer_id = $_GET['hydra_customer_id'];
} else {
	$hydra_customer_id = "";
}

$hoper_url = 'https://your.service.provider.console.url';
$hoper_login = 'proxy_user_login';
$hoper_password = 'proxy_user_password';
$hoper_request_url = join('/', array(trim($hoper_url, '/'), trim("/rest/v1/subjects/customers/$hydra_customer_id?accounts=on&subscriptions=on&last_payment=on", '/')));

$curl_resource = curl_init();
curl_setopt($curl_resource, CURLOPT_URL, $hoper_request_url);
curl_setopt($curl_resource, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl_resource, CURLOPT_USERPWD, "$hoper_login:$hoper_password");

$curl_result = curl_exec($curl_resource);
$curl_errno  = curl_errno($curl_resource);
$curl_error  = curl_error($curl_resource);
$curl_http_status = curl_getinfo($curl_resource, CURLINFO_HTTP_CODE);
curl_close($curl_resource);

print_r($curl_result);
?>

4. Setting widget params.

Change data_url and hoper_url fields with certain values:

<input type="hidden" name="data_url"  value="https://your.proxy.controller.url/.../?hydra_customer_id=..." />
<input type="hidden" name="hoper_url" value="https://your.service.provider.console.url" />

5. Example

You can use files from this archive as an example of integration: