Dotting I’s and Crossing T’s: Signer (Open Source)

Karan Kanwar
Wing Assistant
Published in
3 min readJan 26, 2018

Legal paperwork is a massive annoyance. We just recently incorporated our company, and as a result need to start taking legal documentation more seriously. This, in combination with our name change, as resulted in a lot of annoying overhead for myself and our co-founder.

Let’s take confidentiality agreements as an example. We made everyone sign contracts when we had a different name, and when we weren’t a Delaware C-Corp, as a result, we had to get everyone to sign our confidentiality agreements once more with the updated company name.

Our options for getting everyone on our team signed and ready to go are… well… they’re not great:

  1. Pay DocuSign or HelloSign somewhere between $200 and $400 per year for… well… probably ever.
  2. Print 350 sheets of paper, staple, get signatures, then scan

Neither option is very appealing, and there isn’t a free tool for startups like us to use here.

Enter our second (almost ready) open-sourced tool! Signer.

First Screen of Signer

It’s certainly not pretty, but it gets the job done pretty well.

We start off by informing the user of the process, asking them to read the contract they are about to sign and review the laws that allow for E-Signing to be valid and admissible in the United States of America.

Then, we get their signature using an open-source HTML5 Canvas based signature system we found on Github called Signature Pad. It allows users to sign with their cursor or on their mobile phones with their fingers.

Users sign their names

There is an annoying issue on mobile that makes the signature disappear on scroll — it is fixable with a lot of JS tweaking, but I limited myself to 2 hours working on this project, so, maybe another day!

Once the user hits Next: We extract our contract’s signature page — grab the user’s drawn signature and convert it to an image Data URL, send it in an HTTP POST request and the server converts the data URL into an image. We do the same with the user’s name and the current date and use FPDI to modify our PDF contract’s signature page. FPDI is not ideal, as it requires the (x,y) coordinates of where it should put images & text — this requires a lot of stupid trial and error and makes it difficult to generalize our paperwork system. Using another HTML5 Canvas and some MySQL could probably solve that though.

Signed & dated PDF contract

Finally, we take this modified signature page and append it to the original contract. The end result is a read-only, signed PDF contract.

This copy is freely downloadable for the users, however, the administrator has to counter-sign — and as the administrator, leaving your signature openly vulnerable is not a good idea.

To combat that issue, we added a background Ajax process that creates a second countersigned PDF in a private location and logs this data along with session metadata in MySQL.

A lot of temporary/interim files are created throughout this process, I have yet to write a cleanup script, but one is definitely necessary!

We’ll be releasing the code on Github soon!

--

--