PactSafe

The PactSafe Developer Hub

Welcome to the PactSafe developer hub. You'll find comprehensive guides and documentation to help you start working with PactSafe as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Guides

How to use Dynamic Contracts with the Javascript Library

With PactSafe, you can use our Javascript library to dynamically populate information inside your contracts, easily present them for acceptance, and capture that acceptance with the click of a button or checking of a box.

What you'll do with this guide

By the end of this guide, you'll know how to:

  • Load a clickwrap agreement on the page
  • Setup a Dynamic Contract with "tokens" inside the PactSafe app
  • Render information dynamically using the Javascript library
  • Re-render values in your Contract when fields on your page change
  • Generate a binding contract with personalized data in the contract and about the signer

What you need to get started

Load a clickwrap agreement on your page

Publish a contract.

To get started in testing your embedded dynamic contract, you need to setup a couple of things in your PactSafe account at https://app.pactsafe.com. First, you'll need to create and publish a Contract so that we can use it in a Group. Here's a sample contract that you can copy & paste in for this particular article (dynamic stuff is included):

Signer Name: {{first_name}} {{last_name}}, {{title}} at {{company_name}}

Amount: ${{amount}}

Additional Terms: {{#each additional_terms}}{{this.term}} {{/each}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ornare ligula, nec maximus ligula. Aliquam viverra justo ac odio eleifend dapibus. Fusce a euismod libero. Aenean sit amet rutrum tortor. Pellentesque sit amet mattis augue. Curabitur sed ex sit amet massa imperdiet pulvinar ut sed ex. Sed maximus sapien pretium felis luctus scelerisque. Fusce bibendum interdum purus nec condimentum. Quisque quis condimentum augue. Nullam et ante sit amet sem efficitur pharetra. Nunc pulvinar iaculis diam, nec lobortis nulla tristique id. Sed venenatis ante vitae consectetur tincidunt.

Nam tristique posuere erat, sit amet luctus neque congue vel. Curabitur ac neque consequat, eleifend dui vitae, commodo risus. Ut commodo sapien eu quam dapibus, et tempor metus fermentum. Etiam ut venenatis odio, in aliquet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam lectus enim, vulputate in augue vitae, cursus luctus ligula. Nam vel libero nec dolor egestas tincidunt.

Note: Instead of clicking "Save", click "Publish".

When pasting this contract in, you'll notice that PactSafe automatically captures your tokens and highlights them in the contract. Awesome!

PactSafe uses the Handlebars framework for rendering dynamic language in your contracts, so you can use some of the helpers for conditional logic using something like {{#if additional_terms}}{{/if}}. You can also nest objects, loop through arrays, etc. For loops, you can use {{#each additional_terms}} {{this.term}} {{/each}}.

Publish a Group

In order to get your contract, loaded on your page, you need to create a Group to configure how you want to contract to be presented to your end user. For the purposes of this demo, since we want the contracts to be dynamic, you should set the "style" to either Full or Scroll:

Note: If render data is being passed in to the Dynamic Contract, the Style for the Group must be set to Scroll or Full so that the render data is stored as part of the record. Checkbox and Combined styles are not supported.

Embed the Group on your page

Once you publish your Group, you'll see a "Code Snippet" that will give you a line of code to drop into the page you're using. If you'd just like to use our sample one, you can do that. You'll need three things to get the contract loading successfully on your page:

  1. Your global PactSafe snippet
  2. The snippet for your group which will be something like _ps('load', 'group-key', 'CONTAINER_SELECTOR_HERE');
  3. A <div> on your page to load the contract into

So a basic, working HTML structure for your page would be this simple:

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
  (function(w,d,s,c,n,a,b){w['PactSafeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},w[n].on=function(){(w[n].e=w[n].e||[]).push(arguments)},w[n].once=function(){(w[n].eo=w[n].eo||[]).push(arguments)},w[n].off=function(){(w[n].o=w[n].o||[]).push(arguments)},w[n].t=1*new Date();a=d.createElement(s),b=d.getElementsByTagName(s)[0];a.async=1;a.src=c;b.parentNode.insertBefore(a,b)})(window,document,'script','//vault.pactsafe.io/ps.min.js','_ps');
  _ps('create', '25b2b173-632a-4227-9877-31d2109d8c98');
  _ps('load', 'dynamic-contract', 'contracts');
</script>
</head>
<body>
    <div id="contracts"></div>
</body>
</html>

Load up that puppy and VOILA! Instant clickwrap agreement. Only a couple of steps left to get that dynamic contract humming, sending data to PactSafe, and polished with validation.

Making your contract dynamic

As you've seen, contracts are first made dynamic by adding tokens into your contracts. You can add your own tokens by adding opening & closing curly brackets to variables you want to populate when your contract is loaded onto a page like so: {{token_value}}. You can also add tokens using our contract editor's "Insert Token" feature:

In order to render dynamic contract data in your page, you have to do a couple of things. Namely, you have to tell PactSafe to render the contract dynamically vs. simply loading a static contract:

// SITE ACCESS ID found here: http://app.pactsafe.com/settings/account
_ps('create', '25b2b173-632a-4227-9877-31d2109d8c98', {
  dynamic: true
});

That way we'll process your dynamic data based on information that you can programmtically pass to your contract when it renders.

Passing dynamic information to your contract

Next, you might be wondering how you get dynamic data to render in your contract. We're going to update the _ps('load') call to add in a JSON object for render_data:

// Don't forget to replace 'group-key' with your own key
_ps('load', 'group-key', { 
  container_selector: 'contracts', 
  render_data: {
    first_name: "Eric",
    last_name: "Prugh",
    company_name: "PactSafe",
    title: "Co-founder",
    amount: "6,000",
    additional_terms: [
      {
        term: "Term 1!"
      },
      {
        term: "Term 2!"
      }
    ]
  }
});

So now your full HTML will look something like this:

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
  (function(w,d,s,c,n,a,b){w['PactSafeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},w[n].on=function(){(w[n].e=w[n].e||[]).push(arguments)},w[n].once=function(){(w[n].eo=w[n].eo||[]).push(arguments)},w[n].off=function(){(w[n].o=w[n].o||[]).push(arguments)},w[n].t=1*new Date();a=d.createElement(s),b=d.getElementsByTagName(s)[0];a.async=1;a.src=c;b.parentNode.insertBefore(a,b)})(window,document,'script','//vault.pactsafe.io/ps.min.js','_ps');
  _ps('create', '25b2b173-632a-4227-9877-31d2109d8c98', {
    dynamic: true
  });
  // Don't forget to replace 'group-key' with your own key
  _ps('load', 'group-key', { 
    container_selector: 'contracts', 
    render_data: {
      first_name: "Eric",
      last_name: "Prugh",
      company_name: "PactSafe",
      title: "Co-founder",
      amount: "6,000",
      additional_terms: [
        {
          term: "Term 1!"
        },
        {
          term: "Term 2!"
        }
      ]
    } 
  });
</script>
</head>
<body>
    <div id="contracts"></div>
</body>
</html>

Your contract will load on the page and now will look something like this:

Tracking who accepted your contract

So now that we've added some dynamic language into our contract, you need to make sure that you attach who is going to sign/accept this contract when the box is checked.

You can do this in one of three ways:

  1. Pass in the signer information when you load the page.
  2. Listen to an input field for your user to type in their info (like their email address or phone number). This can be set manually or in your Group settings in the PactSafe app.
  3. Setting explicitly using the _ps('set') method.

Here's an example of each in action...

// 1. PASSED WHEN LOADING THE PAGE
_ps('create', '25b2b173-632a-4227-9877-31d2109d8c98', {
  dynamic: true,
  signer_id: "[email protected]"
});
// 2. SETTING A LISTENER TO YOUR INPUT ID
//NOTICE THE signer_id_selector
_ps('load', agreement_key, { container_selector: 'contracts', signer_id_selector: "login-email", render_data: what_to_render });
<input type="email" name="email" id="login-email" placeholder="[email protected]" />
// 3. SETTING USING _ps('set')
_ps('set', 'signer_id', '[email protected]');

Once you have set the signer, when the box is checked our library will automatically send a call to PactSafe with all the information about this event (render_data, signer_id, IP address, device info, and contract/groups accepted). Easy!

What should your page do after they accept the terms?

There are a couple of ways you can handle acceptance of a contract. We have callbacks and actions that act as listeners that you can intercept when the contract is accepted, when the signer is set, etc. It's as simple as writing a basic function using _ps.on:

// WHEN ALL CONTRACTS HAVE BEEN CHECKED/ACCEPTED, DO SOMETHING
_ps.on('valid', function(e){
  console.log(arguments);
  console.log("DO SOMETHING");
});
// WHEN THE SIGNER HAS BEEN SET, DO SOMETHING
_ps.on('set:signer_id', function(e){
  console.log(arguments);
  console.log("DO SOMETHING");
});

You can also incorporate PactSafe into your form validation using the _ps.getByKey('group-key').allChecked():

if(_ps.getByKey('group-key').allChecked()){
  // ALL contracts/boxes have been checked
}

Re-render values in your Contract when fields on your page change

As your user enters in values into fields, you may want to update the actual values in your Contract. Check out this example of using a slider to update price inside an upsell order form:

As values change, you'll want to update the render_data object that you're loading onto the page. We've created an option within _ps that will allow you to easily re-render the dynamic Contract on command. In the above example, we're listening to a field/slider value changing:

// uses jQuery to listen to a change event
// data is a JSON object that was used to initially load
// the render_data in the Contract
$('#file-storage').change(function(e){
  amount_per_month = 10 * $('#file-storage').val();

  // calculates how much various values should change to
  data.upgrade_cost = amount_per_month + " per month";
  data.total_cost = amount_per_month * 12;

  // this will re-render the Contract information with
  // the updated render_data object
  // NOTE: ALL data must be re-passed into the Contract
  _ps('upsell-clickwrap:retrieveHTML', data);
});

Downloading a copy of the contract accepted

Want to see what the final accepted contract looks like? No problem. All you have to do is go to your Signers page or Activity Log in PactSafe. From there, you can click into a Signer's record or just look for the download icon:

What? That's it?!

Yeah! That's all you need to get going on dynamic contracts! Want more information on customizing our JavaScript library to your needs? Go check out a more detailed intro to our library or our detailed docs.

Updated 11 months ago

How to use Dynamic Contracts with the Javascript Library


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.