@one-payments/react 1.0.8 → 1.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 One Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -26,10 +26,18 @@ pnpm add @one-payments/react @one-payments/adapters-web
 ```tsx
 import React from 'react';
 import { OnePayment } from '@one-payments/react';
+import { PaymentConfig } from '@one-payments/core';
 import { createWebAdapters } from '@one-payments/adapters-web';
 import type { PaymentSucceededPayload, PaymentFailedPayload } from '@one-payments/react';
 
 function CheckoutPage() {
+  // Create config using PaymentConfig class (recommended for type safety and validation)
+  const config = new PaymentConfig({
+    apiKey: 'your-api-key',
+    secretKey: 'your-secret-key',
+    environment: 'demo'
+  });
+
   const adapters = createWebAdapters();
 
   const handleSuccess = (event: CustomEvent<PaymentSucceededPayload>) => {
@@ -46,15 +54,14 @@ function CheckoutPage() {
     <div className="checkout">
       <h1>Complete Your Payment</h1>
       <OnePayment
-        config={{
-          apiKey: 'your-api-key',
-          secretKey: 'your-secret-key',
-          environment: 'prod'
-        }}
+        config={config}
         adapters={adapters}
         amount={5000}
         currency="SGD"
         orderId={`order-${Date.now()}`}
+        firstName="John"
+        lastName="Doe"
+        email="john@example.com"
         onPaymentSuccess={handleSuccess}
         onPaymentError={handleError}
       />
@@ -65,6 +72,16 @@ function CheckoutPage() {
 export default CheckoutPage;
 ```
 
+> **Note**: You can also pass a plain config object instead of using `PaymentConfig`:
+> ```tsx
+> config={{
+>   apiKey: 'your-api-key',
+>   secretKey: 'your-secret-key',
+>   environment: 'demo'
+> }}
+> ```
+> However, `PaymentConfig` is recommended as it provides validation and better TypeScript support.
+
 ### With State Management
 
 ```tsx
@@ -179,12 +196,17 @@ function CheckoutPage() {
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| `config` | `SDKConfig` | Yes | SDK configuration with API keys and environment |
+| `config` | `SDKConfig \| PaymentConfig` | Yes | SDK configuration - use `new PaymentConfig({...})` (recommended) or plain object |
 | `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 |
+| `amount` | `number` | Yes | Payment amount in smallest currency unit (e.g., cents for USD, SGD) |
+| `currency` | `string` | Yes | ISO 4217 currency code (e.g., "USD", "EUR", "SGD") |
+| `orderId` | `string` | Yes | Unique order identifier from your system |
+| `firstName` | `string` | **Yes** | Customer's first name (required for all payments) |
+| `lastName` | `string` | **Yes** | Customer's last name (required for all payments) |
+| `email` | `string` | **Yes** | Customer's email address (required for all payments) |
+| `excludePaymentMethods` | `PaymentMethodId[]` | No | Array of payment method IDs to exclude from display |
+| `width` | `string` | No | Custom width (e.g., "100%", "500px") |
+| `maxWidth` | `string` | No | Maximum width constraint (e.g., "600px") |
 | `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 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@one-payments/react",
-  "version": "1.0.8",
+  "version": "1.1.2",
   "description": "React wrapper for One Payments SDK",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -17,21 +17,14 @@
     "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": "^1.0.0",
-    "@one-payments/web-components": "^1.0.8",
-    "@lit/react": "^1.0.0"
+    "@lit/react": "^1.0.0",
+    "@one-payments/core": "1.1.3",
+    "@one-payments/web-components": "1.1.15"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -50,5 +43,12 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest"
   }
-}
+}