Skip to main content
Question

Docusign JS

  • November 15, 2024
  • 1 reply
  • 97 views

Forum|alt.badge.img+2

Need help on how to use docusign js, for a seamless experience on frontend and not use iframe embed as it doesnt helps in UX. I tried examples given on github but they are too old . Can someone help me how to use docusign e sign feature with next js app to render forms using docusign js instead of iframe embed.

1 reply

Forum|alt.badge.img+3
  • Docusign Employee
  • 19 replies
  • November 17, 2024

Hi Rostwal,

To integrate DocuSign eSign features into your Next.js app without using an iframe, you can use the DocuSign JavaScript SDK. Here’s a step-by-step guide to get you started:

  1. Install the DocuSign SDK: First, you need to install the DocuSign SDK. You can do this using npm:

    npm install docusign-esign
    
  2. Set Up Your DocuSign Account: Ensure you have a DocuSign developer account and create an integration key. You’ll need this for authentication.

  3. Create a DocuSign Client: Set up the DocuSign client in your Next.js app. Create a utility file, e.g., docusignClient.js:

     
    import docusign from 'docusign-esign';
    
    const apiClient = new docusign.ApiClient();
    apiClient.setBasePath('https://demo.docusign.net/restapi');
    apiClient.addDefaultHeader('Authorization', 'Bearer YOUR_ACCESS_TOKEN');
    
    export default apiClient;
    

     

  4. Generate an Envelope: Create a function to generate an envelope. This will include the document you want to sign and the recipient details:

     

    import docusign from 'docusign-esign';
    import apiClient from './docusignClient';
    
    const createEnvelope = async (documentBase64, recipientEmail, recipientName) => {
      const envelopesApi = new docusign.EnvelopesApi(apiClient);
      const envelopeDefinition = new docusign.EnvelopeDefinition();
    
      envelopeDefinition.emailSubject = 'Please sign this document';
      envelopeDefinition.documents = [
        {
          documentBase64,
          name: 'Document',
          fileExtension: 'pdf',
          documentId: '1',
        },
      ];
    
      envelopeDefinition.recipients = {
        signers: [
          {
            email: recipientEmail,
            name: recipientName,
            recipientId: '1',
            routingOrder: '1',
          },
        ],
      };
    
      envelopeDefinition.status = 'sent';
    
      const results = await envelopesApi.createEnvelope('YOUR_ACCOUNT_ID', { envelopeDefinition });
      return results;
    };
    
    export default createEnvelope;
    

     

  5. Embed the Signing Ceremony: To embed the signing ceremony in your app, you need to generate a recipient view URL:

    const getRecipientView = async (envelopeId, recipientEmail, recipientName, returnUrl) => {
      const envelopesApi = new docusign.EnvelopesApi(apiClient);
      const viewRequest = new docusign.RecipientViewRequest();
    
      viewRequest.returnUrl = returnUrl;
      viewRequest.authenticationMethod = 'email';
      viewRequest.email = recipientEmail;
      viewRequest.userName = recipientName;
      viewRequest.recipientId = '1';
      viewRequest.clientUserId = '1234';
    
      const results = await envelopesApi.createRecipientView('YOUR_ACCOUNT_ID', envelopeId, { recipientViewRequest: viewRequest });
      return results.url;
    };
    
    export default getRecipientView;
    

     

  6. Integrate with Your Next.js App: Use the above functions in your Next.js pages or components to create an envelope and get the recipient view URL. Here’s an example of how you might use these in a page:

     
    import { useState } from 'react';
    import createEnvelope from '../utils/docusign/createEnvelope';
    import getRecipientView from '../utils/docusign/getRecipientView';
    
    const SignDocument = () => {
      const [signingUrl, setSigningUrl] = useState('');
    
      const handleSignDocument = async () => {
        const documentBase64 = 'BASE64_ENCODED_DOCUMENT';
        const recipientEmail = 'recipient@example.com';
        const recipientName = 'Recipient Name';
        const returnUrl = 'https://yourapp.com/return';
    
        const envelope = await createEnvelope(documentBase64, recipientEmail, recipientName);
        const url = await getRecipientView(envelope.envelopeId, recipientEmail, recipientName, returnUrl);
        setSigningUrl(url);
      };
    
      return (
        <div>
          <button onClick={handleSignDocument}>Sign Document</button>
          {signingUrl && <iframe src={signingUrl} width="100%" height="600px"></iframe>}
        </div>
      );
    };
    
    export default SignDocument;

references:

How-To Embed the Docusign UI in your App | REST API | Docusign

How to create and embed a web form instance | Docusign

Render web form instances | Docusign

Thank you so much and if you need any help you can raise a support case anytime at https://support.docusign.com 


Reply