> ## Documentation Index
> Fetch the complete documentation index at: https://docs.swippee.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Credit widget

> Embed an in-app pre-qualification widget: the customer taps, consents, and gets an instant pre-qualified decision — powered by Swippee underwriting, the final call stays yours.

The **Swippee Credit widget** is a drop-in surface an institution embeds in its
own app. The customer taps *“Need extra cash?”*, consents to share their account
activity, and gets an instant **pre-qualified** decision — computed by Swippee's
underwriting engine. It is institution-led: your brand carries the header, Swippee
is the quiet "Powered by", and the **final loan decision stays yours**.

<Warning>
  **In preview — not yet self-serve.** Two things are gated until Swippee enables
  your institution (email [hello@swippee.com](mailto:hello@swippee.com)):

  * **Embedding only works on allowlisted origins.** Today `/embed/credit` allows
    **same-origin framing only**, so the snippet below will not load on your site
    until we add your domain to the allowlist.
  * **The `@swippee/connect-react` `SwippeeCredit` export ships with enablement** —
    it is not on the public npm release yet.

  Meanwhile, try it on our
  [live demo](https://swippee.com/products/connect/credit-demo).
</Warning>

<Note>
  In sandbox/demo mode the decision is computed by the real engine over a
  **synthetic** statement — no customer data is touched. See the
  [live demo](https://swippee.com/products/connect/credit-demo).
</Note>

## How it works

<Steps>
  <Step title="Embed the entry card">
    Drop the card into your app with one script tag (or the React component).
  </Step>

  <Step title="Customer consents">
    They tap the card and approve sharing their income & obligations — on Swippee,
    never on your page.
  </Step>

  <Step title="You receive the result">
    On a pre-qualified result the widget posts a short-lived `public_token` back to
    your page.
  </Step>

  <Step title="Exchange on your server">
    `POST /v1/connect/exchange` to read the underwriting result, then make your
    lending decision.
  </Step>
</Steps>

## Quick start (script tag)

```html theme={null}
<div id="swippee-credit"></div>
<script src="https://swippee.com/embed/credit.js"></script>
<script>
  SwippeeCredit.mount("#swippee-credit", {
    app: "Himalayan Bank",   // shown in the sheet header
    accent: "#c8102e",       // your brand colour (optional)
    amount: 500000,          // advertised maximum, NPR (optional)
    theme: "light",          // light | dark (optional)
    onResult: function (r) {
      // r = { status, public_token, amount, emi, tenor }
      if (r.status === "prequalified") exchange(r.public_token);
    },
    onClose: function (i) {
      console.log("closed:", i.reason);
    },
  });
</script>
```

## React

```tsx theme={null}
import { SwippeeCredit } from "@swippee/connect-react";

<SwippeeCredit
  app="Himalayan Bank"
  accent="#c8102e"
  amount={500000}
  onResult={(r) => {
    if (r.status === "prequalified") exchange(r.publicToken);
  }}
/>;
```

## Options

| Option     | Type     | Description                                                                                                                                                      |
| ---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `app`      | string   | Your institution/app name, shown in the sheet header.                                                                                                            |
| `accent`   | string   | Your brand colour (`#rrggbb`). Themes the widget; never recolours the Swippee mark.                                                                              |
| `amount`   | number   | Advertised maximum loan, NPR (default 500,000).                                                                                                                  |
| `theme`    | string   | `light` or `dark` (default `light`).                                                                                                                             |
| `bank`     | string   | Your own bank code → excluded from the "add your other banks" grid.                                                                                              |
| `brand`    | string   | Entry-card attribution: `text` (default — "Powered by Swippee"), `mark` (logo + text), or `none`. Inside the flow, the "Powered by Swippee" footer always shows. |
| `scenario` | string   | Sandbox demo profile: `salaried`, `high_risk`, `thin_file`, `remittance`.                                                                                        |
| `onResult` | function | Fired with `{ status, public_token, amount, emi, tenor }`.                                                                                                       |
| `onClose`  | function | Fired with `{ reason }` when the customer dismisses the flow.                                                                                                    |

## The result

```json theme={null}
{
  "status": "prequalified",
  "public_token": "swcredit_…",
  "amount": 500000,
  "emi": 11634,
  "tenor": 60
}
```

`amount` and `emi` are the headline pre-qualified offer; **terms and final
approval are yours to set**. Exchange the `public_token` for the full
underwriting result:

```bash theme={null}
curl -X POST https://api.swippee.com/v1/connect/exchange \
  -H "Authorization: Bearer $SWIPPEE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "public_token": "swcredit_…" }'
```

## Security & privacy

* The customer consents on Swippee — **your page never sees their statement or login**.
* Cross-origin messages are accepted **only** from the Swippee origin.
* The widget shows a pre-qualification, not a loan offer; the copy makes the
  institution's final-decision role explicit.
* Reasons are shown to the customer **only on a decline** (with encouraging
  next-steps); the full underwriting detail is server-side, for your team.

## Other banks & wallets

The customer can optionally add accounts from **any bank or wallet Swippee
supports** for a fuller picture and a higher limit — the list stays in sync with
Swippee's coverage automatically. See [Connect](/guides/connect) for the
statement-sharing flow each added account uses.