diff --git a/README.md b/README.md
index 5b5a81f..a62610a 100644
--- a/README.md
+++ b/README.md
@@ -98,10 +98,12 @@ You can hook into events using the triggered event callback props described here
| Prop | Description | Type | Required? | Default |
|:--------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------:|:-------------------------------------------:|:--------------------------------------------:|
+| `acceptanceLanguage` | Override the acceptance language specified in the Ironclad Clickwrap App's UI. | string | No | Value specified in Ironclad Clickwrap Group's UI |
| `accessId` | Ironclad Clickwrap Site Access ID | string | Yes, if `injectSnippetOnly` is not passed | undefined |
| `clickWrapStyle` | Override the clickwrap style specified in the Ironclad Clickwrap Group Interface | string.oneOf[`'full'`, `'scroll'`, `'checkbox'`, `'combined'`, `'embedded'`] | No | Value specified in Ironclad Clickwrap Group's UI |
| `confirmationEmail` | Override whether to send a confirmation email to the signer upon contract acceptance | bool | No | Value specified in Ironclad Clickwrap Group's UI |
| `containerId` | The div ID that will contain your clickwrap. You should override this if you plan on displaying more than one contract on a page. | string | No | ps-clickwrap |
+| `customData` | Object containing custom keys and values you specify that is added to the metadata on your acceptance. | object | No | undefined |
| `disableSending` | Turn this on if you want to manually send the agreed event instead of it automatically being sent on contract acceptance. [See documentation on manually sending the agreed event here.](https://developer.pactsafe.com/docs/get-to-know-our-javascript-library#section-3-sending-agreed-in-javascript) | bool | No | false |
| `displayAll` | Display all contracts in the group immediately. If disabled, a contract will only be displayed if the signer hasn't accepted the latest version. | bool | No | true |
| `displayImmediately` | Display the group's contracts as soon as the Signer ID is available. If disabled, contracts will remain hidden until you call `displayRequired()` | bool | No | true |
diff --git a/src/PSClickWrap.js b/src/PSClickWrap.js
index f82aaac..cf6c6cc 100644
--- a/src/PSClickWrap.js
+++ b/src/PSClickWrap.js
@@ -73,7 +73,9 @@ class PSClickWrap extends React.Component {
componentDidUpdate(prevProps) {
const {
+ acceptanceLanguage,
clickWrapStyle,
+ customData,
filter,
groupKey,
injectSnippetOnly,
@@ -97,6 +99,12 @@ class PSClickWrap extends React.Component {
_ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle);
_ps.getByKey(clickwrapGroupKey).retrieveHTML();
}
+ if (!isEqual(customData, prevProps.customData)) {
+ _ps('set', 'custom_data', customData);
+ }
+ if (acceptanceLanguage !== prevProps.acceptanceLanguage) {
+ _ps('set', 'acceptance_language', acceptanceLanguage);
+ };
if (!isEqual(renderData, prevProps.renderData)) {
if (clickWrapStyle && _psLoadedValidGroup) { _ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle); }
_ps(`${clickwrapGroupKey}:retrieveHTML`, renderData);
@@ -191,7 +199,9 @@ class PSClickWrap extends React.Component {
createClickWrap() {
const {
+ acceptanceLanguage,
clickWrapStyle,
+ customData,
confirmationEmail,
containerId,
displayAll,
@@ -205,16 +215,18 @@ class PSClickWrap extends React.Component {
allowDisagreed,
} = this.props;
const options = {
- filter,
- container_selector: containerId,
+ allow_disagreed: allowDisagreed || false,
+ acceptance_language: acceptanceLanguage,
+ auto_run: displayImmediately,
confirmation_email: confirmationEmail,
- signer_id_selector: signerIdSelector,
- style: clickWrapStyle,
+ container_selector: containerId,
+ custom_data: customData,
display_all: displayAll,
- render_data: renderData,
- auto_run: displayImmediately,
+ filter,
force_scroll: forceScroll,
- allow_disagreed: allowDisagreed || false,
+ render_data: renderData,
+ signer_id_selector: signerIdSelector,
+ style: clickWrapStyle,
};
if (injectSnippetOnly) return;
@@ -256,7 +268,8 @@ PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR = 'PSClickWrap Error: Y
PSClickWrap.MUST_SET_ALLOW_DISAGREED = 'PSClickWrap Error: You must set allowDisagreed as true to make onInvalid work';
PSClickWrap.propTypes = {
- accessId: isRequiredIf(PropTypes.string, (props) => !props.hasOwnProperty('injectSnippetOnly')),
+ acceptanceLanguage: PropTypes.string,
+ accessId: isRequiredIf(PropTypes.string, props => !props.hasOwnProperty('injectSnippetOnly')),
clickWrapStyle: PropTypes.oneOf([
'full',
'scroll',
@@ -265,6 +278,7 @@ PSClickWrap.propTypes = {
'embedded',
]),
confirmationEmail: PropTypes.bool,
+ customData: PropTypes.object,
disableSending: PropTypes.bool,
displayAll: PropTypes.bool,
displayImmediately: PropTypes.bool,
diff --git a/tests/PSClickWrap.test.js b/tests/PSClickWrap.test.js
index 3a66f98..bbf3799 100644
--- a/tests/PSClickWrap.test.js
+++ b/tests/PSClickWrap.test.js
@@ -210,6 +210,28 @@ describe('PSClickWrap _ps interface tests', () => {
expect(_ps.mock.calls[FUNC.SET_LIB][2]).toBe('react-sdk');
expect(_ps.mock.calls[FUNC.SET_VER][2]).toBe('_client-version');
});
+
+ it('ensures customData is passed properly if passed as a prop', () => {
+ const testCustomData = { key_1: 'key1val', key_2: 2 }
+ mount();
+ expect(_ps.mock.calls[FUNC.LOAD][2].custom_data).toMatchObject(testCustomData);
+ });
+
+ it('sets customData to undefined if it is not passed as a prop', () => {
+ mount();
+ expect(_ps.mock.calls[FUNC.LOAD][2].custom_data).toBeUndefined();
+ });
+
+ it('ensures acceptanceLanguage is passed properly if passed as a prop', () => {
+ const testAcceptanceLanguage = "I agree to these contracts here";
+ mount();
+ expect(_ps.mock.calls[FUNC.LOAD][2].acceptance_language).toBe(testAcceptanceLanguage);
+ });
+
+ it('sets acceptanceLanguage to be undefined if it is not passed as a prop', () => {
+ mount();
+ expect(_ps.mock.calls[FUNC.LOAD][2].acceptance_language).toBeUndefined();
+ });
});
describe('PSClickWrap _ps event prop tests', () => {