AccountDock - Documentation

Version 1.2

Overview

Button Demo

Modal Window

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

<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

AccountDock Methods

var handler = AccountDock.configure({
  key: 'ad_acco_12345'
});

var handler = AccountDock.configure({
  key: 'ad_acco_12345',
  customer: 'cus_12345',
  email: 'oliver@accountdock.com',
  container: 'window'
});

var handler = AccountDock.configure();

handler Methods

handler.open();

handler.open({
  key: 'ad_acco_12345',
  customer: 'cus_12345',
  email: 'oliver@accountdock.com',
  container: 'window'
});

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

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));
});

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

• 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

<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