Sign PDFs with Certificates Using JavaScript

This guide shows how Electronic Signatures and Digital Signatures can be used together.

Launch Demo

Digital signatures are always created by adding a new invisible signature form field. For adding a visual representation of the signature, a common workflow is to first add users to create an electronic signature, and then, once the workflow is finalized, create the cryptographic digital signature.

An example of this can be tried out on our Invisible Digital Signing Catalog example, in which the users are expected to first add an electronic signature to a document. Then, a new digital signature is created by activating the Finish Signing button.

This specific workflow showcased on the Catalog example is achieved by making use of the following APIs:

  1. PSPDFKit.Instance#setToolbarItems to dynamically activate and deactivate the "signature" toolbar item, e.g.:

// `fixedToolbarItems` is an array with other items that are not changing.
instance.setToolbarItems([
	...fixedToolbarItems,
	{ type: 'ink-signature', disabled: true },
]);
  1. Listening to the "annotations.create" event to activate the Finish Signing button.

  2. Using the PSPDFKit.Instance#signDocument method to add the digital signature to the document.

The full source code for the Catalog example is available on GitHub. 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.