slate-credit-line-banner

Renders a customer's credit line inside your product and drives the whole journey: it shows the offer when they are pre-approved, resumes an activation left halfway, reports an application under review, and once the line is live it shows the available amount with a button that opens the draw flow.

This is the component for the draw facility credit line type — see the Credit Line — Draws guide for the full integration.

Usage

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

<slate-credit-line-banner
  env="live"
  user-token="<session-token>"
></slate-credit-line-banner>

States

The banner resolves the customer's state on its own and renders one of these:

State	What it shows	Button
Pre-approved	"Activate your credit line"	Activate — opens the application
Activation in progress	"Finish activating your credit line"	Resume — reopens where they left off
Under review	"We're reviewing your application"	—
Active	Available amount, and how much of the limit is in use	Draw funds — opens the draw flow
Paused	The line's limit and balance	—
Nothing to show	Renders nothing, takes no space	—

Caveats

env and user-token are required — omitting either prevents the component from loading data. env must be exactly "live" or "sandbox".
Only speaks credit line — a customer is enrolled in exactly one product, and this banner renders only credit line offers. If the customer's offer belongs to the capital product it renders nothing (use slate-pre-approval-banner-v2 for those customers), so it is safe to embed on a page every customer sees — each customer gets their product's banner, never the wrong copy.
Renders nothing when there is no offer and no line — the component takes up no space, so it is safe to always mount it.
Brand colors come from your Slate branding configuration — the banner uses your partner palette; there are no color properties to set per instance.
disable-dialogs gives you the navigation — with it the component emits ctaClicked (with action being "activate", "resume" or "draw") instead of opening Slate's dialog, so you can route the customer yourself.
Preview any state with demo — set demo and demo-scenario (preApproved, resume, submitted, active, suspended) to render a state with sample data, without a session token.

Properties

Property	Attribute	Type	Default
`demo`	`demo`	`boolean`	`false`
`demoBrand`	--	`{ logoUrl?: string; displayName?: string; colors?: { application?: { brandColor?: string; }; preApprovalBanner?: { textPrimaryColor?: string; textSecondaryColor?: string; backgroundColor?: string; accentColor?: string; }; partner?: { background?: string; foreground?: string; primary?: string; primaryForeground?: string; secondary?: string; secondaryForeground?: string; success?: string; muted?: string; warning?: string; error?: string; border?: string; }; }; }`	`undefined`
`demoScenario`	`demo-scenario`	`"active" \| "none" \| "preApproved" \| "resume" \| "submitted" \| "suspended"`	`"preApproved"`
`disableDialogs`	`disable-dialogs`	`boolean`	`false`
`env`	`env`	`"live" \| "sandbox"`	`undefined`
`userToken`	`user-token`	`string`	`undefined`

Events

Event	Description	Type
`ctaClicked`		`CustomEvent<{ view: "application"; action: CreditLineBannerAction; }>`
`load`		`CustomEvent<void>`
`statusRefreshed`	Fired after the application flow submits or closes and the banner refetches its own data. A draw creates a financing agreement, which the banner doesn't own — hosts such as `slate-capital` listen to this to pull the new draw into their agreement list.	`CustomEvent<void>`

Built with StencilJS

Pre Approval Banner

Capital Experience