Checking Acceptance on Login

Overview

If you're executing contracts with a click-through, you will also want to make sure that your users/customers are up to date on the latest agreement when they login to your app. Luckily, with PactSafe we've made it super easy to check on your user to make sure they're up to date. We'll cover how to use the JavaScript Library to check the acceptance status and present your clickwrap if the latest agreements have not been accepted.

Requirements

To get started, you'll need to ensure that you have the following:

  • PactSafe Site Access ID. More info in the Authentication page.
  • Group key from a published PactSafe Group that contains published PactSafe contracts.
  • Development environment with SSL enabled

Checking Acceptance Status

Checking using the JavaScript Library

When using the PactSafe JavaScript Library and you have an element listening for a signer_id, the snippet will auto-check (when the input field becomes out of focus) if the signer has agreed to the most recent major versions of contracts in the group.

🚧

Required Settings

Display All must be turned off and a Signer ID Selector must also be set. More information below.

There are a couple of key things that must happen for this to work correctly:

  • The group setting "Display All" must be off. This can be configured in the PactSafe web app or is the JavaScript Group options
  • The group setting "Signer ID Selector" must be configured and listening on an element for a signer_id. This is critical for ensuring that the snippet can check the status.

With these two options, your overall initial configuration may look something like this:

// The PactSafe Site Access ID (located in your settings).
var siteId = '1e8ddd9d-f32c-4dc7-9c13-62095e6d4317';

// The PactSafe Group key for a published group.
var groupKey = 'clickwrap-example-combined';

// The element's ID where we want the clickwrap to show.
var clickwrapElementid = 'contracts-container';

// The input field's ID that will be used to pass as the signer id.
var signerIdElementId = 'formEmailAddress';

// Create the PactSafe site.
_ps('create', siteId);

/**
 * Load the PactSafe group with the specific Group Key
 * and any additional options.
 */
_ps('load', groupKey, {
  container_selector: clickwrapElementid,
  display_all: false, // We don't want to display unless they haven't accepted.
  test_mode: true, // Allows you to clear test data from PactSafe.
  signer_id_selector: signerIdElementId
});

Tap into the valid and invalid events to determine if the signer has agreed to the most recent major versions of Contracts in the Group.

// Both the valid and invalid events are triggered
// when the JavaScript library does a `retrieve` call
// in the background to check the acceptance status of the
// signer ID.

// Valid is triggered if the signer has accepted the
// most recent major versions of the Contracts.
_ps.on('valid', function(params, context) {
  var submitButton = document.getElementById('submitButton');
  if (submitButton) submitButton.disabled = false;
});

// Invalid is triggered if the signer has accepted the
// most recent major versions of the Contracts.
_ps.on('invalid', function(params, context) {
  var submitButton = document.getElementById('submitButton');
  if (submitButton) submitButton.disabled = true;
});

Since the display_all is set to false, the Clickwrap group will only show if the Signer has not agreed to the most recent major published versions.

Checking using the Activity API

To check the acceptance status using the Activity API, you'll need to have:

  • A Site Access ID (located in your Site settings)
  • A Group Key (located when creating and configuring a Group)
  • A Signer ID to check

In the example below, the following is done:

  1. Listen to when a form is submitted and then handle using a function.
  2. When a form is submitted, a signer ID is grabbed and passed to a function that calls the PactSafe API at https://pactsafe.io/latest with the site access id, the group key, and the signer ID as URL params.
  3. The response is then checked to see if any of the present Contract IDs have not been accepted (will be false).

With the response, you can then send a user to another page to review/accept the contracts or whatever other behavior fits your use case best.

// The PactSafe Site Access ID (located in your settings).
var siteId = "1e8ddd9d-f32c-4dc7-9c13-62095e6d4317";

// The PactSafe Group key for a published group.
var groupKey = "clickwrap-example-combined";

// The input field's ID that will be used to pass as the signer id.
var signerIdElementId = "formEmailAddress";

var submitButton;

function checkPactSafeAPI(signerIdValue) {
  var url = 'https://pactsafe.io/latest?sid=' +
    siteId +
    '&gkey=' + groupKey +
    '&sig=' + signerIdValue;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      /*
        The response may look like the following:
        {
          92928: false,
          92931: true
        }
        Knowing that a contract hasn't been accepted, we can then
        appropriately handle the next step, which may be
        sending the user to another page to accept the contract.
      */
    })
    .catch(err => {
      alert(err);
    })
}

function handleFormSubmission(event) {
  event.preventDefault();
  // Grab the current signer ID field (this case an email address).
  var signerIdField = document.getElementById(signerIdElementId);
  if (!signerIdField) return; // If you don't have a signer id field here, there may be a problem.

  var signerIdValue = signerIdField.value;
  // Only continue if the field has a value.
  if (signerIdValue) {
    checkPactSafeAPI(signerIdValue);
  }
}

function handleInputChange() {
  var emailAddressField = document.getElementById('formEmailAddress');
  var passwordField = document.getElementById('formPassword');
  if (!emailAddressField || !passwordField) submitButton.disabled = true;
  if (emailAddressField.value === "" || passwordField.value === "") submitButton.disabled = true;
  else submitButton.disabled = false;
}

// In this example, the DOM is ready. In your environment, you
// may need to listen for the DOM being ready.
var pageForm = document.getElementById('login-form');
if (pageForm) pageForm.addEventListener('submit', function(event) {
  handleFormSubmission(event);
}, true);

// Hold reference of submit button
submitButton = document.getElementById('submitButton');

// Add fields listeners
var emailAddressField = document.getElementById('formEmailAddress');
var passwordField = document.getElementById('formPassword');
if (emailAddressField) emailAddressField.addEventListener('input', function() {
  handleInputChange()
});
if (passwordField) passwordField.addEventListener('input', function() {
  handleInputChange()
});

Did this page help you?