@mygigsters/card-sdk 1.0.0

package/README.md

@@ -0,0 +1,613 @@
+# @mygigsters/card-sdk
+
+> Embed a secure, single-step card saving form into any web application — powered by Airwallex Payment Elements.
+
+[![npm version](https://img.shields.io/npm/v/@mygigsters/card-sdk)](https://www.npmjs.com/package/@mygigsters/card-sdk)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Features](#features)
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Get Client Info (API)](#get-client-info-api)
+- [Quick Start](#quick-start)
+- [Module Formats](#module-formats)
+- [Usage Examples](#usage-examples)
+  - [ES Modules (Recommended)](#es-modules-recommended)
+  - [CommonJS](#commonjs)
+  - [CDN / Browser Script Tag](#cdn--browser-script-tag)
+  - [React (useEffect)](#react-useeffect)
+- [Configuration Reference](#configuration-reference)
+- [API Reference](#api-reference)
+  - [init(config)](#initconfig)
+  - [show()](#show)
+  - [hide()](#hide)
+  - [setTheme(mode)](#setthememode)
+  - [destroy()](#destroy)
+  - [getInstance()](#getinstance-cdn-only)
+- [Success Response](#success-response)
+- [Callback Reference](#callback-reference)
+- [Environments](#environments)
+- [Theming](#theming)
+- [Error Handling](#error-handling)
+- [Security](#security)
+- [TypeScript](#typescript)
+- [Troubleshooting](#troubleshooting)
+- [Changelog](#changelog)
+
+---
+
+## Overview
+
+The **MyGigsters Card SDK** renders a secure, self-contained modal that lets your customers save their payment card in a single step. The SDK:
+
+- Authenticates with the MyGigsters backend using your API credentials.
+- Embeds an **Airwallex Payment Element** inside a **closed Shadow DOM** — your host page styles never leak in and vice versa.
+- Returns a `paymentConsentId` on success — no raw card data ever touches your server.
+
+---
+
+## Features
+
+- **Airwallex-powered card tokenization** — PCI-compliant card element embedded in an isolated iframe.
+- **Shadow DOM isolation** — No CSS conflicts with your app.
+- **Light & Dark themes** — Toggle at init time or at runtime.
+- **Zero React dependency** — Works in any JavaScript app (React, Vue, Angular, plain HTML).
+- **Multiple module formats** — ESM, CJS, CDN (UMD).
+- **TypeScript** — Full type definitions included (`dist/index.d.ts`).
+- **Webhook support** — Optionally POST the success payload to your own endpoint.
+
+---
+
+## Requirements
+
+| Requirement | Version |
+|-------------|---------|
+| Browser | Chrome 80+, Firefox 78+, Safari 14+, Edge 80+ |
+| Node.js (build/dev only) | ≥ 14.0.0 |
+| React (optional) | ≥ 18.0.0 |
+
+> **Note:** The SDK must be served over **HTTPS** (or `localhost` for development). Airwallex payment elements require a secure context.
+
+---
+
+## Installation
+
+```bash
+# npm
+npm install @mygigsters/card-sdk
+
+# yarn
+yarn add @mygigsters/card-sdk
+
+# pnpm
+pnpm add @mygigsters/card-sdk
+```
+
+---
+
+## Get Client Info (API)
+
+Before initializing the Card SDK, you need your **`myGigsterId`** and the customer's **`customerId`**. Call the `GET /api/v1/client/me` endpoint using your API credentials (HTTP Basic Auth `uuid:randomPasswordShowOnce`) to retrieve your client account profile and `myGigsterId`. Obtain the `customerId` by creating a customer via `POST /api/v1/customer`.
+
+### Endpoint
+
+```http
+GET /api/v1/client/me
+```
+
+| Environment | URL |
+|-------------|-----|
+| Local Development | `http://localhost:5000/api/v1/client/me` |
+| Demo / QA | `https://qa-payments.mygigsters.com.au/api/v1/client/me` |
+| Production | `https://prod-payments.mygigsters.com.au/api/v1/client/me` |
+
+### Headers
+
+```http
+Content-Type: application/json
+x-api-version: 1.2
+Authorization: Basic {base64_encoded_combination of uuid:randomPasswordShowOnce}
+```
+
+### Example Request
+
+```bash
+curl --location 'https://qa-payments.mygigsters.com.au/api/v1/client/me' \
+  --header 'Content-Type: application/json' \
+  --header 'x-api-version: 1.2' \
+  --header 'Authorization: Basic MGI3YjFiMTctOTJhZC00Yjc4LWFhN2ItNjI2ODBhOWUzOGExOkt1aFNEa3NCVmFXQFNPQyhZQCFh'
+```
+
+### Example Response (200 OK)
+
+```json
+{
+  "success": true,
+  "status": 200,
+  "data": {
+    "id": 1,
+    "myGigsterId": "4407c3ba-10c9-4822-9f51-c2c96692f8d7",
+    "fullName": "Nitesh ",
+    "email": "nitesh@megamindcreations.com",
+    "businessName": "MG Nitesh Agrwal Deswal",
+    "address": null,
+    "acn": "123456789",
+    "phone": "9876543210"
+  }
+}
+```
+
+### Response Fields for Card SDK
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `data.myGigsterId` | `string` | **Required by SDK:** Your unique MyGigsters client account identifier. Pass as `myGigsterId` in `init()`. |
+| `data.fullName` | `string` | Registered full name of the client. |
+| `data.email` | `string` | Registered contact email address. |
+| `data.businessName` | `string` | Registered business or entity name. |
+| `data.phone` | `string` | Contact phone number. |
+| `data.acn` | `string` | Australian Company Number (if applicable). |
+
+---
+
+## Quick Start
+
+**1. Add a container element in your HTML:**
+
+```html
+<div id="mygigsters-card"></div>
+```
+
+**2. Initialize the SDK:**
+
+```javascript
+import { MygigstersCardSDK } from '@mygigsters/card-sdk';
+
+const sdk = new MygigstersCardSDK();
+
+await sdk.init({
+  apiKey:      'your_api_key',
+  apiSecret:   'your_api_secret',
+  customerId:  'cus_hkdmcdjshhknkk4lc2t',
+  myGigsterId: '4407c3ba-10c9-4822-9f51-c2c96692f8d7',
+  containerId: 'mygigsters-card',
+  env:         'demo',
+  onSuccess: (res) => console.log('Card saved! Consent ID:', res.paymentConsentId),
+  onError:   (err) => console.error('Error:', err.message),
+  onClose:   ()    => console.log('Modal closed'),
+});
+```
+
+The card modal opens automatically after `init()` resolves.
+
+---
+
+## Module Formats
+
+| Format | Path | Use Case |
+|--------|------|----------|
+| **ESM** | `dist/index.esm.js` | Modern bundlers (Vite, Webpack 5, Rollup) |
+| **CommonJS** | `dist/index.cjs.js` | Node.js / `require()` environments |
+| **CDN (UMD)** | `cdn/card-sdk-entry.js` | Browser `<script>` tag / self-hosted CDN |
+| **TypeScript** | `dist/index.d.ts` | Type definitions |
+
+---
+
+## Usage Examples
+
+### ES Modules (Recommended)
+
+```javascript
+import { MygigstersCardSDK } from '@mygigsters/card-sdk';
+
+const sdk = new MygigstersCardSDK();
+
+await sdk.init({
+  apiKey:      'your_api_key',
+  apiSecret:   'your_api_secret',
+  customerId:  'cus_hkdmcdjshhknkk4lc2t',
+  myGigsterId: '4407c3ba-10c9-4822-9f51-c2c96692f8d7',
+  containerId: 'mygigsters-card',
+  env:         'demo',           // 'demo' | 'prod'
+  mode:        'dark',           // optional: 'dark' (default) | 'light'
+  onSuccess: (res) => {
+    console.log('✅ Card saved:', res.paymentConsentId);
+    // Pass res.paymentConsentId to the MyGigsters API to charge the customer
+  },
+  onError: (err) => {
+    console.error('❌ Error:', err.message);
+  },
+  onClose: () => {
+    console.log('Modal closed by user');
+  },
+});
+```
+
+---
+
+### CommonJS
+
+```javascript
+const { MygigstersCardSDK } = require('@mygigsters/card-sdk');
+
+const sdk = new MygigstersCardSDK();
+
+sdk.init({
+  apiKey:      'your_api_key',
+  apiSecret:   'your_api_secret',
+  customerId:  'cus_hkdmcdjshhknkk4lc2t',
+  myGigsterId: '4407c3ba-10c9-4822-9f51-c2c96692f8d7',
+  containerId: 'mygigsters-card',
+  onSuccess: (res) => console.log('Card saved:', res.paymentConsentId),
+  onError:   (err) => console.error('Error:', err.message),
+  onClose:   ()    => console.log('Closed'),
+});
+```
+
+---
+
+### CDN / Browser Script Tag
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>My App</title>
+</head>
+<body>
+
+  <!-- 1. Mount target -->
+  <div id="mygigsters-card"></div>
+
+  <!-- 2. Trigger button (optional) -->
+  <button onclick="openCardForm()">Save Card</button>
+
+  <!-- 3. Load the SDK -->
+  <script src="https://qa-payments.mygigsters.com.au/card-sdk-entry.js"></script>
+
+  <script>
+    async function openCardForm() {
+      await MygigstersCard.init({
+        apiKey:      'your_api_key',
+        apiSecret:   'your_api_secret',
+        customerId:  'cus_hkdmcdjshhknkk4lc2t',
+        myGigsterId: '4407c3ba-10c9-4822-9f51-c2c96692f8d7',
+        containerId: 'mygigsters-card',
+        env:         'demo',
+        mode:        'dark',
+        onSuccess: (res) => console.log('✅ Card saved:', res.paymentConsentId),
+        onError:   (err) => console.error('❌ Error:', err.message),
+        onClose:   ()    => console.log('Closed'),
+      });
+    }
+  </script>
+
+</body>
+</html>
+```
+
+> **CDN global:** The CDN build exposes `window.MygigstersCard` (not `MygigstersCardSDK`).
+
+---
+
+### React (useEffect)
+
+```jsx
+import { useEffect } from 'react';
+import { MygigstersCardSDK } from '@mygigsters/card-sdk';
+
+function SaveCardForm({ customerId, myGigsterId }) {
+  useEffect(() => {
+    const sdk = new MygigstersCardSDK();
+    sdk.init({
+      apiKey:      'your_api_key',
+      apiSecret:   'your_api_secret',
+      customerId,
+      myGigsterId,
+      containerId: 'mygigsters-card',
+      env:         'demo',
+      mode:        'dark',
+      onSuccess: (res) => console.log('Card saved!', res.paymentConsentId),
+      onError:   (err) => console.error(err),
+      onClose:   ()    => console.log('Closed'),
+    });
+
+    // Cleanup on unmount
+    return () => sdk.destroy();
+  }, [customerId, myGigsterId]);
+
+  return <div id="mygigsters-card" />;
+}
+```
+
+---
+
+## Configuration Reference
+
+Pass these options to `init()`:
+
+| Parameter | Type | Required | Default | Description |
+|-----------|------|:--------:|---------|-------------|
+| `apiKey` | `string` | ✅ | — | UUID-style API key issued by MyGigsters |
+| `apiSecret` | `string` | ✅ | — | One-time API secret (shown once at creation) |
+| `customerId` | `string` | ✅ | — | MyGigsters customer ID for whom the card is saved (from `POST /api/v1/customer`) |
+| `myGigsterId` | `string` | ✅ | — | Unique client account identifier (from `GET /api/v1/client/me`) |
+| `containerId` | `string` | ✅ | — | `id` of the DOM element to mount the SDK into |
+| `env` | `'demo' \| 'prod'` | ❌ | `'demo'` | Target environment |
+| `baseUrl` | `string` | ❌ | — | Custom base URL override (for self-hosted deployments) |
+| `mode` | `'light' \| 'dark'` | ❌ | `'dark'` | UI color theme |
+| `onSuccess` | `(res) => void` | ❌ | no-op | Fired after the card is saved successfully |
+| `onError` | `(error) => void` | ❌ | `console.error` | Fired on any SDK or network error |
+| `onClose` | `() => void` | ❌ | no-op | Fired when the user closes the modal |
+| `webhookUrl` | `string` | ❌ | — | URL to POST the success payload to automatically |
+| `onWebhook` | `(payload) => void` | ❌ | no-op | JS callback for receiving the webhook payload in real-time |
+
+---
+
+## API Reference
+
+### `init(config)`
+
+Authenticates with the MyGigsters backend, builds the Shadow DOM modal, initializes the Airwallex card element, and automatically calls `show()`.
+
+```javascript
+import { MygigstersCardSDK } from '@mygigsters/card-sdk';
+
+const sdk = new MygigstersCardSDK();
+await sdk.init(config);
+
+// or, via CDN:
+await MygigstersCard.init(config);
+```
+
+- **Returns:** `Promise<void>`
+- **Throws:** if `apiKey`, `apiSecret`, `customerId`, `myGigsterId`, or `containerId` are missing; if the container element is not found; or if authentication fails.
+- Each SDK instance maintains its own internal state.
+- CDN builds expose a singleton instance automatically.
+
+---
+
+### `show()`
+
+Shows the card modal. Called automatically by `init()`, but can be called again after `hide()`.
+
+```javascript
+sdk.show();
+```
+
+Throws `Error: SDK not initialized. Call init() first.` if called before `init()`.
+
+---
+
+### `hide()`
+
+Hides the modal without destroying the SDK instance. The Airwallex card element state is preserved.
+
+```javascript
+sdk.hide();
+```
+
+---
+
+### `setTheme(mode)`
+
+Switch the UI theme at runtime — no need to re-initialize.
+
+```javascript
+sdk.setTheme('dark');  // or 'light'
+```
+
+```javascript
+// Example: sync with OS preference
+const mq = window.matchMedia('(prefers-color-scheme: dark)');
+mq.addEventListener('change', (e) => {
+  sdk.setTheme(e.matches ? 'dark' : 'light');
+});
+```
+
+---
+
+### `destroy()`
+
+Removes the modal from the DOM and resets all internal state. Call this when navigating away or unmounting the host component.
+
+```javascript
+sdk.destroy();
+```
+
+---
+
+### `getInstance()` *(CDN only)*
+
+Returns the underlying SDK instance for advanced use.
+
+```javascript
+const sdk = MygigstersCard.getInstance();
+```
+
+---
+
+## Success Response
+
+The `onSuccess` callback receives a `CardSuccessResponse` object:
+
+```javascript
+onSuccess: (res) => {
+  // res.paymentConsentId  — Airwallex payment consent ID
+  //                         Pass this to the MyGigsters API when creating a charge
+  // res.customerId        — Customer ID associated with this consent
+  // res.myGigsterId       — MyGigster ID associated with this consent
+  // res.timestamp         — ISO-8601 timestamp of the save event
+  // res.event             — 'card.saved'
+
+  console.log('Payment Consent ID:', res.paymentConsentId);
+}
+```
+
+---
+
+## Callback Reference
+
+### `onSuccess(res)`
+
+Called after the card is saved and the Airwallex element confirms the payment consent.
+
+```javascript
+onSuccess: (res) => {
+  // res.paymentConsentId → use to charge the customer via Payment Intents API
+  console.log('Saved!', res);
+}
+```
+
+### `onError(error)`
+
+Called when any error occurs — authentication failures, Airwallex element errors, or server rejections.
+
+```javascript
+onError: (error) => {
+  // error is a standard JS Error object
+  console.error(error.message);
+}
+```
+
+### `onClose()`
+
+Called when the user dismisses the modal (close button ×, backdrop click, or Escape key).
+
+```javascript
+onClose: () => {
+  // Re-show a trigger button, update UI state, etc.
+}
+```
+
+---
+
+## Environments
+
+| Environment | SDK Script URL | `env` Value |
+|-------------|----------------|-------------|
+| Demo / QA | `https://qa-payments.mygigsters.com.au/card-sdk-entry.js` | `"demo"` |
+| Production | `https://prod-payments.mygigsters.com.au/card-sdk-entry.js` | `"prod"` |
+
+---
+
+## Theming
+
+Set `mode: 'light'` or `mode: 'dark'` in the config object (defaults to `'dark'`).
+
+You can also switch themes after initialization using [`setTheme()`](#setthememode).
+
+```javascript
+// Toggle dark mode on a button click
+const sdk = new MygigstersCardSDK();
+
+document.getElementById('toggle-theme').addEventListener('click', () => {
+  sdk.setTheme(
+    document.body.classList.toggle('dark') ? 'dark' : 'light'
+  );
+});
+```
+
+---
+
+## Error Handling
+
+Wrap `init()` in a `try/catch` to handle initialization errors:
+
+```javascript
+try {
+  const sdk = new MygigstersCardSDK();
+
+  await sdk.init({ ... });
+} catch (err) {
+  // Common errors:
+  // "apiKey is required"
+  // "customerId is required"
+  // "myGigsterId is required"
+  // "Container element with ID '...' not found"
+  // "Invalid API credentials: Please check your apiKey and apiSecret."
+  // "Authentication failed: ..."
+  console.error('SDK failed to initialize:', err.message);
+}
+```
+
+Runtime errors (Airwallex element failures, network issues, server rejections) are surfaced via the `onError` callback and displayed inline in the modal.
+
+---
+
+## Security
+
+- **Credentials are never stored** in `localStorage` or `sessionStorage`. The auth token lives in memory only.
+- **Authentication** uses HTTP Basic Auth (`base64(apiKey:apiSecret)`) over HTTPS. Never expose your `apiSecret` in client-side code committed to a public repository — use environment variables or a backend-for-frontend pattern.
+- **PCI-compliant card handling** — Raw card data is handled exclusively by Airwallex's PCI-certified payment element embedded inside an Airwallex-controlled iframe. Your server never receives raw card numbers or CVVs.
+- **Shadow DOM** (`mode: 'closed'`) prevents host-page scripts from reaching into the SDK's DOM.
+
+---
+
+## TypeScript
+
+Type definitions are included at `dist/index.d.ts`. Import the SDK as usual:
+
+```typescript
+import { MygigstersCardSDK, MygigstersCardConfig, CardSuccessResponse } from '@mygigsters/card-sdk';
+
+const config: MygigstersCardConfig = {
+  apiKey:      process.env.MYGIGSTERS_API_KEY!,
+  apiSecret:   process.env.MYGIGSTERS_API_SECRET!,
+  customerId:  'cus_hkdmcdjshhknkk4lc2t',
+  myGigsterId: '4407c3ba-10c9-4822-9f51-c2c96692f8d7',
+  containerId: 'mygigsters-card',
+  env:         'prod',
+  mode:        'dark',
+  onSuccess: (res: CardSuccessResponse) => {
+    console.log('Consent ID:', res.paymentConsentId);
+  },
+};
+
+const sdk = new MygigstersCardSDK();
+await sdk.init(config);
+```
+
+---
+
+## Troubleshooting
+
+**`Container element with ID '...' not found`**
+Make sure the target `<div>` exists in the DOM before calling `init()`. If you are using a framework, call `init()` after the component mounts (e.g., inside `useEffect` or `mounted()`).
+
+**`Invalid API credentials`**
+Double-check that `apiKey` and `apiSecret` match the values shown in your MyGigsters dashboard. The secret is shown only once — if lost, generate a new one.
+
+**`myGigsterId is required`**
+Make sure `myGigsterId` is provided in the configuration object passed to `init()`. You can retrieve your `myGigsterId` by calling `GET /api/v1/client/me`. To obtain `customerId`, create a customer via `POST /api/v1/customer`.
+
+**Airwallex card element fails to load**
+Ensure your page is served over **HTTPS**. Also verify that your Airwallex account has card tokenization enabled, and that the `env` setting matches the environment your account credentials belong to.
+
+**Card modal appears behind other elements**
+The modal is mounted on `<body>` with `z-index: 2147483647`. If another element on your page has a higher stacking context, adjust accordingly. Because the SDK uses Shadow DOM, your global CSS reset will not affect it.
+
+---
+
+## Changelog
+
+### 1.0.0
+- Initial public release
+- Single-step card saving via Airwallex Payment Elements
+- Shadow DOM isolation
+- Light / dark theming with runtime `setTheme()` support
+- ESM, CJS, and CDN (UMD) builds
+- TypeScript definitions
+- Webhook support via `webhookUrl` and `onWebhook` options
+
+---
+
+## License
+
+MIT © [MyGigsters](https://www.mygigsters.com.au)

package/cdn/card-sdk-entry.js

@@ -0,0 +1,2 @@
+!function(n){"function"==typeof define&&define.amd?define(n):n()}(function(){"use strict";class n{constructor(n){this.baseUrl=n.replace(/\/+$/,"")}async _post(n,e,t=null,o={}){const i={"Content-Type":"application/json",...o};t&&(i.Authorization=t.startsWith("Basic ")||t.startsWith("Bearer ")?t:`Bearer ${t}`);const r=await fetch(`${this.baseUrl}/api/v1${n}`,{method:"POST",headers:i,body:JSON.stringify(e)}),s=await r.text();let a=null;if(s&&s.trim().length>0)try{a=JSON.parse(s)}catch{a=null}if(!r.ok){const n=a&&(a.message||a.error)||s||r.statusText||`HTTP ${r.status}`;throw new Error(n)}return a??{}}async authenticate(n,e){const t=btoa(`${n}:${e}`),o=await fetch(`${this.baseUrl}/api/v1/sdk-initialization`,{method:"POST",headers:{"Content-Type":"application/json","x-api-version":"1.1",Authorization:`Basic ${t}`}}),i=await o.text();let r=null;if(i&&i.trim().length>0)try{r=JSON.parse(i)}catch{r=null}if(!o.ok){const n=r&&(r.message||r.error)||i||o.statusText||`HTTP ${o.status}`;throw new Error(n)}if(!r?.success||!r?.data?.token)throw new Error("Authentication failed: Unexpected response from server");return{token:r.data.token,clientId:r.data.clientId,expiresIn:r.data.expiresIn,tokenType:r.data.tokenType,paymentsIndia:r.data.paymentsIndia||!1}}async getClientSecret(n,e,t=null){console.log("🔐 CardAPI.getClientSecret()",{customerId:n,accountId:e,hasToken:!!t});const o=await this._post("/customer/client-secret",{customerId:n,accountId:e},t),i=o.client_secret||o.clientSecret||o?.data?.client_secret||o?.data?.clientSecret;if(!i)throw new Error("Failed to retrieve client secret from server");return{clientSecret:i}}async saveConsent(n,e,t=null){return this._post("/customer/save-consent",{customerId:n,paymentConsentId:e},t)}}const e='<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">\n    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M6 18L18 6M6 6l12 12"/>\n  </svg>',t='<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">\n    <path stroke-linecap="round" stroke-linejoin="round" d="M20 6L9 17l-5-5"/>\n  </svg>';class o{constructor(n,e){this.shadowRoot=n,this.callbacks=e,this.state={loading:!0,cardLoaded:!1,cardComplete:!1,submitting:!1,error:"",success:!1},this._cardMounted=!1}_getContainer(){let n=this.shadowRoot.querySelector("#mc-sdk-root");if(!n){n=document.createElement("div"),n.id="mc-sdk-root";const e=this.shadowRoot.querySelector("#mc-theme-container");e?e.appendChild(n):this.shadowRoot.appendChild(n)}return n}render(){this.state.loading=!0;this._getContainer().innerHTML=`\n      <div class="mc-backdrop" id="mc-backdrop">\n        <div class="mc-modal" id="mc-modal">\n          <button class="mc-close-btn" aria-label="Close" id="mc-close-btn" type="button">${e}</button>\n\n          <div class="mc-header">\n            <h1 class="mc-title">Card Details</h1>\n            <p class="mc-subtitle">Please enter your card details</p>\n          </div>\n\n          <div class="mc-body">\n            \x3c!-- Error banner (initially hidden) --\x3e\n            <div class="mc-error-banner" style="display:none;" id="mc-error-banner"></div>\n\n            \x3c!-- Loading spinner (shown initially) --\x3e\n            <div class="mc-loading" id="mc-loading">\n              <div class="mc-spinner"></div>\n              <span class="mc-loading-text">Loading payment form...</span>\n            </div>\n\n            \x3c!-- Card wrapper (hidden until Airwallex loads) --\x3e\n            <div class="mc-card-wrapper" id="mc-card-wrapper" style="display:none;">\n              <div id="card-root"></div>\n            </div>\n\n            \x3c!-- Submit button (hidden until Airwallex loads) --\x3e\n            <button class="mc-submit-btn" id="mc-submit-btn" disabled style="display:none;" type="button">\n              Submit\n            </button>\n          </div>\n\n          <div class="mc-powered-by">\n            Powered by <a href="https://mygigsters.com.au" target="_blank" rel="noopener">MyGigsters</a>\n          </div>\n        </div>\n      </div>\n    `,this._attachListeners()}_attachListeners(){this.shadowRoot.querySelectorAll(".mc-close-btn, #mc-close-btn").forEach(n=>{n.addEventListener("click",n=>{n.preventDefault(),n.stopPropagation(),this.callbacks.onClose()})});const n=this.shadowRoot.querySelector("#mc-backdrop")||this.shadowRoot.querySelector(".mc-backdrop");n&&n.addEventListener("click",e=>{e.target===n&&(e.preventDefault(),e.stopPropagation(),this.callbacks.onClose())});const e=this.shadowRoot.querySelector("#mc-submit-btn");e&&e.addEventListener("click",n=>{n.preventDefault(),n.stopPropagation(),this.callbacks.onSubmit()}),this.shadowRoot.addEventListener("click",n=>{const e=n.target;e&&(e.closest(".mc-close-btn")||e.closest("#mc-close-btn"))&&(n.preventDefault(),n.stopPropagation(),this.callbacks.onClose())})}setCardLoaded(){this.state.cardLoaded=!0,this.state.loading=!1;const n=this.shadowRoot.querySelector("#mc-loading"),e=this.shadowRoot.querySelector("#mc-card-wrapper"),t=this.shadowRoot.querySelector("#mc-submit-btn");n&&(n.style.display="none"),e&&(e.style.display="block"),t&&(t.style.display="flex")}markCardMounted(){this._cardMounted=!0}setCardComplete(n){this.state.cardComplete=n;const e=this.shadowRoot.querySelector("#mc-submit-btn");e&&(e.disabled=!n||this.state.submitting)}setSubmitting(n){this.state.submitting=n;const e=this.shadowRoot.querySelector("#mc-submit-btn");e&&(e.disabled=n||!this.state.cardComplete,e.innerHTML=n?'<span class="mc-btn-inner"><div class="mc-spinner mc-spinner-sm"></div>Saving...</span>':"Submit")}setError(n){this.state.error=n;const e=this.shadowRoot.querySelector("#mc-error-banner");e&&(n?(e.textContent=n,e.style.display="block"):(e.textContent="",e.style.display="none"))}showInitError(n){this.state.loading=!1,this.state.error=n;const e=this.shadowRoot.querySelector("#mc-loading");e&&(e.innerHTML=`\n        <div style="text-align:center; padding: 12px 0;">\n          <p style="color:#ef4444; font-size:14px; font-weight:600; margin-bottom:8px;">${this._escapeHtml(n)}</p>\n          <p style="color:#94a3b8; font-size:13px;">Please check your configuration credentials and try again.</p>\n        </div>\n      `)}showSuccess(n){this.state.success=!0;const o=this.shadowRoot.querySelector(".mc-modal");o&&(o.innerHTML=`\n      <button class="mc-close-btn" aria-label="Close" id="mc-close-btn" type="button">${e}</button>\n\n      <div class="mc-body">\n        <div class="mc-success-wrap">\n          <div class="mc-success-icon">${t}</div>\n          <h2 class="mc-success-title">Card Saved Successfully</h2>\n          <p class="mc-success-sub">Your card details have been securely tokenized and saved.</p>\n          <button class="mc-done-btn" id="mc-done-btn" type="button">Done</button>\n        </div>\n      </div>\n\n      <div class="mc-powered-by">\n        Powered by <a href="https://mygigsters.com.au" target="_blank" rel="noopener">MyGigsters</a>\n      </div>\n    `,o.querySelectorAll(".mc-close-btn, #mc-close-btn").forEach(n=>{n.addEventListener("click",n=>{n.preventDefault(),n.stopPropagation(),this.callbacks.onClose()})}),o.querySelector("#mc-done-btn")?.addEventListener("click",n=>{n.preventDefault(),n.stopPropagation(),this.callbacks.onClose()}))}_escapeHtml(n){const e=document.createElement("div");return e.textContent=n,e.innerHTML}destroy(){const n=this.shadowRoot.querySelector("#mc-sdk-root");n&&(n.innerHTML=""),this._cardMounted=!1}}const i={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",dev:"checkout-dev.airwallex.com",local:"localhost:3000"},r=n=>`https://${i[n]||i.prod}`,s="/assets/elements.bundle.min.js?version=1.160.0",a=n=>{const e=document.createElement("script");e.src=`${n}${s}`,e.crossOrigin="anonymous";const t=document.head||document.body;if(!t)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return t.appendChild(e),e};var c=async n=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;let e=0;const t=async()=>{const e=document.querySelector(`script[src="${s}"], script[src="${s}/"]`)||a(r((null==n?void 0:n.env)||"prod"));return new Promise((t,o)=>{e.addEventListener("load",()=>{window.Airwallex?(window.Airwallex.init(n),t(window.Airwallex)):o(new Error("Failed to load Airwallex on load event"))}),e.addEventListener("error",()=>{o(new Error("Failed to load Airwallex scripts")),e.remove&&e.remove()})})};for(;e<3;)try{return await t()}catch(o){e++,await new Promise(n=>window.setTimeout(n,500))}return null},d=n=>{window.Airwallex?window.Airwallex.init(n):console.error("Please loadAirwallex() before init();")},l=(n,e)=>window.Airwallex?window.Airwallex.createElement(n,e):(console.error("Please loadAirwallex() before createElement();"),null),h=async n=>{if(window.Airwallex)return window.Airwallex.createPaymentConsent(n);{const n="Please loadAirwallex() before createPaymentConsent();";throw console.error(n),new Error(n)}};const m={dev:"http://3.108.128.110:5000",demo:"https://qa-payments.mygigsters.com.au",prod:"https://prod-payments.mygigsters.com.au"},p={dev:"demo",demo:"demo",prod:"prod"};class u{constructor(){this.config=null,this.api=null,this.renderer=null,this.host=null,this.shadowRoot=null,this.cardElement=null,this.clientSecret=null,this.authToken=null,this.tokenExpiresAt=null,this.airwallexClientId=null,this.isInitialized=!1,this.isSubmitting=!1,this._handleKeyDown=this._handleKeyDown.bind(this)}async init(e){try{if(!e)throw new Error("Configuration object is required for MygigstersCard.init()");if(!e.apiKey)throw new Error("apiKey is required");if(!e.apiSecret)throw new Error("apiSecret is required");if(!e.customerId)throw new Error("customerId is required");const t=e.myGigsterId||e.accountId;if(!t)throw new Error("myGigsterId is required");if(!e.containerId)throw new Error("containerId is required");if(!document.getElementById(e.containerId))throw new Error(`Container element with ID '${e.containerId}' not found`);let i=e.env||"demo";if("qa"===i&&(i="demo"),!m[i])throw new Error(`Unknown env "${i}". Use "dev", "demo", or "prod".`);const r=e.baseUrl||m[i];this.config={mode:"dark",onSuccess:()=>{},onError:n=>console.error("MyGigsters Card SDK Error:",n),onClose:()=>{},...e,myGigsterId:t,accountId:t,env:i,baseUrl:r};const s=document.getElementById("mygigsters-card-sdk-host");s?.parentNode&&s.parentNode.removeChild(s),this.api=new n(this.config.baseUrl),this.host=document.createElement("div"),this.host.id="mygigsters-card-sdk-host",this.host.style.cssText="display:block;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:2147483647;pointer-events:auto;",this.shadowRoot=this.host.attachShadow({mode:"closed"});const a=document.createElement("style");a.textContent="\n/* ── Reset inside shadow DOM ───────────────────────────────────────────────── */\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:host {\n  display: block !important;\n  position: fixed !important;\n  top: 0 !important;\n  left: 0 !important;\n  right: 0 !important;\n  bottom: 0 !important;\n  width: 100vw !important;\n  height: 100vh !important;\n  z-index: 2147483647 !important;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  color: #e5e7eb;\n  line-height: 1.5;\n  pointer-events: auto !important;\n}\n\n#mc-theme-container, #mc-sdk-root {\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n/* ══════════════════════════════════════════════════════════════════════════════\n   DARK THEME (DEFAULT)\n   ══════════════════════════════════════════════════════════════════════════════ */\n\n/* ── Backdrop ──────────────────────────────────────────────────────────────── */\n.mc-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2147483647;\n  padding: 16px;\n  box-sizing: border-box;\n  animation: mc-fade-in 0.2s ease;\n}\n\n/* ── Modal ──────────────────────────────────────────────────────────────────── */\n.mc-modal {\n  background: #111827;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 16px;\n  width: 100%;\n  max-width: 460px;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);\n  overflow: hidden;\n  animation: mc-modal-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  color: #ffffff;\n}\n\n/* ── Close button ──────────────────────────────────────────────────────────── */\n.mc-close-btn {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  background: rgba(255, 255, 255, 0.08);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 8px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer !important;\n  color: #94a3b8;\n  transition: all 0.15s ease;\n  padding: 0;\n  line-height: 0;\n  z-index: 100;\n  outline: none;\n  pointer-events: auto !important;\n  user-select: none;\n}\n\n.mc-close-btn svg,\n.mc-close-btn path {\n  pointer-events: none !important;\n}\n\n.mc-close-btn:hover {\n  background: rgba(255, 255, 255, 0.18);\n  color: #ffffff;\n  transform: scale(1.05);\n}\n\n.mc-close-btn:active {\n  transform: scale(0.95);\n}\n\n/* ── Header ────────────────────────────────────────────────────────────────── */\n.mc-header {\n  text-align: center;\n  padding: 28px 24px 0;\n}\n\n.mc-title {\n  font-size: 22px;\n  font-weight: 700;\n  color: #ffffff;\n  margin: 0 0 6px;\n  line-height: 1.2;\n}\n\n.mc-subtitle {\n  font-size: 14px;\n  color: #94a3b8;\n  margin: 0;\n  font-weight: 400;\n}\n\n/* ── Body ──────────────────────────────────────────────────────────────────── */\n.mc-body {\n  padding: 20px 24px 24px;\n  flex: 1;\n}\n\n/* ── Card mount area ───────────────────────────────────────────────────────── */\n.mc-card-wrapper {\n  background: #1f2937;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  padding: 14px 16px;\n  margin-bottom: 20px;\n  min-height: 48px;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.mc-card-wrapper:focus-within {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);\n}\n\n#card-root {\n  margin: 0;\n  padding: 0;\n  min-height: 40px;\n  width: 100%;\n}\n\n#card-root iframe {\n  display: block !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  width: 100% !important;\n  border: none !important;\n}\n\n/* ── Loading state ─────────────────────────────────────────────────────────── */\n.mc-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 20px;\n  gap: 12px;\n}\n\n.mc-loading-text {\n  font-size: 13.5px;\n  color: #94a3b8;\n  font-weight: 500;\n}\n\n/* ── Spinner ────────────────────────────────────────────────────────────────── */\n.mc-spinner {\n  width: 32px;\n  height: 32px;\n  border: 3px solid rgba(255, 255, 255, 0.15);\n  border-top-color: #6366f1;\n  border-radius: 50%;\n  animation: mc-spin 0.7s linear infinite;\n  flex-shrink: 0;\n}\n\n.mc-spinner-sm {\n  width: 16px;\n  height: 16px;\n  border-width: 2px;\n  border-color: rgba(255, 255, 255, 0.3);\n  border-top-color: #fff;\n}\n\n@keyframes mc-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ── Submit button ─────────────────────────────────────────────────────────── */\n.mc-submit-btn {\n  width: 100%;\n  padding: 13px 24px;\n  background: #6366f1;\n  color: #ffffff;\n  border: none;\n  border-radius: 9px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n  outline: none;\n}\n\n.mc-submit-btn:hover:not(:disabled) {\n  background: #4f46e5;\n  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);\n  transform: translateY(-1px);\n}\n\n.mc-submit-btn:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.mc-submit-btn:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n  transform: none;\n  box-shadow: none;\n}\n\n.mc-btn-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n/* ── Error banner ──────────────────────────────────────────────────────────── */\n.mc-error-banner {\n  background: rgba(239, 68, 68, 0.12);\n  border: 1px solid rgba(239, 68, 68, 0.3);\n  border-radius: 8px;\n  padding: 10px 14px;\n  margin-bottom: 16px;\n  font-size: 13px;\n  color: #fca5a5;\n  line-height: 1.4;\n  animation: mc-fade-in 0.2s ease;\n}\n\n/* ── Success state ─────────────────────────────────────────────────────────── */\n.mc-success-wrap {\n  text-align: center;\n  padding: 30px 20px 16px;\n  animation: mc-fade-in 0.3s ease;\n}\n\n.mc-success-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: rgba(34, 197, 94, 0.15);\n  border: 2px solid rgba(34, 197, 94, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 16px;\n}\n\n.mc-success-icon svg {\n  width: 28px;\n  height: 28px;\n  color: #22c55e;\n}\n\n.mc-success-title {\n  font-size: 20px;\n  font-weight: 700;\n  color: #f8fafc;\n  margin: 0 0 6px;\n}\n\n.mc-success-sub {\n  font-size: 13.5px;\n  color: #94a3b8;\n  margin: 0 0 24px;\n}\n\n.mc-done-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 11px 36px;\n  background: #6366f1;\n  color: #fff;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: all 0.2s ease;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n.mc-done-btn:hover {\n  background: #4f46e5;\n  transform: translateY(-1px);\n}\n\n/* ── Powered by ────────────────────────────────────────────────────────────── */\n.mc-powered-by {\n  text-align: center;\n  padding: 8px 0 16px;\n  font-size: 11.5px;\n  color: #64748b;\n}\n\n.mc-powered-by a {\n  color: #94a3b8;\n  text-decoration: none;\n  font-weight: 600;\n  transition: color 0.15s ease;\n}\n\n.mc-powered-by a:hover {\n  color: #818cf8;\n}\n\n/* ── Animations ────────────────────────────────────────────────────────────── */\n@keyframes mc-modal-in {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.97);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes mc-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* ══════════════════════════════════════════════════════════════════════════════\n   LIGHT THEME (High Contrast & Clean)\n   ══════════════════════════════════════════════════════════════════════════════ */\n\n[data-theme='light'] .mc-backdrop {\n  background: rgba(15, 23, 42, 0.45);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n\n[data-theme='light'] .mc-modal {\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  color: #0f172a;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);\n}\n\n[data-theme='light'] .mc-close-btn {\n  background: #f1f5f9;\n  border: 1px solid #e2e8f0;\n  color: #64748b;\n}\n\n[data-theme='light'] .mc-close-btn:hover {\n  background: #e2e8f0;\n  color: #0f172a;\n}\n\n[data-theme='light'] .mc-title {\n  color: #0f172a;\n}\n\n[data-theme='light'] .mc-subtitle {\n  color: #64748b;\n}\n\n/* ── Light: Card area ─────────────────────────────────────────────────────── */\n[data-theme='light'] .mc-card-wrapper {\n  background: #ffffff;\n  border: 1.5px solid #cbd5e1;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n[data-theme='light'] .mc-card-wrapper:focus-within {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);\n}\n\n[data-theme='light'] .mc-loading-text {\n  color: #64748b;\n}\n\n[data-theme='light'] .mc-spinner {\n  border-color: rgba(99, 102, 241, 0.2);\n  border-top-color: #6366f1;\n}\n\n[data-theme='light'] .mc-error-banner {\n  background: #fef2f2;\n  border-color: #fecaca;\n  color: #dc2626;\n}\n\n[data-theme='light'] .mc-success-icon {\n  background: #f0fdf4;\n  border-color: #bbf7d0;\n}\n\n[data-theme='light'] .mc-success-icon svg {\n  color: #16a34a;\n}\n\n[data-theme='light'] .mc-success-title {\n  color: #0f172a;\n}\n\n[data-theme='light'] .mc-success-sub {\n  color: #64748b;\n}\n\n[data-theme='light'] .mc-powered-by {\n  color: #94a3b8;\n}\n\n[data-theme='light'] .mc-powered-by a {\n  color: #6366f1;\n}\n\n[data-theme='light'] .mc-powered-by a:hover {\n  color: #4f46e5;\n}\n",this.shadowRoot.appendChild(a);const c=document.createElement("div");c.id="mc-theme-container",c.setAttribute("data-theme","light"===this.config.mode?"light":"dark"),this.shadowRoot.appendChild(c),document.body.appendChild(this.host),this.renderer=new o(this.shadowRoot,{onClose:()=>this.handleClose(),onSubmit:()=>this.handleSubmit()}),this.renderer.render(),this.isInitialized=!0,this.show(),window.addEventListener("keydown",this._handleKeyDown),await this.authenticate(),await this._initializeCard()}catch(t){throw this.renderer&&this.renderer.showInitError(t.message||"Initialization failed"),this.config?.onError&&this.config.onError(t),t}}_handleKeyDown(n){"Escape"===n.key&&this.isInitialized&&this.handleClose()}async authenticate(){try{console.info(`[MyGigsters Card SDK] Authenticating in "${this.config.env}" mode → ${this.config.baseUrl}`);const n=await this.api.authenticate(this.config.apiKey,this.config.apiSecret);this.authToken=n.token,this.airwallexClientId=n.clientId,n.expiresIn&&(this.tokenExpiresAt=Date.now()+1e3*n.expiresIn),console.info("[MyGigsters Card SDK] Authentication successful."),"demo"!==this.config.env&&"dev"!==this.config.env||console.info(`ℹ️ Connected to [${this.config.env.toUpperCase()}] backend.`)}catch(n){const e=n.message||"";if(e.includes("401")||e.toLowerCase().includes("unauthorized"))throw new Error("Invalid API credentials: Please check your apiKey and apiSecret.");throw new Error(`Authentication failed: ${e}`)}}handleClose(){const n=this.config?.onClose;if(this.destroy(),n)try{n()}catch(e){console.error("Error in onClose callback:",e)}}async handleSubmit(){if(!this.isSubmitting&&this.renderer.state.cardComplete){this.isSubmitting=!0,this.renderer.setSubmitting(!0),this.renderer.setError("");try{const n=(await h({customer_id:this.config.customerId,client_secret:this.clientSecret,currency:"AUD",element:this.cardElement,requires_cvc:!1,next_triggered_by:"merchant"})).payment_consent_id;if(!n)throw new Error("Failed to create payment consent from card element");const e=this.config.apiKey&&this.config.apiSecret?`Basic ${btoa(`${this.config.apiKey}:${this.config.apiSecret}`)}`:this.authToken?`Bearer ${this.authToken}`:null,t={...await this.api.saveConsent(this.config.customerId,n,e),paymentConsentId:n,customerId:this.config.customerId,myGigsterId:this.config.myGigsterId,accountId:this.config.accountId,timestamp:(new Date).toISOString(),event:"card.saved"};this.renderer.showSuccess(t),this.config?.onSuccess&&this.config.onSuccess(t)}catch(n){const e=n.message||"Payment could not be completed. Please check your card details and try again.";this.renderer.setError(e),this.renderer.setSubmitting(!1),this.config?.onError&&this.config.onError(n)}finally{this.isSubmitting=!1}}}async _initializeCard(){try{const e=this.config.apiKey&&this.config.apiSecret?`Basic ${btoa(`${this.config.apiKey}:${this.config.apiSecret}`)}`:this.authToken?`Bearer ${this.authToken}`:null,{clientSecret:t}=await this.api.getClientSecret(this.config.customerId,this.config.accountId,e);this.clientSecret=t,await c();const o={env:p[this.config.env]||"demo",origin:window.location.origin};this.airwallexClientId&&(o.clientId=this.airwallexClientId),d(o);const i="light"===this.config.mode,r=l("card",{style:{base:{color:i?"#0f172a":"#ffffff",fontSize:"15px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',"::placeholder":{color:i?"#94a3b8":"rgba(255, 255, 255, 0.45)",fontSize:"15px"}}}});this.cardElement=r,this.renderer.setCardLoaded(),await new Promise(n=>setTimeout(n,0));const s=this.shadowRoot.querySelector("#card-root");if(!s)throw new Error("Card mount point not found");try{r.mount(s)}catch(n){r.mount("#card-root")}this.renderer.markCardMounted(),r.on("change",n=>{const e=n?.detail?.complete||!1;this.renderer.setCardComplete(e)})}catch(e){const n=e.message||"Failed to load card elements";this.renderer.showInitError(n),this.config?.onError&&this.config.onError(e)}}show(){if(!this.isInitialized)throw new Error("SDK not initialized. Call init() first.");this.host&&(this.host.style.display="block",this.host.style.width="100vw",this.host.style.height="100vh",this.host.style.pointerEvents="auto")}hide(){this.host&&(this.host.style.display="none",this.host.style.width="0",this.host.style.height="0",this.host.style.pointerEvents="none")}setTheme(n){if(!this.shadowRoot)return;const e=this.shadowRoot.querySelector("#mc-theme-container");e&&e.setAttribute("data-theme","light"===n?"light":"dark"),this.config&&(this.config.mode=n)}destroy(){if(window.removeEventListener("keydown",this._handleKeyDown),this.cardElement)try{this.cardElement.unmount()}catch(e){}this.renderer&&this.renderer.destroy(),this.host?.parentNode&&this.host.parentNode.removeChild(this.host);const n=document.getElementById("mygigsters-card-sdk-host");n?.parentNode&&n.parentNode.removeChild(n),this.isInitialized=!1,this.isSubmitting=!1,this.config=null,this.api=null,this.renderer=null,this.host=null,this.shadowRoot=null,this.cardElement=null,this.clientSecret=null,this.authToken=null,this.tokenExpiresAt=null,this.airwallexClientId=null}}let g=null;const f={init:async n=>(g&&(g.destroy(),g=null),g=new u,await g.init(n),g),show:()=>{g?.show()},hide:()=>{g?.hide()},destroy:()=>{g&&(g.destroy(),g=null)},setTheme:n=>{g?.setTheme(n)},getInstance:()=>g};"undefined"!=typeof window&&(window.MygigstersCard=f,window.MygigstersCardSDK=u,document.addEventListener("DOMContentLoaded",()=>{const n=document.querySelector('script[data-mygigsters-config][src*="card-sdk"]');if(n)try{const e=JSON.parse(n.dataset.mygigstersConfig);window.MygigstersCard.init(e).catch(n=>{console.error("MyGigsters Card SDK auto-init failed:",n)})}catch(e){console.error("Failed to parse MyGigsters Card SDK config:",e)}}))});
+//# sourceMappingURL=card-sdk-entry.js.map