# @moonpay/platform-sdk-web

Browser SDK for the [MoonPay Developer Platform](https://dev.moonpay.com). Connect customers to MoonPay, fetch quotes and payment methods, and render MoonPay frames (widget, Apple Pay, Google Pay, buy, add-card, challenge) as iframes in your web app.

## Installation

```bash
npm install @moonpay/platform-sdk-web
```

## Quick start

Create a session server-side with [`@moonpay/platform-sdk-node`](https://www.npmjs.com/package/@moonpay/platform-sdk-node), pass the session token to the browser, then create a client:

```typescript
import { createClient } from '@moonpay/platform-sdk-web';

const client = createClient({ sessionToken });

// Check whether the customer already has an active MoonPay connection
const connection = await client.getConnection();
if (!connection.ok) {
  console.error(connection.error);
  return;
}

if (connection.value.status === 'connectionRequired') {
  // Render the connect frame so the customer can sign in to MoonPay
  await client.connect({
    container: document.getElementById('moonpay-container'),
    onEvent: (event) => console.log(event.kind),
  });
}
```

All client methods return a `Result<T, E>` discriminated union instead of throwing — check `result.ok` before using `result.value`.

Pass an optional `theme` to render every MoonPay frame in light or dark mode (omit it to follow the customer's system preference). The connect flow can override it per call:

```typescript
const client = createClient({ sessionToken, theme: { appearance: 'dark' } });

// Override for a single frame:
await client.connect({ container, theme: { appearance: 'light' } });
```

## What the client provides

- **Connection** — `getConnection()`, `connect()`, `setupAuth()`, `resetConnection()`
- **Payments data** — `getQuote()`, `getPaymentMethods()`, `deletePaymentMethod()`, `listTransactions()`, `getTransaction()`
- **Frames** — `setupWidget()`, `setupApplePay()`, `setupGooglePay()`, `setupBuy()`, `setupBuyButton()`, `setupAddCard()`, `setupChallenge()`, `setupCustomerExport()`
- **Customer** — `getCustomer()`, `submitCustomerKyc()`, `getCustomerUploadUrl()`, `submitCustomerFiles()` for headless integrations
- **Identity** *(deprecated, use Customer above)* — `createIdentity()`, `getIdentity()`, `updateIdentity()`, `verifyIdentity()` and file upload helpers

## Related packages

| Package | Use it for |
|---------|------------|
| `@moonpay/platform-sdk-node` | Server-side session creation |
| `@moonpay/platform-sdk-react-native` | React Native apps |
| `@moonpay/platform-protocol` | Shared protocol and API types |

## Documentation

Full guides and API reference: [dev.moonpay.com](https://dev.moonpay.com)

- [Introduction](https://dev.moonpay.com/platform/overview/introduction)
- [API & SDK credentials](https://dev.moonpay.com/platform/guides/api-and-sdk-credentials)
- [Connect a customer](https://dev.moonpay.com/platform/guides/connect-a-customer)
- [Pay with Widget](https://dev.moonpay.com/platform/guides/pay-with-widget)
- [Pay with Apple Pay](https://dev.moonpay.com/platform/guides/pay-with-apple-pay)

## License

MIT