AccountDock - Documentation

Version 1.2

Overview

Button Demo

Modal Window

Inline Demo

Requirements

Two assets need to loaded onto your pages for integration:

  1. jQuery (~93kb)
  2. AccountDock (~5.7kb)

Notes

  1. Text highlighted in green represent objects
  2. Text highlighted in red represent methods and variables

Sample Integrations

Quick Setup

  1. Place the AccountDock script on your page.
    Copy 
    <script src="https://static.accountdock.com/app.min.js"></script>
  2. Retrieve a handler object from AccountDock.configure (using your AccountDock key and a Stripe customer ID)
    Copy 
    <script src='https://static.accountdock.com/app.min.js'>
  var handler = AccountDock.configure({
    key: 'ad_acco_12345',
    customer: 'cus_12345'
  });
  document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector('#billing').addEventListener('click', function(event) {
      event.preventDefault();
      handler.open();
    }, false);
  });
</script>
  3. Wherever you want the billing history button to appear on the page, add the markup that will trigger AccountDock to appear.
    Copy 
    <button id="billing">View Billing</button>




Advanced Setup

Copy 
<script src="https://static.accountdock.com/app.min.js"></script>
<button id="billing">View Billing</button>
<script type="text/javascript">

  // Set the key through configure to prevent having to do so later
  var handler = AccountDock.configure({
    key: 'ad_acco_12345'
  });

  // Events
  handler.on(
    'app.opened',
    function(event) {
      console && console.log('handler opened');
    }
  );
  handler.on(
    'app.closed',
    function(event, data) {
      console && console.log('handler closed');
    }
  );

  // Pass in the Stripe customer id, email (for enhanced UX) and have the
  // app open through a popup window
  document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector('#billing').addEventListener('click', function(event) {
      event.preventDefault();
      handler.open({
        customer: 'cus_12345',
        email: 'oliver@accountdock.com',
        container: 'window'
      });
    }, false);
  });
</script>

Params

The following params can be passed to either the AccountDock configure method or a handler open method
Params passed to a handler open method will override those passed to the AccountDock configure method

Name Type Required Description Example
key String ✔ AccountDock (not Stripe) account key 'ad_acco_12345'
key customer ✔ Stripe Customer ID 'cus_12345'
email String Email of the customer (incase not stored in Stripe)
Overrides any email found in a Stripe Customer record 		'oliver@accountdock.com'
subscriptions Array Subscription IDs that transactions should be limited to

Only the refunds & charges related to the passed in subscription IDs will be shown 		['sub_123', 'sub_456']
container String How the application should be shown:
'modal' (default), 'window' or `#containingDiv`

Note `window` mode will not work in IE 8 and IE 9
Why? 		'window'

AccountDock Methods

Name Description Returns Example
configure Method to define default properties (if any) and retrieve a handler object
Can be overridden through a handler open method 		Object Basic 
var handler = AccountDock.configure({
  key: 'ad_acco_12345'
});
Define multiple options (can be overriden in open call) 
var handler = AccountDock.configure({
  key: 'ad_acco_12345',
  customer: 'cus_12345',
  email: 'oliver@accountdock.com',
  container: 'window'
});
Or if params will be set in open call: 
var handler = AccountDock.configure();

handler Methods

Name Description Returns Example
open Open up the AccountDock app void If params already set (through AccountDock.configure ): 
handler.open();

If params not yet set (or ought to be overridden): 
handler.open({
  key: 'ad_acco_12345',
  customer: 'cus_12345',
  email: 'oliver@accountdock.com',
  container: 'window'
});
close Close the AccountDock app void 
handler.close();

Events

  • Events can be bound to the AccountDock or handler objects
  • Events bound to AccountDock will be run on all handlers
  • AccountDock events will be called before handler events
  • Binding is additive, therefore events bound to a handler object will be added to any events bound to the global AccountDock object
Name Description Example
app.opened Called when the app has fully opened 
AccountDock.on('app.opened', function(event, data) {
  console
    && console.log('AccountDock opened')
    && console.log('handler: ' + (data.handler));
});
handler.on('app.opened', function(event, data) {
  console
    && console.log('handler opened')
    && console.log('handler: ' + (data.handler));
});
app.closed Called when the app has fully closed 
AccountDock.on('app.closed', function(event, data) {
  console
    && console.log('AccountDock closed')
    && console.log('handler:' + (data.handler));
});
handler.on('app.closed', function(event, data) {
  console
    && console.log('handler closed')
    && console.log('handler:' + (data.handler));
});

Customization

Custom CSS is supported for Billing History
  • Each row has one of three css classes: successful , failed and refunded
  • Each columns has own css classes, those 5 classes are date , amount , description , status and actions
  • CSS can be defined as normal css, for example: 
    .refunded.amount {
  color: #c7254e;
  text-decoration: line-through;
}
.description {
  font-style: italic;
}

Test Data

On July 1st, 2016 Stripe Test data was separated to a separate application environment at https://sandbox.accountdock.com and no longer resides in the production application.

If you had an account prior to this separation you can log in with the same credentials, otherwise accounts created after July 1st, 2016 will need to also create a new sandbox login and give the sandbox application access to you test account on Stripe.

If you have any further questions about this process please contact our support team. We are happy to discuss.

Note: If you wish to use the embed code from sandbox you need to the sandbox javascript file

Copy 
<script src="https://sandbox.accountdock.com/app.min.js"></script>

Support

If you need any help. Feel free to contact us anytime. We'll get back to you within 24 hours

Email: support@accountdock.com