@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

npm install @payotex.com/checkout

Quick Start

React

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

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

'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)

<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:

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