Welcome to Developing with DocuSign.
I'm Inbar Gazit with the Developer Center Team.
In this screencast, I'll go over DocuSign sample apps,
and showcase MySure, our sample apps for the insurance
industry.
I'll also demonstrate how to build it on your local machine.
Sample apps are one of the ways we help developers
learn about the DocuSign APIs.
With sample apps, you get to see and interact
with live versions of applications
that utilize our APIs.
All the source code for our sample apps is open source,
and available for you in GitHub.
To find out sample apps, go to developers.docusign.com.
From the black navigation bar, select More, then Sample Apps.
Here you'll find all the sample apps listed in one page.
This screencast will focus on MySure,
our sample apps for insurance.
But I encourage you to try our other sample apps.
This is the homepage of MySure.
It is designed as a self-service portal for consumers
who either already have insurance, or are
interested in purchasing insurance.
Let's try the three use cases that MySure demonstrates,
and see how they utilize various DocuSign APIs and features.
First, let's try the leftmost option, submit a claim,
by selecting to get started button.
At this point, a pop up dialogue appears
that lets the user choose how they want
to log into this application.
This app only uses the DocuSign developer demo environment.
The first options that the user used their own developer
account.
It will require you to enter a user username and password.
The second options enable anyone to use the app
without providing credentials.
It uses a preconfigured account that belongs to the DocuSign
Developer Content Team.
I'll use the preconfigured account for this demo.
Behind the scenes, your choice controls
how the app authenticates itself with DocuSign.
DocuSign requires authentication before it will authorize
the app to make API calls.
With your developer account, the app
will use the Authorization Code grant authentication.
With a preconfigured account, the app
will use the JSON web token grant, or JWT authentication.
You can find out more about these authentication options
if you follow the link at the top of the dialog.
I'll click Continue with the pre-configured login,
then log in.
Submitting the claims required the user
to provide some information.
The information is used by MySure to generate an envelope.
Envelope is the term that DocuSign
uses for the data object that contains all the information
and documents required for an electronic signature
transaction.
Once you fill out this form and select Submit a Claim,
MySure will then make two API calls
to the e-signature REST API.
To learn more about these API calls,
I click See Behind the Scenes on the right.
The first API call to the e-signature REST APIs
is used to create a new envelope.
It adds all the required information to the envelope.
This includes a document, a recipient,
tabss, which are sign in elements or fields,
and a subject.
It also indicates that the envelope
should be ready for signature right away by setting
its status to send.
The second API call is used to support the embedded sign
in session.
With embedded sign in, the user can sign directly
from your app or website without having to find
a link in an email message.
The Create Recipient API call is therefore
used to generate the URL for embedded sign in.
Once the call is made, MySure redirects the user to that URL.
At this point, the user sees the sign in UI
where they can interact with the envelope.
The document that was sent to the first API call
is shown to the users.
As you can also see, the information
from the Submit a Claim form populated the document.
This document and the information associated with it
is now stored in the DocuSign Agreement Cloud.
The two elements in this interaction
are the sign in tab and an optional attachment tab.
The sign-in tab let's users place the signatures
on the document.
The attachment tabs in this scenario
is optional, and lets the user add images describing
the damage for which they are submitting an insurance
claim to MySure.
I sign the document, and click Finish.
When sign in is complete, DocuSign
redirects the user back to the URL
which was requested when the app made the Create Recipient
API call.
This takes the user back to Mysure.
This sign in complete page explains the various events
that can be passed back to your application
from DocuSign to indicate the status
of the recipient interacting with the envelope.
I click back to Home to return to the MySure homepage.
Now let's try the second use case of MySure.
The automatic policy renewal is an option
for consumers of MySure to allow their policy
to be automatically renewed every six months.
It is a way for consumers to consent
to having their policy automatically renewed every six
months.
This feature uses DocuSign Click and the DocuSign Click API.
DocuSign Click lets you capture consent
to agreements terms, such as terms of service and privacy
policies with a simple click, or a checkbox, or button.
You can display the clickwrap in a seamless embedded experience
on your websites and apps, or send the URL directly
to your users.
The way MySure works is that it creates a new clickwrap
every time you use it.
This is done for demonstration purposes.
A clickwrap is used to generate agreements
to be consented to online.
To create it, the apps called the Click API
and provides the documents to be displayed in the clickwrap
and a few other settings.
For the API to generate an agreement from a clickwrap,
the app needs to provide the email address as a unique field
to indicate the person agreeing to it.
Once you select Submit for Renewal,
the clickwrap is created and the agreement is presented.
Here is the clickwrap agreement.
I scroll through the clickwrap, select the checkbox,
and then click I Agree to indicate consent
to the agreement.
These options were set when the clickwrap was created.
It was also set to require the user
to read for the entire document.
So until the user goes down to the very end of it,
they cannot proceed.
DocuSign records my consent to this agreement in the DocuSign
Agreement Cloud.
I click Back to Home to return to the MySure homepage.
The last use case is buying new insurance.
This scenario is similar to Submit a Claim,
as it uses embedded sign in.
It also uses additional features, such as formula tabs
to calculate the total premium that you
need to pay for the insurance based on information provided
in fills in the document.
This option uses DocuSign payments to collect payment
from the user.
I select Get Started.
The buy new insurance forms enable
me to choose between auto, home, and life insurance.
For this demo, I'm going to choose auto.
I fill the form and select proceed with sign up.
At this point, MySure makes e-signature REST API
calls to create an envelope and generate
a URL for embedded signing.
Then I'm being redirected to the URL that was provided
by the e-signature API.
This envelope has a document as well as some fields
for the recipient to act on.
The recipient can enter amounts for coverage and deductible,
as well as choose to combine multiple types of insurance.
The formula tab calculates the premium amount
based on my selections.
In these sample apps, we use a simple formula
just to show the capability of calculated fields.
Once I sign and select Finish, I'm asked to pay the premium.
This feature uses DocuSign partner payment providers
with a pre-configured payment gateway set up
in the DocuSign account.
In MySure, I enter 4242 four times with any expiration
date and any security code.
I select Pay and Finish.
I see confirmation on my dialog box that payment was made,
and I'm directed to the MySure sign in complete page.
For the second part of this screencast,
I'm going to show how to build and run
MySure on your local development machine.
The MySure GitHub repo is located at HTTP
github.com/docusign/sample app mysure python.
This repo is open sourced.
You can clone a fork to jumpstart your development.
You can also submit pull requests
with contributions if interested.
This code in the repo uses Python
and the Python SDK on the back end
to make API calls to DocuSign.
The app also uses React on the front end,
and is served using Node.js web server.
First, I cloned this report into my local folder
c/sampleapp/sample app mysure python.
Now I need to modify .ENV file at the root of this repo
to include the configuration values to run the app.
Now I need to generate these values on the apps and keys
page in my DocuSign developer account.
Under Apps and Integration Keys, I
select Add App and Integration Key.
I'll call my app MySure, and copy the GUID so I can paste it
into the .ENV file.
I also need to add one secret key and copy its value as well.
Remember the secret key value is only displayed once,
so it has to be copied when it's created.
I also need to add a redirect URI by selecting Add URI,
entering HTTP localhost:3000/callback
and clicking Save.
Next I paste the integration key GUID as the value of the DS
client ID and my secret key GUID as my DS client secret
into the .ENV file and save it.
Don't worry about other values at this time.
But these values are needed to support using payment gateway
as well as using JWT authentication.
To run the app on your machine, you'll need Python installed.
To install Python, go to Python.org and download Python.
Next, you'll need to install NPM on your development machine.
NPM is a package manager for Node.js and can be downloaded
and installed from npmjs.com/gatedpmwebsite.
I open a console window and navigate to the folder
where I cloned the repo.
If you don't yet have pip installed,
used py -m pip install -u pip to install it.
I type NPM install, and the NPM package manager
will download all node dependencies onto my machine.
After this is done, if you don't have a virtual ENV installed,
use pip free install -u virtual env.
Next I create my virtual environment
using virtualenv venv.
To activate my virtual environment,
I use cd venv/scripts and then activate.
Then I go back CD slash ..slash.
To run Flask first, I upgrade Flask with pip
install --upgrade Flask.
I then type pip install -r requirements.txt
to install the Python packages on my back end.
At this point, I'm ready to run the back end.
To run the back end, I need to use Flask.
I type flask run --port 5001 to run flask listening
to port 5001.
And now I can run the front end UI
from a different console window that I opened.
I'll type npm start to start the node server on my machine.
NPM then launches my default browser
and goes to local host port 3000 to run my local copy of MySure.
If everything was configured correctly,
I authenticate using Authorization Code Grant
and make API calls to DocuSign for my developer machine.
I select log in with your developer account to log in.
The second option will not work, as I
haven't configured the app for JWT current authentication.
This consent dialogue is shown because it's
the first time I'm using this integration key,
and I need to consent to having this app use my account
credentials.
Once I select Accept, I can use MySure on my local machine.
Now I show how to add another sign here tab to the document.
Find the app/document.py file and go to line 74.
The sign_here viable you see here
is one of the objects used to call the SDK to either sign
here tab.
Copy and paste it to create a sign_here_2 variable.
The original sign here tab used an anchor string,
which is based on finding certain text in the document.
I can also use fixed positioning by adding
x-position and y-position.
I also need to add the document ID and page number fields.
I also need to add sign_here_2 the array of tabs assigned
to the signer object, since tabs are associated
with specific recipients.
Now I'll stop Flask then run it again for the charges
to take effect.
I don't need to restart node.
To see these changes, I go to buy new insurance,
and complete the form for a car.
Under buy new insurance document under the last sentence,
I see an additional sign here tab.
Here are some additional developer
resources to help you with DocuSign APIs.
Thank you for watching the screencast.
I hope you find it useful.
If you are watching this from YouTube channel,
please post questions and comments below the video,
or email us at developers@DocuSign.Com.