Embed the Signing Flow in Your Dashboard

<apex:page>
  <script src="https://exact.works/embed/paper.js"></script>

  <exact-paper
    listing="{!listing}"
    theme="light"
    buyer-email="{!Contact.Email}"
    return-url="{!URLFOR($Action.Case.View, Case.Id)}"
  />

  <script>
    document.addEventListener('exact:paper:compiled', function(e) {
      // Update the Case with Paper ID
      sforce.one.navigateToSObject('{!Case.Id}', 'detail');
    });
  </script>
</apex:page>

<div id="exact-paper-container"></div>

<script>
  // Load the embed script
  var script = document.createElement('script');
  script.src = 'https://exact.works/embed/paper.js';
  script.onload = function() {
    var paper = document.createElement('exact-paper');
    paper.setAttribute('listing', 'contract-reviewer');
    paper.setAttribute('theme', 'light');
    paper.setAttribute('buyer-email', '{{data.user.email}}');

    document.getElementById('exact-paper-container').appendChild(paper);
  };
  document.head.appendChild(script);
</script>

import React, { useEffect, useState } from 'react';
import ForgeUI, { Fragment, IssuePanel, render, useProductContext } from '@forge/ui';

const Panel = () => {
  const context = useProductContext();
  const issueKey = context.platformContext.issueKey;

  return (
    <Fragment>
      <IssuePanel>
        <Text>exact.works Integration</Text>
        <CustomUIExtension
          src={`https://exact.works/embed/paper?listing=code-reviewer&theme=light`}
        />
      </IssuePanel>
    </Fragment>
  );
};

export const run = render(<Panel />);

'use client'

import { useEffect, useRef } from 'react'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'exact-paper': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          listing: string
          theme?: 'dark' | 'light'
          'return-url'?: string
          'api-key'?: string
          'buyer-email'?: string
        },
        HTMLElement
      >
    }
  }
}

export function ExactPaperEmbed({ listing, onCompiled }: {
  listing: string
  onCompiled?: (data: { paperId: string; hash: string }) => void
}) {
  const ref = useRef<HTMLElement>(null)

  useEffect(() => {
    // Load script once
    if (!document.querySelector('script[src*="exact.works/embed/paper.js"]')) {
      const script = document.createElement('script')
      script.src = 'https://exact.works/embed/paper.js'
      document.head.appendChild(script)
    }

    // Listen for events
    const handler = (e: CustomEvent) => {
      onCompiled?.(e.detail)
    }

    ref.current?.addEventListener('exact:paper:compiled', handler as EventListener)
    return () => ref.current?.removeEventListener('exact:paper:compiled', handler as EventListener)
  }, [onCompiled])

  return <exact-paper ref={ref} listing={listing} theme="dark" />
}