Skip to content

Instantly share code, notes, and snippets.

@eprugh
Last active Feb 6, 2020
Embed
What would you like to do?
<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');
// initiate PactSafe with your SITE ACCESS ID found here: http://beta.pactsafe.com/settings/account
_ps('create', '25b2b173-632a-4227-9877-31d2109d8c98', {
dynamic: true,
// passing the signer_id is OPTIONAL
signer_id: "eric+test@pactsafe.com"
});
// load a specific group
// dynamically loads http://ps-vault.s3.amazonaws.com/s/<SITE ACCESS ID>/groups/<AGREEMT GROUP KEY>/group.js
// your group key can be found here: https://beta.pactsafe.com/groups
// => click into your group and find the "Key" field
// => should be something like checkout-click-through-agreement
_ps('set', 'custom_data', {
price: "$6,000",
total: "$6,000",
start_date: "July 1, 2016"
});
var what_to_render = {
first_name: "Eric",
last_name: "Rane",
title: "Guy",
company_name: "PactSafe",
amount: "6,000",
total: "$6,000",
start_date: "July 1, 2016",
payment_terms: "Net 30",
users: 2,
specific_terms: "We can use your company name and logo as we see fit.",
in_california: true,
additional_terms: [
{
term: "Term 1!"
},
{
term: "Term 2!"
}
]
};
var agreement_key = 'dynamic-contract';
_ps('load', agreement_key, {
filter: "tags==virtual",
style: "full",
display_all: true,
container_selector: 'agreements2',
signer_id_selector: "login-email",
acceptance_language: "I do declare that I accept {{contracts}}",
render_data: what_to_render
});
//when the form is submitted, double check that all contract checkboxes are checked
$(document).ready(function(){
// when your form is submitted, validate everything is good
$('#form1').submit(function(e){
e.preventDefault();
// ALL client-side validation would go here
// validate();
// Add a trigger to check status of PactSafe being checked
if(_ps.getByKey(agreement_key).allChecked()){
// this.submit();
console.log("Thanks for agreeing!");
} else {
console.log("Agree to our terms. Kthx!");
}
});
$('#price').on('change', function(e){
what_to_render.price = $('#price').val();
_ps('dynamic-contract:retrieveHTML', what_to_render);
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<form action="..." method="post" id="form1" class="form">
<h1>Sign up for our service!</h1>
<p>Simply fill out the form below and accept our legal terms.</p>
<div class="row">
Contract for:
<!-- <label for="email-address">Email Address:</label> -->
<input type="email" name="email" value="eric+test@pactsafe.com" id="login-email" style="width: 250px;" disabled />
<input type="text" name="price" id="price" />
</div>
<hr />
<!-- <div>
<label for="email-address">Password:</label>
<input type="password" name="password" id="ps-password1" />
</div>
<div>
<label for="email-address">Confirm Password:</label>
<input type="password" name="password2" id="ps-password2" />
</div> -->
<div id="agreements2"></div>
<p><br/><input id="submit" type="submit" value="Submit" /></p>
</form>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment