npm package: @payotex.com/checkout
Description: Client-side checkout widget for Payotex crypto payments
Latest version: 1.0.1

# @payotex.com/checkout

Client-side checkout widget for Payotex crypto payments. Provides a React component and vanilla JS function to embed the Payotex payment widget on any website.

## Installation

```bash
npm install @payotex.com/checkout
```

## Quick Start

### React

```tsx
import { PayotexCheckout } from '@payotex.com/checkout';

// Session mode (recommended for server-side session creation)
function CheckoutPage({ sessionId }: { sessionId: string }) {
  return (
    <PayotexCheckout
      sessionId={sessionId}
      onLoad={() => console.log('Widget loaded')}
      onError={(err) => console.error('Widget error:', err)}
    />
  );
}

// Publishable key mode (client-side session creation)
function QuickCheckout() {
  return (
    <PayotexCheckout
      publishableKey="pk_live_your_key_here"
      amount="49.99"
      currency="USD"
      buttonText="Pay with Crypto"
    />
  );
}
```

### Vanilla JavaScript

```js
import { loadPayotexCheckout } from '@payotex.com/checkout';

const container = document.getElementById('checkout-container');

const cleanup = loadPayotexCheckout(container, {
  sessionId: 'your-session-id',
  onLoad: () => console.log('Widget loaded'),
  onError: (err) => console.error('Error:', err),
});

// Call cleanup() when you want to remove the widget
```

## Framework Examples

### Next.js

```tsx
'use client';
import { PayotexCheckout } from '@payotex.com/checkout';

export default function CheckoutPage({ params }: { params: { sessionId: string } }) {
  return (
    <div>
      <h1>Complete Your Payment</h1>
      <PayotexCheckout
        sessionId={params.sessionId}
        onError={(err) => console.error(err)}
      />
    </div>
  );
}
```

### Plain HTML (via CDN / bundler)

```html
<div id="payotex-checkout"></div>

<script type="module">
  import { loadPayotexCheckout } from '@payotex.com/checkout';

  loadPayotexCheckout(document.getElementById('payotex-checkout'), {
    publishableKey: 'pk_live_your_key_here',
    amount: '25.00',
    currency: 'USD',
  });
</script>
```

## Props / Options Reference

| Option | Type | Required | Default | Description |
|---|---|---|---|---|
| `publishableKey` | `string` | Conditional | — | Your publishable key (`pk_live_...`). Required if no `sessionId`. |
| `sessionId` | `string` | Conditional | — | Pre-created checkout session ID. Required if no `publishableKey`. |
| `amount` | `string \| number` | Conditional | — | Payment amount. Required when using `publishableKey` without `sessionId`. |
| `currency` | `string` | No | `"USD"` | Currency code: `USD`, `EUR`, `GBP`. |
| `buttonText` | `string` | No | `"Pay with Crypto"` | Custom text for the payment button. |
| `baseUrl` | `string` | No | `"https://payotex.com"` | Base URL for the Payotex API. |
| `onLoad` | `() => void` | No | — | Called when the widget script has loaded. |
| `onError` | `(error: Error) => void` | No | — | Called on errors (load failures, validation errors). |

### React-only Props

| Prop | Type | Description |
|---|---|---|
| `className` | `string` | Additional CSS class for the container div. |
| `style` | `React.CSSProperties` | Inline styles for the container div. |

## Security

- **Never use your secret key (`sk_live_...`) in client-side code.** The SDK will throw a `SECURITY ERROR` if a secret key is detected.
- Use your **publishable key** (`pk_live_...`) for client-side integrations.
- Secret keys must only be used server-side with the `@payotex.com/node` SDK.
- For maximum security, create checkout sessions server-side and pass the `sessionId` to the client.

## TypeScript Support

This package includes full TypeScript type definitions. All types are exported:

```typescript
import type { PayotexCheckoutOptions, PayotexCheckoutProps } from '@payotex.com/checkout';
```

## How It Works

The SDK dynamically injects the Payotex `widget.js` script with the appropriate `data-*` attributes. The widget script handles the entire checkout UI including:

- Chain/asset selection
- Quote generation
- QR code display
- Payment address and memo
- Real-time transaction tracking
- Payment confirmation

## License

MIT