Docusign JS

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