@one-payments/react 1.0.8 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -10
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -26,10 +26,18 @@ pnpm add @one-payments/react @one-payments/adapters-web
|
|
|
26
26
|
```tsx
|
|
27
27
|
import React from 'react';
|
|
28
28
|
import { OnePayment } from '@one-payments/react';
|
|
29
|
+
import { PaymentConfig } from '@one-payments/core';
|
|
29
30
|
import { createWebAdapters } from '@one-payments/adapters-web';
|
|
30
31
|
import type { PaymentSucceededPayload, PaymentFailedPayload } from '@one-payments/react';
|
|
31
32
|
|
|
32
33
|
function CheckoutPage() {
|
|
34
|
+
// Create config using PaymentConfig class (recommended for type safety and validation)
|
|
35
|
+
const config = new PaymentConfig({
|
|
36
|
+
apiKey: 'your-api-key',
|
|
37
|
+
secretKey: 'your-secret-key',
|
|
38
|
+
environment: 'demo'
|
|
39
|
+
});
|
|
40
|
+
|
|
33
41
|
const adapters = createWebAdapters();
|
|
34
42
|
|
|
35
43
|
const handleSuccess = (event: CustomEvent<PaymentSucceededPayload>) => {
|
|
@@ -46,15 +54,14 @@ function CheckoutPage() {
|
|
|
46
54
|
<div className="checkout">
|
|
47
55
|
<h1>Complete Your Payment</h1>
|
|
48
56
|
<OnePayment
|
|
49
|
-
config={
|
|
50
|
-
apiKey: 'your-api-key',
|
|
51
|
-
secretKey: 'your-secret-key',
|
|
52
|
-
environment: 'prod'
|
|
53
|
-
}}
|
|
57
|
+
config={config}
|
|
54
58
|
adapters={adapters}
|
|
55
59
|
amount={5000}
|
|
56
60
|
currency="SGD"
|
|
57
61
|
orderId={`order-${Date.now()}`}
|
|
62
|
+
firstName="John"
|
|
63
|
+
lastName="Doe"
|
|
64
|
+
email="john@example.com"
|
|
58
65
|
onPaymentSuccess={handleSuccess}
|
|
59
66
|
onPaymentError={handleError}
|
|
60
67
|
/>
|
|
@@ -65,6 +72,16 @@ function CheckoutPage() {
|
|
|
65
72
|
export default CheckoutPage;
|
|
66
73
|
```
|
|
67
74
|
|
|
75
|
+
> **Note**: You can also pass a plain config object instead of using `PaymentConfig`:
|
|
76
|
+
> ```tsx
|
|
77
|
+
> config={{
|
|
78
|
+
> apiKey: 'your-api-key',
|
|
79
|
+
> secretKey: 'your-secret-key',
|
|
80
|
+
> environment: 'demo'
|
|
81
|
+
> }}
|
|
82
|
+
> ```
|
|
83
|
+
> However, `PaymentConfig` is recommended as it provides validation and better TypeScript support.
|
|
84
|
+
|
|
68
85
|
### With State Management
|
|
69
86
|
|
|
70
87
|
```tsx
|
|
@@ -179,12 +196,17 @@ function CheckoutPage() {
|
|
|
179
196
|
|
|
180
197
|
| Prop | Type | Required | Description |
|
|
181
198
|
|------|------|----------|-------------|
|
|
182
|
-
| `config` | `SDKConfig` | Yes | SDK configuration
|
|
199
|
+
| `config` | `SDKConfig \| PaymentConfig` | Yes | SDK configuration - use `new PaymentConfig({...})` (recommended) or plain object |
|
|
183
200
|
| `adapters` | `Adapters` | Yes | Platform adapters (use `createWebAdapters()` for web) |
|
|
184
|
-
| `amount` | `number` | Yes | Payment amount in smallest currency unit (e.g., cents) |
|
|
185
|
-
| `currency` | `string` | Yes | ISO currency code (e.g., "USD", "EUR", "SGD") |
|
|
186
|
-
| `orderId` | `string` | Yes | Unique order identifier |
|
|
187
|
-
| `
|
|
201
|
+
| `amount` | `number` | Yes | Payment amount in smallest currency unit (e.g., cents for USD, SGD) |
|
|
202
|
+
| `currency` | `string` | Yes | ISO 4217 currency code (e.g., "USD", "EUR", "SGD") |
|
|
203
|
+
| `orderId` | `string` | Yes | Unique order identifier from your system |
|
|
204
|
+
| `firstName` | `string` | **Yes** | Customer's first name (required for all payments) |
|
|
205
|
+
| `lastName` | `string` | **Yes** | Customer's last name (required for all payments) |
|
|
206
|
+
| `email` | `string` | **Yes** | Customer's email address (required for all payments) |
|
|
207
|
+
| `excludePaymentMethods` | `PaymentMethodId[]` | No | Array of payment method IDs to exclude from display |
|
|
208
|
+
| `width` | `string` | No | Custom width (e.g., "100%", "500px") |
|
|
209
|
+
| `maxWidth` | `string` | No | Maximum width constraint (e.g., "600px") |
|
|
188
210
|
| `onPaymentSuccess` | `(event: CustomEvent<PaymentSucceededPayload>) => void` | No | Callback when payment succeeds |
|
|
189
211
|
| `onPaymentError` | `(event: CustomEvent<PaymentFailedPayload>) => void` | No | Callback when payment fails |
|
|
190
212
|
| `onStateChange` | `(event: CustomEvent<StateChangedPayload>) => void` | No | Callback when payment state changes |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@one-payments/react",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "React wrapper for One Payments SDK",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@one-payments/core": "
|
|
33
|
-
"@one-payments/web-components": "
|
|
32
|
+
"@one-payments/core": "workspace:*",
|
|
33
|
+
"@one-payments/web-components": "workspace:*",
|
|
34
34
|
"@lit/react": "^1.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|