@paynext/sdk 0.0.33 → 0.0.34
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 +18 -86
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ npm install @paynext/sdk
|
|
|
13
13
|
```typescript
|
|
14
14
|
import { PayNextCheckout, type PaymentResult } from '@paynext/sdk'
|
|
15
15
|
|
|
16
|
-
const checkout = new PayNextCheckout(document.getElementById('checkout'))
|
|
16
|
+
const checkout = new PayNextCheckout(document.getElementById('checkout-form'))
|
|
17
17
|
|
|
18
18
|
await checkout.mount({
|
|
19
19
|
clientToken: 'your-client-token',
|
|
@@ -30,7 +30,7 @@ await checkout.mount({
|
|
|
30
30
|
|
|
31
31
|
```tsx
|
|
32
32
|
import { useEffect, useRef } from 'react'
|
|
33
|
-
import { PayNextCheckout, PaymentResult } from '@paynext/sdk'
|
|
33
|
+
import { PayNextCheckout, type PaymentResult } from '@paynext/sdk'
|
|
34
34
|
|
|
35
35
|
// interface
|
|
36
36
|
interface IProps {
|
|
@@ -44,6 +44,10 @@ export const CheckoutComponent: FC<Readonly<IProps> = (props) => {
|
|
|
44
44
|
const checkoutRef = useRef<HTMLDivElement>(null)
|
|
45
45
|
|
|
46
46
|
useEffect(() => {
|
|
47
|
+
if (!clientToken) {
|
|
48
|
+
return
|
|
49
|
+
}
|
|
50
|
+
|
|
47
51
|
const checkout = new PayNextCheckout(checkoutRef.current)
|
|
48
52
|
|
|
49
53
|
checkout.mount({
|
|
@@ -69,55 +73,16 @@ export const CheckoutComponent: FC<Readonly<IProps> = (props) => {
|
|
|
69
73
|
|
|
70
74
|
```typescript
|
|
71
75
|
interface PayNextConfig {
|
|
72
|
-
clientToken: string
|
|
73
|
-
supportedCardTypes?: CardType[]
|
|
74
|
-
variant?: 'default' | 'compact'
|
|
75
|
-
locale?:
|
|
76
|
+
clientToken: string // Required
|
|
77
|
+
supportedCardTypes?: CardType[] // Optional: restrict card types
|
|
78
|
+
variant?: 'default' | 'compact' // Optional: UI variant
|
|
79
|
+
locale?: Locale // Optional: language (en, de, fr, etc.)
|
|
80
|
+
translate?: CheckoutTranslate // Optional: custom translations
|
|
76
81
|
onCheckoutComplete?: (result: PaymentResult) => void
|
|
77
82
|
onCheckoutFail?: (error: Error) => void
|
|
78
83
|
}
|
|
79
84
|
```
|
|
80
85
|
|
|
81
|
-
## Payment Result
|
|
82
|
-
|
|
83
|
-
The `onCheckoutComplete` callback receives detailed payment information:
|
|
84
|
-
|
|
85
|
-
```typescript
|
|
86
|
-
interface PaymentResult {
|
|
87
|
-
paymentMethod: 'card' | 'apple_pay' | 'google_pay' | 'paypal'
|
|
88
|
-
transactionId?: string
|
|
89
|
-
clientSession: string
|
|
90
|
-
|
|
91
|
-
paymentDetails?: {
|
|
92
|
-
card?: {
|
|
93
|
-
brand: string
|
|
94
|
-
lastFour: string
|
|
95
|
-
expMonth?: number
|
|
96
|
-
expYear?: number
|
|
97
|
-
}
|
|
98
|
-
// ... other payment method details
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
billingAddress?: {
|
|
102
|
-
name?: string
|
|
103
|
-
line1?: string
|
|
104
|
-
city?: string
|
|
105
|
-
country?: string
|
|
106
|
-
// ... other address fields
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
amount?: {
|
|
110
|
-
value: number // Amount in cents
|
|
111
|
-
currency: string
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
metadata?: {
|
|
115
|
-
timestamp: string
|
|
116
|
-
locale?: string
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
```
|
|
120
|
-
|
|
121
86
|
## Supported Payment Methods
|
|
122
87
|
|
|
123
88
|
- **Cards**: Visa, Mastercard, American Express, Discover, JCB, Diners Club, UnionPay, Maestro
|
|
@@ -128,52 +93,19 @@ interface PaymentResult {
|
|
|
128
93
|
|
|
129
94
|
English, German, French, Spanish, Italian, Portuguese, Dutch, Polish, Czech, Slovak, Hungarian, Romanian, Bulgarian, Croatian, Slovenian, Estonian, Latvian, Lithuanian, Finnish, Swedish, Danish, Norwegian, Russian, Ukrainian, Arabic, Chinese, Japanese, Korean, Thai, Vietnamese, Indonesian, Malay, Filipino, Hindi, Turkish, Greek, Maltese.
|
|
130
95
|
|
|
131
|
-
## Custom Styling
|
|
132
|
-
|
|
133
|
-
```typescript
|
|
134
|
-
await checkout.mount({
|
|
135
|
-
clientToken: 'your-token',
|
|
136
|
-
styles: {
|
|
137
|
-
card: {
|
|
138
|
-
input: {
|
|
139
|
-
field: {
|
|
140
|
-
styles: { fontSize: '16px', color: '#333' },
|
|
141
|
-
className: 'custom-input'
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
})
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
## Error Handling
|
|
150
|
-
|
|
151
|
-
```typescript
|
|
152
|
-
await checkout.mount({
|
|
153
|
-
clientToken: 'your-token',
|
|
154
|
-
onCheckoutFail: (error: Error) => {
|
|
155
|
-
// Handle payment errors
|
|
156
|
-
switch (error.message) {
|
|
157
|
-
case 'invalid_card':
|
|
158
|
-
showMessage('Please check your card details')
|
|
159
|
-
break
|
|
160
|
-
case 'insufficient_funds':
|
|
161
|
-
showMessage('Insufficient funds')
|
|
162
|
-
break
|
|
163
|
-
default:
|
|
164
|
-
showMessage('Payment failed. Please try again.')
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
})
|
|
168
|
-
```
|
|
169
|
-
|
|
170
96
|
## TypeScript Support
|
|
171
97
|
|
|
172
98
|
Full TypeScript support with comprehensive type definitions for all interfaces, payment methods, and configuration options.
|
|
173
99
|
|
|
174
100
|
## Browser Support
|
|
175
101
|
|
|
176
|
-
|
|
102
|
+
The SDK supports recent versions of all major browsers:
|
|
103
|
+
|
|
104
|
+
- Chrome (v90+)
|
|
105
|
+
- Safari (v14+)
|
|
106
|
+
- Firefox (v88+)
|
|
107
|
+
- Edge (v90+)
|
|
108
|
+
- Android WebView / WKWebView (for in-app flows)
|
|
177
109
|
|
|
178
110
|
## Security
|
|
179
111
|
|