Github
NPM Package
Latest Build Download

Features

• Automatically loads the PactSafe Snippet into your app so all you have to do is call _ps to use the PactSafe library.

PSClickWrap Component:

• Renders a PactSafe ClickWrap group by providing a site access ID and group key
• Ability to render PactSafe ClickWrap groups dynamically using a filter to specify contract ID's and/or tags
• Ability to render a dynamic PactSafe ClickWrap by passing in a custom render_data object
• Ability to override properties set within the PactSafe App's group configuration such as:
  • ClickWrap style using the clickWrapStyle prop
  • Signer ID selector using the signerIDSelector prop
  • Displaying contracts immediately using the displayImmediately prop
  • Displaying all contracts using the displayAll prop
  • and more! (See more detailed documentation on available PSClickWrap props here)
• Ability to hook into events fired by the Snippet using function props (See documentation on PSClickwrap callback props here)

PSBrowseWrap Component:

• Renders a PactSafe BrowseWrap group by providing a site access ID and group key
• Ability to override properties set within the PactSafe App's group configuration such as:
  • Position of BrowseWrap with the position prop
  • Whether the BrowseWrap should always be visible with the alwaysVisible prop
  • and more! (See more detailed documentation on available PSBrowseWrap props here)

Demo & Examples

Check out a live demo of both the PSClickwrap and PSBrowsewrap components here

PSClickWrap:

PSBrowseWrap:

To build the examples locally, you must first clone the repository add your PactSafe access id by creating a .env file in the root directory and add the following contents:

PACTSAFE_ACCESS_ID=<YOUR_PACTSAFE_ACCESS_ID_HERE>

After doing this, you need to create both a clickwrap group with the group key example-clickwrap and a browsewrap with the key example-browsewrap. In your example clickwrap group, if you
want the render data to work properly, create three tokens in a contract within the example-clickwrap group with the API field names to be: user_token_value, another_token_value, and last_token_value.

Installation

The easiest way to use pactsafe-react-sdk is to install it from NPM

npm install @pactsafe/pactsafe-react-sdk --save

You can also directly download the source files from unpkg to link to the source files directly or download the source from Github and build it yourself.

The following can be found in the project's root directory, as well as compiled using npm run build:

• A CommonJS build in lib/
• An ES modules build in es/ (enabled by default/without configuration using npm install)
• UMD development and production builds in /umd

Usage

Using PSClickWrap

In order to use the PSClickWrap, you must specify a signer ID selector that corresponds to the ID of an <input> field on the page that will identify the signer (usually an email field). This ID should then be passed as the signerIdSelector prop to the PSClickWrap component:

import {PSClickWrap} from 'pactsafe-react-sdk'
...

<input type="email" id="userEmail" placeholder="Your Email"/>

<PSClickWrap accessId={YOUR_PACTSAFE_ACCESS_ID_HERE} groupKey={YOUR_GROUP_KEY_HERE} signerIdSelector={userEmail}/>

Replace with YOUR_PACTSAFE_ACCESS_ID_HERE with your PactSafe Site Access ID found here

Replace YOUR_GROUP_KEY_HERE with your group's key found within your PactSafe group's configuration

Pass in any additional options using props on the PSClickWrap component.

Using PSBrowseWrap

Your PSBrowseWrap component should be placed where you would like your Legal Center link to appear on the page. Pass what you want the link's text to display as using the linkText prop.

import {PSBrowseWrap} from 'pactsafe-react-sdk'
...

<PSBrowseWrap accessId={YOUR_PACTSAFE_ACCESS_ID_HERE} groupKey={YOUR_GROUP_KEY_HERE} linkText={'View Legal Center'}/>

Properties

PSClickWrap Properties:

Heads up! Scroll right to see the descriptions for each row

PSClickwrap Triggered Event Callback Props:

New in v2.0 of the React SDK we are introducing triggered event props. These props are functions that can be passed in as props and are called in response to events that happen after a user interacts with a PSClickwrap component. These function props correspond to the triggered events that can be also created using the _ps global created by the snippet. For more information on how triggered events work within the PSSnippet and calling them without the props, you can learn about them here. By using function props, the component will interact with the _ps API for you and clean up after itself when the component is destroyed.
The demo page contains various callback examples and the corresponding callback events can be observed in the console output.

As a quick example of the usage of these, if you wanted to enable a button on a valid clickwrap event, here is example code to do so using the onValid and onInvalid event props:

If you do not want to use event callback props, the _ps is loaded into the window object for you to access and set event listeners manually. Using the _ps global you should be able to do everything listed in our full documentation on the PS.js library

The list below describes the props names and corresponding PactSafe event:

onAll

_ps event: all

A special event that is triggered when any other event is triggered. The name of the original event is always the first argument passed to the callback function. The rest of the arguments will match whatever arguments were passed to the original event's callback function.

Callback Arguments:

onSent

_ps event: sent

Triggered when a send command has been completed successfully.

Callback Arguments:

onRetrieved

_ps event: retrieved

Triggered when a retrieved command has been completed successfully.

Callback Arguments:

onSet

_ps event: set

Triggered when a parameter is set. Note: This event will only be triggered for specific parameters. Supported parameters include: signer_id, signer_id_selector, form_selector. Since this is an event listener for site level properties, you should only set this on
one clickwrap on the page if multiple are mounted in order to guarantee the function is idempotent, otherwise it will be called once per clickwrap.

Callback Arguments:

onSetSignerId

_ps event: set:signer_id

Triggered when the signer_id parameter is set.

Callback Arguments:

onValid

_ps event: valid

Triggered when all of the contracts in a Group have been accepted by a signer.

Callback Arguments:

onInvalid

_ps event: invalid

Triggered when all of the contracts in a Group are no longer accepted by a signer. This event will be triggered if a signer un-checks a contract on a valid Group.

Callback Arguments:

onRendered

_ps event: rendered

Triggered when a Group object has been rendered.

Callback Arguments:

onDisplayed

_ps event: displayed

Triggered when a Group object displays a contract.

Callback Arguments:

onScrolled

_ps event: scrolled

Triggered when "Force Scroll" has been enabled in your Group Settings (or passed as a prop) and all of the contracts in a Group have been scrolled to the bottom of within a "Scroll" or "Embedded" Group style/layout.

Callback Arguments:

onScrolledContract

_ps event: scrolled:contract

Triggered when "Force Scroll" has been enabled in your Group Settings (or passed as a prop) and one of the contracts in a Group has been scrolled to the bottom of a "Scroll" or "Embedded" Group style/layout.

Callback Arguments:

onError

_ps event: error

Triggered when a send or retrieve command encounters an error before being sent.

Callback Arguments:

PSBrowseWrap Properties:

Heads up! Scroll right to see the descriptions for each row

License

Copyright (c) 2019 PactSafe.