Hydra documentation
Page tree

Versions Compared

Old Version 1

changes.mady.by.user Pavel Vinogradov

Saved on

compared with

New Version 2

changes.mady.by.user Maxim Martinov

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

1. Installing requirements.

  •  angularjquery-3.3.1
  • jdate 
  • angular-1.2.13
  •  angularangular-resource-1.2.13
  •  jdate 
  • font-awesome

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

2. Installing widget.

  • Put .js and .ng files into your assets/templates dirs.
  • Include .ng template inside container with ID hsw-container.

    Import requirements in your HTML page:


    Code Block
    <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":
Code Block
<div id='"hsw-container'">
  <input type="hidden" name="data_url" value="value1" />
  <input type="hidden" name="hoper_url" value="value2" />
  <!--Widget's .ng template here-->
</div>
  • Bootstrap all stuff with Angular after page load:
Code Block
<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 

...

...

...

  • .

...

  • Add urls settings with hidden inputs

Example:

<div id='hsw-container'>
Code Block
languagephp
<?php
if(isset($_GET['hydra_customer_id'])){
	$hydra_customer_id = $_GET['hydra_customer_id'];
} else {
	$hydra_customer_id = "";
}

$hoper_url = 'https://your.hoper.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:

Code Block
<input type="hidden" name="data_url"  value="path/to/your/endpoint/with/paramshydra_customer_id/already/set" />
  <input type="hidden" name="hoper_url" value="your.hydra.billing.url" />
  <!--Widget's .ng template here-->
</div>
  • Bootstrap all stuff with Angular like:
Code Block
angular.element(document).ready(function() {
  angular.bootstrap($('[data-app=\"hydra-service-widget\"]'), ['hydra-service-widget']);
});