slate-application-form

Renders Slate's financing application as an embedded iframe. Use this component when you want to embed the full application flow directly into your platform, allowing customers to complete their financing application without leaving your site.

Usage

<script
  async="true"
  type="module"
  src="https://components.tryslatehq.com/slate.esm.js"
></script>

<slate-application-form
  env="live"
  user-token="<session-token>"
  finance-request-id="<finance-request-id>"
></slate-application-form>

Handling the dismiss event

Add closable to render a "Done" button on the application's terminal screens (submitted, approved, rejected). Listen for the dismiss event to close the form or navigate the customer away.

<slate-application-form
  id="application-form"
  env="live"
  user-token="<session-token>"
  closable
></slate-application-form>

<script>
  const form = document.getElementById("application-form");
  form.addEventListener("dismiss", (event) => {
    const { applicationId, status } = event.detail;
    // status is "submitted", "approved", or "rejected"
  });
</script>

Taking a draw on an active credit line

For the draw facility credit line type, the same component serves both moments of the journey — draw is what tells them apart:

<slate-application-form
  env="live"
  user-token="<session-token>"
  draw
  closable
></slate-application-form>

Without draw, the customer starts a credit line application (onboarding, agreement acceptance). With it, the same session opens a draw against the line they already have: amount, plan and confirmation only. Send it only once the customer's line is active.

Caveats

Requires a full-height container — the component renders an iframe that fills 100% of its parent's width and height. Make sure the parent element has an explicit height set.
draw requires an active credit line — set it only when the customer already has one; otherwise the flow has no line to draw against.
env and user-token are required — omitting either will prevent the component from loading. env must be exactly "live" or "sandbox".
finance-request-id is optional — when omitted, the form loads the application associated with the customer's pre-approval. When provided, it loads the application tied to the specified finance request.
Camera access — the iframe requests camera permission for identity verification steps.
Set closable once — changing it after the form has loaded will reset the customer's progress.

Properties

Property	Attribute	Description	Type	Default
`adjustTerms`	`adjust-terms`	When set, the application will adjust the terms to the user's preferences.	`boolean`	`false`
`closable`	`closable`	When set, the application renders a "Done" button on its terminal screens (submitted, approved, rejected) that fires the `dismiss` event when clicked. Attach an `onDismiss` / `dismiss` event listener to handle the return flow — without a listener, the button will appear but have no effect.	`boolean`	`false`
`draw`	`draw`	When set, the application opens the credit line draw flow (terms-only) instead of resuming the customer's onboarding application.	`boolean`	`false`
`env`	`env`	Which Slate environment to connect to. Required — must be exactly `"live"` or `"sandbox"`.	`"live" \| "sandbox"`	`undefined`
`financeRequestId`	`finance-request-id`	Optional identifier of a specific finance request to load. When omitted, the form loads the application associated with the customer's pre-approval. When provided, it loads the application tied to the specified finance request.	`string`	`undefined`
`reconnect`	`reconnect`	When set, the application opens the bank-reconnection flow — a single page that relinks the customer's bank account. Used when their credit line has a reconnection pending.	`boolean`	`false`
`skipIntro`	`skip-intro`	When set, the application will skip the intro screen.	`boolean`	`false`
`userToken`	`user-token`	Session token identifying the customer. Required — omitting this will prevent the application from loading.	`string`	`undefined`

Events

Event	Description	Type
`dismiss`	Fired when the customer clicks the "Done" button on a terminal screen (only rendered when `closable` is set). The event detail includes the application id and its final status.	`CustomEvent<{ applicationId: string; status: "submitted" \| "rejected" \| "approved"; }>`
`load`	Fired when the embedded application finished loading.	`CustomEvent<void>`
`submit`	Fired when the application is successfully submitted. The event detail includes the application id.	`CustomEvent<{ applicationId: string; }>`

Built with StencilJS

Capital Experience

Webhooks