Certificate Issuance Module

The Certificate Issuance module issues a digital certificate at the end of a verification flow. The user sets a password that protects the certificate, the backend issues it, and the SDK offers the resulting file for download.

Follows the backend-process pattern with a short form step for the password. See that page for the shared manager lifecycle; the rest of this page covers what's specific to certificate issuance.

Tag

<incode-certificate-issuance> is a standard Web Component. Importing the UI subpath registers the custom element; importing the CSS applies the module's styles.

import '@incodetech/web/certificate-issuance';
import '@incodetech/web/certificate-issuance/styles.css';

Properties

Set these as JavaScript properties on the element (not as HTML attributes):

Usage

Vanilla HTML / TypeScript

<incode-certificate-issuance></incode-certificate-issuance>

<script type="module">
  import { setup } from '@incodetech/core';
  import '@incodetech/web/certificate-issuance';
  import '@incodetech/web/certificate-issuance/styles.css';

  await setup({
    apiURL: 'https://demo-api.incodesmile.com',
    token: 'your-session-token',
  });

  const el = document.querySelector('incode-certificate-issuance');
  el.config = {
    region: 'MX',
    type: 'LONG_TERM',
  };
  el.onFinish = () => console.log('Certificate issued!');
  el.onError = (err) => console.error('Certificate error:', err);
</script>

React

React 18 or earlier: add the one-time JSX augmentation from Framework Integration → TypeScript: JSX support for incode-* tags. React 19+ doesn't need it.

import { useEffect, useRef } from 'react';
import { setup } from '@incodetech/core';
import type { CertificateIssuanceConfig } from '@incodetech/core/certificate-issuance';
import '@incodetech/web/certificate-issuance';
import '@incodetech/web/certificate-issuance/styles.css';

type CertificateElement = HTMLElement & {
  config: CertificateIssuanceConfig;
  onFinish: () => void;
  onError: (error: string) => void;
};

await setup({
  apiURL: 'https://demo-api.incodesmile.com',
  token: 'your-session-token',
});

export function CertificateIssuance() {
  const ref = useRef<CertificateElement>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.config = { region: 'MX', type: 'LONG_TERM' };
    el.onFinish = () => console.log('Certificate issued!');
    el.onError = (err) => console.error('Certificate error:', err);
  }, []);

  return <incode-certificate-issuance ref={ref} />;
}

For Angular (CUSTOM_ELEMENTS_SCHEMA) and Vue (compilerOptions.isCustomElement) setup, see Framework Integration.

Headless Mode

For complete UI control, use createCertificateIssuanceManager from @incodetech/core/certificate-issuance.

Quick Start

import { setup } from '@incodetech/core';
import { createCertificateIssuanceManager } from '@incodetech/core/certificate-issuance';

await setup({
  apiURL: 'https://demo-api.incodesmile.com',
  token: 'your-session-token',
});

const manager = createCertificateIssuanceManager({
  config: { region: 'MX', type: 'LONG_TERM' },
});

manager.subscribe((state) => {
  console.log('Status:', state.status);

  if (state.status === 'success') {
    // Offer state.blob for download, then report the outcome.
    triggerDownload(state.blob);
    manager.markDownloaded();
    manager.finish();
  }

  if (state.status === 'finished') {
    manager.stop();
  }
});

// Start the flow
manager.load();

// When state is 'password', collect input and submit once canSubmit is true.
manager.setPassword('Str0ngPass');
manager.submitPassword();

State Machine Flow

flowchart LR
    idle -->|load| password
    password -->|submitPassword| processing
    processing -->|issued| success
    processing -->|failure| error
    success -->|markDownloaded| downloaded
    success -->|finish| finished
    success -.->|reportDownloadError| error
    downloaded -->|finish| finished
    error -.->|after 3s| finished

States Reference

State Properties

When status === 'password':

When status === 'success':

API Methods

Password requirements

The password the user sets must satisfy every requirement below. passwordValidations reports each one so you can render a live checklist, and canSubmit is true only when all pass.

Configuration Options

CertificateIssuanceConfig shape:

Both values come from the dashboard flow configuration. When the module runs inside <incode-flow> or createOrchestratedFlowManager, the orchestrator passes them automatically.

See Also

• Headless Mode: Headless API patterns
• Individual Modules: Overview of all modules
• Module Patterns → backend-process