@paynext/sdk 0.0.128 → 0.0.130
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 +42 -14
- package/dist/index.d.ts +21 -9
- package/dist/index.es.js +1676 -1657
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +23 -23
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,9 +15,9 @@ import { PayNextCheckout, type PaymentResult, type AttemptResult, type CheckoutE
|
|
|
15
15
|
|
|
16
16
|
import '@paynext/sdk/styles'
|
|
17
17
|
|
|
18
|
-
const checkout = new PayNextCheckout(
|
|
18
|
+
const checkout = new PayNextCheckout()
|
|
19
19
|
|
|
20
|
-
await checkout.mount({
|
|
20
|
+
await checkout.mount('checkout-form', {
|
|
21
21
|
clientToken: '<you-client-token>',
|
|
22
22
|
environment: 'sandbox',
|
|
23
23
|
apiVersion: '1.0.0',
|
|
@@ -44,10 +44,39 @@ await checkout.mount({
|
|
|
44
44
|
})
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
+
## HTML Example
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<!DOCTYPE html>
|
|
51
|
+
<html>
|
|
52
|
+
<head>
|
|
53
|
+
<link rel="stylesheet" href="https://unpkg.com/@paynext/sdk/dist/styles.css">
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<div id="checkout-form"></div>
|
|
57
|
+
|
|
58
|
+
<script type="module">
|
|
59
|
+
import { PayNextCheckout } from 'https://unpkg.com/@paynext/sdk/dist/index.es.js'
|
|
60
|
+
|
|
61
|
+
const checkout = new PayNextCheckout()
|
|
62
|
+
|
|
63
|
+
await checkout.mount('checkout-form', {
|
|
64
|
+
clientToken: 'your-client-token',
|
|
65
|
+
environment: 'sandbox',
|
|
66
|
+
apiVersion: '1.0.0',
|
|
67
|
+
onCheckoutComplete: (result) => {
|
|
68
|
+
console.log('Payment successful!', result)
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
</script>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
74
|
+
```
|
|
75
|
+
|
|
47
76
|
## React Example
|
|
48
77
|
|
|
49
78
|
```tsx
|
|
50
|
-
import { useEffect
|
|
79
|
+
import { useEffect } from 'react'
|
|
51
80
|
import { PayNextCheckout, type PaymentResult, type AttemptResult, type CheckoutError } from '@paynext/sdk'
|
|
52
81
|
|
|
53
82
|
import '@paynext/sdk/styles'
|
|
@@ -58,15 +87,14 @@ interface IProps {
|
|
|
58
87
|
}
|
|
59
88
|
|
|
60
89
|
// component
|
|
61
|
-
export const CheckoutComponent: FC<Readonly<IProps
|
|
90
|
+
export const CheckoutComponent: FC<Readonly<IProps>> = (props) => {
|
|
62
91
|
const { clientToken } = props
|
|
63
|
-
|
|
64
|
-
const checkoutRef = useRef<HTMLDivElement>(null)
|
|
92
|
+
const componentId = 'paynext-checkout'
|
|
65
93
|
|
|
66
94
|
useEffect(() => {
|
|
67
|
-
const checkout = new PayNextCheckout(
|
|
95
|
+
const checkout = new PayNextCheckout()
|
|
68
96
|
|
|
69
|
-
checkout.mount({
|
|
97
|
+
checkout.mount(componentId, {
|
|
70
98
|
clientToken,
|
|
71
99
|
environment: 'sandbox',
|
|
72
100
|
apiVersion: '1.0.0',
|
|
@@ -93,12 +121,12 @@ export const CheckoutComponent: FC<Readonly<IProps> = (props) => {
|
|
|
93
121
|
})
|
|
94
122
|
|
|
95
123
|
return () => {
|
|
96
|
-
checkout.unmount()
|
|
124
|
+
checkout.unmount(componentId)
|
|
97
125
|
}
|
|
98
126
|
}, [clientToken])
|
|
99
127
|
|
|
100
128
|
// return
|
|
101
|
-
return <div
|
|
129
|
+
return <div id={componentId} />
|
|
102
130
|
}
|
|
103
131
|
```
|
|
104
132
|
|
|
@@ -131,9 +159,9 @@ interface LoadedResult {
|
|
|
131
159
|
Provide inline SVG markup via `styles.SubmitButton.iconSvg` to render an icon to the left of the "Pay with card" button label. The SDK hides the icon and shows a spinner while a payment request is in flight, then restores the icon once processing finishes. A 24x24px viewBox keeps the layout balanced.
|
|
132
160
|
|
|
133
161
|
```ts
|
|
134
|
-
const checkout = new PayNextCheckout(
|
|
162
|
+
const checkout = new PayNextCheckout()
|
|
135
163
|
|
|
136
|
-
await checkout.mount({
|
|
164
|
+
await checkout.mount('checkout-container', {
|
|
137
165
|
...config,
|
|
138
166
|
styles: {
|
|
139
167
|
SubmitButton: {
|
|
@@ -150,9 +178,9 @@ await checkout.mount({
|
|
|
150
178
|
Pass `styles.BackButton` to adjust the container that wraps the default arrow icon. Both `className` and `styles` map directly onto that wrapper `<div>`, letting you add global CSS hooks or inline overrides without replacing the built-in markup.
|
|
151
179
|
|
|
152
180
|
```ts
|
|
153
|
-
const checkout = new PayNextCheckout(
|
|
181
|
+
const checkout = new PayNextCheckout()
|
|
154
182
|
|
|
155
|
-
await checkout.mount({
|
|
183
|
+
await checkout.mount('checkout-container', {
|
|
156
184
|
...config,
|
|
157
185
|
styles: {
|
|
158
186
|
BackButton: {
|
package/dist/index.d.ts
CHANGED
|
@@ -80,10 +80,10 @@ declare interface CheckoutConfig_2 {
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
export declare interface CheckoutError {
|
|
83
|
-
status:
|
|
83
|
+
status: DeclineStatus;
|
|
84
84
|
status_reason: {
|
|
85
|
-
advice_code: 'try_again_later' | 'do_not_try_again';
|
|
86
|
-
decline_code: DeclineCode;
|
|
85
|
+
advice_code: 'try_again_later' | 'do_not_try_again' | null;
|
|
86
|
+
decline_code: DeclineCode | null;
|
|
87
87
|
message: string;
|
|
88
88
|
};
|
|
89
89
|
}
|
|
@@ -228,6 +228,8 @@ declare enum DeclineCode {
|
|
|
228
228
|
CARD_DECLINED = "card_declined"
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
+
declare type DeclineStatus = 'declined' | 'failed' | 'sdk_failed';
|
|
232
|
+
|
|
231
233
|
export declare type DeepPartial<T> = T extends object ? {
|
|
232
234
|
[P in keyof T]?: DeepPartial<T[P]>;
|
|
233
235
|
} : T;
|
|
@@ -287,7 +289,7 @@ export declare interface IApplePayButtonStyles {
|
|
|
287
289
|
|
|
288
290
|
declare interface IButtonActionsHandler<TSuccess = void> {
|
|
289
291
|
onReady?: () => void;
|
|
290
|
-
onError?: (
|
|
292
|
+
onError?: (err: PaymentError) => void;
|
|
291
293
|
onCancel?: () => void;
|
|
292
294
|
onSuccess?: (data?: TSuccess) => void;
|
|
293
295
|
}
|
|
@@ -332,6 +334,11 @@ export declare interface LoadedResult {
|
|
|
332
334
|
|
|
333
335
|
export declare type Locale = 'ar' | 'en' | 'bg' | 'cs' | 'da' | 'de' | 'el' | 'es' | 'et' | 'fi' | 'fil' | 'fr' | 'hr' | 'hu' | 'id' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'ms' | 'ru' | 'mt' | 'no' | 'nl' | 'pl' | 'pt' | 'ro' | 'uk' | 'sk' | 'sl' | 'sv' | 'th' | 'tr' | 'vi' | 'zh';
|
|
334
336
|
|
|
337
|
+
declare interface PaymentError {
|
|
338
|
+
e?: unknown;
|
|
339
|
+
paymentMethod?: PaymentMethod;
|
|
340
|
+
}
|
|
341
|
+
|
|
335
342
|
export declare enum PaymentMethod {
|
|
336
343
|
PAYPAL = "PAYPAL",
|
|
337
344
|
APPLE_PAY = "APPLEPAY",
|
|
@@ -506,11 +513,10 @@ declare enum PaymentStatus {
|
|
|
506
513
|
}
|
|
507
514
|
|
|
508
515
|
export declare class PayNextCheckout {
|
|
509
|
-
private readonly parent;
|
|
510
516
|
private core;
|
|
511
|
-
constructor(
|
|
512
|
-
mount(config: PayNextConfig): Promise<void>;
|
|
513
|
-
unmount(): Promise<void>;
|
|
517
|
+
constructor();
|
|
518
|
+
mount(componentId: string, config: PayNextConfig): Promise<void>;
|
|
519
|
+
unmount(componentId: string): Promise<void>;
|
|
514
520
|
}
|
|
515
521
|
|
|
516
522
|
export declare interface PayNextConfig {
|
|
@@ -595,10 +601,16 @@ declare interface TransactionConfig {
|
|
|
595
601
|
};
|
|
596
602
|
}
|
|
597
603
|
|
|
604
|
+
declare interface TransactionConfigResponse extends TransactionConfig {
|
|
605
|
+
code: number;
|
|
606
|
+
success: boolean;
|
|
607
|
+
error?: string;
|
|
608
|
+
}
|
|
609
|
+
|
|
598
610
|
declare class TransactionState extends State<TransactionConfig | null> {
|
|
599
611
|
private clientToken;
|
|
600
612
|
constructor(state?: TransactionConfig);
|
|
601
|
-
updateTransaction(clientToken: string, environment: TEnvironment, apiVersion: string): Promise<
|
|
613
|
+
updateTransaction(clientToken: string, environment: TEnvironment, apiVersion: string): Promise<TransactionConfigResponse>;
|
|
602
614
|
}
|
|
603
615
|
|
|
604
616
|
declare class TranslateState extends State<CheckoutTranslateState> {
|