# Web script SDK

Add the script with a registered app ID, then connect login state and payment requests.

Add one official script to your website to create a Pouchi login button. No React, Provider, npm package or API secret is required. Authentication and payment approval happen in a separate Pouchi window.

**Current scope**
This release targets Maroo Testnet (`chainId 450815`). The official script is publicly available, but final new-account and payment regression checks for the current release are not complete. Button creation or opening a login window alone does not verify a payment integration.

## App registration

Request app registration at [business@pouchi.app](mailto:business@pouchi.app) and use your issued app ID. The example `tenant_your_app` cannot be used for a real login.

Register the allowed development and production origins. An origin includes the scheme and port as well as the domain. For example, `https://app.example.com` and `http://localhost:31733` are different origins. Do not copy another demo's app ID.

Confirm the app's isolated or shared wallet setting during registration. The script follows that configuration. The API, vault origin and chain are fixed for this release and cannot be overridden with script attributes.

## Script insertion

```html
<script defer src="https://pouchi-wallet.vercel.app/sdk/v1/pouchi.js" data-app-id="tenant_your_app"></script>
```

Place the deferred script in the document head or body. A managed login button appears after a body script, or at the end of the body for a head script.

To mount inside an existing element, create the element first and add `data-target`.

```html
<div id="pouchi-login"></div>
<script defer src="https://pouchi-wallet.vercel.app/sdk/v1/pouchi.js" data-app-id="tenant_your_app" data-target="pouchi-login"></script>
```

The script generates a login/logout button and public user status. It does not generate a product page, checkout button or payment request.

## Login state

The script emits `pouchi:ready` when ready and `pouchi:change` when login state changes. After the script runs, `window.Pouchi.getUser()` reads the current state: `null` before login, or an app-specific user ID with granted email and wallet address after login.

Call `window.Pouchi.login()` directly from a user click handler when wiring an existing button. If popups or storage are blocked, the SDK does not fall back to storing key shares in your app origin.

## Payment requests

Register recipients, admitted calls, limits and gas sponsorship before requesting a payment from a user click. The unit of `value` is wei. Set `registeredTestRecipient` to the test recipient your app has verified.

```js
payButton.onclick = async () => {
  if (window.Pouchi.getPendingPayment()) {
    const status = await window.Pouchi.getPaymentStatus();
    // Reconcile the existing request and update the UI. Do not submit a new payment.
    return;
  }
  const result = await window.Pouchi.sendTransaction({
    to: registeredTestRecipient,
    value: "10000000000000000",
    chainId: 450815,
  });
  // 0.01 test asset. Confirm a successful receipt for result.hash before completion.
};
```

Do not automatically resubmit after an approval timeout. Use `getPendingPayment()` and `getPaymentStatus()` to reconcile the existing request. A transaction hash alone is not proof of success; confirm the chain receipt before delivering goods.

## Server authentication and sessions

`getIdentityToken()` returns a signed identity token; `getAccessToken()` returns the app bearer. Your backend must verify the identity signature, issuer, app audience and expiry. Parsing claims in the browser does not authenticate a backend request. [Server integration](/en/docs/server/)

Keep tokens out of URLs, logs and HTML attributes. `logout()` ends this app session. It does not log every app out or delete vault key material.

## Page policies

Scripts and styles load from `https://pouchi-wallet.vercel.app`, API requests use `https://15.164.50.132`, and login/approval windows use `https://vault.15-164-50-132.sslip.io`. Verify your actual deployment's CSP, popup and window isolation policies allow this flow.

Use one app ID per page. Single-page apps can use `mount(element)`, `unmount(element)` and `destroy()` to manage views. For React providers and hooks, see the [React quickstart](/en/docs/quickstart/).