@payconductor/react 1.0.7 → 1.0.9
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 +253 -253
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.es.js +95 -95
- package/dist/index.es.js.map +1 -1
- package/dist/payconductor/hooks/index.d.ts +2 -2
- package/dist/payconductor/hooks/use-tokenizer.d.ts +11 -0
- package/dist/payconductor/{tokenize → tokenizer}/api.d.ts +2 -2
- package/dist/payconductor/tokenizer/index.d.ts +1 -0
- package/dist/payconductor/tokenizer/providers/index.d.ts +6 -0
- package/dist/payconductor/tokenizer/providers/mercado-pago.d.ts +6 -0
- package/dist/payconductor/tokenizer/tokenizer.d.ts +9 -0
- package/dist/payconductor/{tokenize → tokenizer}/types.d.ts +5 -5
- package/package.json +58 -58
- package/dist/payconductor/hooks/use-tokenize.d.ts +0 -11
- package/dist/payconductor/tokenize/index.d.ts +0 -1
- package/dist/payconductor/tokenize/providers/index.d.ts +0 -6
- package/dist/payconductor/tokenize/providers/mercado-pago.d.ts +0 -6
- package/dist/payconductor/tokenize/tokenize.d.ts +0 -9
- /package/dist/esm/{tokenize.d.ts → tokenizer.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,253 +1,253 @@
|
|
|
1
|
-
# @payconductor/react
|
|
2
|
-
|
|
3
|
-
React SDK for [PayConductor](https://payconductor.ai) payment integration.
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@payconductor/react)
|
|
6
|
-
|
|
7
|
-
## Requirements
|
|
8
|
-
|
|
9
|
-
Minimum React version: **v16.8**.
|
|
10
|
-
|
|
11
|
-
## Installation
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
npm install @payconductor/react @payconductor/sdk
|
|
15
|
-
# or
|
|
16
|
-
yarn add @payconductor/react @payconductor/sdk
|
|
17
|
-
# or
|
|
18
|
-
pnpm add @payconductor/react @payconductor/sdk
|
|
19
|
-
# or
|
|
20
|
-
bun add @payconductor/react @payconductor/sdk
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Quick Start
|
|
24
|
-
|
|
25
|
-
```tsx
|
|
26
|
-
import {
|
|
27
|
-
PayConductor,
|
|
28
|
-
PayConductorCheckoutElement,
|
|
29
|
-
usePayConductor,
|
|
30
|
-
usePayconductorElement,
|
|
31
|
-
type PaymentMethod,
|
|
32
|
-
type PaymentResult,
|
|
33
|
-
} from '@payconductor/react';
|
|
34
|
-
import {
|
|
35
|
-
AvailablePaymentMethods,
|
|
36
|
-
Configuration,
|
|
37
|
-
DocumentType,
|
|
38
|
-
OrderApi,
|
|
39
|
-
type OrderCreateRequest,
|
|
40
|
-
} from '@payconductor/sdk';
|
|
41
|
-
|
|
42
|
-
const sdkConfig = new Configuration({
|
|
43
|
-
username: import.meta.env.VITE_PAYCONDUCTOR_CLIENT_ID || 'your_client_id',
|
|
44
|
-
password: import.meta.env.VITE_PAYCONDUCTOR_CLIENT_SECRET || 'your_client_secret',
|
|
45
|
-
});
|
|
46
|
-
const orderApi = new OrderApi(sdkConfig);
|
|
47
|
-
|
|
48
|
-
function CheckoutForm() {
|
|
49
|
-
const { isReady, error } = usePayConductor();
|
|
50
|
-
const { confirmPayment, getSelectedPaymentMethod } = usePayconductorElement();
|
|
51
|
-
|
|
52
|
-
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
53
|
-
const [isProcessing, setIsProcessing] = useState(false);
|
|
54
|
-
|
|
55
|
-
const handleFinalize = async () => {
|
|
56
|
-
if (!isReady) return;
|
|
57
|
-
setIsProcessing(true);
|
|
58
|
-
setErrorMessage(null);
|
|
59
|
-
|
|
60
|
-
try {
|
|
61
|
-
// 1. Create the Draft order via @payconductor/sdk to get the orderId
|
|
62
|
-
const orderRequest: OrderCreateRequest = {
|
|
63
|
-
chargeAmount: 100.00,
|
|
64
|
-
clientIp: '0.0.0.0',
|
|
65
|
-
customer: {
|
|
66
|
-
documentNumber: '12345678900',
|
|
67
|
-
documentType: DocumentType.Cpf,
|
|
68
|
-
email: 'customer@example.com',
|
|
69
|
-
name: 'Customer Name',
|
|
70
|
-
},
|
|
71
|
-
discountAmount: 0,
|
|
72
|
-
externalId: `order-${Date.now()}`,
|
|
73
|
-
payment: {
|
|
74
|
-
paymentMethod: 'Draft',
|
|
75
|
-
availablePaymentMethods: [
|
|
76
|
-
AvailablePaymentMethods.CreditCard,
|
|
77
|
-
AvailablePaymentMethods.Pix,
|
|
78
|
-
AvailablePaymentMethods.BankSlip,
|
|
79
|
-
],
|
|
80
|
-
},
|
|
81
|
-
shippingFee: 0,
|
|
82
|
-
taxFee: 0,
|
|
83
|
-
};
|
|
84
|
-
const { data } = await orderApi.orderCreate(orderRequest);
|
|
85
|
-
|
|
86
|
-
// 2. Confirm payment with the obtained orderId
|
|
87
|
-
const result: PaymentResult = await confirmPayment({ orderId: data.id });
|
|
88
|
-
if (result.status === 'succeeded') alert('Payment successful!');
|
|
89
|
-
} catch (err: unknown) {
|
|
90
|
-
setErrorMessage(err instanceof Error ? err.message : 'Payment failed');
|
|
91
|
-
} finally {
|
|
92
|
-
setIsProcessing(false);
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
const selectedMethod = getSelectedPaymentMethod();
|
|
97
|
-
|
|
98
|
-
return (
|
|
99
|
-
<div>
|
|
100
|
-
{/* The iframe is rendered here */}
|
|
101
|
-
<PayConductorCheckoutElement height="600px" />
|
|
102
|
-
|
|
103
|
-
{selectedMethod && <p>Selected method: <strong>{selectedMethod}</strong></p>}
|
|
104
|
-
|
|
105
|
-
<button type="button" onClick={handleFinalize} disabled={!isReady || isProcessing}>
|
|
106
|
-
{isProcessing ? 'Processing...' : 'Checkout'}
|
|
107
|
-
</button>
|
|
108
|
-
|
|
109
|
-
{errorMessage && <div>{errorMessage}</div>}
|
|
110
|
-
{error && <div>Error: {error}</div>}
|
|
111
|
-
</div>
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
export default function App() {
|
|
116
|
-
return (
|
|
117
|
-
<PayConductor
|
|
118
|
-
publicKey={import.meta.env.VITE_PAYCONDUCTOR_CLIENT_ID || "your_client_id"}
|
|
119
|
-
locale="pt-BR"
|
|
120
|
-
debug={true}
|
|
121
|
-
theme={{ primaryColor: '#0066ff', borderRadius: '8px' }}
|
|
122
|
-
onReady={() => console.log('Ready')}
|
|
123
|
-
onPaymentComplete={(result: PaymentResult) => console.log('Complete:', result)}
|
|
124
|
-
onPaymentMethodSelected={(method: PaymentMethod) => console.log('Method:', method)}
|
|
125
|
-
>
|
|
126
|
-
<CheckoutForm />
|
|
127
|
-
</PayConductor>
|
|
128
|
-
);
|
|
129
|
-
}
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
## API Reference
|
|
133
|
-
|
|
134
|
-
### `<PayConductor />`
|
|
135
|
-
|
|
136
|
-
Provider component that initializes the payment session. **Does not render the iframe directly** — use `<PayConductorCheckoutElement>` for that.
|
|
137
|
-
|
|
138
|
-
| Prop | Type | Description |
|
|
139
|
-
|------|------|-------------|
|
|
140
|
-
| `publicKey` | `string` | Your PayConductor public key |
|
|
141
|
-
| `theme` | `PayConductorTheme` | Theme customization options |
|
|
142
|
-
| `locale` | `string` | Locale (e.g. `'pt-BR'`, `'en-US'`) |
|
|
143
|
-
| `paymentMethods` | `PaymentMethod[] \| "all"` | Available payment methods |
|
|
144
|
-
| `defaultPaymentMethod` | `PaymentMethod` | Pre-selected payment method |
|
|
145
|
-
| `paymentMethodsConfig` | `PaymentMethodConfig[]` | Per-method config (installments, discounts) |
|
|
146
|
-
| `methodsDirection` | `"vertical" \| "horizontal"` | Layout direction of payment methods |
|
|
147
|
-
| `showPaymentButtons` | `boolean` | Show native action buttons inside the iframe |
|
|
148
|
-
| `nuPayConfig` | `NuPayData` | Required when NuPay is an available method |
|
|
149
|
-
| `debug` | `boolean` | Enable prefixed console.log for key events |
|
|
150
|
-
| `onReady` | `() => void` | Called when the iframe is ready |
|
|
151
|
-
| `onError` | `(error: Error) => void` | Called when an error occurs |
|
|
152
|
-
| `onPaymentComplete` | `(result: PaymentResult) => void` | Called when payment succeeds |
|
|
153
|
-
| `onPaymentFailed` | `(result: PaymentResult) => void` | Called when payment fails |
|
|
154
|
-
| `onPaymentPending` | `(result: PaymentResult) => void` | Called when payment is pending |
|
|
155
|
-
| `onPaymentMethodSelected` | `(method: PaymentMethod) => void` | Called when user selects a payment method |
|
|
156
|
-
|
|
157
|
-
### `<PayConductorCheckoutElement />`
|
|
158
|
-
|
|
159
|
-
Renders the payment iframe. Place it inside `<PayConductor>` wherever you want the iframe in your layout.
|
|
160
|
-
|
|
161
|
-
| Prop | Type | Description |
|
|
162
|
-
|------|------|-------------|
|
|
163
|
-
| `height` | `string` | Iframe height (default: `'600px'`) |
|
|
164
|
-
|
|
165
|
-
### `usePayConductor()`
|
|
166
|
-
|
|
167
|
-
Hook that provides frame state.
|
|
168
|
-
|
|
169
|
-
```tsx
|
|
170
|
-
const { isReady, error } = usePayConductor();
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
| Property | Type | Description |
|
|
174
|
-
|----------|------|-------------|
|
|
175
|
-
| `isReady` | `boolean` | Whether the iframe is ready |
|
|
176
|
-
| `error` | `string \| null` | Error message, if any |
|
|
177
|
-
|
|
178
|
-
### `usePayconductorElement()`
|
|
179
|
-
|
|
180
|
-
Hook that provides payment action methods.
|
|
181
|
-
|
|
182
|
-
```tsx
|
|
183
|
-
const {
|
|
184
|
-
init,
|
|
185
|
-
confirmPayment,
|
|
186
|
-
validate,
|
|
187
|
-
reset,
|
|
188
|
-
getSelectedPaymentMethod,
|
|
189
|
-
updateConfig,
|
|
190
|
-
updateorderId,
|
|
191
|
-
update,
|
|
192
|
-
submit,
|
|
193
|
-
} = usePayconductorElement();
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
| Method | Signature | Description |
|
|
197
|
-
|--------|-----------|-------------|
|
|
198
|
-
| `init` | `(config: PayConductorConfig) => Promise<void>` | Sends full config to the iframe |
|
|
199
|
-
| `confirmPayment` | `({ orderId: string }) => Promise<PaymentResult>` | Triggers payment confirmation in iframe |
|
|
200
|
-
| `validate` | `(data: unknown) => Promise<boolean>` | Validates current form data |
|
|
201
|
-
| `reset` | `() => Promise<void>` | Resets the payment form |
|
|
202
|
-
| `getSelectedPaymentMethod` | `() => PaymentMethod \| null` | Returns the payment method selected by user |
|
|
203
|
-
| `updateConfig` | `(config: Partial<PayConductorConfig>) => void` | Updates theme, locale, or paymentMethods |
|
|
204
|
-
| `updateorderId` | `(orderId: string) => void` | Updates the order id in the iframe |
|
|
205
|
-
| `update` | `(options: UpdateOptions) => void` | Updates billing details |
|
|
206
|
-
| `submit` | `() => Promise<SubmitResult>` | Submits the form (validate + format) |
|
|
207
|
-
|
|
208
|
-
## TypeScript
|
|
209
|
-
|
|
210
|
-
```ts
|
|
211
|
-
import type {
|
|
212
|
-
PaymentResult,
|
|
213
|
-
PaymentMethod,
|
|
214
|
-
PayConductorTheme,
|
|
215
|
-
PayConductorConfig,
|
|
216
|
-
PaymentConfirmData,
|
|
217
|
-
PixPaymentData,
|
|
218
|
-
CreditCardPaymentData,
|
|
219
|
-
BankSlipPaymentData,
|
|
220
|
-
NuPayPaymentData,
|
|
221
|
-
PicPayPaymentData,
|
|
222
|
-
CardPaymentData,
|
|
223
|
-
BillingDetails,
|
|
224
|
-
} from '@payconductor/react';
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
## Payment Flow
|
|
228
|
-
|
|
229
|
-
```
|
|
230
|
-
1. <PayConductor publicKey="pk_xxx"> mounts
|
|
231
|
-
└─ Registers window.PayConductor, stores iframeUrl
|
|
232
|
-
|
|
233
|
-
2. <PayConductorCheckoutElement /> mounts
|
|
234
|
-
└─ Reads iframeUrl, renders the iframe
|
|
235
|
-
|
|
236
|
-
3. iframe loads → fetches payment methods → sends Ready
|
|
237
|
-
SDK receives Ready → sends config (theme, locale, paymentMethods)
|
|
238
|
-
|
|
239
|
-
4. User selects payment method
|
|
240
|
-
└─ onPaymentMethodSelected fires
|
|
241
|
-
└─ getSelectedPaymentMethod() returns the chosen method
|
|
242
|
-
|
|
243
|
-
5. User clicks "Checkout" (your button, outside the iframe)
|
|
244
|
-
└─ @payconductor/sdk creates Draft order → returns orderId
|
|
245
|
-
└─ confirmPayment({ orderId })
|
|
246
|
-
└─ iframe collects form data → POST /orders/:id/confirm
|
|
247
|
-
|
|
248
|
-
6. SDK receives PaymentComplete/Failed/Pending → callbacks fire
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
## License
|
|
252
|
-
|
|
253
|
-
MIT
|
|
1
|
+
# @payconductor/react
|
|
2
|
+
|
|
3
|
+
React SDK for [PayConductor](https://payconductor.ai) payment integration.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@payconductor/react)
|
|
6
|
+
|
|
7
|
+
## Requirements
|
|
8
|
+
|
|
9
|
+
Minimum React version: **v16.8**.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @payconductor/react @payconductor/sdk
|
|
15
|
+
# or
|
|
16
|
+
yarn add @payconductor/react @payconductor/sdk
|
|
17
|
+
# or
|
|
18
|
+
pnpm add @payconductor/react @payconductor/sdk
|
|
19
|
+
# or
|
|
20
|
+
bun add @payconductor/react @payconductor/sdk
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import {
|
|
27
|
+
PayConductor,
|
|
28
|
+
PayConductorCheckoutElement,
|
|
29
|
+
usePayConductor,
|
|
30
|
+
usePayconductorElement,
|
|
31
|
+
type PaymentMethod,
|
|
32
|
+
type PaymentResult,
|
|
33
|
+
} from '@payconductor/react';
|
|
34
|
+
import {
|
|
35
|
+
AvailablePaymentMethods,
|
|
36
|
+
Configuration,
|
|
37
|
+
DocumentType,
|
|
38
|
+
OrderApi,
|
|
39
|
+
type OrderCreateRequest,
|
|
40
|
+
} from '@payconductor/sdk';
|
|
41
|
+
|
|
42
|
+
const sdkConfig = new Configuration({
|
|
43
|
+
username: import.meta.env.VITE_PAYCONDUCTOR_CLIENT_ID || 'your_client_id',
|
|
44
|
+
password: import.meta.env.VITE_PAYCONDUCTOR_CLIENT_SECRET || 'your_client_secret',
|
|
45
|
+
});
|
|
46
|
+
const orderApi = new OrderApi(sdkConfig);
|
|
47
|
+
|
|
48
|
+
function CheckoutForm() {
|
|
49
|
+
const { isReady, error } = usePayConductor();
|
|
50
|
+
const { confirmPayment, getSelectedPaymentMethod } = usePayconductorElement();
|
|
51
|
+
|
|
52
|
+
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
53
|
+
const [isProcessing, setIsProcessing] = useState(false);
|
|
54
|
+
|
|
55
|
+
const handleFinalize = async () => {
|
|
56
|
+
if (!isReady) return;
|
|
57
|
+
setIsProcessing(true);
|
|
58
|
+
setErrorMessage(null);
|
|
59
|
+
|
|
60
|
+
try {
|
|
61
|
+
// 1. Create the Draft order via @payconductor/sdk to get the orderId
|
|
62
|
+
const orderRequest: OrderCreateRequest = {
|
|
63
|
+
chargeAmount: 100.00,
|
|
64
|
+
clientIp: '0.0.0.0',
|
|
65
|
+
customer: {
|
|
66
|
+
documentNumber: '12345678900',
|
|
67
|
+
documentType: DocumentType.Cpf,
|
|
68
|
+
email: 'customer@example.com',
|
|
69
|
+
name: 'Customer Name',
|
|
70
|
+
},
|
|
71
|
+
discountAmount: 0,
|
|
72
|
+
externalId: `order-${Date.now()}`,
|
|
73
|
+
payment: {
|
|
74
|
+
paymentMethod: 'Draft',
|
|
75
|
+
availablePaymentMethods: [
|
|
76
|
+
AvailablePaymentMethods.CreditCard,
|
|
77
|
+
AvailablePaymentMethods.Pix,
|
|
78
|
+
AvailablePaymentMethods.BankSlip,
|
|
79
|
+
],
|
|
80
|
+
},
|
|
81
|
+
shippingFee: 0,
|
|
82
|
+
taxFee: 0,
|
|
83
|
+
};
|
|
84
|
+
const { data } = await orderApi.orderCreate(orderRequest);
|
|
85
|
+
|
|
86
|
+
// 2. Confirm payment with the obtained orderId
|
|
87
|
+
const result: PaymentResult = await confirmPayment({ orderId: data.id });
|
|
88
|
+
if (result.status === 'succeeded') alert('Payment successful!');
|
|
89
|
+
} catch (err: unknown) {
|
|
90
|
+
setErrorMessage(err instanceof Error ? err.message : 'Payment failed');
|
|
91
|
+
} finally {
|
|
92
|
+
setIsProcessing(false);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const selectedMethod = getSelectedPaymentMethod();
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<div>
|
|
100
|
+
{/* The iframe is rendered here */}
|
|
101
|
+
<PayConductorCheckoutElement height="600px" />
|
|
102
|
+
|
|
103
|
+
{selectedMethod && <p>Selected method: <strong>{selectedMethod}</strong></p>}
|
|
104
|
+
|
|
105
|
+
<button type="button" onClick={handleFinalize} disabled={!isReady || isProcessing}>
|
|
106
|
+
{isProcessing ? 'Processing...' : 'Checkout'}
|
|
107
|
+
</button>
|
|
108
|
+
|
|
109
|
+
{errorMessage && <div>{errorMessage}</div>}
|
|
110
|
+
{error && <div>Error: {error}</div>}
|
|
111
|
+
</div>
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export default function App() {
|
|
116
|
+
return (
|
|
117
|
+
<PayConductor
|
|
118
|
+
publicKey={import.meta.env.VITE_PAYCONDUCTOR_CLIENT_ID || "your_client_id"}
|
|
119
|
+
locale="pt-BR"
|
|
120
|
+
debug={true}
|
|
121
|
+
theme={{ primaryColor: '#0066ff', borderRadius: '8px' }}
|
|
122
|
+
onReady={() => console.log('Ready')}
|
|
123
|
+
onPaymentComplete={(result: PaymentResult) => console.log('Complete:', result)}
|
|
124
|
+
onPaymentMethodSelected={(method: PaymentMethod) => console.log('Method:', method)}
|
|
125
|
+
>
|
|
126
|
+
<CheckoutForm />
|
|
127
|
+
</PayConductor>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## API Reference
|
|
133
|
+
|
|
134
|
+
### `<PayConductor />`
|
|
135
|
+
|
|
136
|
+
Provider component that initializes the payment session. **Does not render the iframe directly** — use `<PayConductorCheckoutElement>` for that.
|
|
137
|
+
|
|
138
|
+
| Prop | Type | Description |
|
|
139
|
+
|------|------|-------------|
|
|
140
|
+
| `publicKey` | `string` | Your PayConductor public key |
|
|
141
|
+
| `theme` | `PayConductorTheme` | Theme customization options |
|
|
142
|
+
| `locale` | `string` | Locale (e.g. `'pt-BR'`, `'en-US'`) |
|
|
143
|
+
| `paymentMethods` | `PaymentMethod[] \| "all"` | Available payment methods |
|
|
144
|
+
| `defaultPaymentMethod` | `PaymentMethod` | Pre-selected payment method |
|
|
145
|
+
| `paymentMethodsConfig` | `PaymentMethodConfig[]` | Per-method config (installments, discounts) |
|
|
146
|
+
| `methodsDirection` | `"vertical" \| "horizontal"` | Layout direction of payment methods |
|
|
147
|
+
| `showPaymentButtons` | `boolean` | Show native action buttons inside the iframe |
|
|
148
|
+
| `nuPayConfig` | `NuPayData` | Required when NuPay is an available method |
|
|
149
|
+
| `debug` | `boolean` | Enable prefixed console.log for key events |
|
|
150
|
+
| `onReady` | `() => void` | Called when the iframe is ready |
|
|
151
|
+
| `onError` | `(error: Error) => void` | Called when an error occurs |
|
|
152
|
+
| `onPaymentComplete` | `(result: PaymentResult) => void` | Called when payment succeeds |
|
|
153
|
+
| `onPaymentFailed` | `(result: PaymentResult) => void` | Called when payment fails |
|
|
154
|
+
| `onPaymentPending` | `(result: PaymentResult) => void` | Called when payment is pending |
|
|
155
|
+
| `onPaymentMethodSelected` | `(method: PaymentMethod) => void` | Called when user selects a payment method |
|
|
156
|
+
|
|
157
|
+
### `<PayConductorCheckoutElement />`
|
|
158
|
+
|
|
159
|
+
Renders the payment iframe. Place it inside `<PayConductor>` wherever you want the iframe in your layout.
|
|
160
|
+
|
|
161
|
+
| Prop | Type | Description |
|
|
162
|
+
|------|------|-------------|
|
|
163
|
+
| `height` | `string` | Iframe height (default: `'600px'`) |
|
|
164
|
+
|
|
165
|
+
### `usePayConductor()`
|
|
166
|
+
|
|
167
|
+
Hook that provides frame state.
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
const { isReady, error } = usePayConductor();
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
| Property | Type | Description |
|
|
174
|
+
|----------|------|-------------|
|
|
175
|
+
| `isReady` | `boolean` | Whether the iframe is ready |
|
|
176
|
+
| `error` | `string \| null` | Error message, if any |
|
|
177
|
+
|
|
178
|
+
### `usePayconductorElement()`
|
|
179
|
+
|
|
180
|
+
Hook that provides payment action methods.
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
const {
|
|
184
|
+
init,
|
|
185
|
+
confirmPayment,
|
|
186
|
+
validate,
|
|
187
|
+
reset,
|
|
188
|
+
getSelectedPaymentMethod,
|
|
189
|
+
updateConfig,
|
|
190
|
+
updateorderId,
|
|
191
|
+
update,
|
|
192
|
+
submit,
|
|
193
|
+
} = usePayconductorElement();
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
| Method | Signature | Description |
|
|
197
|
+
|--------|-----------|-------------|
|
|
198
|
+
| `init` | `(config: PayConductorConfig) => Promise<void>` | Sends full config to the iframe |
|
|
199
|
+
| `confirmPayment` | `({ orderId: string }) => Promise<PaymentResult>` | Triggers payment confirmation in iframe |
|
|
200
|
+
| `validate` | `(data: unknown) => Promise<boolean>` | Validates current form data |
|
|
201
|
+
| `reset` | `() => Promise<void>` | Resets the payment form |
|
|
202
|
+
| `getSelectedPaymentMethod` | `() => PaymentMethod \| null` | Returns the payment method selected by user |
|
|
203
|
+
| `updateConfig` | `(config: Partial<PayConductorConfig>) => void` | Updates theme, locale, or paymentMethods |
|
|
204
|
+
| `updateorderId` | `(orderId: string) => void` | Updates the order id in the iframe |
|
|
205
|
+
| `update` | `(options: UpdateOptions) => void` | Updates billing details |
|
|
206
|
+
| `submit` | `() => Promise<SubmitResult>` | Submits the form (validate + format) |
|
|
207
|
+
|
|
208
|
+
## TypeScript
|
|
209
|
+
|
|
210
|
+
```ts
|
|
211
|
+
import type {
|
|
212
|
+
PaymentResult,
|
|
213
|
+
PaymentMethod,
|
|
214
|
+
PayConductorTheme,
|
|
215
|
+
PayConductorConfig,
|
|
216
|
+
PaymentConfirmData,
|
|
217
|
+
PixPaymentData,
|
|
218
|
+
CreditCardPaymentData,
|
|
219
|
+
BankSlipPaymentData,
|
|
220
|
+
NuPayPaymentData,
|
|
221
|
+
PicPayPaymentData,
|
|
222
|
+
CardPaymentData,
|
|
223
|
+
BillingDetails,
|
|
224
|
+
} from '@payconductor/react';
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
## Payment Flow
|
|
228
|
+
|
|
229
|
+
```
|
|
230
|
+
1. <PayConductor publicKey="pk_xxx"> mounts
|
|
231
|
+
└─ Registers window.PayConductor, stores iframeUrl
|
|
232
|
+
|
|
233
|
+
2. <PayConductorCheckoutElement /> mounts
|
|
234
|
+
└─ Reads iframeUrl, renders the iframe
|
|
235
|
+
|
|
236
|
+
3. iframe loads → fetches payment methods → sends Ready
|
|
237
|
+
SDK receives Ready → sends config (theme, locale, paymentMethods)
|
|
238
|
+
|
|
239
|
+
4. User selects payment method
|
|
240
|
+
└─ onPaymentMethodSelected fires
|
|
241
|
+
└─ getSelectedPaymentMethod() returns the chosen method
|
|
242
|
+
|
|
243
|
+
5. User clicks "Checkout" (your button, outside the iframe)
|
|
244
|
+
└─ @payconductor/sdk creates Draft order → returns orderId
|
|
245
|
+
└─ confirmPayment({ orderId })
|
|
246
|
+
└─ iframe collects form data → POST /orders/:id/confirm
|
|
247
|
+
|
|
248
|
+
6. SDK receives PaymentComplete/Failed/Pending → callbacks fire
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
## License
|
|
252
|
+
|
|
253
|
+
MIT
|
package/dist/index.cjs.js
CHANGED
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
height: 440px;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
`,document.head.appendChild(n)}}const _e=5*60*1e3;class Re extends k{constructor(){super(...arguments);p(this,"iframe",null);p(this,"messageListener",null);p(this,"timeoutId",null)}async authenticate(){const{threeDsUrl:t,creq:a}=this.data;if(!t||!a)return this.fail("Missing threeDsUrl or creq");const r=this.resolveContainer();return new Promise(o=>{var l;this.iframe=document.createElement("iframe"),this.iframe.name="payconductor-3ds-challenge",this.iframe.id="payconductor-3ds-challenge",r.appendChild(this.iframe),this.messageListener=S=>{var E,h,y;((E=S.data)==null?void 0:E.status)==="COMPLETE"&&(this.cleanup(),(y=(h=this.options).onComplete)==null||y.call(h),o({status:C.Success}))},window.addEventListener("message",this.messageListener),this.timeoutId=setTimeout(()=>{var S,E;this.cleanup(),(E=(S=this.options).onTimeout)==null||E.call(S),o({status:C.Timeout})},this.options.timeoutMs??_e);const d=(l=this.iframe.contentWindow)==null?void 0:l.document;if(!d){this.cleanup(),o(this.fail("Cannot access iframe document"));return}const s=d.createElement("form");s.name="threeDsChallengeForm",s.setAttribute("target","payconductor-3ds-challenge"),s.setAttribute("method","post"),s.setAttribute("action",t);const i=d.createElement("input");i.setAttribute("type","hidden"),i.setAttribute("name","creq"),i.setAttribute("value",a),s.appendChild(i),this.iframe.appendChild(s),s.submit()})}cleanup(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.iframe&&(this.iframe.remove(),this.iframe=null),this.closeModal()}}const L=new Map;function N(e){const n=L.get(e);if(n)return n;const t=new Promise((a,r)=>{if(document.querySelector(`script[src="${e}"]`)){a();return}const o=document.createElement("script");o.src=e,o.async=!0,o.onload=()=>a(),o.onerror=()=>{L.delete(e),r(new Error(`Failed to load script: ${e}`))},(document.head||document.body).appendChild(o)});return L.set(e,t),t}const Ne="https://static.payzen.lat/static/js/authenticate-client/V1.0/kr-authenticate.umd",ke=10*60*1e3;class xe extends k{constructor(){super(...arguments);p(this,"timeoutId",null)}async authenticate(){const{operationUrl:t,publicKey:a}=this.data;if(!t||!a)return this.fail("Missing operationUrl or publicKey");try{await N(Ne)}catch{return this.fail("Failed to load 3DS SDK")}const r=window.KrAuthenticate;return r?new Promise(o=>{this.timeoutId=setTimeout(()=>{var s,i;this.cleanup(),(i=(s=this.options).onTimeout)==null||i.call(s),o({status:C.Timeout})},this.options.timeoutMs??ke),new r(a).authenticate(t,()=>{var s,i;this.cleanup(),(i=(s=this.options).onComplete)==null||i.call(s),o({status:C.Success})})}):this.fail("KrAuthenticate not available")}cleanup(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}}const Oe={[D.Production]:"https://3ds-nx-js.stone.com.br/live/v2/3ds2.min",[D.Sandbox]:"https://3ds-nx-js.stone.com.br/test/v2/3ds2.min"},Le=5*60*1e3;function Ue(){const e=window.innerWidth;return e<=480?"01":e<=768?"02":e<=1024?"03":"04"}class Fe extends k{constructor(){super(...arguments);p(this,"timeoutId",null);p(this,"methodContainer",null)}async authenticate(){const{authToken:t,card:a}=this.data;if(!t)return this.fail("Missing authToken for PagarMe 3DS");if(!a)return this.fail("Missing card data for PagarMe 3DS");const r=this.data.environment??D.Production;try{await N(Oe[r])}catch{return this.fail("Failed to load Stone 3DS SDK")}const o=window.TDS;if(!o)return this.fail("Stone TDS SDK not available");const d=this.resolveContainer();return this.methodContainer=document.createElement("div"),this.methodContainer.style.display="none",document.body.appendChild(this.methodContainer),new Promise(s=>{this.timeoutId=setTimeout(()=>{var i,l;this.cleanup(),(l=(i=this.options).onTimeout)==null||l.call(i),s({status:C.Timeout})},this.options.timeoutMs??Le),o.init({token:t,tds_method_container_element:this.methodContainer,challenge_container_element:d,use_default_challenge_iframe_style:!0,challenge_window_size:Ue()},this.buildOrderData()).then(i=>{var S,E;if(this.cleanup(),!(i!=null&&i.length)){s(this.fail("PagarMe 3DS returned no response"));return}const l=i[0];if(l.challenge_canceled){s(this.fail("3DS challenge canceled by user"));return}l.trans_status==="Y"||l.trans_status==="A"?((E=(S=this.options).onComplete)==null||E.call(S),s({status:C.Success,dsTransactionId:l.tds_server_trans_id})):s(this.fail(`3DS failed with status: ${l.trans_status}`))}).catch(i=>{this.cleanup(),s(this.fail(i instanceof Error?i.message:"PagarMe 3DS failed"))})})}cleanup(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.methodContainer&&(this.methodContainer.remove(),this.methodContainer=null),this.closeModal()}buildOrderData(){var d;const{card:t,customer:a,amount:r,billingAddress:o}=this.data;return{payments:[{payment_method:"credit_card",credit_card:{card:{number:t==null?void 0:t.number,holder_name:t==null?void 0:t.holderName,exp_month:Number(t==null?void 0:t.expMonth),exp_year:Number(t==null?void 0:t.expYear),billing_address:o?{country:o.country,state:o.state,city:o.city,zip_code:o.zipCode,line_1:`${o.number}, ${o.street}${o.district?`, ${o.district}`:""}`,line_2:o.complement??""}:void 0}},amount:r}],...a?{customer:{name:a.name,email:a.email,...a.document?{document:a.document}:{},...(d=a.phones)!=null&&d.length?{phones:Object.fromEntries(a.phones.map(s=>[s.type==="HOME"?"home_phone":"mobile_phone",{country_code:s.countryCode,area_code:s.areaCode,number:s.number}]))}:{}}}:{}}}}const Ke="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min";class Be extends k{async authenticate(){var E,h,y;const{authToken:n,card:t,customer:a,amount:r,currency:o,billingAddress:d}=this.data;if(!n)return this.fail("Missing authToken (session) for PagSeguro 3DS");if(!t)return this.fail("Missing card data for PagSeguro 3DS");if(!a)return this.fail("Missing customer data for PagSeguro 3DS");if(!r)return this.fail("Missing amount for PagSeguro 3DS");if(!d)return this.fail("Missing billingAddress for PagSeguro 3DS");const s=this.data.environment===D.Sandbox?"SANDBOX":"PROD";try{await N(Ke)}catch{return this.fail("Failed to load PagSeguro SDK")}const i=window.PagSeguro;if(!i)return this.fail("PagSeguro SDK not available");i.setUp({session:n,env:s});const l=((E=a.phones)==null?void 0:E.map(m=>({country:m.countryCode,area:m.areaCode,number:m.number,type:m.type??"MOBILE"})))??[{country:"55",area:"11",number:"999999999",type:"MOBILE"}];l.some(m=>m.type==="MOBILE")||(l[0].type="MOBILE");try{const m=await i.authenticate3DS({data:{customer:{name:a.name,email:a.email,phones:l},paymentMethod:{type:this.data.installments===0?"DEBIT_CARD":"CREDIT_CARD",installments:this.data.installments??1,card:{number:t.number,expMonth:t.expMonth,expYear:t.expYear,holder:{name:t.holderName}}},amount:{value:r,currency:o??"BRL"},billingAddress:{street:d.street,number:d.number,complement:d.complement,regionCode:d.state,country:d.country.length===2?this.toAlpha3(d.country):d.country,city:d.city,postalCode:d.zipCode.replace(/\D/g,"")},dataOnly:!1}});return m.status==="AUTH_FLOW_COMPLETED"||m.status==="AUTH_NOT_SUPPORTED"?((y=(h=this.options).onComplete)==null||y.call(h),{status:C.Success,dsTransactionId:m.id}):m.status==="CHANGE_PAYMENT_METHOD"?this.fail("PagSeguro requires a different payment method"):{status:C.Success,dsTransactionId:m.id}}catch(m){return this.fail(m instanceof Error?m.message:"PagSeguro 3DS failed")}}cleanup(){}toAlpha3(n){return{BR:"BRA",US:"USA",AR:"ARG",CL:"CHL",CO:"COL",MX:"MEX",PE:"PER",UY:"URY"}[n.toUpperCase()]??n}}const ze={[M.MercadoPago]:Re,PayConductor:xe,[M.PagarMe]:Fe,[M.PagSeguro]:Be};class He extends Error{constructor(n,t){super(n),this.title=t,this.name="PayConductorThreeDSApiError"}}class Ye{constructor(n){this.publicKey=n}async completeManualChallenge(n,t){const a=await fetch(`${this.baseUrl}/three-ds/complete/${n}`,{method:"POST",headers:this.headers,body:JSON.stringify({providerTransactionId:t})});a.ok||await this.parseResponseError("Failed to complete native 3DS challenge",a)}async parseResponseError(n,t){var r,o,d,s;let a="";try{const i=await t.json();i!=null&&i.message?a=i.message:(r=i==null?void 0:i.error)!=null&&r.message?a=i.error:(d=(o=i==null?void 0:i.error)==null?void 0:o.value)!=null&&d.message?a=i.error.value.message:(s=i==null?void 0:i.value)!=null&&s.message?a=i.value.message:a=JSON.stringify(i)}catch{}throw new He(a,n)}get baseUrl(){return typeof window<"u"&&window.location.href.includes("localhost")?"http://localhost:3000/api/v1/sdk":"https://payconductor.ai/api/v1/sdk"}get headers(){return{Authorization:`Basic ${btoa(`${this.publicKey}:x`)}`,"Content-Type":"application/json"}}}const Ge=[M.PagSeguro];class ce{constructor(n){p(this,"data");p(this,"provider",null);this.data=n}get needsChallenge(){return this.data.status==="NeedChallenge"||this.data.statusDetail==="ThreeDsAwaitingChallenge"}get acquirer(){return this.data.acquirer}async authenticate(n){if(!this.needsChallenge)return{status:C.Success};const{acquirer:t}=this.data;if(!t)return{status:C.Failed,error:new Error("Missing 3DS acquirer")};const a=ze[t];if(!a)return{status:C.Failed,error:new Error(`Unsupported 3DS provider: ${t}`)};const r={...n,threeDSecure:this.data};this.provider=new a(this.data,r);const o=await this.provider.authenticate();return o.status===C.Success&&o.dsTransactionId&&Ge.includes(t)&&this.data.orderId&&this.data.publicKey&&await new Ye(this.data.publicKey).completeManualChallenge(this.data.orderId,o.dsTransactionId),o}destroy(){this.provider&&(this.provider.cleanup(),this.provider=null)}}function je(e){let n=null;return{handleChallenge:async r=>{var s;if(!(r.status==="NeedChallenge"||r.statusDetail==="ThreeDsAwaitingChallenge"))return{status:C.Success};(s=e==null?void 0:e.onChallenge)==null||s.call(e),n=new ce(r);const d=await n.authenticate({onComplete:e==null?void 0:e.onComplete,onError:e==null?void 0:e.onError,onTimeout:e==null?void 0:e.onTimeout});return n.destroy(),n=null,d},destroy:()=>{n==null||n.destroy(),n=null}}}class Ve extends Error{constructor(n,t){super(n),this.title=t,this.name="PayConductorTokenizeApiError"}}class qe{constructor(n){this.publicKey=n}async getSettings(){const n=await fetch(`${this.baseUrl}/card-tokenization/settings`,{method:"GET",headers:this.headers});return n.ok||await this.parseResponseError("Failed to fetch settings",n),await n.json()}async createToken(n){const t=await fetch(`${this.baseUrl}/card-tokenization/tokenize`,{method:"POST",headers:this.headers,body:JSON.stringify(n)});return t.ok||await this.parseResponseError("Failed to generate token",t),await t.json()}async saveTokens(n,t,a){const r=await fetch(`${this.baseUrl}/card-tokenization/save-tokens/${t}/${a}`,{method:"POST",headers:this.headers,body:JSON.stringify(n)});r.ok||await this.parseResponseError("Failed to save tokens",r)}async parseResponseError(n,t){var r,o,d,s;let a="";try{const i=await t.json();i!=null&&i.message?a=i.message:(r=i==null?void 0:i.error)!=null&&r.message?a=i.error:(d=(o=i==null?void 0:i.error)==null?void 0:o.value)!=null&&d.message?a=i.error.value.message:(s=i==null?void 0:i.value)!=null&&s.message?a=i.value.message:a=JSON.stringify(i)}catch{}throw new Ve(a,n)}get baseUrl(){return typeof window<"u"&&window.location.href.includes("localhost")?"http://localhost:3000/api/v1/sdk":"https://payconductor.ai/api/v1/sdk"}get headers(){return{Authorization:`Basic ${btoa(`${this.publicKey}:x`)}`,"Content-Type":"application/json"}}}class $e{constructor(n){this.input=n}}class We extends $e{constructor(){super(...arguments);p(this,"scriptUrl","https://sdk.mercadopago.com/js/v2")}async tokenize(){if(!("publicKey"in this.input.setting))throw new Error("MercadoPago public key is missing in settings");if(!this.input.customer.documentNumber)throw new Error("Customer document number is required for tokenization");const t=window.MercadoPago;if(!t)throw new Error("MercadoPago SDK not available");const a=new t(this.input.setting.publicKey),{expiration:r,cvv:o,number:d,holderName:s}=this.input.card;return(await a.createCardToken({cardExpirationMonth:String(r.month),cardExpirationYear:String(r.year),cardholderName:s,cardNumber:d,securityCode:o,identificationType:this.input.customer.documentType===B.Cpf?"CPF":"CNPJ",identificationNumber:this.input.customer.documentNumber})).id}}const Je={[M.MercadoPago]:We};class le{constructor(n){p(this,"api");this.publicKey=n,this.api=new qe(this.publicKey)}async tokenizeCard(n){this.validateCard(n);const{customerId:t,token:a}=await this.api.createToken({card:n.card,customer:n.customer,saveCard:!1}),{settings:r}=await this.api.getSettings(),d=(await Promise.all(r.map(async s=>{const i=Je[s.key];if(!i)return null;const l=new i({...n,setting:s.settings});return await N(l.scriptUrl),{token:await l.tokenize(),integrationId:s.integrationId,providerKey:s.key}}))).filter(s=>s!==null);return d.length>0&&await this.api.saveTokens(d,t,a),a}validateCard(n){const{number:t,cvv:a,expiration:r,holderName:o}=n.card;if(!t||!a||!(r!=null&&r.month)||!(r!=null&&r.year)||!o)throw new Error("Invalid card data")}}function Xe(e){const n=new le(e.publicKey);return{tokenizeCard:async a=>{var r,o;try{const d=await n.tokenizeCard(a);return(r=e.onSuccess)==null||r.call(e,d),d}catch(d){const s=d instanceof Error?d:new Error("Tokenization failed");return(o=e.onError)==null||o.call(e,s),null}}}}exports.ALLOWED_ORIGINS=ne;exports.CardBrand=J;exports.CurrencyType=X;exports.DeviceType=Z;exports.DocumentType=B;exports.ERROR_CODES=ge;exports.ErrorCode=ee;exports.IFRAME_BASE_URL=te;exports.IFRAME_DEFAULT_HEIGHT_VALUE=U;exports.IncomingMessage=T;exports.InputStyleKey=Q;exports.IntegrationProvider=M;exports.OrganizationEnvironment=D;exports.OutgoingMessage=I;exports.POST_MESSAGES=g;exports.PayConductor=de;exports.PayConductor3DSSDK=ce;exports.PayConductorCheckoutElement=Ae;exports.PayConductorThreeDSElement=Ie;exports.PayConductorTokenizeSDK=le;exports.PaymentMethod=G;exports.PaymentMethodLayout=j;exports.PaymentStatus=V;exports.REQUEST_TIMEOUT=ae;exports.SKELETON_CSS=re;exports.SKELETON_STYLE_ID=F;exports.StatusDetail=q;exports.ThreeDSResultStatus=W;exports.ThreeDsAuthenticationStatus=$;exports.buildIframeUrl=ie;exports.default=de;exports.defaultTheme=Ee;exports.generateRequestId=oe;exports.isValidOrigin=se;exports.loadScript=N;exports.usePayConductor=Me;exports.usePayconductorElement=De;exports.useThreeDS=je;exports.useTokenize=Xe;
|
|
48
|
+
`,document.head.appendChild(n)}}const _e=5*60*1e3;class Re extends k{constructor(){super(...arguments);p(this,"iframe",null);p(this,"messageListener",null);p(this,"timeoutId",null)}async authenticate(){const{threeDsUrl:t,creq:a}=this.data;if(!t||!a)return this.fail("Missing threeDsUrl or creq");const r=this.resolveContainer();return new Promise(o=>{var l;this.iframe=document.createElement("iframe"),this.iframe.name="payconductor-3ds-challenge",this.iframe.id="payconductor-3ds-challenge",r.appendChild(this.iframe),this.messageListener=S=>{var E,h,y;((E=S.data)==null?void 0:E.status)==="COMPLETE"&&(this.cleanup(),(y=(h=this.options).onComplete)==null||y.call(h),o({status:C.Success}))},window.addEventListener("message",this.messageListener),this.timeoutId=setTimeout(()=>{var S,E;this.cleanup(),(E=(S=this.options).onTimeout)==null||E.call(S),o({status:C.Timeout})},this.options.timeoutMs??_e);const d=(l=this.iframe.contentWindow)==null?void 0:l.document;if(!d){this.cleanup(),o(this.fail("Cannot access iframe document"));return}const s=d.createElement("form");s.name="threeDsChallengeForm",s.setAttribute("target","payconductor-3ds-challenge"),s.setAttribute("method","post"),s.setAttribute("action",t);const i=d.createElement("input");i.setAttribute("type","hidden"),i.setAttribute("name","creq"),i.setAttribute("value",a),s.appendChild(i),this.iframe.appendChild(s),s.submit()})}cleanup(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.iframe&&(this.iframe.remove(),this.iframe=null),this.closeModal()}}const L=new Map;function N(e){const n=L.get(e);if(n)return n;const t=new Promise((a,r)=>{if(document.querySelector(`script[src="${e}"]`)){a();return}const o=document.createElement("script");o.src=e,o.async=!0,o.onload=()=>a(),o.onerror=()=>{L.delete(e),r(new Error(`Failed to load script: ${e}`))},(document.head||document.body).appendChild(o)});return L.set(e,t),t}const Ne="https://static.payzen.lat/static/js/authenticate-client/V1.0/kr-authenticate.umd",ke=10*60*1e3;class xe extends k{constructor(){super(...arguments);p(this,"timeoutId",null)}async authenticate(){const{operationUrl:t,publicKey:a}=this.data;if(!t||!a)return this.fail("Missing operationUrl or publicKey");try{await N(Ne)}catch{return this.fail("Failed to load 3DS SDK")}const r=window.KrAuthenticate;return r?new Promise(o=>{this.timeoutId=setTimeout(()=>{var s,i;this.cleanup(),(i=(s=this.options).onTimeout)==null||i.call(s),o({status:C.Timeout})},this.options.timeoutMs??ke),new r(a).authenticate(t,()=>{var s,i;this.cleanup(),(i=(s=this.options).onComplete)==null||i.call(s),o({status:C.Success})})}):this.fail("KrAuthenticate not available")}cleanup(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}}const Oe={[D.Production]:"https://3ds-nx-js.stone.com.br/live/v2/3ds2.min",[D.Sandbox]:"https://3ds-nx-js.stone.com.br/test/v2/3ds2.min"},Le=5*60*1e3;function Ue(){const e=window.innerWidth;return e<=480?"01":e<=768?"02":e<=1024?"03":"04"}class Fe extends k{constructor(){super(...arguments);p(this,"timeoutId",null);p(this,"methodContainer",null)}async authenticate(){const{authToken:t,card:a}=this.data;if(!t)return this.fail("Missing authToken for PagarMe 3DS");if(!a)return this.fail("Missing card data for PagarMe 3DS");const r=this.data.environment??D.Production;try{await N(Oe[r])}catch{return this.fail("Failed to load Stone 3DS SDK")}const o=window.TDS;if(!o)return this.fail("Stone TDS SDK not available");const d=this.resolveContainer();return this.methodContainer=document.createElement("div"),this.methodContainer.style.display="none",document.body.appendChild(this.methodContainer),new Promise(s=>{this.timeoutId=setTimeout(()=>{var i,l;this.cleanup(),(l=(i=this.options).onTimeout)==null||l.call(i),s({status:C.Timeout})},this.options.timeoutMs??Le),o.init({token:t,tds_method_container_element:this.methodContainer,challenge_container_element:d,use_default_challenge_iframe_style:!0,challenge_window_size:Ue()},this.buildOrderData()).then(i=>{var S,E;if(this.cleanup(),!(i!=null&&i.length)){s(this.fail("PagarMe 3DS returned no response"));return}const l=i[0];if(l.challenge_canceled){s(this.fail("3DS challenge canceled by user"));return}l.trans_status==="Y"||l.trans_status==="A"?((E=(S=this.options).onComplete)==null||E.call(S),s({status:C.Success,dsTransactionId:l.tds_server_trans_id})):s(this.fail(`3DS failed with status: ${l.trans_status}`))}).catch(i=>{this.cleanup(),s(this.fail(i instanceof Error?i.message:"PagarMe 3DS failed"))})})}cleanup(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.methodContainer&&(this.methodContainer.remove(),this.methodContainer=null),this.closeModal()}buildOrderData(){var d;const{card:t,customer:a,amount:r,billingAddress:o}=this.data;return{payments:[{payment_method:"credit_card",credit_card:{card:{number:t==null?void 0:t.number,holder_name:t==null?void 0:t.holderName,exp_month:Number(t==null?void 0:t.expMonth),exp_year:Number(t==null?void 0:t.expYear),billing_address:o?{country:o.country,state:o.state,city:o.city,zip_code:o.zipCode,line_1:`${o.number}, ${o.street}${o.district?`, ${o.district}`:""}`,line_2:o.complement??""}:void 0}},amount:r}],...a?{customer:{name:a.name,email:a.email,...a.document?{document:a.document}:{},...(d=a.phones)!=null&&d.length?{phones:Object.fromEntries(a.phones.map(s=>[s.type==="HOME"?"home_phone":"mobile_phone",{country_code:s.countryCode,area_code:s.areaCode,number:s.number}]))}:{}}}:{}}}}const Ke="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min";class Be extends k{async authenticate(){var E,h,y;const{authToken:n,card:t,customer:a,amount:r,currency:o,billingAddress:d}=this.data;if(!n)return this.fail("Missing authToken (session) for PagSeguro 3DS");if(!t)return this.fail("Missing card data for PagSeguro 3DS");if(!a)return this.fail("Missing customer data for PagSeguro 3DS");if(!r)return this.fail("Missing amount for PagSeguro 3DS");if(!d)return this.fail("Missing billingAddress for PagSeguro 3DS");const s=this.data.environment===D.Sandbox?"SANDBOX":"PROD";try{await N(Ke)}catch{return this.fail("Failed to load PagSeguro SDK")}const i=window.PagSeguro;if(!i)return this.fail("PagSeguro SDK not available");i.setUp({session:n,env:s});const l=((E=a.phones)==null?void 0:E.map(m=>({country:m.countryCode,area:m.areaCode,number:m.number,type:m.type??"MOBILE"})))??[{country:"55",area:"11",number:"999999999",type:"MOBILE"}];l.some(m=>m.type==="MOBILE")||(l[0].type="MOBILE");try{const m=await i.authenticate3DS({data:{customer:{name:a.name,email:a.email,phones:l},paymentMethod:{type:this.data.installments===0?"DEBIT_CARD":"CREDIT_CARD",installments:this.data.installments??1,card:{number:t.number,expMonth:t.expMonth,expYear:t.expYear,holder:{name:t.holderName}}},amount:{value:r,currency:o??"BRL"},billingAddress:{street:d.street,number:d.number,complement:d.complement,regionCode:d.state,country:d.country.length===2?this.toAlpha3(d.country):d.country,city:d.city,postalCode:d.zipCode.replace(/\D/g,"")},dataOnly:!1}});return m.status==="AUTH_FLOW_COMPLETED"||m.status==="AUTH_NOT_SUPPORTED"?((y=(h=this.options).onComplete)==null||y.call(h),{status:C.Success,dsTransactionId:m.id}):m.status==="CHANGE_PAYMENT_METHOD"?this.fail("PagSeguro requires a different payment method"):{status:C.Success,dsTransactionId:m.id}}catch(m){return this.fail(m instanceof Error?m.message:"PagSeguro 3DS failed")}}cleanup(){}toAlpha3(n){return{BR:"BRA",US:"USA",AR:"ARG",CL:"CHL",CO:"COL",MX:"MEX",PE:"PER",UY:"URY"}[n.toUpperCase()]??n}}const ze={[M.MercadoPago]:Re,PayConductor:xe,[M.PagarMe]:Fe,[M.PagSeguro]:Be};class He extends Error{constructor(n,t){super(n),this.title=t,this.name="PayConductorThreeDSApiError"}}class Ye{constructor(n){this.publicKey=n}async completeManualChallenge(n,t){const a=await fetch(`${this.baseUrl}/three-ds/complete/${n}`,{method:"POST",headers:this.headers,body:JSON.stringify({providerTransactionId:t})});a.ok||await this.parseResponseError("Failed to complete native 3DS challenge",a)}async parseResponseError(n,t){var r,o,d,s;let a="";try{const i=await t.json();i!=null&&i.message?a=i.message:(r=i==null?void 0:i.error)!=null&&r.message?a=i.error:(d=(o=i==null?void 0:i.error)==null?void 0:o.value)!=null&&d.message?a=i.error.value.message:(s=i==null?void 0:i.value)!=null&&s.message?a=i.value.message:a=JSON.stringify(i)}catch{}throw new He(a,n)}get baseUrl(){return typeof window<"u"&&window.location.href.includes("localhost")?"http://localhost:3000/api/v1/sdk":"https://payconductor.ai/api/v1/sdk"}get headers(){return{Authorization:`Basic ${btoa(`${this.publicKey}:x`)}`,"Content-Type":"application/json"}}}const Ge=[M.PagSeguro];class ce{constructor(n){p(this,"data");p(this,"provider",null);this.data=n}get needsChallenge(){return this.data.status==="NeedChallenge"||this.data.statusDetail==="ThreeDsAwaitingChallenge"}get acquirer(){return this.data.acquirer}async authenticate(n){if(!this.needsChallenge)return{status:C.Success};const{acquirer:t}=this.data;if(!t)return{status:C.Failed,error:new Error("Missing 3DS acquirer")};const a=ze[t];if(!a)return{status:C.Failed,error:new Error(`Unsupported 3DS provider: ${t}`)};const r={...n,threeDSecure:this.data};this.provider=new a(this.data,r);const o=await this.provider.authenticate();return o.status===C.Success&&o.dsTransactionId&&Ge.includes(t)&&this.data.orderId&&this.data.publicKey&&await new Ye(this.data.publicKey).completeManualChallenge(this.data.orderId,o.dsTransactionId),o}destroy(){this.provider&&(this.provider.cleanup(),this.provider=null)}}function je(e){let n=null;return{handleChallenge:async r=>{var s;if(!(r.status==="NeedChallenge"||r.statusDetail==="ThreeDsAwaitingChallenge"))return{status:C.Success};(s=e==null?void 0:e.onChallenge)==null||s.call(e),n=new ce(r);const d=await n.authenticate({onComplete:e==null?void 0:e.onComplete,onError:e==null?void 0:e.onError,onTimeout:e==null?void 0:e.onTimeout});return n.destroy(),n=null,d},destroy:()=>{n==null||n.destroy(),n=null}}}class Ve extends Error{constructor(n,t){super(n),this.title=t,this.name="PayConductorTokenizerApiError"}}class qe{constructor(n){this.publicKey=n}async getSettings(){const n=await fetch(`${this.baseUrl}/card-tokenization/settings`,{method:"GET",headers:this.headers});return n.ok||await this.parseResponseError("Failed to fetch settings",n),await n.json()}async createToken(n){const t=await fetch(`${this.baseUrl}/card-tokenization/tokenize`,{method:"POST",headers:this.headers,body:JSON.stringify(n)});return t.ok||await this.parseResponseError("Failed to generate token",t),await t.json()}async saveTokens(n,t,a){const r=await fetch(`${this.baseUrl}/card-tokenization/save-tokens/${t}/${a}`,{method:"POST",headers:this.headers,body:JSON.stringify(n)});r.ok||await this.parseResponseError("Failed to save tokens",r)}async parseResponseError(n,t){var r,o,d,s;let a="";try{const i=await t.json();i!=null&&i.message?a=i.message:(r=i==null?void 0:i.error)!=null&&r.message?a=i.error:(d=(o=i==null?void 0:i.error)==null?void 0:o.value)!=null&&d.message?a=i.error.value.message:(s=i==null?void 0:i.value)!=null&&s.message?a=i.value.message:a=JSON.stringify(i)}catch{}throw new Ve(a,n)}get baseUrl(){return typeof window<"u"&&window.location.href.includes("localhost")?"http://localhost:3000/api/v1/sdk":"https://payconductor.ai/api/v1/sdk"}get headers(){return{Authorization:`Basic ${btoa(`${this.publicKey}:x`)}`,"Content-Type":"application/json"}}}class $e{constructor(n){this.input=n}}class We extends $e{constructor(){super(...arguments);p(this,"scriptUrl","https://sdk.mercadopago.com/js/v2")}async tokenize(){if(!("publicKey"in this.input.setting))throw new Error("MercadoPago public key is missing in settings");if(!this.input.customer.documentNumber)throw new Error("Customer document number is required for tokenization");const t=window.MercadoPago;if(!t)throw new Error("MercadoPago SDK not available");const a=new t(this.input.setting.publicKey),{expiration:r,cvv:o,number:d,holderName:s}=this.input.card;return(await a.createCardToken({cardExpirationMonth:String(r.month),cardExpirationYear:String(r.year),cardholderName:s,cardNumber:d,securityCode:o,identificationType:this.input.customer.documentType===B.Cpf?"CPF":"CNPJ",identificationNumber:this.input.customer.documentNumber})).id}}const Je={[M.MercadoPago]:We};class le{constructor(n){p(this,"api");this.publicKey=n,this.api=new qe(this.publicKey)}async tokenizeCard(n){this.validateCard(n);const{customerId:t,token:a}=await this.api.createToken({card:n.card,customer:n.customer,saveCard:!1}),{settings:r}=await this.api.getSettings(),d=(await Promise.all(r.map(async s=>{const i=Je[s.key];if(!i)return null;const l=new i({...n,setting:s.settings});return await N(l.scriptUrl),{token:await l.tokenize(),integrationId:s.integrationId,providerKey:s.key}}))).filter(s=>s!==null);return d.length>0&&await this.api.saveTokens(d,t,a),a}validateCard(n){const{number:t,cvv:a,expiration:r,holderName:o}=n.card;if(!t||!a||!(r!=null&&r.month)||!(r!=null&&r.year)||!o)throw new Error("Invalid card data")}}function Xe(e){const n=new le(e.publicKey);return{tokenizeCard:async a=>{var r,o;try{const d=await n.tokenizeCard(a);return(r=e.onSuccess)==null||r.call(e,d),d}catch(d){const s=d instanceof Error?d:new Error("Tokenization failed");return(o=e.onError)==null||o.call(e,s),null}}}}exports.ALLOWED_ORIGINS=ne;exports.CardBrand=J;exports.CurrencyType=X;exports.DeviceType=Z;exports.DocumentType=B;exports.ERROR_CODES=ge;exports.ErrorCode=ee;exports.IFRAME_BASE_URL=te;exports.IFRAME_DEFAULT_HEIGHT_VALUE=U;exports.IncomingMessage=T;exports.InputStyleKey=Q;exports.IntegrationProvider=M;exports.OrganizationEnvironment=D;exports.OutgoingMessage=I;exports.POST_MESSAGES=g;exports.PayConductor=de;exports.PayConductor3DSSDK=ce;exports.PayConductorCheckoutElement=Ae;exports.PayConductorThreeDSElement=Ie;exports.PayConductorTokenizerSDK=le;exports.PaymentMethod=G;exports.PaymentMethodLayout=j;exports.PaymentStatus=V;exports.REQUEST_TIMEOUT=ae;exports.SKELETON_CSS=re;exports.SKELETON_STYLE_ID=F;exports.StatusDetail=q;exports.ThreeDSResultStatus=W;exports.ThreeDsAuthenticationStatus=$;exports.buildIframeUrl=ie;exports.default=de;exports.defaultTheme=Ee;exports.generateRequestId=oe;exports.isValidOrigin=se;exports.loadScript=N;exports.usePayConductor=Me;exports.usePayconductorElement=De;exports.useThreeDS=je;exports.useTokenizer=Xe;
|
|
49
49
|
//# sourceMappingURL=index.cjs.js.map
|