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>

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.
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`
`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`
`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 Page