API World Hackathon Report No.2 - DocuSign Clickwrap with React

This is a report of TIS Ventures Inc's software engineer who joined API world hackathon 2019.
In this post, I would like to explain how to integrate DocuSign Clickwrap API into a React appliction.

What is API World

"API world" is the event regarding API as described on their own page as below;

the world's largest vendor-neutral API conference and expo

• https://apiworld.co/

DocuSign Challenge #2

We chose the following challenge which is about "Clickwrap" API of DocuSign.
As you may know, DocuSign is a company that provides electronic-signature service for documents.

Challenge #2: DocuSign - Implement "Click to Agree" Functionality using the DocuSign Click API (2)

Clickwrap agreements are everywhere. Do you recall those "terms of service" agreements you must scroll through and click to agree? The DocuSign Click API provides an extremely lightweight interface through which to create, manage, and modify clickwrap agreements. To implement a clickwrap in your application within 10 minutes

• https://developers.docusign.com/click-api/guides/

Clickwrap has a capability to register user's "terms and service" document on the DocuSign server and integrate to download and show it with "Agree" button in user's web site.

As result, we got the 1st prize 🏆 for this challenge.

• https://devpost.com/software/eagles-challenge-2-docusign

How to integrate DocuSign Clickwrap API into React application

DocuSign provides the function to generate javascript code snippet to call "Clickwrap" API.
It is easy to integrate "normal" web site, but our application is built by React.

The following steps show how to integrate it into a React application.

1) import docusign-click.js in index.html of React application

<script src="https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js"></script>

2) Create new React component as below.
But this does not work correctly due to the "pit fall" of "dangerouslySetInnerHTML" of React component.
The content of 'clickwrapCode' variable is a snippet code which is given by "Clickwrap" management page.

import React, { Component } from "react"
import uuid from "uuid"
import InnerHTML from "dangerously-set-inner-html"
const clickwrapCode = (clientUserId) => `
<div id="ds-clickwrap"></div>
<script>docuSignClick.Clickwrap.render({
environment: 'https://demo.docusign.net',
accountId: 'bra-bra',
clickwrapId: 'bra-bra-bra',
clientUserId: '${clientUserId}'
}, '#ds-clickwrap');</script>
`
class TermsOfConditionsView extends Component {
  render() {
    return <div dangerouslySetInnerHTML={{__html: clickwrapCode(uuid.v4())}}/>
  }
}
export default TermsOfConditionsView

3) Pit fall of "dangerouslySetInnerHTML"
The above component shows the contents but its script is not executed automatically.

The contents of script tag is never evaluated by design of React component.

For details, see "dangerouslysetinnerhtml react" - https://code-examples.net/en/q/21f7059

4) Evaluate script tag by using "dangerously-set-inner-html" component
The following component solved this "dangerouslySetInnerHTML" problem.

It could be used instead of div tag.

• "dangerously-set-inner-html" https://www.npmjs.com/package/dangerously-set-inner-html

5) Finally, the component code will be as below;

import React, { Component } from "react"
import uuid from "uuid"
import InnerHTML from "dangerously-set-inner-html"
const clickwrapCode = (clientUserId) => `
<div id="ds-clickwrap"></div>
<script>docuSignClick.Clickwrap.render({
environment: 'https://demo.docusign.net',
accountId: 'bra-bra',
clickwrapId: 'bra-bra-bra',
clientUserId: '${clientUserId}'
}, '#ds-clickwrap');</script>
`
class TermsOfConditionsView extends Component {
  render() {
    return <InnerHTML html={clickwrapCode(uuid.v4())}/>
  }
}
export default TermsOfConditionsView

I hope this knowledge will be helpful those who use DocuSign with React.