@one-payments/react 1.0.0

package/README.md

@@ -0,0 +1,237 @@
+# @one-payments/react
+
+React wrapper component for One Payments SDK. Use this package to integrate One Payments into your React applications with a native React component API.
+
+## Features
+
+- Native React component wrapping One Payments web component
+- Full TypeScript support with type definitions
+- React event handlers instead of DOM events
+- Seamless integration with React hooks and lifecycle
+
+## Installation
+
+```bash
+npm install @one-payments/react @one-payments/adapters-web
+# or
+yarn add @one-payments/react @one-payments/adapters-web
+# or
+pnpm add @one-payments/react @one-payments/adapters-web
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { OnePayment } from '@one-payments/react';
+import { createWebAdapters } from '@one-payments/adapters-web';
+import type { PaymentSucceededPayload, PaymentFailedPayload } from '@one-payments/react';
+
+function CheckoutPage() {
+  const adapters = createWebAdapters();
+
+  const handleSuccess = (event: CustomEvent<PaymentSucceededPayload>) => {
+    console.log('Payment successful!', event.detail);
+    // Navigate to success page or show confirmation
+  };
+
+  const handleError = (event: CustomEvent<PaymentFailedPayload>) => {
+    console.error('Payment failed:', event.detail);
+    // Show error message to user
+  };
+
+  return (
+    <div className="checkout">
+      <h1>Complete Your Payment</h1>
+      <OnePayment
+        config={{
+          apiKey: 'your-api-key',
+          secretKey: 'your-secret-key',
+          environment: 'prod'
+        }}
+        adapters={adapters}
+        amount={5000}
+        currency="SGD"
+        orderId={`order-${Date.now()}`}
+        onPaymentSuccess={handleSuccess}
+        onPaymentError={handleError}
+      />
+    </div>
+  );
+}
+
+export default CheckoutPage;
+```
+
+### With State Management
+
+```tsx
+import React, { useState } from 'react';
+import { OnePayment } from '@one-payments/react';
+import { createWebAdapters } from '@one-payments/adapters-web';
+import type {
+  PaymentSucceededPayload,
+  PaymentFailedPayload,
+  StateChangedPayload
+} from '@one-payments/react';
+
+function CheckoutWithState() {
+  const [paymentStatus, setPaymentStatus] = useState<'idle' | 'processing' | 'success' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  const adapters = createWebAdapters();
+
+  const handleSuccess = (event: CustomEvent<PaymentSucceededPayload>) => {
+    setPaymentStatus('success');
+    console.log('Payment Intent ID:', event.detail.paymentIntentId);
+  };
+
+  const handleError = (event: CustomEvent<PaymentFailedPayload>) => {
+    setPaymentStatus('error');
+    setErrorMessage(event.detail.message);
+  };
+
+  const handleStateChange = (event: CustomEvent<StateChangedPayload>) => {
+    console.log('Payment state:', event.detail.status);
+    if (event.detail.status === 'processing') {
+      setPaymentStatus('processing');
+    }
+  };
+
+  if (paymentStatus === 'success') {
+    return <div>Payment successful! Thank you for your order.</div>;
+  }
+
+  return (
+    <div>
+      {paymentStatus === 'error' && (
+        <div className="error">{errorMessage}</div>
+      )}
+      {paymentStatus === 'processing' && (
+        <div className="processing">Processing your payment...</div>
+      )}
+      <OnePayment
+        config={{
+          apiKey: process.env.REACT_APP_ONE_PAYMENTS_API_KEY!,
+          secretKey: process.env.REACT_APP_ONE_PAYMENTS_SECRET_KEY!,
+          environment: 'prod'
+        }}
+        adapters={adapters}
+        amount={5000}
+        currency="SGD"
+        orderId={`order-${Date.now()}`}
+        metadata={{
+          userId: '12345',
+          productId: 'product-abc'
+        }}
+        onPaymentSuccess={handleSuccess}
+        onPaymentError={handleError}
+        onStateChange={handleStateChange}
+      />
+    </div>
+  );
+}
+```
+
+### With React Router
+
+```tsx
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { OnePayment } from '@one-payments/react';
+import { createWebAdapters } from '@one-payments/adapters-web';
+
+function CheckoutPage() {
+  const navigate = useNavigate();
+  const adapters = createWebAdapters();
+
+  return (
+    <OnePayment
+      config={{
+        apiKey: process.env.REACT_APP_ONE_PAYMENTS_API_KEY!,
+        secretKey: process.env.REACT_APP_ONE_PAYMENTS_SECRET_KEY!,
+        environment: 'prod'
+      }}
+      adapters={adapters}
+      amount={5000}
+      currency="SGD"
+      orderId={`order-${Date.now()}`}
+      onPaymentSuccess={(event) => {
+        navigate('/success', {
+          state: { paymentId: event.detail.paymentIntentId }
+        });
+      }}
+      onPaymentError={(event) => {
+        navigate('/error', {
+          state: { error: event.detail.message }
+        });
+      }}
+    />
+  );
+}
+```
+
+## API Reference
+
+### OnePayment Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `config` | `SDKConfig` | Yes | SDK configuration with API keys and environment |
+| `adapters` | `Adapters` | Yes | Platform adapters (use `createWebAdapters()` for web) |
+| `amount` | `number` | Yes | Payment amount in smallest currency unit (e.g., cents) |
+| `currency` | `string` | Yes | ISO currency code (e.g., "USD", "EUR", "SGD") |
+| `orderId` | `string` | Yes | Unique order identifier |
+| `metadata` | `Record<string, string \| number \| boolean>` | No | Additional metadata to attach to the payment |
+| `onPaymentSuccess` | `(event: CustomEvent<PaymentSucceededPayload>) => void` | No | Callback when payment succeeds |
+| `onPaymentError` | `(event: CustomEvent<PaymentFailedPayload>) => void` | No | Callback when payment fails |
+| `onStateChange` | `(event: CustomEvent<StateChangedPayload>) => void` | No | Callback when payment state changes |
+
+### Types
+
+```typescript
+interface SDKConfig {
+  apiKey: string;
+  secretKey: string;
+  environment: 'dev' | 'staging' | 'prod';
+}
+
+interface PaymentSucceededPayload {
+  paymentIntentId: string;
+  amount: number;
+  currency: string;
+  status: 'succeeded';
+  metadata?: Record<string, unknown>;
+}
+
+interface PaymentFailedPayload {
+  code: string;
+  message: string;
+  details?: Record<string, unknown>;
+}
+
+interface StateChangedPayload {
+  status: 'idle' | 'initializing' | 'ready' | 'processing' | 'requires_action' | 'succeeded' | 'failed';
+  [key: string]: unknown;
+}
+```
+
+## Requirements
+
+- React >= 16.8.0 (hooks support)
+- TypeScript >= 5.0.0 (for TypeScript projects)
+
+## Related Packages
+
+- [@one-payments/core](../core) - Core SDK types and interfaces
+- [@one-payments/web-components](../web-components) - Underlying web component
+- [@one-payments/adapters-web](../adapters-web) - Web platform adapters
+- [@one-payments/vue](../vue) - Vue wrapper
+- [@one-payments/angular](../angular) - Angular wrapper
+- [@one-payments/react-native](../react-native) - React Native implementation
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var react = require('@lit/react');
+var webComponents = require('@one-payments/web-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/OnePayment.tsx
+var OnePayment = react.createComponent({
+  tagName: "one-payment",
+  elementClass: webComponents.OnePaymentElement,
+  react: React__default.default,
+  events: {
+    onPaymentSuccess: "payment-success",
+    onPaymentError: "payment-error",
+    onStateChange: "state-change"
+  }
+});
+
+exports.OnePayment = OnePayment;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/OnePayment.tsx"],"names":["createComponent","OnePaymentElement","React"],"mappings":";;;;;;;;;;;AAoBO,IAAM,aAAaA,qBAAA,CAAgB;AAAA,EACxC,OAAA,EAAS,aAAA;AAAA,EACT,YAAA,EAAcC,+BAAA;AAAA,EACd,KAAA,EAAOC,sBAAA;AAAA,EACP,MAAA,EAAQ;AAAA,IACN,gBAAA,EAAkB,iBAAA;AAAA,IAClB,cAAA,EAAgB,eAAA;AAAA,IAChB,aAAA,EAAe;AAAA;AAEnB,CAAC","file":"index.cjs","sourcesContent":["/**\n * React wrapper for <one-payment> web component\n * @module @one-payments/react\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit/react';\nimport { OnePaymentElement } from '@one-payments/web-components';\nimport type {\n  SDKConfig,\n  PaymentSucceededPayload,\n  PaymentFailedPayload,\n  StateChangedPayload,\n  Adapters,\n} from '@one-payments/core';\n\n/**\n * React component wrapping <one-payment> custom element\n * Uses unified tag name: one-payment\n */\nexport const OnePayment = createComponent({\n  tagName: 'one-payment',\n  elementClass: OnePaymentElement,\n  react: React,\n  events: {\n    onPaymentSuccess: 'payment-success',\n    onPaymentError: 'payment-error',\n    onStateChange: 'state-change',\n  },\n});\n\n/**\n * Typed props interface for OnePayment React component\n */\nexport interface OnePaymentProps {\n  config: SDKConfig;\n  adapters: Adapters;\n  amount: number;\n  currency: string;\n  orderId: string;\n  metadata?: Record<string, string | number | boolean>;\n  onPaymentSuccess?: (event: CustomEvent<PaymentSucceededPayload>) => void;\n  onPaymentError?: (event: CustomEvent<PaymentFailedPayload>) => void;\n  onStateChange?: (event: CustomEvent<StateChangedPayload>) => void;\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,30 @@
+import * as _lit_react from '@lit/react';
+import { OnePaymentElement } from '@one-payments/web-components';
+import { SDKConfig, Adapters, PaymentSucceededPayload, PaymentFailedPayload, StateChangedPayload } from '@one-payments/core';
+export { Adapters, PaymentFailedPayload, PaymentIntent, PaymentSucceededPayload, SDKConfig, State, StateChangedPayload } from '@one-payments/core';
+
+/**
+ * React component wrapping <one-payment> custom element
+ * Uses unified tag name: one-payment
+ */
+declare const OnePayment: _lit_react.ReactWebComponent<OnePaymentElement, {
+    onPaymentSuccess: string;
+    onPaymentError: string;
+    onStateChange: string;
+}>;
+/**
+ * Typed props interface for OnePayment React component
+ */
+interface OnePaymentProps {
+    config: SDKConfig;
+    adapters: Adapters;
+    amount: number;
+    currency: string;
+    orderId: string;
+    metadata?: Record<string, string | number | boolean>;
+    onPaymentSuccess?: (event: CustomEvent<PaymentSucceededPayload>) => void;
+    onPaymentError?: (event: CustomEvent<PaymentFailedPayload>) => void;
+    onStateChange?: (event: CustomEvent<StateChangedPayload>) => void;
+}
+
+export { OnePayment, type OnePaymentProps };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import * as _lit_react from '@lit/react';
+import { OnePaymentElement } from '@one-payments/web-components';
+import { SDKConfig, Adapters, PaymentSucceededPayload, PaymentFailedPayload, StateChangedPayload } from '@one-payments/core';
+export { Adapters, PaymentFailedPayload, PaymentIntent, PaymentSucceededPayload, SDKConfig, State, StateChangedPayload } from '@one-payments/core';
+
+/**
+ * React component wrapping <one-payment> custom element
+ * Uses unified tag name: one-payment
+ */
+declare const OnePayment: _lit_react.ReactWebComponent<OnePaymentElement, {
+    onPaymentSuccess: string;
+    onPaymentError: string;
+    onStateChange: string;
+}>;
+/**
+ * Typed props interface for OnePayment React component
+ */
+interface OnePaymentProps {
+    config: SDKConfig;
+    adapters: Adapters;
+    amount: number;
+    currency: string;
+    orderId: string;
+    metadata?: Record<string, string | number | boolean>;
+    onPaymentSuccess?: (event: CustomEvent<PaymentSucceededPayload>) => void;
+    onPaymentError?: (event: CustomEvent<PaymentFailedPayload>) => void;
+    onStateChange?: (event: CustomEvent<StateChangedPayload>) => void;
+}
+
+export { OnePayment, type OnePaymentProps };

package/dist/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { OnePaymentElement } from '@one-payments/web-components';
+
+// src/OnePayment.tsx
+var OnePayment = createComponent({
+  tagName: "one-payment",
+  elementClass: OnePaymentElement,
+  react: React,
+  events: {
+    onPaymentSuccess: "payment-success",
+    onPaymentError: "payment-error",
+    onStateChange: "state-change"
+  }
+});
+
+export { OnePayment };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/OnePayment.tsx"],"names":[],"mappings":";;;;;AAoBO,IAAM,aAAa,eAAA,CAAgB;AAAA,EACxC,OAAA,EAAS,aAAA;AAAA,EACT,YAAA,EAAc,iBAAA;AAAA,EACd,KAAA,EAAO,KAAA;AAAA,EACP,MAAA,EAAQ;AAAA,IACN,gBAAA,EAAkB,iBAAA;AAAA,IAClB,cAAA,EAAgB,eAAA;AAAA,IAChB,aAAA,EAAe;AAAA;AAEnB,CAAC","file":"index.js","sourcesContent":["/**\n * React wrapper for <one-payment> web component\n * @module @one-payments/react\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit/react';\nimport { OnePaymentElement } from '@one-payments/web-components';\nimport type {\n  SDKConfig,\n  PaymentSucceededPayload,\n  PaymentFailedPayload,\n  StateChangedPayload,\n  Adapters,\n} from '@one-payments/core';\n\n/**\n * React component wrapping <one-payment> custom element\n * Uses unified tag name: one-payment\n */\nexport const OnePayment = createComponent({\n  tagName: 'one-payment',\n  elementClass: OnePaymentElement,\n  react: React,\n  events: {\n    onPaymentSuccess: 'payment-success',\n    onPaymentError: 'payment-error',\n    onStateChange: 'state-change',\n  },\n});\n\n/**\n * Typed props interface for OnePayment React component\n */\nexport interface OnePaymentProps {\n  config: SDKConfig;\n  adapters: Adapters;\n  amount: number;\n  currency: string;\n  orderId: string;\n  metadata?: Record<string, string | number | boolean>;\n  onPaymentSuccess?: (event: CustomEvent<PaymentSucceededPayload>) => void;\n  onPaymentError?: (event: CustomEvent<PaymentFailedPayload>) => void;\n  onStateChange?: (event: CustomEvent<StateChangedPayload>) => void;\n}\n"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@one-payments/react",
+  "version": "1.0.0",
+  "description": "React wrapper for One Payments SDK",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "@one-payments/core": "workspace:*",
+    "@one-payments/web-components": "workspace:*",
+    "@lit/react": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "react",
+    "payments",
+    "sdk",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}