1. Installing requirements.
- angularjquery-3.3.1
- jdate
- angular-1.2.13
- angularangular-resource-1.2.13
- jdate
- font-awesome
Put.jsand .css files into public/js and public/css dirs respectively.
2. Installing widget.
- Put
.jsand.ngfiles into your assets/templates dirs. - Include
.ngtemplate inside container with IDhsw-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="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:
| 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
...
...
...
...
- 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
...
- .
...
- Add urls settings with hidden inputs
Example:
| Code Block | ||
|---|---|---|
| ||
<?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:
| Code Block |
|---|
<input type="hidden" name="data_url" value="pathhttps:/to/your/endpoint/with/params.proxy.controller.url/.../?hydra_customer_id=..." /> <input type="hidden" name="hoper_url" value="https://your.hydraservice.billingprovider.console.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']);
}); |
5. Example
You can use files from this archive as an example of integration:
| View file | ||||
|---|---|---|---|---|
|