slate-pre-approval-banner-v2
Displays a financing offer banner when the authenticated customer has an active pre-approval. Clicking the banner opens Slate's application flow where the customer can complete their financing application.
Usage
<script
async="true"
type="module"
src="https://components.tryslatehq.com/slate.esm.js"
></script>
<slate-pre-approval-banner-v2
env="live"
user-token="<session-token>"
></slate-pre-approval-banner-v2>
Caveats
- Only speaks capital — a customer is enrolled in exactly one product, and this banner renders only capital offers. If the customer's offer belongs to the credit line product it renders nothing (use
slate-credit-line-bannerfor 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 no offer exists — the component takes up no space if the customer has no active pre-approval.
- Auto-hides after application completion — once a customer's application reaches a final state (approved, denied), the banner will stop rendering after a period of time.
envanduser-tokenare required — omitting either will prevent the component from loading data.envmust be exactly"live"or"sandbox".
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
adjustTerms |
adjust-terms |
boolean |
false |
|
disableDialogs |
disable-dialogs |
boolean |
false |
|
env |
env |
"live" | "sandbox" |
undefined |
|
userToken |
user-token |
string |
undefined |
Events
| Event | Description | Type |
|---|---|---|
ctaClicked |
CustomEvent<{ view: "details" | "application"; }> |
|
load |
CustomEvent<void> |
|
statusRefreshed |
Fired after the application flow submits or closes and the banner refetches its own data. Signing an approved offer creates a financing agreement from inside the form, which the banner doesn't own — hosts such as slate-capital listen to this to pull it into their list. |
CustomEvent<void> |
Built with StencilJS