@paynext/sdk 1.0.17 → 1.0.18
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 +34 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -45,7 +45,7 @@ await checkout.mount('checkout-form', {
|
|
|
45
45
|
## React Example
|
|
46
46
|
|
|
47
47
|
```tsx
|
|
48
|
-
import { useEffect } from 'react'
|
|
48
|
+
import { useEffect, type FC } from 'react'
|
|
49
49
|
import { PayNextCheckout, type PaymentResult, type AttemptResult, type CheckoutError } from '@paynext/sdk'
|
|
50
50
|
|
|
51
51
|
// interface
|
|
@@ -89,7 +89,7 @@ export const CheckoutComponent: FC<Readonly<IProps>> = (props) => {
|
|
|
89
89
|
})
|
|
90
90
|
|
|
91
91
|
return () => {
|
|
92
|
-
checkout.unmount(
|
|
92
|
+
checkout.unmount()
|
|
93
93
|
}
|
|
94
94
|
}, [clientToken])
|
|
95
95
|
|
|
@@ -102,15 +102,18 @@ export const CheckoutComponent: FC<Readonly<IProps>> = (props) => {
|
|
|
102
102
|
|
|
103
103
|
```typescript
|
|
104
104
|
interface PayNextConfig {
|
|
105
|
-
clientToken: string
|
|
105
|
+
clientToken: string
|
|
106
106
|
apiVersion: string
|
|
107
|
-
environment: 'sandbox' | 'production'
|
|
108
|
-
variant?: 'default' | 'compact'
|
|
109
|
-
|
|
110
|
-
|
|
107
|
+
environment: 'sandbox' | 'production'
|
|
108
|
+
variant?: 'default' | 'compact'
|
|
109
|
+
theme?: 'light' | 'dark' | 'system'
|
|
110
|
+
locale?: Locale
|
|
111
|
+
translate?: CheckoutTranslate
|
|
111
112
|
errorMessageText?: string
|
|
112
|
-
|
|
113
|
+
returnUrl?: string
|
|
114
|
+
styles?: StylesConfig
|
|
113
115
|
onCheckoutLoaded?: (result: LoadedResult) => void
|
|
116
|
+
beforeCheckoutAttempt?: (result: AttemptResult) => boolean | Promise<boolean>
|
|
114
117
|
onCheckoutAttempt?: (result: AttemptResult) => void
|
|
115
118
|
onCheckoutComplete?: (result: PaymentResult) => void
|
|
116
119
|
onCheckoutFail?: (error: CheckoutError) => void
|
|
@@ -128,6 +131,29 @@ interface AttemptResult {
|
|
|
128
131
|
|
|
129
132
|
```
|
|
130
133
|
|
|
134
|
+
### Gate a Payment with `beforeCheckoutAttempt`
|
|
135
|
+
|
|
136
|
+
`beforeCheckoutAttempt` runs **before** each payment attempt is sent and decides whether it should proceed. It receives the same `AttemptResult` as `onCheckoutAttempt` and may be synchronous or return a `Promise`.
|
|
137
|
+
|
|
138
|
+
- Return `true` (or `undefined`) — the payment proceeds.
|
|
139
|
+
- Return `false` — the attempt is blocked; the SDK surfaces it as a failure via `onCheckoutFail`.
|
|
140
|
+
- Throw / reject — the attempt is treated as a failure and reported through `onCheckoutFail`.
|
|
141
|
+
|
|
142
|
+
Use it for last-mile checks such as confirming an order, validating your own state, or asking the user to confirm.
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
const checkout = new PayNextCheckout()
|
|
146
|
+
|
|
147
|
+
await checkout.mount('checkout-container', {
|
|
148
|
+
...config,
|
|
149
|
+
beforeCheckoutAttempt: async (attempt) => {
|
|
150
|
+
// e.g. confirm the order on your backend before charging
|
|
151
|
+
const ok = await confirmOrder(attempt)
|
|
152
|
+
return ok
|
|
153
|
+
}
|
|
154
|
+
})
|
|
155
|
+
```
|
|
156
|
+
|
|
131
157
|
### Add a Submit Button Icon
|
|
132
158
|
|
|
133
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.
|