Sign PDFs with certificates using JavaScript

This guide shows how to create visible digital signatures.

Digitally signed documents are valid even without a visual representation of a signature. The reason is that the invisible digital signature is itself part of the PDF and can be validated. For convenience, you can still add a visual signature to a digitally signed document.

To digitally sign a document and add a visible signature, use the signDocument method. The first parameter of this method is an object that configures the signature in the following way:

• The appearance parameter takes an object where the watermarkImage key specifies a Blob or a file path to an image. This image is displayed as the watermark of the signature field. Optional: In the appearance parameter, specify whether to display the signer, the signing location, and other metadata in the visible signature.
• Choose one of the following options:
  • Add the visible signature to an existing form field within the document. To do so, pass the name of the existing form field to the formFieldName parameter.
  • Create a new form field at a specific location in the document and add the visible signature to it. To do so, specify the location with the position parameter. This parameter takes an object where the pageIndex key specifies the page index within the document, and the boundingBox specifies the dimensions of the rectangle within which to place the signature.
• Optional: Use the signatureMetadata parameter to specify the signer’s name, the signature reason, and the location.

The second parameter of the signDocument method can be a callback function that implements the signing logic. For more information on this callback function, see the guide on adding digital signatures.

The example below digitally signs the document and adds a visible signature to an existing form field:

instance.signDocument(
    {
        appearance: { watermarkImageUrl: '/images/signature-watermark.png' },
        formFieldName: 'SignatureField'
    },
    twoStepSignatureCallbackFunction
})

The example below digitally signs the document, creates a new form field at a specific location in the document, and adds a visible signature to it.

instance.signDocument({
    signatureMetadata: {
        signerName: 'John Doe',
        signatureLocation: 'San Francisco',
        signatureReason: 'Testing',
    },
    position: {
        pageIndex: 0,
        boundingBox: {
            left: 100,
            top: 100,
            width: 100,
            height: 100,
        },
    },
    appearance: {
        mode: SignatureAppearanceMode.signatureAndDescription,
        showSigner: true,
        showSignDate: true,
        showReason: true,
        showLocation: true,
        showWatermark: true,
        watermarkImageUrl: '/images/signature-watermark.png',
    },
    twoStepSignatureCallbackFunction
})

The full source code for an example is available on GitHub(opens in a new tab). Since there are different implementations of the signDocument(), depending on whether you’re using a Standalone or Server-Backed deployment, there’s a dedicated standalone.js or server.js file with a specific implementation.