Skip to content

Latest commit

 

History

History

embedded-signing

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
classicEmbeddedSigning.js
classicEmbeddedSigning.js
 
 
classicExternalFramed.html
classicExternalFramed.html
 
 
classicExternalReturn.html
classicExternalReturn.html
 
 
classicReturnUrl.html
classicReturnUrl.html
 
 
click2agree.js
click2agree.js
 
 
css.css
css.css
 
 
dsjsDefaultSigning.js
dsjsDefaultSigning.js
 
 
dsjsExternal.html
dsjsExternal.html
 
 
envelopes.js
envelopes.js
 
 
focusedViewSigning.js
focusedViewSigning.js
 
 
index.html
index.html
 
 
script.js
script.js
 
 

README.md

Docusign Embedded Signing Examples

Introduction

This application enables developers to test the multiple styles of Docusign signing ceremonies that can be embedded in web and mobile applications. The four styles are:

  • Focused View is a minimalist signing ceremony that puts the documents to be signed front and center for the signer. Focused View is designed to be embedded in a web application.
  • Click to Agree is a Clickwrap agreement ceremony. It enables the user to agree with (not sign) a document. The agreement can include one or more supplemental documents. An optional ERSD can be included too.
  • Docusign.js with Default View uses the classic embedded signing UX with the developer-friendly benefits (see below) of docusign.js.
  • Classic Embedded Signing is the most powerful Docusign signing ceremony. It can be used with all types of Docusign signatures (SES, AES, QES), and with all types of Docusign IDV authentication options.

Limitations

Each of the four tabs for the signing examples includes an Information button. Use the Information button to see the known limitations, if any, for that style of signing.

Top Navigation Bar Items

  • Settings -- see the Settings section below.
  • Start Logging -- opens the logging window. The logging window includes the API calls used by the tool. Click on an API Call to expand it and to see the API request and response.
  • Save to URL -- saves the current configuration of the tool to a URL.
  • README -- displays this file.

Settings

Click the Settings item in the top navigation bar to open the Settings Modal.

Account

Use this setting to change the account that will be used.

Output

By default, the tool opens the signing or agreement ceremony by replacing the tool's UI with the Docusign session.

Instead of the tool opening the ceremony, you can choose to have the URL displayed for you to then open it. If you choose to have the URL displayed, remember that you must use it within 5 minutes.

Use an iframe & GUI chrome? This field only applies if the URL output option is selected. If this option is checked, then an iframe with minimal GUI chrome (just the top navigation bar) is used. If the option is not checked, then a 100% iframe is used for the first three example categories since the Docusign JS library always creates an iframe.

Authentication

Select Default Phone/SMS Authentication and enter a phone number to enable this option.

Payment Gateway

As discussed below, enter your Payment Gateway ID if your document includes a Payment tab.

Docusign.js

The Docusign.js library is used with first three example categories listed above.

Docusign.js and Classic Embedded Signing differ in how they return control to your application:

  • Classic Embedded Signing: the browser is redirected to your application. The event query parameter contains the status.
  • Docusign.js: the library raises a DOM event to your application.

iframes: Docusign.js always creates an iframe in the DOM for the signing ceremony. The library deletes the iframe after the signing session has completed.

While the Classic Embedded Signing ceremony can be used with an iframe, management of the iframe is the developer's responsibility.

Payment tabs

Testing the different signing ceremonies with a payment tab requires additional set up and configuration steps.

Configure a test payment gateway

  1. Login to your developer (demo) account.
  2. Click the Settings link in the top navigation bar to open the eSignature Administration app.
  3. Click the Payments link in the Integrations section of the lefthand navigation bar.
  4. Click Add Payment Gateway
  5. Click Stripe (It has an easy to use demo account feature.)
  6. Click Skip this form in the test mode section
  7. You are brought back to the Payments screen with a listing for your new Stripe test account.
  8. Click the Edit choice for the Stripe account.
  9. Select the credit cards you'd like to accept and save your changes.
  10. Copy the Gateway Account ID for Stripe. You'll need it for the next step.

Configure the application

  1. Start the Embedded Signing Examples application
  2. Click Settings (top navigation bar)
  3. Enter the payment gateway ID into the Settings form
  4. Close the form

Testing payments

Currently, payments tabs are supported by the Classic Embedded Signing UX and by Docusign.js with Default View.

  1. In the test application, select the Classic Embedded Signing tab.
  2. Choose the Payment example Document.
  3. Sign the document.
  4. You will then be asked for your credit card information. You can use a real credit card, or a test number.

Stripe test MasterCard number: 5555555555554444

Use any date in the future and any three digit CVC number. Additional Stripe test numbers

If you would like to use payments with Focused View, please ask Docusign Customer Service to add your company information to bug report C2A-3499.