Element on a custom stack

Filecheck ships plugins for WooCommerce, Shopify, PrestaShop, and OpenCart. On any other stack — a custom storefront, a Rails or Laravel app, a headless-CMS front end — you wire the same two halves by hand:

Client — embed the Element, which handles upload, checking, findings, and auto-fix UI, and gate your submit button on canProceed.
Server — before fulfilling, verify the submitted jobId with your secret key.

No browser in your flow at all — files arrive from a batch process, an API, or your own upload pipeline? Skip the Element and use the headless API integration instead.

Get your keys and a workflow

From the dashboard, grab a publishable key (pk_…, safe in the browser), a secret key (sk_…, server-side only), and the workflowId of the Workflow to run.

Embed the Element (client)

Drop the Element into your upload or product page, mount it, and gate your submit button on canProceed. Carry the jobId in a hidden field so it reaches your server with the form:

<script src="https://cdn.filecheck.io/element/v1/filecheck.js"></script>

<form id="order-form" method="post" action="/checkout">
  <div id="fc-slot"></div>
  <input type="hidden" name="fc_job_id" id="fc-job-id" value="">
  <button type="submit" id="submit-btn" disabled>Continue</button>
</form>

<script>
  const fc = Filecheck('pk_live_…');
  const intake = fc.elements.create('intake', { workflowId: 'wf_…' });
  intake.mount('#fc-slot');
  intake.on('status', ({ canProceed, jobId }) => {
    document.getElementById('submit-btn').disabled = !canProceed;
    document.getElementById('fc-job-id').value = jobId ?? '';
  });
</script>

Use canProceed as-is — it already folds in the Workflow’s on-fail policy, so don’t re-derive it from status or the file list. See Installation for async loading and sizing, and Events for the full status payload.

Verify the job (server)

Client-side gating keeps customers honest, but it can be bypassed. Before fulfilling, verify the submitted jobId with your secret key:

curl https://api.filecheck.io/jobs/{jobId} \
  -H "Authorization: Bearer sk_live_…"

Confirm the job belongs to the expected Workflow and reached a passing status, then download the auto-fixed output. See Verify jobs for the checklist, or configure webhooks to be pushed results instead of fetching them.

Multiple uploads on one page

Each Element reports its own canProceed. Track them separately and only enable submit when all pass:

const states = {};
function addIntake(workflowId, slotId) {
  const el = fc.elements.create('intake', { workflowId });
  el.on('status', ({ canProceed, jobId }) => {
    states[slotId] = { canProceed, jobId };
    submitBtn.disabled = !Object.values(states).every(s => s.canProceed);
  });
  el.mount('#' + slotId);
}

The Element

Store plugins

Custom integrations

Official libraries

Server-side

Reference

Element on a custom stack

Multiple uploads on one page

​Multiple uploads on one page

Multiple uploads on one page