@odus/checkout 0.0.1
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 +277 -0
- package/dist/checkout.js +19 -0
- package/dist/checkout.js.map +1 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +198 -0
- package/dist/index.js +18 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2016 -0
- package/dist/index.mjs.map +1 -0
- package/dist/package.json +83 -0
- package/package.json +83 -0
package/README.md
ADDED
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
# Odus Checkout SDK Documentation
|
|
2
|
+
|
|
3
|
+
The Odus Checkout is a flexible, easy-to-implement JavaScript SDK that allows merchants to accept payments on their websites with minimal integration effort. This documentation provides all the necessary information to successfully implement the Odus Checkout on your website.
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
- [Installation](#installation)
|
|
8
|
+
- [Getting Started](#getting-started)
|
|
9
|
+
- [Configuration Options](#configuration-options)
|
|
10
|
+
- [Payment Methods](#payment-methods)
|
|
11
|
+
- [Callbacks and Event Handling](#callbacks-and-event-handling)
|
|
12
|
+
- [Localization](#localization)
|
|
13
|
+
- [Advanced Usage](#advanced-usage)
|
|
14
|
+
- [API Reference](#api-reference)
|
|
15
|
+
- [Troubleshooting](#troubleshooting)
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
### CDN Usage (Browser)
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<script src="https://cdn.example.com/odus-js/checkout.js"></script>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
const checkout = new OdusCheckout({
|
|
26
|
+
// Your configuration
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// Use the checkout instance
|
|
30
|
+
checkout.mount();
|
|
31
|
+
</script>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### NPM Usage (Module)
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npm install @odus-js
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
import { OdusCheckout } from '@odus-js';
|
|
42
|
+
|
|
43
|
+
const checkout = new OdusCheckout({
|
|
44
|
+
// Your configuration
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
// Use the checkout instance
|
|
48
|
+
checkout.mount();
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Getting Started
|
|
52
|
+
|
|
53
|
+
### Basic Implementation
|
|
54
|
+
|
|
55
|
+
Here's a simple example of how to implement the Odus Checkout in your application:
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
import { OdusCheckout } from '@odus/checkout';
|
|
59
|
+
|
|
60
|
+
// Initialize the checkout
|
|
61
|
+
const checkout = new OdusCheckout({
|
|
62
|
+
apiKey: 'your_api_key',
|
|
63
|
+
profileId: 'your_profile_id',
|
|
64
|
+
paymentId: 'your_payment_id',
|
|
65
|
+
checkoutKey: 'your_unique_checkout_key',
|
|
66
|
+
returnUrl: 'https://your-website.com/payment-complete',
|
|
67
|
+
|
|
68
|
+
callbacks: {
|
|
69
|
+
onPaymentSucceeded: (result) => {
|
|
70
|
+
console.log('Payment successful!', result);
|
|
71
|
+
// Handle successful payment (e.g., show confirmation page)
|
|
72
|
+
},
|
|
73
|
+
onPaymentFailed: (result) => {
|
|
74
|
+
console.log('Payment failed!', result);
|
|
75
|
+
// Handle failed payment
|
|
76
|
+
},
|
|
77
|
+
onActionRequired: (redirectUrl) => {
|
|
78
|
+
console.log('3DS authentication required!', redirectUrl);
|
|
79
|
+
// Custom redirect handling (only called when manualActionHandling is true)
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
// Optional: Enable manual handling of 3DS redirects
|
|
83
|
+
// manualActionHandling: true,
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
// Mount the checkout form to a container in your HTML
|
|
87
|
+
checkout.mount('#checkout-container');
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Make sure you have a container element in your HTML:
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<div id="checkout-container"></div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Configuration Options
|
|
97
|
+
|
|
98
|
+
When initializing the Odus Checkout, you can configure various options:
|
|
99
|
+
|
|
100
|
+
| Option | Type | Required | Description |
|
|
101
|
+
| ---------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- |
|
|
102
|
+
| `apiKey` | string | ✅ | Your Odus API key obtained from the dashboard |
|
|
103
|
+
| `profileId` | string | ✅ | Your Odus checkout profile ID |
|
|
104
|
+
| `checkoutKey` | string | ✅ | Unique checkout key for this payment session |
|
|
105
|
+
| `paymentId` | string | ✅ | The ID of the payment being processed |
|
|
106
|
+
| `returnUrl` | string | ✅ | The URL where the customer will be redirected after 3DS authentication or other redirect flows |
|
|
107
|
+
| `locale` | string | | Language code for checkout localization (defaults to browser language if supported) |
|
|
108
|
+
| `disableErrorMessages` | boolean | | Set to `true` to disable built-in error messages (defaults to `false`) |
|
|
109
|
+
| `manualActionHandling` | boolean | | Set to `true` to manually handle 3DS redirects via the `onActionRequired` callback (defaults to `false`) |
|
|
110
|
+
| `callbacks` | object | | Event callback functions (see [Callbacks](#callbacks-and-event-handling)) |
|
|
111
|
+
|
|
112
|
+
## Payment Methods
|
|
113
|
+
|
|
114
|
+
The Odus Checkout automatically displays payment methods based on your account configuration and the checkout profile. The following payment methods are supported:
|
|
115
|
+
|
|
116
|
+
- Credit/Debit Cards (Visa, Mastercard, American Express, Discover, JCB, Diners)
|
|
117
|
+
- PayPal
|
|
118
|
+
- Additional methods based on your account configuration
|
|
119
|
+
|
|
120
|
+
## Callbacks and Event Handling
|
|
121
|
+
|
|
122
|
+
The Odus Checkout SDK provides callback functions to handle different payment scenarios:
|
|
123
|
+
|
|
124
|
+
### onPaymentSucceeded
|
|
125
|
+
|
|
126
|
+
Called when a payment is successfully authorized.
|
|
127
|
+
|
|
128
|
+
```javascript
|
|
129
|
+
onPaymentSucceeded: (result) => {
|
|
130
|
+
// result is the payment status: 'authorized'
|
|
131
|
+
console.log('Payment successful!', result);
|
|
132
|
+
// Update UI, redirect to thank you page, etc.
|
|
133
|
+
};
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### onPaymentFailed
|
|
137
|
+
|
|
138
|
+
Called when a payment fails.
|
|
139
|
+
|
|
140
|
+
```javascript
|
|
141
|
+
onPaymentFailed: (result) => {
|
|
142
|
+
// result is the payment status: 'failed'
|
|
143
|
+
console.log('Payment failed!', result);
|
|
144
|
+
// Show error message, allow retry, etc.
|
|
145
|
+
};
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### onActionRequired
|
|
149
|
+
|
|
150
|
+
Called when a payment requires additional action (such as 3DS authentication) and `manualActionHandling` is set to `true`.
|
|
151
|
+
|
|
152
|
+
```javascript
|
|
153
|
+
onActionRequired: (redirectUrl) => {
|
|
154
|
+
// redirectUrl is the URL where the customer needs to be redirected for 3DS authentication
|
|
155
|
+
console.log('Action required!', redirectUrl);
|
|
156
|
+
// Handle the redirect manually, e.g., open in a modal, new window, or custom redirect
|
|
157
|
+
window.location.href = redirectUrl;
|
|
158
|
+
};
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## Localization support
|
|
162
|
+
|
|
163
|
+
Odus provides localized payment experiences in 33 languages, helping you better serve your global customer base.
|
|
164
|
+
|
|
165
|
+
### How it works
|
|
166
|
+
|
|
167
|
+
- **Automatic Detection**: By default, Odus detects your customer's browser locale and displays the payment page in that language if supported.
|
|
168
|
+
- **Manual Override**: You can specify a particular language by passing the locale parameter when creating a Checkout Session.
|
|
169
|
+
|
|
170
|
+
### Supported Languages
|
|
171
|
+
|
|
172
|
+
Odus currently supports localization for 33 languages, ensuring broad international coverage for your payment processing needs.
|
|
173
|
+
|
|
174
|
+
## Advanced Usage
|
|
175
|
+
|
|
176
|
+
### Programmatic Control
|
|
177
|
+
|
|
178
|
+
You can programmatically control the checkout form:
|
|
179
|
+
|
|
180
|
+
```javascript
|
|
181
|
+
// Mount the checkout to a container
|
|
182
|
+
checkout.mount('#checkout-container');
|
|
183
|
+
|
|
184
|
+
// Unmount the checkout (e.g., when navigating away)
|
|
185
|
+
checkout.unmount();
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Custom 3DS Redirect Handling
|
|
189
|
+
|
|
190
|
+
By default, Odus Checkout automatically redirects customers to the 3DS authentication page when required. However, you can take control of this process for a more customized experience:
|
|
191
|
+
|
|
192
|
+
```javascript
|
|
193
|
+
const checkout = new OdusCheckout({
|
|
194
|
+
// ... other configuration options
|
|
195
|
+
manualActionHandling: true,
|
|
196
|
+
callbacks: {
|
|
197
|
+
// ... other callbacks
|
|
198
|
+
onActionRequired: (redirectUrl) => {
|
|
199
|
+
// Example: Open 3DS in a modal or iframe instead of full-page redirect
|
|
200
|
+
const modal = document.getElementById('auth-modal');
|
|
201
|
+
const iframe = document.createElement('iframe');
|
|
202
|
+
iframe.src = redirectUrl;
|
|
203
|
+
modal.appendChild(iframe);
|
|
204
|
+
modal.style.display = 'block';
|
|
205
|
+
},
|
|
206
|
+
},
|
|
207
|
+
});
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
This approach is useful for:
|
|
211
|
+
|
|
212
|
+
- Implementing a modal/popup for 3DS authentication
|
|
213
|
+
- Using an iframe instead of a full page redirect
|
|
214
|
+
- Adding custom tracking or analytics before redirecting
|
|
215
|
+
- Implementing custom UI transitions during the authentication flow
|
|
216
|
+
|
|
217
|
+
## API Reference
|
|
218
|
+
|
|
219
|
+
### OdusCheckout Class
|
|
220
|
+
|
|
221
|
+
```typescript
|
|
222
|
+
class OdusCheckout {
|
|
223
|
+
constructor(config: CheckoutConfig);
|
|
224
|
+
mount(containerId: string): this;
|
|
225
|
+
unmount(): void;
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### CheckoutConfig Type
|
|
230
|
+
|
|
231
|
+
```typescript
|
|
232
|
+
type CheckoutConfig = {
|
|
233
|
+
apiKey: string;
|
|
234
|
+
returnUrl: string;
|
|
235
|
+
profileId: string;
|
|
236
|
+
checkoutKey: string;
|
|
237
|
+
paymentId: string;
|
|
238
|
+
callbacks?: {
|
|
239
|
+
onPaymentSucceeded?: (result: PaymentResult) => void;
|
|
240
|
+
onPaymentFailed?: (result: string) => void;
|
|
241
|
+
onActionRequired?: (redirectUrl: string) => void;
|
|
242
|
+
};
|
|
243
|
+
locale?: 'en' | 'de' | 'es' | 'fr' | 'pl' | 'pt' | null;
|
|
244
|
+
disableErrorMessages?: boolean;
|
|
245
|
+
manualActionHandling?: boolean;
|
|
246
|
+
};
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### PaymentResult Type
|
|
250
|
+
|
|
251
|
+
```typescript
|
|
252
|
+
type PaymentResult = 'pending' | 'three_ds_requested' | 'authorized' | 'failed';
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
## Troubleshooting
|
|
256
|
+
|
|
257
|
+
### Common Issues
|
|
258
|
+
|
|
259
|
+
#### Checkout not appearing
|
|
260
|
+
|
|
261
|
+
- Ensure the container element exists before calling `mount()`
|
|
262
|
+
- Check browser console for errors
|
|
263
|
+
- Verify your API key and profile ID are correct
|
|
264
|
+
|
|
265
|
+
#### 3DS Authentication Issues
|
|
266
|
+
|
|
267
|
+
- Ensure your `returnUrl` is properly configured
|
|
268
|
+
- Verify your domain is whitelisted in your Odus account settings
|
|
269
|
+
- If using `manualActionHandling: true`, make sure the `onActionRequired` callback is properly implemented
|
|
270
|
+
|
|
271
|
+
#### Manual 3DS Handling Not Working
|
|
272
|
+
|
|
273
|
+
- Check that both `manualActionHandling: true` is set and `onActionRequired` callback is provided
|
|
274
|
+
- Ensure the callback correctly handles the redirectUrl parameter
|
|
275
|
+
- Verify that any custom redirect implementation maintains all URL parameters
|
|
276
|
+
|
|
277
|
+
© 2025 Odus Payments, Inc. All rights reserved.
|
package/dist/checkout.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
(function(p,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(p=typeof globalThis<"u"?globalThis:p||self,v(p.OdusCheckout={}))})(this,function(p){"use strict";var v=document.createElement("style");v.textContent=`.form-container{display:grid;gap:24px;padding:4px;position:relative;max-width:100%}.form-container>*{font-family:inherit}.card-grid{display:grid}.card-details{display:grid;grid-template-columns:1fr 1fr}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:linear-gradient(135deg,#f8fbff40,#e2ecf540);display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border:6px solid transparent;border-top:6px solid #4f81ff;border-right:6px solid #36d1dc;border-radius:50%;animation:spin 1s ease-in-out infinite,glow 1.5s ease-in-out infinite alternate;box-shadow:0 0 #4f81ff00}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{0%{box-shadow:0 0 #4f81ff00}to{box-shadow:0 0 20px #4f81ff99}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{display:flex;flex-direction:column}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box;flex:1 1 50%;min-width:0}.card-element iframe{width:100%;min-width:0}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:16px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:20px;top:8px;display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;backdrop-filter:blur(3px);border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(v);const H=({name:s})=>{const[e,...t]=s?.split(" ")||[],[a]=t.reverse();return{firstName:e,lastName:a}};class j{apiKey;baseUrl;browserInfo;constructor(e,t="http://localhost:3000",a){this.apiKey=e,this.baseUrl=t,this.browserInfo=a||{userAgent:navigator.userAgent}}async fetchApi({endpoint:e,method:t="POST",body:a,customHeaders:i={}}){const r={Authorization:`Bearer ${this.apiKey}`,"Content-Type":"application/json",...i};try{const o=await fetch(`${this.baseUrl}${e}`,{method:t,headers:r,body:a?JSON.stringify(a):void 0});if(!o.ok){let n;try{n=await o.json()}catch(d){console.log("error",d)}throw{message:n?.message[0]||`API request failed: ${o.status} ${o.statusText}`,status:o.status,statusText:o.statusText,details:n}}return o.json()}catch(o){throw o instanceof Error?{message:o.message,status:0,statusText:"Network Error",details:{message:o.message}}:o}}async authorizePayment({paymentId:e,checkoutKey:t,formData:a,token:i,returnUrl:r}){let o={};if(i&&a){const n=a.cardExpiry.replace(/\s+/g,"").split("/"),l=n[0],d=n[1],{firstName:c,lastName:m}=H({name:a.name});o={paymentMethodData:{type:"card",card:{token:i,expMonth:l,expYear:`20${d}`,cardholderName:a.name}},customerData:{email:a.email,firstName:c,lastName:m},context:{returnUrl:r,browserInfo:this.browserInfo}}}else o={paymentMethodData:{type:"paypal"},context:{returnUrl:r,browserInfo:this.browserInfo}};return await this.fetchApi({endpoint:`/payments/${e}/authorize`,customHeaders:{Authorization:`Bearer ${t}`},body:o})}}const K="http://localhost:3000",U=async({id:s,apiKey:e})=>{const t=await fetch(`${K}/checkout-profiles/${s}`,{method:"GET",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`}});if(!t.ok)throw new Error(`HTTP error! Status: ${t.status}`);return await t.json()};class q{events=new Map;subscribe(e,t){return this.events.has(e)||this.events.set(e,new Set),this.events.get(e)?.add(t),()=>{const a=this.events.get(e);a&&(a.delete(t),a.size===0&&this.events.delete(e))}}publish(e,t){const a=this.events.get(e);a&&a.forEach(i=>i(t))}clear(){this.events.clear()}subscriberCount(e){return this.events.get(e)?.size||0}}const _=new q;class G{state;initialState;eventBus;stateChangedEvent="state-changed";constructor(e,t=_){this.initialState={...e},this.state={...e},this.eventBus=t}getState(){return Object.freeze({...this.state})}setState(e){const t={...this.state,...e};JSON.stringify(this.state)!==JSON.stringify(t)&&(this.state=t,this.eventBus.publish(this.stateChangedEvent,this.getState()))}resetState(){this.state={...this.initialState},this.eventBus.publish(this.stateChangedEvent,this.getState())}subscribe(e){return this.eventBus.subscribe(this.stateChangedEvent,e)}getValue(e){return this.state[e]}}function C(s){return new G(s)}function Y({apiKey:s,profileId:e}){const t=C({checkoutProfile:void 0,isLoading:!0,error:null}),a=async()=>{try{t.setState({isLoading:!0});const i=await U({apiKey:s,id:e});i&&t.setState({checkoutProfile:i,isLoading:!1,error:null})}catch(i){t.setState({error:"Failed to load checkout profile",isLoading:!1}),console.error(i)}};return a(),{getState:t.getState.bind(t),subscribe:t.subscribe.bind(t),reload:a}}const $={cardNumber:s=>(s.replace(/\s/g,"").match(/.{1,4}/g)||[]).join(" "),cardExpiry:s=>{const t=s.replace(/\D/g,"").slice(0,4);return t.length>2?`${t.slice(0,2)} / ${t.slice(2)}`:t}},I={"gmail.com":["gmal.com","gmil.com","gmai.com","gmial.com","gmail.co","gmaill.com","gamil.com","gmailcom","gmail.cm","gmail.om"],"yahoo.com":["yaho.com","yahooo.com","yahoo.co","yhoo.com","yahocom","yahoo.cm","yah00.com","yaho0.com","hoo.com"],"hotmail.com":["hotmal.com","hotamail.com","hotmai.com","hotmial.com","hotmail.co","hotmailcom","hotmail.cm","htmail.com","hotmil.com"],"outlook.com":["outlok.com","outloo.com","outlook.co","outllok.com","outlook.cm","outlookcom","outloook.com","outook.com","otlook.com"],"icloud.com":["iclod.com","iclud.com","icloud.co","icloudcom","icloud.cm","iclou.com","icloude.com","icld.com","iclould.com"],"aol.com":["aol.co","aolcom","aol.cm","aolmail.com","al.com","ao.com","aol.comm"],"protonmail.com":["protonmal.com","protonmai.com","protonmial.com","protonmail.co","protonmailcom","protonmail.cm","protonmil.com"],"zoho.com":["zoho.co","zohocom","zoho.cm","zoh.com","zohomail.com","zho.com"],"mail.com":["mail.co","mailcom","mail.cm","mal.com","mial.com","mail.comm"],"comcast.net":["comcast.com","comcat.net","comcst.net","comcastnet","comcast.nt","comcas.net"],"verizon.net":["verizon.com","verizon.nt","verizonnet","verizn.net","verizon.ne","verzon.net"],"att.net":["att.com","at.net","att.nt","attnet","att.ne","attt.net"]},Z=s=>{if(!s||s.includes("."))return null;const e=["com","net","org","edu","gov","io","co"];for(const t of e){if(s==="companycok"&&t==="co")return"company.co";if(s.endsWith(t)&&!s.includes(".")){const a=s.length-t.length;return`${s.substring(0,a)}.${t}`}}return null},J=(s,e)=>{if(s.length===0)return e.length;if(e.length===0)return s.length;const t=e.length+1,a=s.length+1,i=Array.from({length:t},(r,o)=>Array.from({length:a},(n,l)=>o===0?l:l===0?o:0));for(let r=1;r<t;r++)for(let o=1;o<a;o++){const n=s[o-1]===e[r-1]?0:1;i[r][o]=Math.min(i[r-1][o]+1,i[r][o-1]+1,i[r-1][o-1]+n)}return i[e.length][s.length]},W=s=>{let t=null,a=3;const i=s.toLowerCase();for(const r of Object.keys(I)){const o=J(i,r);o<=2&&o<a&&(a=o,t=r)}return t},X=()=>{const{t:s}=L();return{validateEmail:t=>{const a=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;if(!t)return{isValid:!1,message:s("validation.emailInvalid"),suggestion:null};const i=t.indexOf("@");if(i===-1)return{isValid:!1,message:s("validation.emailInvalid"),suggestion:null};const r=t.substring(0,i),o=t.substring(i+1);if(!o.includes(".")){const l=Z(o);if(l)return{isValid:!1,message:s("validation.emailSuggestion",{email:`${r}@${l}`}),suggestion:`${r}@${l}`};for(const d of Object.keys(I))if(d.replace(/\./g,"")===o)return{isValid:!1,message:s("validation.emailSuggestion",{email:`${r}@${d}`}),suggestion:`${r}@${d}`}}if(!a.test(t))return{isValid:!1,message:s("validation.emailInvalid"),suggestion:null};const n=W(o);if(n&&n!==o){const l=`${r}@${n}`;return{isValid:!1,message:s("validation.emailSuggestion",{email:l}),suggestion:l}}return{isValid:!0,message:"Email is valid",suggestion:null}}}},Q=()=>{const{t:s}=L(),{validateEmail:e}=X();return{email:t=>{const a=e(t);return a.isValid?void 0:a.message},name:t=>{if(!t.trim())return s("validation.nameRequired")},cardExpiry:t=>{const a=t.replace(/\s/g,""),[i,r]=a.split("/").map(m=>m.trim());if(!i||!r||i.length!==2||r.length!==2)return s("validation.cardExpiryFormat");const o=new Date,n=o.getFullYear()%100,l=o.getMonth()+1,d=parseInt(i,10),c=parseInt(r,10);if(d<1||d>12)return s("validation.cardExpiryFormat");if(c<n||c===n&&d<l)return s("validation.cardExpiryInvalid")}}},ee=()=>{const s=Q(),e=C({formData:{name:"",email:"",cardExpiry:""},errors:{},touched:{email:!1,name:!1,cardExpiry:!1},isValid:!1}),t=(l,d)=>{const c=s[l];return c?.(d)},a=l=>{const d={};return Object.keys(l).forEach(c=>{const m=t(c,l[c]);m&&(d[c]=m)}),d},i=l=>{const d=a(l);return Object.keys(d).length===0},r=(l,d)=>{const c=e.getState();let m=d;l in $&&(m=$[l](d));const f={...c.formData,[l]:m},u={...c.errors};if(c.touched[l]){const g=t(l,m);g?u[l]=g:delete u[l]}e.setState({formData:f,errors:u,isValid:i(f)})},o=(l,d)=>{const c=e.getState(),m={...c.touched,[l]:!0},f=t(l,d),u={...c.errors};f?u[l]=f:delete u[l],e.setState({touched:m,errors:u})},n=l=>{const c={...e.getState().formData,...l};e.setState({formData:c,isValid:i(c)})};return{getFormState:e.getState.bind(e),subscribe:e.subscribe.bind(e),handleChange:r,handleBlur:o,setFormData:n,reset:e.resetState.bind(e)}},te="http://localhost:3000",ae=async({props:s,apiKey:e})=>{const t=await fetch(`${te}/tokenization/generate-iframe-configuration`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify(s)});if(!t.ok)throw new Error(`HTTP error! Status: ${t.status}`);return await t.json()};function ie({apiKey:s,checkoutProfile:e,inputStyles:t,setFormData:a}){const i=C({iframeConfig:void 0,loadingIframe:!0,isCcValid:!1,isCvvValid:!1,isFocused:!1,isCvvFocused:!1,possibleCardType:"unknown"});let r=null;const o=async()=>{try{const c=await ae({props:{allowedOrigins:[globalThis.location.origin]},apiKey:s});c&&(i.setState({iframeConfig:{...c,origin:globalThis.location.origin}}),n())}catch(c){console.error("Failed to generate iframe config:",c)}},n=()=>{const c=i.getState();if(c.iframeConfig&&e){if(!globalThis.TokenEx?.Iframe){console.error("TokenEx script not loaded correctly");return}r=new globalThis.TokenEx.Iframe("card-element",{...c.iframeConfig,placeholder:"1234 1234 1234 1234",cvvPlaceholder:"CVC",cvv:!0,cvvContainerID:"card-cvv-element",enableValidateOnBlur:!1,enableValidateOnKeyUp:!0,enableValidateOnCvvKeyUp:!0,enablePrettyFormat:!0,inputMode:"numeric",cvvInputType:"numeric",font:e.styles.fontFamily,enableAutoComplete:!0,returnAutoCompleteValues:!0,useExtendedBIN:!0,styles:{...t,base:`${t.base}; sans-serif; border-radius: ${e.styles.borderRadius}px ${e.styles.borderRadius}px 0px 0px`,cvv:{...t,base:`${t.base}; border-radius: 0px 0px ${e.styles.borderRadius}px 0px`}}}),r.on("load",()=>{i.setState({loadingIframe:!1})}),r.on("autoCompleteValues",function(m){const{nameOnCard:f,cardExp:u}=m;a({name:f,cardExpiry:u})}),r.on("validate",function(m){const{isValid:f,isCvvValid:u}=m;i.setState({isCcValid:f,isCvvValid:u})}),r.on("focus",function(){i.setState({isFocused:!0})}),r.on("blur",function(){i.setState({isFocused:!1})}),r.on("cvvFocus",function(){i.setState({isCvvFocused:!0})}),r.on("cvvBlur",function(){i.setState({isCvvFocused:!1})}),r.on("cardTypeChange",function({possibleCardType:m}){i.setState({possibleCardType:m})}),r.load()}};s&&o();const l=()=>{r&&(r.remove(),r=null)},d=async c=>{r&&(r.on("tokenize",async function(m){await c(m)}),r.tokenize())};return{getState:i.getState.bind(i),subscribe:i.subscribe.bind(i),tokenize:d,cleanup:l}}const z={email:"E-Mail",cardholderNameLabel:"Name des/der Karteninhaber/in",cardInformation:"Kartendaten",cardholderNamePlaceholder:"Vollständiger Name",cardExpiry:"MM / JJ",loading:"Das Fenster nicht schließen",buttonTexts:{pay:"ZAHLEN",submit:"ABSENDEN",getPlan:"MEINEN PLAN ERHALTEN",donate:"spenden",book:"jetzt buchen",order:"jetzt bestellen"},validation:{emailSuggestion:"Meinten Sie {{email}}?",emailInvalid:"Ihre E-Mail-Adresse ist nicht korrekt",cardExpiryInvalid:"Das Ablaufdatum Ihrer Karte liegt in der Vergangenheit",cardExpiryFormat:"Das Ablaufdatum Ihrer Karte ist unvollständig",cardSecurityFormat:"Der Sicherheitscode Ihrer Karte ist unvollständig",nameRequired:"Gib deinen Namen genau so ein, wie er auf deiner Karte steht",cardNumberInvalid:"Die Kartennummer ist unvollständig"}},N={email:"Email",cardholderNameLabel:"Cardholder name",cardInformation:"Card information",cardholderNamePlaceholder:"Full name on card",cardExpiry:"MM / YY",loading:"Do not close the window",buttonTexts:{pay:"PAY",submit:"SUBMIT",getPlan:"GET MY PLAN",donate:"DONATE",book:"BOOK NOW",order:"ORDER NOW"},validation:{emailSuggestion:"Did you mean {{email}}?",emailInvalid:"Your email is not correct",cardExpiryInvalid:"Your card's expiration date is in the past",cardExpiryFormat:"Your card’s expiration date is incomplete",cardSecurityFormat:"Your card’s security code is incomplete",nameRequired:"Please enter the name as it appears on your card",cardNumberInvalid:"Your card number is invalid"}},P={email:"Correo electrónico",cardholderNameLabel:"Nombre del titular de la tarjeta",cardInformation:"Información de la tarjeta",cardholderNamePlaceholder:"Nombre completo en la tarjeta",cardExpiry:"MM / AA",loading:"Por favor, no cierre esta ventana",buttonTexts:{pay:"PAGAR",submit:"ENVIAR",getPlan:"OBTENER MI PLAN",donate:"DONAR",book:"RESERVAR AHORA",order:"ORDENAR AHORA"},validation:{emailSuggestion:"¿Quisiste decir {{email}}?",emailInvalid:"Su correo electrónico no es válido",cardExpiryInvalid:"La fecha de vencimiento de la tarjeta ya pasó",cardExpiryFormat:"La fecha de vencimiento de su tarjeta está incompleta",cardSecurityFormat:"El código de seguridad de su tarjeta está incompleto",nameRequired:"Por favor, ingrese el nombre tal como aparece en su tarjeta",cardNumberInvalid:"Su número de tarjeta no es válido"}},D={email:"E-mail",cardholderNameLabel:"Nom du titulaire de la carte",cardInformation:"Informations de la carte",cardholderNamePlaceholder:"Nom complet figurant sur la carte",cardExpiry:"MM / AA",loading:"Veuillez ne pas fermer cette fenêtre",buttonTexts:{pay:"PAYER",submit:"ENVOYER",getPlan:"OBTENIR MON PLAN",donate:"FAIRE UN DON",book:"RÉSERVER MAINTENANT",order:"COMMANDER MAINTENANT"},validation:{emailSuggestion:"Vouliez-vous dire {{email}}?",emailInvalid:"Votre adresse e-mail n’est pas valide",cardExpiryInvalid:"La date d'expiration de votre carte est dans le passé",cardExpiryFormat:"La date d’expiration de votre carte est incomplète",cardSecurityFormat:"Le code de sécurité de votre carte est incomplet",nameRequired:"Veuillez saisir le nom tel qu’il figure sur votre carte",cardNumberInvalid:"Votre numéro de carte est invalide"}},A={email:"Adres e-mail",cardholderNameLabel:"Imię i nazwisko posiadacza karty",cardInformation:"Informacje o karcie",cardholderNamePlaceholder:"Imię i nazwisko na karcie",cardExpiry:"MM / RR",loading:"Proszę nie zamykać tego okna",buttonTexts:{pay:"ZAPŁAĆ",submit:"WYŚLIJ",getPlan:"POBIERZ MÓJ PLAN",donate:"PRZEKAŻ DAROWIZNĘ",book:"ZAREZERWUJ TERAZ",order:"ZAMÓW TERAZ"},validation:{emailSuggestion:"Czy chodziło Ci o {{email}}?",emailInvalid:"Państwa adres e-mail jest nieprawidłowy",cardExpiryInvalid:"Data ważności Państwa karty jest w przeszłości",cardExpiryFormat:"Data ważności Państwa karty jest niekompletna",cardSecurityFormat:"Kod zabezpieczający Państwa karty jest niekompletny",nameRequired:"Proszę wpisać imię i nazwisko tak, jak widnieje na karcie",cardNumberInvalid:"Numer Państwa karty jest nieprawidłowy"}},V={email:"E-mail",cardholderNameLabel:"Nome do titular do cartão",cardInformation:"Informações do cartão",cardholderNamePlaceholder:"Nome completo no cartão",cardExpiry:"MM / AA",loading:"Por favor, não feche esta janela",buttonTexts:{pay:"PAGAR",submit:"ENVIAR",getPlan:"OBTER MEU PLANO",donate:"DOAR",book:"RESERVAR AGORA",order:"FAZER PEDIDO"},validation:{emailSuggestion:"Você quis dizer {{email}}?",emailInvalid:"O seu endereço de e-mail não é válido",cardExpiryInvalid:"A data de validade do seu cartão está no passado",cardExpiryFormat:"A data de validade do seu cartão está incompleta",cardSecurityFormat:"O código de segurança do seu cartão está incompleto",nameRequired:"Por favor, insira o nome conforme aparece no cartão",cardNumberInvalid:"O número do seu cartão é inválido"}},R={en:N,de:z,es:P,fr:D,pl:A,pt:V};class re{locale;loadedLocales=new Set;constructor(e="en"){this.locale=e,this.loadedLocales.add(e)}setLocale(e){this.locale=e,this.loadedLocales.add(e)}getLocale(){return this.locale}translate(e,t){const a=this.getNestedTranslation(e);return!t||a===e?a:this.interpolate(a,t)}getNestedTranslation(e){const t=this.locale in R?R[this.locale]:{},a=this.findNestedValue(t,e);return a===void 0?e:a}findNestedValue(e,t){const a=t.split(".");let i=e;for(const r of a){if(i==null||!Object.prototype.hasOwnProperty.call(i,r))return;i=i[r]}return typeof i=="string"?i:void 0}interpolate(e,t){return e.replace(/{{(\w+)}}/g,(a,i)=>{const r=t[i];return r===void 0?a:String(r)})}}const B=["en","de","es","fr","pl","pt"],se="en";function oe(s){const e=new re,a=(()=>{const n=navigator?.language?.split("-")[0]?.toLowerCase();return B.includes(n)?n:se})();e.setLocale(a);const i=C({locale:a,translationService:e});return{store:i,translate:(n,l)=>i.getState().translationService.translate(n,l),setLocale:n=>{B.includes(n)&&(i.getState().translationService.setLocale(n),i.setState({locale:n}))},getLocale:()=>i.getValue("locale"),subscribe:i.subscribe.bind(i)}}const ne=oe(),L=()=>{const{translate:s,getLocale:e,setLocale:t,subscribe:a}=ne;return{t:s,translate:s,locale:e(),setLocale:t,subscribe:a}},le=({fontFamily:s})=>{if(!s)return{cleanup:()=>{}};const e=s.replace(/\s+/g,"+"),t=`https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`,a=[...document.head.querySelectorAll("link")].filter(n=>n.href.includes("fonts.googleapis.com/css2")&&n.rel==="stylesheet"),i=document.createElement("link");i.rel="stylesheet",i.href=t;const r=a.find(n=>n.href.includes(`family=${e}`));if(r)r.href=t;else if(a.length>0){const n=a.at(-1);n?.nextSibling?document.head.insertBefore(i,n.nextSibling):document.head.appendChild(i)}else document.head.appendChild(i);return{cleanup:()=>{document.head.contains(i)&&document.head.removeChild(i)}}},ce=({scriptSrc:s,async:e=!1})=>{if([...document.head.querySelectorAll("script")].filter(o=>o.src===s).length>0)return{cleanup:()=>{},isLoaded:Promise.resolve(!0)};const a=document.createElement("script");a.src=s,a.async=e;const i=new Promise((o,n)=>{a.onload=()=>o(!0),a.onerror=()=>{console.error(`Failed to load script: ${s}`),n(new Error(`Failed to load script: ${s}`))}});return document.head.appendChild(a),{cleanup:()=>{document.head.contains(a)&&document.head.removeChild(a)},isLoaded:i}},S=s=>Object.entries(s).map(([e,t])=>{const a=e.replace(/([A-Z])/g,"-$1").toLowerCase(),i=typeof t=="number"?`${t}px`:t;return`${a}: ${i}`}).join("; ");function de(s){if(!s)return{formContainerStyle:{},baseStyles:{},placeholderStyles:{},errorStyles:{},focusStyles:{},inputStyles:{base:"",error:"",focus:"",placeholder:""}};const e={opacity:"1",background:"#fff",border:"none",outline:"none",fontSize:`${s.styles.fontSize}px`,lineHeight:30,boxSizing:"border-box",padding:"0px 12px",height:33,width:"100%",fontFamily:`${s.styles.fontFamily}, sans-serif`},t={color:"#717173",opacity:"0.3",fontFamily:`${s.styles.fontFamily}, sans-serif`},a={color:"#dc2727"},i={outline:0},r={fontFamily:`${s.styles.fontFamily}, sans-serif`},o={base:S(e),error:S(a),focus:S(i),placeholder:S(t)};return{formContainerStyle:r,baseStyles:e,placeholderStyles:t,errorStyles:a,focusStyles:i,inputStyles:o}}class h{element;children=[];eventListeners=[];constructor(e,t=[],a={}){this.element=document.createElement(e),t.length>0&&this.addClass(...t),Object.entries(a).forEach(([i,r])=>{this.setAttribute(i,r)})}getElement(){return this.element}addClass(...e){return this.element.classList.add(...e),this}removeClass(...e){return this.element.classList.remove(...e),this}setAttribute(e,t){return this.element.setAttribute(e,t),this}setText(e){return this.element.textContent=e,this}setHTML(e){return this.element.innerHTML=e,this}appendChild(e){return this.children.push(e),this.element.appendChild(e.getElement()),this}appendTo(e){return e instanceof h?e.appendChild(this):e.appendChild(this.element),this}addEventListener(e,t,a){return this.element.addEventListener(e,t,a),this.eventListeners.push({type:e,listener:t}),this}removeEventListener(e,t,a){return this.element.removeEventListener(e,t,a),this}hide(){return this.element.style.display="none",this}show(){return this.element.style.display="",this}destroy(){this.eventListeners.forEach(({type:e,listener:t})=>{this.element.removeEventListener(e,t)}),this.eventListeners=[],this.children.forEach(e=>e.destroy()),this.children=[],this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class b{static createDiv(e=[],t={}){return new h("div",e,t)}static createSpan(e=[],t={}){return new h("span",e,t)}static createButton(e,t=[],a={}){const i=new h("button",t,a);return i.setText(e),i}static createInput(e,t=[],a={}){const i={type:e,...a};return new h("input",t,i)}static createTextInput(e="",t=[],a={}){const i={type:"text",placeholder:e,...a};return new h("input",t,i)}static createForm(e=[],t={}){return new h("form",e,t)}static createLabel(e,t="",a=[],i={}){const r=t?{for:t,...i}:i,o=new h("label",a,r);return o.setText(e),o}static createSelect(e,t=[],a={}){const i=new h("select",t,a);return e.forEach(r=>{const o=document.createElement("option");o.value=r.value,o.textContent=r.text,r.selected&&(o.selected=!0),i.getElement().appendChild(o)}),i}static createImage(e,t="",a=[],i={}){const r={src:e,alt:t,...i};return new h("img",a,r)}}class he extends h{messageComponent;constructor(e){super("div",[]);const t=b.createDiv(["error-alert"],{role:"alert","aria-live":"polite"}),a=b.createDiv(["error-alert-content"]),i=b.createDiv(["error-alert-icon-container"]);i.getElement().innerHTML=this.createAlertCircleSVG();const r=b.createDiv(["error-alert-text-container"]),o=new h("h4",["error-alert-title"]);o.setText("Checkout Error"),this.messageComponent=new h("p",["error-alert-message"]),this.messageComponent.setText(e.message||"Bad request"),r.appendChild(o),r.appendChild(this.messageComponent),a.appendChild(i),a.appendChild(r),t.appendChild(a),this.appendChild(t)}createAlertCircleSVG(){return`
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="14"
|
|
6
|
+
height="14"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
fill="none"
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
stroke-width="2"
|
|
11
|
+
stroke-linecap="round"
|
|
12
|
+
stroke-linejoin="round"
|
|
13
|
+
>
|
|
14
|
+
<circle cx="12" cy="12" r="10" />
|
|
15
|
+
<line x1="12" x2="12" y1="8" y2="12" />
|
|
16
|
+
<line x1="12" x2="12.01" y1="16" y2="16" />
|
|
17
|
+
</svg>
|
|
18
|
+
`}setMessage(e){return this.messageComponent.setText(e),this}}class me extends h{titleElement;constructor(e){super("div",["blur-bg"]);const t=b.createDiv(["loader"]);this.titleElement=new h("h3",["title"]),this.titleElement.setText(e.text),this.appendChild(t),this.appendChild(this.titleElement)}setText(e){return this.titleElement.setText(e),this}}class x extends h{constructor(e){super("div",[]);const t=document.createElement("span");t.className="form-helper-text",t.textContent=e.text||"",this.getElement().appendChild(t)}setText(e){const t=this.getElement().querySelector(".form-helper-text");return t&&(t.textContent=e),this}}class ue extends h{constructor(e){super("label",["input-label"],{for:e.id}),this.setText(e.label);const t=this.getElement();t.style.fontFamily="inherit",t.style.color=e.styles.color,t.style.fontSize=`${e.styles.fontSize}px`}}class k extends h{inputElement;helperText=null;constructor(e){if(super("div",["input-wrapper"]),e.label&&e.styles){const a=new ue({styles:{color:e.styles.color,fontSize:e.styles.fontSize},label:e.label,id:e.name});this.appendChild(a)}const t={id:e.name,name:e.name,class:`form-input ${e.error?"form-input-error":""}`};if(e.placeholder&&(t.placeholder=e.placeholder),e.value&&(t.value=e.value),e.required&&(t.required=String(e.required)),e.disabled&&(t.disabled=String(e.disabled)),this.inputElement=b.createInput(e.type||"text",[],t),e.styles){const a=this.inputElement.getElement();a.style.fontFamily=`"${e.styles.fontFamily}", sans-serif`,a.style.color=e.styles.color,a.style.fontSize=`${e.styles.fontSize}px`,a.style.borderRadius=e.styles.borderRadius}e.onChange&&this.inputElement.getElement().addEventListener("input",e.onChange),this.getElement().appendChild(this.inputElement.getElement()),e.error&&(this.helperText=new x({text:e.errorMsg}),this.appendChild(this.helperText))}getValue(){return this.inputElement.getElement().value}setValue(e){return this.inputElement.getElement().value=e,this}setError(e,t){const a=this.inputElement.getElement();return e?(a.classList.add("form-input-error"),!this.helperText&&t?(this.helperText=new x({text:t}),this.appendChild(this.helperText)):this.helperText&&t&&this.helperText.setText(t)):(a.classList.remove("form-input-error"),this.helperText&&(this.helperText.getElement().remove(),this.helperText=null)),this}addEventListener(e,t,a){return this.inputElement.getElement().addEventListener(e,t,a),this}}class pe{input;constructor(e){const{value:t,onChange:a,onBlur:i,error:r,errorMsg:o,checkoutProfile:n,translationFunc:l}=e;this.input=new k({name:"name",label:l("cardholderNameLabel"),error:r,errorMsg:o,styles:{color:n.styles.textColor,borderRadius:`${n.styles.borderRadius}px`,fontSize:n.styles.fontSize,fontFamily:n.styles.fontFamily},placeholder:l("cardholderNamePlaceholder"),value:t,onChange:a}),this.input.addEventListener("blur",i)}getValue(){return this.input.getValue()}setValue(e){return this.input.setValue(e),this}setError(e,t){return this.input.setError(e,t),this}getElement(){return this.input.getElement()}appendTo(e){return this.input.appendTo(e),this}}class fe extends h{constructor(e){super("div",[]);const t=document.createElement("div");t.className=e.isLoading?"loading":"",t.style.borderRadius=`0px 0px ${e.styles.borderRadius}px 0px`;const a=document.createElement("div");a.id="card-cvv-element",a.className=`card-element ${e.isFocused?"card-element-focus":""}`,a.style.zIndex=e.isFocused?"2":"0",t.appendChild(a),this.getElement().appendChild(t)}setFocused(e){const t=this.getElement().querySelector("#card-cvv-element");return t&&(e?(t.classList.add("card-element-focus"),t.setAttribute("style","z-index: 2")):(t.classList.remove("card-element-focus"),t.setAttribute("style","z-index: 0"))),this}setLoading(e){const t=this.getElement().querySelector("div");return t&&(e?t.classList.add("loading"):t.classList.remove("loading")),this}}const E=[{type:"visa",imgSrc:"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e"},{type:"masterCard",imgSrc:"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e"},{type:"americanExpress",imgSrc:"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e"},{type:"discover",imgSrc:"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e"}];class ge extends h{cardType;constructor(e){super("div",[]),this.cardType=e.cardType;const t=document.createElement("label");t.setAttribute("for","cardNumber"),t.textContent=e.label,t.style.color=e.styles.color,t.style.fontSize=`${e.styles.fontSize}px`,t.style.display="block",t.style.marginBottom="6px",this.getElement().appendChild(t);const a=document.createElement("div");a.className=e.isLoading?"loading":"",a.style.borderRadius=`${e.styles.borderRadius}px ${e.styles.borderRadius}px 0px 0px`;const i=document.createElement("div");i.id="card-element",i.className=`card-element ${e.isFocused?"card-element-focus":""}`,i.style.zIndex=e.isFocused?"2":"0";const r=document.createElement("div");if(r.className="cards-position",e.cardType==="unknown")E.forEach(o=>{r.appendChild(this.createCardIcon(o))});else{const o=E.find(n=>n.type===e.cardType);o&&r.appendChild(this.createCardIcon(o))}i.appendChild(r),a.appendChild(i),this.getElement().appendChild(a)}createCardIcon(e){const t=document.createElement("div");t.className="card-icon";const a=document.createElement("img");return a.src=e.imgSrc,t.appendChild(a),t}setFocused(e){const t=this.getElement().querySelector("#card-element");return t&&(e?(t.classList.add("card-element-focus"),t.style.zIndex="2"):(t.classList.remove("card-element-focus"),t.style.zIndex="0")),this}setLoading(e){const t=this.getElement().querySelector("div");return t&&(e?t.classList.add("loading"):t.classList.remove("loading")),this}updateCardType(e){if(e===void 0&&this.cardType&&this.cardType!=="unknown")return this;const t=e===void 0?"unknown":e;if(this.cardType===t)return this;this.cardType=t;const a=this.getElement().querySelector(".cards-position");if(a)if(a.innerHTML="",this.cardType==="unknown")E.forEach(i=>{a.appendChild(this.createCardIcon(i))});else{const i=E.find(r=>r.type===this.cardType);i?a.appendChild(this.createCardIcon(i)):E.forEach(r=>{a.appendChild(this.createCardIcon(r))})}return this}}class ye extends h{cardNumber;cardExpiry;cardCvv;validationMessages=new Map;constructor(e){super("div",[]);const{checkoutProfile:t,isLoading:a,isFocused:i,isCvvFocused:r,isCcValid:o,isCvvValid:n,cardType:l,cardExpiry:d,cardExpiryError:c,cardExpiryTouched:m,onChange:f,onBlur:u,translationFunc:g}=e,w=document.createElement("div");w.className="card-grid",this.cardNumber=new ge({styles:{color:t.styles.textColor,fontSize:t.styles.fontSize,borderRadius:t.styles.borderRadius},label:g("cardInformation"),isLoading:a,isFocused:i,cardType:l}),w.appendChild(this.cardNumber.getElement());const F=document.createElement("div");F.className="card-details",this.cardExpiry=new k({name:"cardExpiry",placeholder:g("cardExpiry"),error:!!(c&&m),errorMsg:c,value:d,onChange:f,styles:{color:t.styles.textColor,borderRadius:`0px 0px 0px ${t.styles.borderRadius}px`,fontSize:t.styles.fontSize,fontFamily:t.styles.fontFamily}}),this.cardExpiry.addEventListener("blur",u),this.cardExpiry.addEventListener("keydown",y=>{const T=y;!["Backspace","Delete","ArrowLeft","ArrowRight","Tab"].includes(T.key)&&!/^\d$/.test(T.key)&&T.preventDefault()});const Te=this.cardExpiry.getElement();Te.style.height="100%";const M=document.createElement("div");if(M.className="input-wrapper",this.cardCvv=new fe({styles:{borderRadius:typeof t.styles.borderRadius=="number"?t.styles.borderRadius:0},isLoading:a,isFocused:r}),M.appendChild(this.cardCvv.getElement()),F.appendChild(this.cardExpiry.getElement()),F.appendChild(M),w.appendChild(F),this.getElement().appendChild(w),i&&!o){const y=new x({text:g("validation.cardNumberInvalid")});this.validationMessages.set("cardNumber",y),this.appendChild(y)}if(r&&!n){const y=new x({text:g("validation.cardSecurityFormat")});this.validationMessages.set("cardCvv",y),this.appendChild(y)}}updateCardType(e){return this.cardNumber.updateCardType(e),this}updateCardExpiry(e,t,a){return this.cardExpiry.setValue(e),t&&a?this.cardExpiry.setError(!0,t):this.cardExpiry.setError(!1),this}updateCardNumberValidation(e,t,a){if(this.cardNumber.setFocused(e),e&&!t){if(!this.validationMessages.has("cardNumber")){const i=new x({text:a("validation.cardNumberInvalid")});this.validationMessages.set("cardNumber",i),this.appendChild(i)}}else{const i=this.validationMessages.get("cardNumber");i&&(i.getElement().remove(),this.validationMessages.delete("cardNumber"))}return this}updateCardCvvValidation(e,t,a){if(this.cardCvv.setFocused(e),e&&!t){if(!this.validationMessages.has("cardCvv")){const i=new x({text:a("validation.cardSecurityFormat")});this.validationMessages.set("cardCvv",i),this.appendChild(i)}}else{const i=this.validationMessages.get("cardCvv");i&&(i.getElement().remove(),this.validationMessages.delete("cardCvv"))}return this}setLoading(e){return this.cardNumber.setLoading(e),this.cardCvv.setLoading(e),this}}class ve{input;constructor(e){const{value:t,onChange:a,onBlur:i,error:r,errorMsg:o,checkoutProfile:n,translationFunc:l}=e;this.input=new k({name:"email",label:l("email"),error:r,errorMsg:o,styles:{color:n.styles.textColor,borderRadius:`${n.styles.borderRadius}px`,fontSize:n.styles.fontSize,fontFamily:n.styles.fontFamily},placeholder:l("email"),type:"email",value:t,onChange:a}),this.input.addEventListener("blur",i)}getValue(){return this.input.getValue()}setValue(e){return this.input.setValue(e),this}setError(e,t){return this.input.setError(e,t),this}getElement(){return this.input.getElement()}appendTo(e){return this.input.appendTo(e),this}}const be="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='101px'%20height='32'%20viewBox='0%200%20101%2032'%20preserveAspectRatio='xMinYMin%20meet'%3e%3cpath%20fill='%23003087'%20d='M%2012.237%202.8%20L%204.437%202.8%20C%203.937%202.8%203.437%203.2%203.337%203.7%20L%200.237%2023.7%20C%200.137%2024.1%200.437%2024.4%200.837%2024.4%20L%204.537%2024.4%20C%205.037%2024.4%205.537%2024%205.637%2023.5%20L%206.437%2018.1%20C%206.537%2017.6%206.937%2017.2%207.537%2017.2%20L%2010.037%2017.2%20C%2015.137%2017.2%2018.137%2014.7%2018.937%209.8%20C%2019.237%207.7%2018.937%206%2017.937%204.8%20C%2016.837%203.5%2014.837%202.8%2012.237%202.8%20Z%20M%2013.137%2010.1%20C%2012.737%2012.9%2010.537%2012.9%208.537%2012.9%20L%207.337%2012.9%20L%208.137%207.7%20C%208.137%207.4%208.437%207.2%208.737%207.2%20L%209.237%207.2%20C%2010.637%207.2%2011.937%207.2%2012.637%208%20C%2013.137%208.4%2013.337%209.1%2013.137%2010.1%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2035.437%2010%20L%2031.737%2010%20C%2031.437%2010%2031.137%2010.2%2031.137%2010.5%20L%2030.937%2011.5%20L%2030.637%2011.1%20C%2029.837%209.9%2028.037%209.5%2026.237%209.5%20C%2022.137%209.5%2018.637%2012.6%2017.937%2017%20C%2017.537%2019.2%2018.037%2021.3%2019.337%2022.7%20C%2020.437%2024%2022.137%2024.6%2024.037%2024.6%20C%2027.337%2024.6%2029.237%2022.5%2029.237%2022.5%20L%2029.037%2023.5%20C%2028.937%2023.9%2029.237%2024.3%2029.637%2024.3%20L%2033.037%2024.3%20C%2033.537%2024.3%2034.037%2023.9%2034.137%2023.4%20L%2036.137%2010.6%20C%2036.237%2010.4%2035.837%2010%2035.437%2010%20Z%20M%2030.337%2017.2%20C%2029.937%2019.3%2028.337%2020.8%2026.137%2020.8%20C%2025.037%2020.8%2024.237%2020.5%2023.637%2019.8%20C%2023.037%2019.1%2022.837%2018.2%2023.037%2017.2%20C%2023.337%2015.1%2025.137%2013.6%2027.237%2013.6%20C%2028.337%2013.6%2029.137%2014%2029.737%2014.6%20C%2030.237%2015.3%2030.437%2016.2%2030.337%2017.2%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2055.337%2010%20L%2051.637%2010%20C%2051.237%2010%2050.937%2010.2%2050.737%2010.5%20L%2045.537%2018.1%20L%2043.337%2010.8%20C%2043.237%2010.3%2042.737%2010%2042.337%2010%20L%2038.637%2010%20C%2038.237%2010%2037.837%2010.4%2038.037%2010.9%20L%2042.137%2023%20L%2038.237%2028.4%20C%2037.937%2028.8%2038.237%2029.4%2038.737%2029.4%20L%2042.437%2029.4%20C%2042.837%2029.4%2043.137%2029.2%2043.337%2028.9%20L%2055.837%2010.9%20C%2056.137%2010.6%2055.837%2010%2055.337%2010%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2067.737%202.8%20L%2059.937%202.8%20C%2059.437%202.8%2058.937%203.2%2058.837%203.7%20L%2055.737%2023.6%20C%2055.637%2024%2055.937%2024.3%2056.337%2024.3%20L%2060.337%2024.3%20C%2060.737%2024.3%2061.037%2024%2061.037%2023.7%20L%2061.937%2018%20C%2062.037%2017.5%2062.437%2017.1%2063.037%2017.1%20L%2065.537%2017.1%20C%2070.637%2017.1%2073.637%2014.6%2074.437%209.7%20C%2074.737%207.6%2074.437%205.9%2073.437%204.7%20C%2072.237%203.5%2070.337%202.8%2067.737%202.8%20Z%20M%2068.637%2010.1%20C%2068.237%2012.9%2066.037%2012.9%2064.037%2012.9%20L%2062.837%2012.9%20L%2063.637%207.7%20C%2063.637%207.4%2063.937%207.2%2064.237%207.2%20L%2064.737%207.2%20C%2066.137%207.2%2067.437%207.2%2068.137%208%20C%2068.637%208.4%2068.737%209.1%2068.637%2010.1%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2090.937%2010%20L%2087.237%2010%20C%2086.937%2010%2086.637%2010.2%2086.637%2010.5%20L%2086.437%2011.5%20L%2086.137%2011.1%20C%2085.337%209.9%2083.537%209.5%2081.737%209.5%20C%2077.637%209.5%2074.137%2012.6%2073.437%2017%20C%2073.037%2019.2%2073.537%2021.3%2074.837%2022.7%20C%2075.937%2024%2077.637%2024.6%2079.537%2024.6%20C%2082.837%2024.6%2084.737%2022.5%2084.737%2022.5%20L%2084.537%2023.5%20C%2084.437%2023.9%2084.737%2024.3%2085.137%2024.3%20L%2088.537%2024.3%20C%2089.037%2024.3%2089.537%2023.9%2089.637%2023.4%20L%2091.637%2010.6%20C%2091.637%2010.4%2091.337%2010%2090.937%2010%20Z%20M%2085.737%2017.2%20C%2085.337%2019.3%2083.737%2020.8%2081.537%2020.8%20C%2080.437%2020.8%2079.637%2020.5%2079.037%2019.8%20C%2078.437%2019.1%2078.237%2018.2%2078.437%2017.2%20C%2078.737%2015.1%2080.537%2013.6%2082.637%2013.6%20C%2083.737%2013.6%2084.537%2014%2085.137%2014.6%20C%2085.737%2015.3%2085.937%2016.2%2085.737%2017.2%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2095.337%203.3%20L%2092.137%2023.6%20C%2092.037%2024%2092.337%2024.3%2092.737%2024.3%20L%2095.937%2024.3%20C%2096.437%2024.3%2096.937%2023.9%2097.037%2023.4%20L%20100.237%203.5%20C%20100.337%203.1%20100.037%202.8%2099.637%202.8%20L%2096.037%202.8%20C%2095.637%202.8%2095.437%203%2095.337%203.3%20Z'/%3e%3c/svg%3e";class xe extends h{formData;onSubmit;isSubmitting=!1;constructor(e){super("div",["paypal"]);const{formData:t,onSubmit:a}=e;this.formData=t,this.onSubmit=a,this.getElement().style.cursor=a?"pointer":"default",this.getElement().style.opacity="1";const i=document.createElement("div");i.className="paypal-icon-container";const r=document.createElement("img");r.src=be,r.style.width="69px",r.style.height="22px",r.style.maxWidth="100%",r.style.display="block",r.style.height="auto",i.appendChild(r),this.getElement().appendChild(i),a&&this.getElement().addEventListener("click",()=>this.handleSubmit())}async handleSubmit(){if(!(!this.onSubmit||this.isSubmitting)){this.isSubmitting=!0,this.getElement().style.opacity="0.7";try{await this.onSubmit({formData:this.formData})}catch(e){console.error("Error during PayPal submission:",e)}finally{this.isSubmitting=!1,this.getElement().style.opacity="1"}}}updateFormData(e){return this.formData=e,this}setSubmitting(e){return this.isSubmitting=e,this.getElement().style.opacity=e?"0.7":"1",this}}class Ee extends h{paymentMethods=new Map;constructor(e){const{checkoutProfile:t,formData:a,onPaypalSubmit:i}=e;if(!t?.additionalPaymentMethods){super("div",["payment-methods"]),this.getElement().style.display="none";return}const r=Object.entries(t.additionalPaymentMethods).filter(([,o])=>o.enabled).sort((o,n)=>o[1].order-n[1].order);if(r.length===0){super("div",["payment-methods"]),this.getElement().style.display="none";return}super("div",["payment-methods"]);for(const[o]of r)switch(o){case"paypal":{if(i){const n=new xe({checkoutProfile:t,formData:a,onSubmit:i});this.paymentMethods.set("paypal",n),n.appendTo(this.getElement())}break}}}updateFormData(e){const t=this.paymentMethods.get("paypal");return t&&t.updateFormData(e),this}hasVisiblePaymentMethods(){return this.paymentMethods.size>0&&this.getElement().style.display!=="none"}}const Ce=17;class Se extends h{styles;isHovered=!1;constructor(e){super("button",["button"],{type:"submit",disabled:e.disabled?"true":"false"}),this.styles=e.styles,this.setText(e.text),e.disabled?this.addClass("disabled"):this.addClass("valid"),this.applyStyles(),this.addEventListener("mouseenter",()=>this.handleMouseEnter()),this.addEventListener("mouseleave",()=>this.handleMouseLeave())}applyStyles(){const e=this.getElement();e.style.backgroundColor=this.isHovered?`color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)`:this.styles.backgroundColor,e.disabled?e.style.color="#cccccc":e.style.color=this.styles.color,e.style.borderRadius=this.styles.borderRadius===Ce?"100vmax":`${this.styles.borderRadius}px`,e.style.fontSize=`${this.styles.fontSize}px`,e.style.fontFamily=`${this.styles.fontFamily}, sans-serif`}handleMouseEnter(){this.isHovered=!0,this.applyStyles()}handleMouseLeave(){this.isHovered=!1,this.applyStyles()}setDisabled(e){return this.getElement().disabled=e,e?(this.addClass("disabled"),this.removeClass("valid")):(this.removeClass("disabled"),this.addClass("valid")),this.applyStyles(),this}}class we{button;constructor(e){const{disabled:t,checkoutProfile:a,translationFunc:i}=e;this.button=new Se({text:i(`buttonTexts.${a?.layout.actionButton.translationKey}`),styles:{backgroundColor:a.styles.buttonColor,color:a.styles.buttonTextColor,fontFamily:a.styles.fontFamily,borderRadius:a.styles.borderRadius,fontSize:a.styles.buttonFontSize},disabled:t})}getElement(){return this.button.getElement()}setDisabled(e){return this.button.setDisabled(e),this}addEventListener(e,t,a){return this.button.addEventListener(e,t,a),this}appendTo(e){return this.button.appendTo(e),this}}const Fe="https://test-htp.tokenex.com/Iframe/Iframe-v3.min.js";class Le extends h{options;isSubmitting=!1;scriptCleanup;fontCleanup;emailField;cardSection;cardholderSection;submitButton;paymentMethods;spinner;alert;formManager=ee();checkoutProfile;translation=L();iframeHook;constructor(e){super("form",["form-container"]),this.options=e,this.checkoutProfile=Y({apiKey:e.apiKey,profileId:e.profileId}),e.locale&&this.translation.setLocale(e.locale),this.getElement().style.opacity="0",this.getElement().style.transition="opacity 0.5s ease-in-out",this.getElement().addEventListener("submit",this.handleSubmit),this.getElement().addEventListener("keydown",this.handleKeyDown),this.formManager.subscribe(this.handleFormStateChange),this.checkoutProfile.subscribe(this.handleProfileStateChange),this.initializeForm(),this.appendTo(e.container)}_getFormStateData(){const e=this.formManager.getFormState();return{formData:e.formData||{email:"",name:"",cardExpiry:""},errors:e.errors||{},touched:e.touched||{}}}handleFormStateChange=()=>{this.updateFormUI()};handleProfileStateChange=e=>{if(!e.isLoading)if(this.hideSpinner(),e.checkoutProfile)try{if(e.checkoutProfile.styles?.fontFamily){const{cleanup:t}=le({fontFamily:e.checkoutProfile.styles.fontFamily});this.fontCleanup=t}this.initializeTokenExIframe()}catch{const t=e.error||"Failed to load checkout profile data";this.setErrorMessage(t)}else e.error&&this.setErrorMessage(e.error)};applyFormContainerStyles(e){e.fontFamily&&(this.getElement().style.fontFamily=e.fontFamily)}initializeTokenExIframe=()=>{const e=this.checkoutProfile.getState();if(e.checkoutProfile&&!this.iframeHook)try{if(!("TokenEx"in globalThis)){setTimeout(()=>this.initializeTokenExIframe(),500);return}const{inputStyles:t,formContainerStyle:a}=de(e.checkoutProfile);this.applyFormContainerStyles(a),this.iframeHook=ie({apiKey:this.options.apiKey,checkoutProfile:e.checkoutProfile,inputStyles:t,setFormData:i=>{this.formManager.setFormData(i)}}),this.iframeHook?.subscribe(this.handleIframeStateChange),this.renderFormComponents()}catch{this.setErrorMessage("Failed to initialize payment form")}else e.checkoutProfile?this.iframeHook&&console.log("TokenEx iframe already initialized"):console.error("Cannot initialize iframe: No checkout profile available")};handleIframeStateChange=e=>{this.cardSection&&(this.cardSection.updateCardNumberValidation(e.isFocused,e.isCcValid,this.translation.t),this.cardSection.updateCardCvvValidation(e.isCvvFocused,e.isCvvValid,this.translation.t),this.cardSection.updateCardType(e.possibleCardType),this.cardSection.setLoading(e.loadingIframe)),this.submitButton&&this.submitButton.setDisabled(this.isFormDisabled())};createCardSection=e=>{if(this.iframeHook&&!this.cardSection)try{const{formData:t,errors:a,touched:i}=this._getFormStateData(),r=this.iframeHook.getState();this.cardSection=new ye({checkoutProfile:e,isLoading:r.loadingIframe,isFocused:r.isFocused,isCvvFocused:r.isCvvFocused,isCcValid:r.isCcValid,isCvvValid:r.isCvvValid,cardType:r.possibleCardType,cardExpiry:t.cardExpiry,cardExpiryError:a.cardExpiry,cardExpiryTouched:!!i.cardExpiry,onChange:this.handleChange,onBlur:this.handleBlur,translationFunc:this.translation.t}),this.element.appendChild(this.cardSection.getElement()),this.updateFormUI(),this.cardSection&&this.emailField&&this.cardholderSection&&this.submitButton&&this.animateFormVisibility()}catch{this.setErrorMessage("Card section temporarily unavailabl")}};initializeForm(){this.showSpinner("Loading checkout form..."),this.options.errorMsg&&this.setErrorMessage(this.options.errorMsg);const{cleanup:e,isLoaded:t}=ce({scriptSrc:Fe});this.scriptCleanup=e,t.then(()=>{}).catch(()=>{this.setErrorMessage("Failed to load payment system. Please try again later.")})}renderFormComponents(){if(!this.emailField)try{const e=this.checkoutProfile.getState();if(!e.checkoutProfile){this.setErrorMessage("Failed to load checkout configuration");return}this.createPaymentMethods(e.checkoutProfile),this.createEmailField(e.checkoutProfile),this.createCardSection(e.checkoutProfile),this.createCardholderSection(e.checkoutProfile),this.createSubmitButton(e.checkoutProfile),this.animateFormVisibility()}catch{this.setErrorMessage("Failed to render checkout form components")}}animateFormVisibility(){setTimeout(()=>{this.getElement().style.opacity="1"},100)}createPaymentMethods(e){if(!e?.additionalPaymentMethods||Object.entries(e.additionalPaymentMethods).filter(([,i])=>i.enabled).length===0)return;const{formData:a}=this._getFormStateData();this.paymentMethods=new Ee({checkoutProfile:e,formData:a,onPaypalSubmit:async()=>{await this.handlePaypalSubmit()}}),this.appendChild(this.paymentMethods)}createEmailField(e){const{formData:t,errors:a,touched:i}=this._getFormStateData();this.emailField=new ve({value:t.email,onChange:this.handleChange,onBlur:this.handleBlur,error:!!(a.email&&i.email),errorMsg:a.email,checkoutProfile:e,translationFunc:this.translation.t}),this.element.appendChild(this.emailField.getElement())}createCardholderSection(e){const{formData:t,errors:a,touched:i}=this._getFormStateData();this.cardholderSection=new pe({value:t.name,onChange:this.handleChange,onBlur:this.handleBlur,error:!!(a.name&&i.name),errorMsg:a.name,checkoutProfile:e,translationFunc:this.translation.t}),this.element.appendChild(this.cardholderSection.getElement())}createSubmitButton(e){this.submitButton=new we({disabled:this.isFormDisabled(),checkoutProfile:e,translationFunc:this.translation.t}),this.element.appendChild(this.submitButton.getElement())}handleChange=e=>{const t=e.target,{name:a,value:i}=t;this.formManager.handleChange(a,i)};handleBlur=e=>{const t=e.target,{name:a,value:i}=t;this.formManager.handleBlur(a,i)};updateFormUI(){const e=this.formManager.getFormState();this.checkoutProfile.getState().checkoutProfile&&(this.paymentMethods&&this.paymentMethods.updateFormData(e.formData),this.emailField&&(this.emailField.setValue(e.formData.email),this.emailField.setError(!!(e.errors.email&&e.touched.email),e.errors.email)),this.cardSection&&this.cardSection.updateCardExpiry(e.formData.cardExpiry,e.errors.cardExpiry,!!e.touched.cardExpiry),this.cardholderSection&&(this.cardholderSection.setValue(e.formData.name),this.cardholderSection.setError(!!(e.errors.name&&e.touched.name),e.errors.name)),this.submitButton&&this.submitButton.setDisabled(this.isFormDisabled()))}isFormDisabled(){const e=this.formManager.getFormState();let t={isCcValid:!1,isCvvValid:!1};this.iframeHook&&(t=this.iframeHook.getState());const a=Object.keys(e.errors).length>0,i=(!this.cardSection||t.isCcValid&&t.isCvvValid)&&!!e.formData.email&&!!e.formData.name&&(!this.cardSection||!!e.formData.cardExpiry);return a||!i||this.isSubmitting}showSpinner(e){this.hideSpinner(),this.spinner=new me({text:e}),this.appendChild(this.spinner)}hideSpinner(){this.spinner&&(this.spinner.getElement().remove(),this.spinner=void 0)}handleSubmit=async e=>{if(e.preventDefault(),!this.isFormDisabled())try{if(!this.iframeHook)throw new Error("TokenEx iframe not initialized");this.isSubmitting=!0,this.updateFormUI(),this.showSpinner(this.translation.t("loading")),await this.iframeHook.tokenize(async t=>{try{await this.options.onSubmit({formData:this.formManager.getFormState().formData,tokenexData:t}),this.hideSpinner(),this.isSubmitting=!1,this.updateFormUI()}catch{this.handleSubmitError("Payment processing failed. Please try again.")}})}catch{this.handleSubmitError("Payment processing failed. Please try again.")}};handleSubmitError(e){this.hideSpinner(),this.isSubmitting=!1,this.setErrorMessage(e),this.updateFormUI()}handlePaypalSubmit=async()=>{this.isSubmitting=!0,this.updateFormUI(),this.showSpinner(this.translation.t("loading"));try{await this.options.onSubmit({formData:null,tokenexData:null}),this.hideSpinner(),this.isSubmitting=!1,this.updateFormUI()}catch{this.setErrorMessage("PayPal processing failed. Please try again.")}finally{this.hideSpinner(),this.isSubmitting=!1,this.updateFormUI()}};setErrorMessage(e){return this.alert&&(this.alert.getElement().remove(),this.alert=void 0),this.alert=new he({message:e}),this.element.insertBefore(this.alert.getElement(),this.element.firstChild),this.getElement().style.opacity==="0"&&this.animateFormVisibility(),this}destroy(){this.scriptCleanup&&(this.scriptCleanup(),this.scriptCleanup=void 0),this.fontCleanup&&(this.fontCleanup(),this.fontCleanup=void 0),this.iframeHook&&this.iframeHook.cleanup(),this.getElement().removeEventListener("submit",this.handleSubmit),this.getElement().removeEventListener("keydown",this.handleKeyDown),this.getElement().removeEventListener("keydown",this.handleKeyDown),this.emailField&&(this.emailField.getElement().remove(),this.emailField=void 0),this.cardSection&&(this.cardSection.getElement().remove(),this.cardSection=void 0),this.cardholderSection&&(this.cardholderSection.getElement().remove(),this.cardholderSection=void 0),this.submitButton&&(this.submitButton.getElement().remove(),this.submitButton=void 0),this.paymentMethods&&(this.paymentMethods.getElement().remove(),this.paymentMethods=void 0),this.spinner&&(this.spinner.getElement().remove(),this.spinner=void 0),this.alert&&(this.alert.getElement().remove(),this.alert=void 0),this.getElement().remove()}handleKeyDown=e=>{e.key==="Enter"&&!this.isFormDisabled()&&(e.target instanceof HTMLTextAreaElement||(e.preventDefault(),this.handleSubmit(e)))}}class ke{container=null;options;onSubmit;form=null;constructor(e,t){this.options=e,this.onSubmit=t}mount(e){this.unmount(),this.container=e,this.renderForm()}update(e){this.container&&this.form&&(this.form&&e.errorMsg&&!this.options.disableErrorMessages?this.form.setErrorMessage(e.errorMsg):this.renderForm(e.errorMsg))}renderForm(e){this.container&&(this.form&&(this.form.destroy(),this.form=null),this.form=new Le({apiKey:this.options.apiKey,onSubmit:this.onSubmit,locale:this.options.locale,errorMsg:this.options.disableErrorMessages?void 0:e,profileId:this.options.profileId,container:this.container}))}unmount(){this.form&&(this.form.destroy(),this.form=null)}}class Me{state;listeners=new Set;constructor(e){this.state=e}getState(){return{...this.state}}updateState(e){this.state={...this.state,...e},this.notifyListeners()}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notifyListeners(){const e=this.getState();this.listeners.forEach(t=>t(e))}}class O{config;apiService;formManager;stateManager;constructor(e){this.config=this.validateConfig(e),this.apiService=new j(this.config.apiKey),this.stateManager=new Me({mounted:!1,form:null}),this.formManager=new ke({locale:this.config.locale,apiKey:this.config.apiKey,profileId:this.config.profileId,disableErrorMessages:this.config.disableErrorMessages},this.handleSubmit.bind(this))}validateConfig(e){if(!e.apiKey)throw new Error("API key is required");return{profileId:e.profileId,apiKey:e.apiKey,checkoutKey:e.checkoutKey,paymentId:e.paymentId,returnUrl:e.returnUrl,locale:e.locale||null,disableErrorMessages:e.disableErrorMessages??!1,manualActionHandling:e.manualActionHandling??!1,callbacks:{onPaymentSucceeded:e.callbacks?.onPaymentSucceeded||void 0,onPaymentFailed:e.callbacks?.onPaymentFailed||void 0,onActionRequired:e.callbacks?.onActionRequired||void 0}}}mount(e){const t=document.querySelector(e);if(!t)throw new Error(`Container ${e} not found`);const a=document.createElement("div");return t.appendChild(a),this.stateManager.updateState({form:a,mounted:!0}),this.formManager.mount(a),this}unmount(){const{mounted:e}=this.stateManager.getState();e&&Promise.resolve().then(()=>{this.formManager.unmount();const{form:t}=this.stateManager.getState();t&&t.remove(),this.stateManager.updateState({form:null,mounted:!1})})}async handleSubmit({tokenexData:e,formData:t}){try{const a=await this.apiService.authorizePayment({checkoutKey:this.config.checkoutKey,formData:t||null,token:e?.token||null,paymentId:this.config.paymentId,returnUrl:this.config.returnUrl});this.handlePaymentResponse(a)}catch(a){this.handleAuthorizationError(a)}}handlePaymentResponse(e){if(e.latestTransaction.status==="authorized"&&this.config.callbacks.onPaymentSucceeded?.(e.latestTransaction.status),e.latestTransaction.status==="failed"&&this.config.callbacks.onPaymentFailed?.(e.latestTransaction.status),e.status==="requires_action"){const{redirectUrl:t}=e.action;this.config.manualActionHandling?this.config.callbacks.onActionRequired?.(t):globalThis.location.href=t}}handleAuthorizationError(e){this.config.callbacks.onPaymentFailed?.(e.details?.message);const{form:t}=this.stateManager.getState();t&&this.formManager.update({errorMsg:e.details?.message})}}typeof globalThis<"u"&&(globalThis.OdusCheckout=O),p.OdusCheckout=O,p.deLocale=z,p.enLocale=N,p.esLocale=P,p.frLocale=D,p.plLocale=A,p.ptLocale=V,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
|
19
|
+
//# sourceMappingURL=checkout.js.map
|