1. Installing requirements.

•  angular-1.2.13
•  angular-resource-1.2.13
•  jdate 

2. Installing widget.

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

<div id='hsw-container'>
  <!--Widget's .ng template here-->
</div>

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:

1. GET  your.hydra.billing.com/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

4. Setting widget params.

• Add urls settings with hidden inputs:

<div id='hsw-container'>
  <input type="hidden" name="data_url" value="path/to/your/endpoint/with/params" />
  <input type="hidden" name="hoper_url" value="your.hydra.billing.url" />
  <!--Widget's .ng template here-->
</div>

• Bootstrap all stuff with Angular like:

angular.element(document).ready(function() {
  angular.bootstrap($('[data-app=\"hydra-service-widget\"]'), ['hydra-service-widget']);
});